Problème css : Div de positionnement

Fermé
rogerfon - 10 sept. 2006 à 23:26
[F]ull-sky
Messages postés
176
Date d'inscription
mercredi 18 août 2010
Statut
Membre
Dernière intervention
29 juin 2015
- 18 nov. 2011 à 08:33
Bonjour à tous,
Je découvre les joies des CSS et plus particulièrement au niveau du positionnement. Je travaille avec dreamweaver mx 2004 que je trouve sympa pour dessiner les "calques" ...enfin les div :-) . Voici mon problème : j'ai fait 5 div : bannière, menu hori, menu vertical , page , bas de page . Les boîtes sont positionnées avec "position: absolute;" et cela marche très bien ... MAIS ; comme il s'agit d'un site dynamique , le contenu de la page varie ... conclusion le pied de page se retrouve au milieu des pages longues .... . J'ai réglé le problème en mettant "position :relative" et en imbriquant le boîte div "pied de page" dans la boîte "page" ... cela marche (sur le site) MAIS quand je vais dans Dreamweaver, (en mode création) , il ne m'affiche pas cela correctement.... comme je suis un grand débutant, je me disais qu'il y a avait peut-être un moyen simple de "dire" à la boîte pied de page de se mettre en dessous de la boîte page sans l'imbriquer. Je ne sais pas si c'est clair ... merci pour votre compréhension et votre indulgence .
Roger [cligne]
ps : j'oubliais , j'ai essayé ceci "overflow: scroll;" sur la page c'est sympa on dirait des frames... mais ce n'est pas que je cherche

7 réponses

sebsauvage
Messages postés
32844
Date d'inscription
mercredi 29 août 2001
Statut
Modérateur
Dernière intervention
21 octobre 2019
15 654
12 sept. 2006 à 17:41
Un exemple de positionnement CSS pour la mise en page:
http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
5
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
2 767
12 sept. 2006 à 20:21
Bonjour,

Une solution :
http://forum.alsacreations.com/faq/#item25
5
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
824
12 sept. 2006 à 19:07
Ah oui, tu l'as marqué sur del.icio.us ! :p
Pas mal cet exemple.
3
Bannière de bas de page
21 janv. 2009 à 01:21
salut,

je désespère d'arriver à mettre une bannière de bas de page. Tout mon site s'affiche bien sinon.
La ligne de la bannière devrait être ceci en css:

background: url(../../media/bottombanner.jpg) no-repeat;

Voici le css entier. La partie bas de page en css est logiquement dans "footer":

#footer {
width : 980px;
height : 45px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #b0b0b0;
text-align : center;
background: url(../../media/bottombanner.jpg) no-repeat;
}


la feuille css complète:


body {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 10pt;
padding : 0;
margin-top : 10px;
}
#nav {
width : 980px;
height : 22px;
border-top : 5px solid black;
position : relative;
margin : 0;
margin-top : 0;
margin-bottom : 0;
padding-left : 0;
text-align : right;
background-color: #9f9bd1;
background: url(../../media/topbanner.png) no-repeat;
border-bottom : 1px dotted #666666;
}
#nav li {
padding-left : 16px;
padding-right : 10px;
display : inline;
height : 20px;
background: url(../../media/traitvertical2.jpg) no-repeat;
}
#nav li a {
/*padding-left : 10px;*/
/*padding-right : 12px;*/
color : #FFFFFF;
text-decoration : none;
font : bold normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#nav li a:hover
{
color: #cb1625;
}
#main {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 9pt;
width : 980px;
margin-left : auto;
margin-right : auto;
border-right : 1px solid #666666;
border-left : 1px solid #666666;

}
#hero {
margin : 0 10px;
width : 200px;
height : 106px;
background-image : url(../../media/banner.jpg);
background-repeat : no-repeat;
float : left;
}
#hero2 {
margin : 0;
margin-left: 286px;
margin-right: auto;
height : 106px;
background-image : url(../../media/topbanner.jpg);
background-repeat : no-repeat;
}
.gear {
width : 970px;
height : 0px;
margin-top : 0;
margin-left : 15px;
}
#header h1 {
position : absolute;
left : 94px;
top : 8px;
color : white;
font-size : 48px;
font-weight : bold;
margin : 0;
}
#header em {
font-style : normal;
text-decoration : underline;
}
#wrapper {
display : inline;
/*display : block;*/
padding-top : 0;
background-color : white;
position : relative;


}
#wrapper:after {
content : '.';
display : block;
height : 20;
clear : both;
visibility : hidden;
background: url(../../media/bottombanner.png) no-repeat;


}
#sidebar {
/*background: url(../../media/menu-fond.jpg) no-repeat;*/
float : left;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 10px 10px 20px 10px;
width : 160px;
height : 820px;
border-right : 1px dotted;
}
#aktuelles {
float : right;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 0px 10px 20px 10px;
width : 160px;
height : 820px;
background: #fff url(../../media/imagenews.jpg) no-repeat center 200px;
border-left : 1px dotted;
}
#news h4 {
/*background-color : #ae8055;*/
color : #4daeb4;
}
#sidebar h3 {
font-size : 18px;
border-bottom : 1px solid black;
margin-bottom : 4px;
margin-top : 16px;
clear : both;
}
#sidebar ul {
margin-left : 1em;
padding-left : 0;
}
#sidebar p {
margin-bottom : 8px;
}
#sidebar div.subtabs ul {
list-style : none;
width : 155px;
margin : 0;
padding : 0;
}
#sidebar div.subtabs ul ul {
list-style : none;
width : 130px;
margin : 0;
padding : 0 0 0 25px;
;
}
#sidebar div.subtabs ul ul ul {
list-style : none;
width : 125px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul a {
width : 100%;
margin : 3px;
text-align : left;
text-decoration : none;
display : block;
padding : 3px 3px 3px 5px;
border-bottom : 1px solid #949494;
border-left : 4px solid #cccccc;
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
}
#sidebar div.subtabs ul a:hover {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x left;
color : #da0434;
border-left : 4px solid #110200;
}
/*#sidebar div.subtabs ul a:visited {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x left;
color : #da0434;
border-left : 4px solid #110200;
}*/

#content {
margin : 0 0 0 180px;
min-height : 310px;
height : auto !important ;
/*height : 600px;*/
width : 600px;
display : block;
position : relative;
padding : 0 3px 20px 10px;
color : #333333;
#content h1 {
font-size : 20px;
margin : 0;
text-decoration : underline;


}
#content h2 {
font-size : 18px;
margin : 0;
text-decoration : underline;
}
#content .date {
float : right;
}
#content .postedBy {
float : left;
}
#content .meta {
height : 1em;
}
#content p {
text-align : justify;
text-indent : 1em;
line-height : 1.3em;

}
.comments {
border-top : 1px dotted #666666;
border-bottom : 1px dotted #666666;
padding : 4px;
text-align : right;
margin-bottom : 2em;
background-image : url(images/comment_edit.gif);
background-repeat : no-repeat;
background-position : center left;
}
a {
color : #666666;
}
.pullout {
background-color : #eeeeee;
padding : 5px;
float : right;
margin : 8px;
}
#footer {
width : 980px;
height : 45px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #b0b0b0;
text-align : center;
}
.right {
float : right;
}
.csskeyword {
color : blue;
}
.cssvalue {
color : red;
}
p.caption {
text-align : center;
}
small.super {
vertical-align : top;
font-size : 0.75em;
line-height : 1.3em;
}
.nodisplay {
display : none;
}
.menu_current {
background-color: #666666;
color: #ffffff;
}


Aucune bannière de bas de page ne s'affiche.

Qui peut m'aider?
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
[F]ull-sky
Messages postés
176
Date d'inscription
mercredi 18 août 2010
Statut
Membre
Dernière intervention
29 juin 2015
23
18 nov. 2011 à 08:33
1
ce que voit dreamweaver, n'a guère d'importance, faut vérifier avec les navigateurs.
Note que NVU tient compte du css (même externe) et qu'il lit correctement le positionnement.
0
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
824
12 sept. 2006 à 17:10
Tu peux aussi utiliser les float :
<div>
<div id="banniere"></div>
<div id="menuvertical"></div>
<div id="menuhori" </div>
<div id="page"></div>
<div id="basdepage"></div>
</div>


et le code css qui va avec :
div#banniere
{float:top;}
div#menuvertical
{float:left;}


Je pense que tu n'as pas besoin de mettre de style pour le reste, si tu as mis les div dans l'ordre indiqué plus haut ils se mettront comme il faut.

Mais je pense que ca serait plus facile en faisant moins de blocs, par exemple un seul pour le menu ou un seul pour la page.

Le div qui entoure tout, c'est aussi pour le placement.
0
float ne peut que prendre left | right | none | inherit comme valeurs. Il n'y à pas de float:top possible ...
0