28173 sujets

CSS et mise en forme, CSS3

Salut

alors c'est a ni rien comprendre, j'ai pourtant pour grande habitude de me servir des positions absolute mais la je nage je n'y comprends plus rien mes conteneurs ne veulent pas se placer où je veux Smiley decu

Voila: mon code CSS le conteneur que j'aimerais placer est Conteneur_Meteo, je vous laisse le lien vers mon site qui rencontre actuellement le probleme Sous IE ca a l'air Bon mais sous Firefox...

Si quelqu'un pourrait m'aider a comprendre ce phenomene...
je le remercie d'avance


* {
margin : 0; 
padding : 0; 
border : 0;
text-decoration: none;
text-transform: none;
} 
html, body {
	background-color: Black;
	height: 1222px;
	margin: 0;
	padding: 0;
	text-align: center; /* Alignement horizontal dans Internet Explorer */
	}
	
#entete {
background-image: url(../images/entete.png);
 margin: 0px;
 padding: 0px;
 height: 237px;
 width: 100%;
}
#blogmsn{
  background-color: transparent;
  position: absolute;
  top: 191px;
  left: 54px;
}
#conteneur {
background-image: url(../images/corpsrepeat.png);
margin: 0 auto -100;
width: 920px;
min-height: 100%;
_height: 100%;
position: relative;
top: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
border: 1px solid Black;
}
#pied {
	background-image: url(../images/footer.png);
	margin: 0px;
	padding: 0px;
	height: 87px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#txt {
             color: Black;
	padding-bottom: 100px;
}
pre {
	font-size: 11px;
	font-family:               Tahoma, "Verdana", "Geneva", "Arial", "Helvetica", "sans-serif";
	font-weight: bold;
}
a:link, a:visited {
color : #ffffff; 
background-color : inherit; 
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
letter-spacing: 1px;
font-weight: 600;
text-decoration : none;
} 
a:hover, a:active {
color : red; 
background-color : inherit;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px; 
text-decoration : none;
}
a.blog:link, a.blog:visited {
color : #000000; 
background-color : inherit; 
font-family: Arial, "Verdana", "Arial", "sans-serif";
font-size: 8px;
font-weight: bold;
text-decoration : none;
} 
a.blog:hover, a.blog:active {
color : Red; 
background-color : inherit; 
font-family: Arial, "Verdana", "Arial", "sans-serif";
font-size: 9px;
letter-spacing: 2px;
font-weight: bold;
text-decoration : none;
}
a.articles:link, a.articles:visited {
color : #ffffff; 
background-color : inherit; 
font-family: Arial, "Verdana", "Arial", "sans-serif";
font-size: 9px;
font-weight: bold;
text-decoration : none;
} 
a.articles:hover, a.articles:active {
color : Red; 
background-color : inherit; 
font-family: Arial, "Verdana", "Arial", "sans-serif";
font-size: 9px;
letter-spacing: 2px;
font-weight: bold;
text-decoration : none;
}
p.blog{
background-color: Blue;
text-align: center;
font-size: x-small;
color: White; 
font-weight: bold; 
text-transform: uppercase;
}
#blogtableau{
background-color: Gray;
width: 115px;
height: 10px;
border-bottom: 2px;
border-bottom-color: Black;
border-bottom-style: solid;
display: table-cell;
vertical-align: middle;
}
#blogadresse{
background-color: silver;
border: 1px solid;
display: block;
width: 115px;
height: 100px;
text-align: center;
vertical-align: middle;
position: absolute;
top: 236px;
left: 790px;
}
#conteneur_bienvenue{ 
background-image: url(../images/corpstableaubien.png);
border: 1px solid black;
width: 160px;
min-height: 9.5%;
_height: 9.5%;
margin-left: 13px;
margin-right: 8px;
text-align: left;
vertical-align: middle;
position: absolute;
top: 236px;
left: 1px;
}
#entete_bienvenue {
background-image: url(../images/HautTableaubien.png);
border-bottom: 1px solid black;
margin: 0px;
padding: 0px;
height: 15px;
width: 100%;
}
#pied_bienvenue {
background-image: url(../images/bastableaubien.png);
border-top: 1px solid black;
height: 20px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
#conteneur_menu{ 
background-image: url(../images/corpstableaubien.png);
border: 1px solid black;
width: 160px;
min-height: 18%;
_height: 21%;
margin-left: 13px;
margin-right: 8px;
text-align: left;
vertical-align: middle;
position: absolute;
top: 360px;
left: 1px;
}
#entete_menu {
background-image: url(../images/HautTableaubien.png);
border-bottom: 1px solid black;
margin: 0px;
padding: 0px;
height: 15px;
width: 100%;
}
#pied_menu {
background-image: url(../images/bastableaubien.png);
border-top: 1px solid black;
height: 20px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
[#darkred]#conteneur_meteo{ 
background-image: url(../images/corpstableaubien.png);
border: 1px solid black;
width: 160px;
height: 230px;
margin-left: 13px;
margin-right: 8px;
text-align: left;
position: absolute;
top: 625px;
left: 1px;
}[/#]
#entete_meteo {
background-image: url(../images/HautTableaubien.png);
border-bottom: 1px solid black;
margin: 0px;
padding: 0px;
height: 15px;
width: 100%;
}
#pied_meteo {
background-image: url(../images/bastableaubien.png);
border-top: 1px solid black;
height: 20px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
}
.titretableau{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
display: table-cell;
position: absolute;
width: 100%;
height: 15px;
color: White;
margin-top: 1px;
font-size: x-small;
}
ul.skyblog{
margin-bottom: 5px;
text-align: justify;
margin-left: 15px;
padding-left: 5px;
}
ul.articles{
margin-top: 12px;
text-align: justify;
margin-left: 18px;
padding-left: 5px;
}
#menu1{
width: 45px;
height: 14px;
text-align: center;
background-color: transparent;
position: absolute;
top: 200px;
left: 194px;
}
#menu2{
width: 40px;
height: 14px;
text-align: center;
background-color: transparent;
position: absolute;
top: 200px;
left: 315px;
}
#menu3{
width: 40px;
height: 14px;
text-align: center;
background-color: transparent;
position: absolute;
top: 200px;
left: 429px;
}
#menu4{
width: 40px;
height: 14px;
text-align: center;
background-color: transparent;
position: absolute;
top: 200px;
left: 554px;
}
#menu5{
width: 45px;
height: 14px;
text-align: center;
background-color: transparent;
position: absolute;
top: 200px;
left: 681px;
}
#frame{
position: absolute;
top: 360px;
left: 180px;
border: 1px solid Black;
}
#meteo{
position: absolute;
top: 260px;
}


Pour ce qui est du Code HTML c'est Ici en direct: http://webspace.crizalys.net/raiden/index.html

je vous remercie d'avance pour votre aide !!
Si je met mon contenur_meteo en position: absolute; top:0px;
IE et FireFox sont oki mais plus j'augmente la taille de Top et plus la différence se fait voir entre IE et FireFox !
si je le mets a Top: 650px; c'est la cata !
ALELOUIA probleme résolu mon probleme été ici:

#conteneur_menu{ 
background-image: url(../images/corpstableaubien.png);
border: 1px solid black;
width: 160px;
[#red]min-height: 18%;
_height: 21%;[/#]
margin-left: 13px;
margin-right: 8px;
text-align: left;
vertical-align: middle;
position: absolute;
top: 360px;
left: 1px;
}


Sur lle conteneur au dessu de Conteneur_Meteo la taille du min_height et _Height ne correspondait pas ce qui me décallais le conteneur situer juste en dessous sous Firefox.

Par contre quelqu'un pourrais m'expliquer pourquoi ?
Si je met un min_height: 18%; et Height sur 20%;
je lui dis bien de ne pas allé en dessous de 18% non ?
pourquoi influer sur le conteneur placé en dessous ?

merci d'avance !
Tw0BaD a écrit :
.

Par contre quelqu'un pourrais m'expliquer pourquoi ?
Si je met un min_height: 18%; et Height sur 20%;
je lui dis bien de ne pas allé en dessous de 18% non ?


Avec height sur 20% tu fixe la hauteur a 20% (selon le standard il ne peut pas être plus grand) donc min-height sur 18% devient caduque, comme certain navigateur ne respecte pas les standard, pour ne pas le citer IE, qui ne connais pas min-height on utilise deux de ces bugs pour compenser, il gère le height comme un min-height et il ne voit pas les underscore placer avant un style de la découle le _height

A+