(reprise du message précédent)
Le test que je te propose se base sur le code html et css de ton premier post
.
En effet, pas toujours evident de bien voir ou comprendre ce qu'il se passe.
Je te propose (avec ton html ci-dessus) de tester cette feuille CSS (en partie la tienne avec quelques ajouts et modifications.
(fond de couleurs pour visualiser les éléments, un min-height sur body au lieu de height, un padding sur la galerie pour degager le pied , la gallerie flottante, etc ... et le nav,#main {padding:1px;} pour ton soucis initial:
Bonne continuation,
GC
Modifié par gc-nomade (05 Apr 2012 - 17:16)
Le test que je te propose se base sur le code html et css de ton premier post
.En effet, pas toujours evident de bien voir ou comprendre ce qu'il se passe.
Je te propose (avec ton html ci-dessus) de tester cette feuille CSS (en partie la tienne avec quelques ajouts et modifications.
(fond de couleurs pour visualiser les éléments, un min-height sur body au lieu de height, un padding sur la galerie pour degager le pied , la gallerie flottante, etc ... et le nav,#main {padding:1px;} pour ton soucis initial:
html {
background:black;/* ex pour trancher avec body;*/
margin: 0;
padding: 0;
height: 100%;
}
body {
margin: auto;
padding: 0;
min-height: 100%;
position:relative;
background:#555;
}
section {
margin:0;
padding:0;
}
a img {
border: none;
}
#main, body {
margin:auto;
padding:0;
width:980px;
}
#galerie {
display:block;
margin:0;
width:980px;
padding-bottom:105px;/* degage l'espace pour le pied */
}
#galerie ul {
margin-left:200px;
background:green;overflow:hidden
}
#galerie ul li{
width:150px;
height:150px;
list-style:none;
float:left;
padding:10px;
}
#galerie ul li:nth-child(3n+1){
clear:left;
}
#galerie ul li a{
display:block;
width:150px;
height:150px;
text-decoration:none;
color:white;
}
#galerie ul li a img.bgimg{
opacity:1;
position:absolute;
width:150px !important;
height:150px !important;
z-index:3;background:red;
}
nav {
margin-left:50px;
position: absolute;
top: 260px;
z-index:4;background:yellow;
}
nav ul.cat {
list-style: none;
display: block;
position: relative;
}
nav ul.cat li a {
padding: 7px 0 7px 0;
width: 200px;
display: block;
text-decoration: none;
margin: 20px 0 0 0;
z-index: 2;
}
nav ul img {
float: right
}
footer {
text-align: center;
position:absolute;
bottom:0;
margin: 0;
padding:0;
height:100px;
max-width: 980px;
z-index:9;
background:gray;width:100%;
}
footer img {
width: auto;
border:0;
}
footer a {
text-decoration: none;
}
nav, #main {padding:1px;}Bonne continuation,
GC
Modifié par gc-nomade (05 Apr 2012 - 17:16)
