Sujet Précédent Sujet Suivant

Probleme DIV CSS float

Fermé
julius22 Messages postés 1 Date d'inscription jeudi 4 juin 2009 Statut Membre Dernière intervention 4 juin 2009 - 4 juin 2009 à 11:01
 Sahi - 10 sept. 2010 à 14:55
Bonjour,

Je souhaite créer une page avec plusieurs DIV suivies et/ou imbriquées :
1 div header
1 div menu (horizontale sous le header)
1 div principale (main) sur 100% de la largeur du body avec :
- 2 colonnes (2 div) qui se partagent le main
1 div (bas) en bas du main sur 100% de la largeur du body pour contenir une image de fin de page
1 div pied de page (footer) pour le copyright

Mon problème est que si je ne fixe pas de hauteur à mon main (ce que je veux surtout pas), la partie "bas" se colle n'importe où.
Pour info, j'ai un fond (derrière le main) à mettre et qui doit se prolonger en fonction de la longueur de la colonne gauche qui est dans ce main.

Voici mon CSS; quelqu'un peut-il me dire ce qui cloche ? Merci beaucoup par avance de votre aide.

body {width:935px;margin:0 auto;
}

#header {height:408px; background-image:url(img/fondheader.jpg); background-repeat:no-repeat;
}

#menu {height:100px;background-color:#CC0000;
}

#main {width:100%;background-image:url(img/fondcontent.gif); background-repeat:no-repeat;
}

#mainleft {float:left; width:60%;
}

#mainright { float:right;width:40%;
}

#bas {height:100px;background-image:url(img/fondcontent_bas.gif); background-repeat:no-repeat;
}

#footer { height:60px;background-color:#CCCCCC;
}

Mon fichier html est simple :

<body>

<div id="header">
</div>

<div id="menu">
c'est le menu
</div>

<div id="main">

<div id="mainleft">partie gauche de la partie principale</div>

<div id="mainright">partie droite de la partie principale</div>

</div>

<div id="bas">c'est le bas</div>

<div id="footer">
c'est le pied de page
</div>

</body>
A voir également:

1 réponse

Réponse 1 / 1
Sahi
10 sept. 2010 à 14:55
Tu as oublié Clear: both, dans le bas et/ou footer
0

Discussions similaires

comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

Bonjour,

Je réalise un tableau dans lequel certaine cellule comporte des #div/0! Par une cellule vide.

Y a t il une possibilité ?

Merci à vous

Configuration: iPad / Safari 7.0

3 réponses
trait horizontal avec du css
tipi75 -
alainpre -

Bonjour,

Je n'arrive pas à faire un trait horizontal avec du css.

Merci pour votre aide

9 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

Bonjour,

Comment peut on faire pour mettres les indices (en bas de lettre petite taille) et les exposants (en haut de lettre petite taille) ?
Balise xhtml ou style css ?

Je n'aime pas la balise parce qu'elle me décale mes interlignes d'un demi point. créant une interligne de 1 et demi.
Y a t'il d'autres balises html ?

Et en css, quelle classe peut on créer ? Si ça existe....

Namasté
Yv

19 réponses
TypeError: can't multiply sequence by non-int of type 'str'
Barou_0442 -
yg_be -

Bonjour,

Je viens juste de commencer l'apprentissage de Python.

Je ne parviens pas à exécuter mon premier programme

#coding: utf8 l=input ("Entrez la largeur: ") h=input ("Entrez la hauteur: ") p=input ("Entrez la profondeur: ") print ("Volume du parallélépipède = ", +str(l*h*p)) Entrez la largeur: 7 Entrez la hauteur: 4 Entrez la profondeur: 8

TypeError Traceback (most recent call last)
in
2 h=input ("Entrez la hauteur: ")
3 p=input ("Entrez la profondeur: ")
----> 4 print ("Volume du parallélépipède = ", +str(l*h*p))

TypeError: can't mult...

7 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

Document initial créé par Jean-François Pillou

Par défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none :
Grâce au CSS Grâce au CSS via une classe Grâce au CSS en ligne Notre vidéo

Grâce au CSS Pour ce faire, il suffit de définir le code CSS suivant dans votre code HTML :

a:link
{
text-decoration:none;
}


Notez que la pseudo-classe :link permet de ne cibler que les liens hypertextes () et non les ancres (). Vous pouvez toutefois vous en passer si vo...

0 réponse