Titre: Aide [Design extensible]
Posté par: mister-gwada97one le le 29-11-2009 a 00:57:20
Salut!
Avec un ami, on a créé un design, mais il n'est pas bien codé.
Regardez ici: http://imagik.fr/view-rl/169642
A gauche et à droite ne sont pas extensibles, et le footer se place mal. Je crois que tout viens du css.
Le code html:
Code:
<body>
<!-- Header --->
<a href="#"><div id="header"></div></a>
<div id="connexion"></div>
<div id="cadre">
<div id="menu_gauche">
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" width="88" height="31" border="0" align="middle" /></a>
</p>
</div>
<div id="news">
<p>Texte</p>
</div>
<div id="inscription">
</div>
<!-- Fin Header --->
<div id="barre"></div>
<div id="barre_gauche">
<p>Texte</p>
</div>
<div id="fond_texte"><div id="texte">
<p style="margin-bottom:6px;margin-left:6px;color:#000;">
Texte ici<br />
<br />
<br />
Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.
<br />
<br />
</p>
</div><div id="texte_bas"></div></div>
<!-- Footer --->
<div id="footer"><p style="text-align:center;color:#FFF;">
Footer
</p></div>
</div>
</body> |
|
LE CSS:
Code:
body {
background-color: #ace4e8;
color: #000000;
background-image:url(images/index_01.gif);
background-repeat:repeat-x;
font-size:13px;
font-family:Estrangelo Edessa;
}
div#header {
background-image:url(images/header.gif);
background-repeat: no-repeat;
width: 737px;
height: 213px;
padding: 0;
position:absolute;
left:0px;
top:1px;
}
div#connexion {
background-image:url(images/index_06.gif);
background-repeat:no-repeat;
position:absolute;
width: 125px;
height: 19px;
padding: 0;
left: 736px;
top: 194px;
}
div#cadre {
background-image:url(images/cadre.png);
background-repeat:no-repeat;
position:relative;
width: 970px;
height: 939px;
padding: 0;
left: 200px;
top: 206px;
float:inherit;
float:left;
}
div#menu_gauche {
background-image:url(images/Menu_gauche.gif);
background-repeat:no-repeat;
width: 183px;
height: 164px;
position:absolute;
left: 11px;
top: 10px;
border-bottom-color:#000;
text-align: left;
}
div#barre_gauche {
background-image:url(images/barre01_gauche.gif);
background-repeat:no-repeat;
background-color:#007385;
width: 183px;
min-height:665px;
position:relative;
left: 11px;
top: 218px;
text-align: left;
float:left;
height: 589px;
}
div#fond_texte {
background-image:url(images/fond_body.gif);
background-repeat:no-repeat;
background-color:#64c9d8;
min-height::678px;
width: 766px;
position:absolute;
left: 194px;
top: 218px;
border-bottom-color:#000;
text-align: left;
margin-left: auto;
margin:auto;
float:left;
height: 665px;
}
div#texte {
background-image:url(images/texte.gif);
background-repeat:no-repeat;
background-color:#FFF;
width: 737px;
min-height:554px;
position:relative;
left: 15px;
top: 15px;
border-bottom-color:#000;
text-align: left;
color:#000;
float:left;
}
#p {
margin-bottom:6px;
margin-left:6px;
color:#000;
}
div#texte_bas {
background-image:url(images/texte_bas.gif);
width: 737px;
height: 16px;
position:relative;
left: 15px;
top: 10px;
border-bottom-color:#000;
clear:left;
}
#footer {
background-image:url(images/footer.gif);
position:relative;
width:969px;
height:37px;
clear:both;
left: 0px;
top: 916px;
}
div#news {
background-image:url(images/News_milieu.gif);
position:absolute;
width:558px;
height:164px;
left: 206px;
top: 10px;
}
div#inscription {
background-image:url(images/inscription_droite.gif);
position:absolute;
width:183px;
height:164px;
top:10px;
left: 775px;
}
div#barre {
background-image:url(images/barre.gif);
position:absolute;
width:969px;
height:34px;
top:178px;
left:0px;
}
p {
margin-bottom:6px;
margin-left:6px;
color:#FFFFFF;
margin-right:6px;
} |
|
Quelqu'un peut m'aider svp ? Merci d'avance.
Cordialement, Kévin |
Titre: Re:Aide [Design extensible]
Posté par: iCreaWeb le le 29-11-2009 a 19:36:09
Bonsoir,
Dur de lire tout ça avec cette mise en page, mais bon ...
Attention à l'utilisation un peu trop présente des "position:relative/absolute" dans le CSS.
Il faut les utiliser avec une grande modération, pour un rendu sur les différents navigateurs.
Pour le problème d'extension, ça peut-être une combinaison d'erreur de l'utilisation des positions relative/absolute.
Essayer l'attribut "overflow" pour l'id "texte" ou "fond_texte".
@ bientôt. |
Titre: Re:Aide [Design extensible]
Posté par: mister-gwada97one le le 29-11-2009 a 19:52:38
Ok, merci du conseil.
Je pourrais payer pour la réalisation e la découpe.. Car là je galère un peu :S |
Titre: Re:Aide [Design extensible]
Posté par: iCreaWeb le le 29-11-2009 a 20:45:12
Je vous ai envoyé un message privé.
@ bientôt. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|