Problème css : Div de positionnement
Fermé
rogerfon
-
10 sept. 2006 à 23:26
[F]ull-sky Messages postés 175 Date d'inscription mercredi 18 août 2010 Statut Membre Dernière intervention 29 juin 2015 - 18 nov. 2011 à 08:33
[F]ull-sky Messages postés 175 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
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
A voir également:
- Problème css : Div de positionnement
- Enlever le soulignement d'un lien css ✓ - Forum CSS
- Background color css ✓ - Forum CSS
- Comment créer un lien non souligné ✓ - Forum Réseaux sociaux
- Css download - Télécharger - HTML
- Enlever le soulignage des lien. - Forum CSS
7 réponses
sebsauvage
Messages postés
32893
Date d'inscription
mercredi 29 août 2001
Statut
Modérateur
Dernière intervention
21 octobre 2019
15 662
12 sept. 2006 à 17:41
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
http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 779
12 sept. 2006 à 20:21
12 sept. 2006 à 20:21
Bonjour,
Une solution :
http://forum.alsacreations.com/faq/#item25
Une solution :
http://forum.alsacreations.com/faq/#item25
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
12 sept. 2006 à 19:07
12 sept. 2006 à 19:07
Ah oui, tu l'as marqué sur del.icio.us ! :p
Pas mal cet exemple.
Pas mal cet exemple.
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?
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?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
[F]ull-sky
Messages postés
175
Date d'inscription
mercredi 18 août 2010
Statut
Membre
Dernière intervention
29 juin 2015
23
18 nov. 2011 à 08:33
18 nov. 2011 à 08:33
Problème résolu ici : https://forums.commentcamarche.net/forum/affich-3051543-div-l-un-a-cote
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.
Note que NVU tient compte du css (même externe) et qu'il lit correctement le positionnement.
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
12 sept. 2006 à 17:10
12 sept. 2006 à 17:10
Tu peux aussi utiliser les float :
et le code css qui va avec :
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.
<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.
