Bonjour,
Voila j a parcouru les tutoriaux de alsacreations, pompage.... Je suis en train de construire un site mais j ai des problemens pour ma mise en page et mon positionnement.
Pour voir le probleme aller sur
http://angelus63.free.fr/Philippe/divhtm.htm
D accor le nom du lien est pas genial!
Si vous regardez la page (j utilise firefox) j ai plusieurs pb qui se posent
Tout d abord je ne sais pas si mes positionnement sont corrects, j ai un global en relative, un center en absolu (car le menu horizaontal est deroulant et il pousserait le center si il etait pas en absolu)
et j ai mon footer en absolu aussi.
Deja mon fichier flash sort du center, et j ai aussi le footer qui est mal place.
De plus mon arriere plan de global qui est blanc ne prend pas en compte le center sous dreameweaver, a cause du positionnement absolu je crois.
Bref svp je cale maintenant, pouvez m aider a avoir un css plus clair?
Merci beaucoup
Voila j a parcouru les tutoriaux de alsacreations, pompage.... Je suis en train de construire un site mais j ai des problemens pour ma mise en page et mon positionnement.
Pour voir le probleme aller sur
http://angelus63.free.fr/Philippe/divhtm.htm
D accor le nom du lien est pas genial!
Si vous regardez la page (j utilise firefox) j ai plusieurs pb qui se posent
Tout d abord je ne sais pas si mes positionnement sont corrects, j ai un global en relative, un center en absolu (car le menu horizaontal est deroulant et il pousserait le center si il etait pas en absolu)
et j ai mon footer en absolu aussi.
Deja mon fichier flash sort du center, et j ai aussi le footer qui est mal place.
De plus mon arriere plan de global qui est blanc ne prend pas en compte le center sous dreameweaver, a cause du positionnement absolu je crois.
Bref svp je cale maintenant, pouvez m aider a avoir un css plus clair?
Merci beaucoup
/* CSS Document */
html, body {
height: 100%;
margin: 0;
padding:0;
background-image:url(../html.png);
}
div#global {
position: relative;
min-height: 100%;
width: 750px;
padding: 0 10px;
margin: 0 auto;
background: url(../global2.png) center repeat-y; /*il manque pas une couleur ????*/
}
/*-------------------------
------- HEADER ------------
---------------------------*/
div#header {
width: 750px;
height:120px;
margin:0;
padding:0;
/*overflow:auto;???*/
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#header h1{
background: transparent url(../logo.png) no-repeat top left;
/*margin-top: 10px; */
width: 135px;
height: 120px;
border:1px dotted red;
float :left;
margin:0;
padding:0;
}
#header h2{
/*margin-top: 10px;*/
width: 600px;
height: 120px;
float:right;
border:1px dotted red;
background-color:pink;
margin:0;
padding:0;
}
#header h1 span{
display:none;
}
/*-------------------------
------- TOP MENU ----------
---------------------------*/
#topmenu {
clear:left;
/*position:absolute;*/
margin: 0;
padding: 0;
width:750px;
height:25px;
background: #FFF url(../topmenu.png) no-repeat;
z-index:100;
}
#topmenu dt {
cursor:pointer;
text-align: center;
font-size:13px;
font-weight: bold;
/*border:1px solid blue;*/
height:20px;
margin: 5px 0 0 0;
padding: 0;
}
#topmenu dl {
float:left;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
}
#top1 {
width:120px;
float:left;
}
#top2, #top3{
width:200px;
}
#top4 {
width: 200px;
}
/*a corriger*/
#topmenu dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu dd {
list-style: none;
/*border:1px solid blue;*/
background-color:#000066;
}
#topmenu ul {
/*position:absolute;*/
list-style: none;
}
#topmenu li {
margin: 0;
padding: 0;
text-align: center;
border:1px solid black;
}
#topmenu dt a {
color:#FFFFFF;
text-decoration: none;
display:block;
height:100%;
}
#topmenu li a {
color: white;
text-decoration: none;
display:block;
height:100%;
}
#smenu1, #smenu2, #smenu3 {
display:none;
}
#topmenu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color:red;
}
/*-------------------------
------- CENTRE ------------
---------------------------*/
div#center {
position:absolute; /*a cause des ss menus du menu deroulant qui poussent center*/
z-index:1;
width:750px;
top:150px;
padding-bottom: 50px;
/*overflow: auto;*/
}
div#sidebar {
float: left;
border: 1px solid black;
width: 200px;
margin: 0;
padding: 0;
}
#menu li, ul, a {
margin: 0;
padding: 0;
}
#menu li a{
text-decoration:none;
}
/*????????????????????*/
#menu ul{
margin: 0;
padding: 0;
list-style: none;
}
div#content {
float:right;
width: 530px;
border: 1px solid black;
margin: 0;
padding: 0;
}
/*-------------------------
------- FOOTER ------------
---------------------------*/
#footer {
position: absolute;
width: 750px;
bottom: 0;
background: url(../footer2.png) repeat-x;
height: 20px;
}
[/url]