Bonsoir à tous,
Je viens vers vous ce soir pour avoir votre avis sur mon code.
Je précise qu'il fonctionne parfaitement, cependant j' ai quelques questions.
Le html:
Le css :
Le résultat est visible ici
Les questions :
-y a t'il des lignes inutiles ?
-Pour le slogan et la date, afin d'aligner les textes j'ai utiliser un tableau,peut-on faire autrement.
-Les liens du menu:sans la précision p dans le menu p a:hover, les liens ne sont pas réactifs. Pourquoi ? je pensai que le paragraphe hériterais des propriétés de la class menu.
Je vous remercie.
Modifié par sebzero (29 Mar 2005 - 08:36)
Je viens vers vous ce soir pour avoir votre avis sur mon code.
Je précise qu'il fonctionne parfaitement, cependant j' ai quelques questions.
Le html:
<body>
<div class="header"></div>
<div class="conteneur">
<div class="description">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="slogan">L' empreinte du web moderne.</td>
<td class="date"><!-- un sript php de date --></td>
</tr>
</table>
</div>
<div class="grostitre">Récré<span style="color:red">@</span>seb change de tête
</div>
<div class="menu">
<p>
<img src="pucemenug.jpg" alt="une plume" />
<a href="">blabla</a> <img src="puce.gif" alt="séparation" /> <a href="">et reblabla</a>
<img src="puce.gif" alt="séparation" /> <a href="">et reblabla</a>
<img src="pucemenud.jpg" alt="une plume" /></p>
</div>
<div class="tetecorps">
<p><img src="plume.jpg" alt="une plume" /></p>
</div>
<div class="corps">
<div class="colonneg">
<div class="article">
<img src="plume.jpg" alt="une plume" /></p>
<p class="titre"><span style="color:red">Le</span> titre</p>
<p class="matiere"> Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l'odeur alléché,<br />
Lui tint à peu près ce langage :<br />
"Hé ! bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli ! que vous me semblez beau !<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois."<br />
A ces mots le Corbeau ne se sent pas de joie ;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l'écoute :<br />
Cette leçon vaut bien un fromage, sans doute. "<br />
Le Corbeau, honteux et confus,<br />
Jura, mais un peu tard, qu'on ne l'y prendrait plus.</p>
<p class="signature">La <span style="color:red">signature</span></p>
</div>
<img src="plume.jpg" alt="une plume" /></p>
<div class="article">
<p class="titre"><span style="color:red">Le</span> titre</p>
<p class="matiere">le blabla des articles</p>
<p class="signature">La <span style="color:red">signature</span></p>
</div>
</div>
<div class="colonned">
<div class="article">
<p class="titre"><span style="color:red">Le</span> titre</p>
<p class="matiere">le blabla des articles</p>
<p class="signature">La <span style="color:red">signature</span></p>
</div>
<img src="plume.jpg" alt="une plume" /></p>
<div class="article">
<p class="titre"><span style="color:red">Le</span> titre</p>
<p class="matiere">le blabla des articles</p>
<p class="signature">La <span style="color:red">signature</span></p>
</div>
<img src="plume.jpg" alt="une plume" /></p>
<div class="article">
<p class="titre"><span style="color:red">Le</span> titre</p>
<p class="matiere">le blabla des articles</p>
<p class="signature">La <span style="color:red">signature</span></p>
</div>
</div>
<div class="colonnefin">
<img src="plume.jpg" alt="une plume" /></p>
<div class="article">
<p class="titre"><span style="color:red">Le</span> titre</p>
<p class="matiere">le blabla des articles</p>
<p class="signature">La <span style="color:red">signature</span></p>
</div>
<img src="plume.jpg" alt="une plume" /></p>
<div class="article">
<p class="titre">Publicité</p>
<p class="centre"><!-- la pub --></p>
</div>
</div>
<div class="pied">
<p class="piedsans"><!-- le compteur--></p>
<p>Une remarque, une suggestion : <a href="mailto:recreaseb@gmail.com">ici</a><br/>
enregistrement <acronym title="Commission Nationale de l'Informatique et des Libertés">CNIL</acronym> N° 1078462<br/>
©2005 www.recreaseb.com<br/>
Site hébergé par <acronym title="SARL OVH 140, quai du Sartel 59100 ROUBAIX">OVH</acronym>
</p>
</div>
</div>
</body>
Le css :
body
{
width:770px;
margin:10px auto 5px auto;
border-top:1px solid black;
border-left:1px solid black;
border-bottom:2px solid #808080;
border-right:2px solid #808080;
}
.header
{
width:770px;
height:150px;
background-image:url("bandeau.jpg");
background-repeat:no-repeat;
border-bottom:1px solid black;
}
.conteneur
{
width:770px;
margin:1px auto 0px auto;
}
.description {
width:100%;
font-family: "Courier New";
font-size: 0.8em;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
padding-left:0px;
padding-right:0px;
}
.date
{
border-top:1px solid black;
border-bottom:1px solid black;
font-family: "Courier New";
font-size: 0.85em;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
padding-right:15px;
text-align:right;
}
.slogan
{
border-top:1px solid black;
border-bottom:1px solid black;
font-family: "Courier New";
font-size: 0.85em;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;
padding-left:5px;
text-align:left;
}
.grostitre
{
width:640px;
margin:30px auto 0px auto;
border:5px solid #808080;
font-size:1.8em;
font-weight:bold;
text-decoration:blink;
text-align:center;
padding:10px;
}
.menu
{
width:760px;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
margin:30px auto 20px auto;
text-align:center;
font-family: "Courier New";
font-size: 0.9em;
font-weight: bold;
padding:5px;
}
.menu a
{
text-decoration:none;
font-family: "Courier New";
font-size: 0.9em;
font-weight: bold;
}
.menu p a:hover
{
font-family: "Courier New";
font-size: 0.9em;
font-weight: bold;
color:#ff0000;
}
.menu a:visited
{
color:black;
text-decoration:none;
font-family: "Courier New";
font-size: 0.9em;
font-weight: bold;
}
.tetecorps
{
border:none;
width:150px;
height:104px;
margin:5px auto 50px auto;
text-align:center;
}
.corps
{
width:770px;
}
.colonneg
{
width:33%;
float:left;
border-right:1px solid #808080;
margin-bottom:15px;
}
.colonned
{
width:33%;
float:left;
border-right:1px solid #808080;
margin-bottom:15px;
}
.colonnefin
{
float:left;
width:33%;
border:none;
margin-bottom:15px;
}
.article
{
width:95%;
margin:10px auto 0px auto;
}
.titre
{
font-family:Georgia;
padding:5px;
font-size:0.95em;
border-top:2px solid #808080;
border-bottom:2px solid #808080;
font-weight:bold;
}
.matiere
{
font-family:Serif;
font-size:0.9em;
text-align:justify;
padding:5px;
}
.signature
{
font-family: "Courier New";
padding:5px;
font-size:x-small;
font-weight:bold;
text-align:right;
border-top:1px solid black;
border-bottom:2px solid #808080;
}
.pied
{
margin:0px;
clear:both;
padding:5px;
}
.piedsans
{
border:none;
}
.pied p
{
padding:5px;
font-size:x-small;
font-family:"Courier New";
text-align:center;
border-top:1px solid #808080;
border-bottom: 1px solid black;
}
.pied a
{
text-decoration:none;
color:red;
}
.pied a:hover
{
color:blue;
}
.pied a:visited
{
font-size:x-small;
font-family:"Courier New";
text-align:center;
border-top:1px solid #808080;
border-bottom: 1px solid black;
}
.copyright
{
text-align:center;
}
.centre
{
text-align:center;
}
.texte
{
color:black;
font-family:"Courier New";
font-size:0.8em;
}
.nb
{
color:red;
font-family:"Courier New";
font-weight:bold;
font-size:0.8em;
Le résultat est visible ici
Les questions :
-y a t'il des lignes inutiles ?
-Pour le slogan et la date, afin d'aligner les textes j'ai utiliser un tableau,peut-on faire autrement.
-Les liens du menu:sans la précision p dans le menu p a:hover, les liens ne sont pas réactifs. Pourquoi ? je pensai que le paragraphe hériterais des propriétés de la class menu.
Je vous remercie.
Modifié par sebzero (29 Mar 2005 - 08:36)
