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
[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
A voir également:
- Problème css : Div de positionnement
- Enlever couleur lien css ✓ - Forum CSS
- Mettre une image à gauche css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
- Css download - Télécharger - HTML
- Déplacer une image css - 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 655
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 775
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
176
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.
