18073 sujets
T'a de la chance j'avais un peu de temps libre :
Le xhtml tout propre
Le CSS tout propre :
Je m'auto répond dans quelques minutes pour faire les commentaires !
Le xhtml tout propre
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>page propre !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css_style.css" />
</head>
<body>
<div id="all">
<div id="header">
<img src="images/bandeau2.gif" />
<div id="nav_haut">
<a href="index.php">accueil</a> |
<a href="#">galerie</a> |
<a href="#">vidéos</a> |
<a href="#">réalisations</a> |
<a href="news.php">news</a> |
<a href="communiquer.php">communiquer</a>
</div>
</div>
<div id="navdroite">
<div id="navdroite_links">
<h3>Section Links ::::</h3>
<a href="#">:::: Section Link</a>
<a href="#">:::: Section Link</a>
<a href="#">:::: Section Link</a>
<a href="#">:::: Section Link</a>
<a href="#">:::: Section Link</a>
<a href="#">:::: Section Link</a>
</div>
<div id="navdroite_bas"><img src="images/dj.gif" alt="" />
</div>
</div>
<div id="content">
<h1>dernières news :</h1>
<div id="news">
<table class="tableau_news" cellspacing='0' cellpadding='0'>
<tr>
<td class="date_news">[21/01/2005]</td>
<td class="titre_news"> _ Du nouveau pour les amateurs de frisson... :<br /></td>
</tr>
<tr>
<td colspan="2" class="contenu_news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio </td>
</tr>
<tr>
<td class="date_news">[21/01/2005]</td>
<td class="titre_news"> _ Du nouveau pour :<br /></td>
</tr>
<tr>
<td colspan="2" class="contenu_news">Ut wisi enim ad minim veniam, quis nostrud exerci tation. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpa </td>
</tr>
</table>
</div>
<h1>la dernière réalisation : </h1>
<div id="der_real_img"><a href="images/communiquer.gif" target="_blank"><img src="images/communiquer.gif" alt="" /></a></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio.</p>
</div>
<div id="bottom">
2004 ©Copyright Tous droits reservés N'da House
</div>
</div>
</body>
</html>Le CSS tout propre :
/***********************************************/
/* Eléments généraux */
/***********************************************/
body {
margin: 0 0 0 0px;
padding: 0 0 0 0px;
}
a {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color:#006699;
text-decoration:none;
border: 0px;
}
a:hover {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color:#006699;
text-decoration:underline;
}
p {
text-align: justify;
}
/***********************************************/
/* Titres */
/***********************************************/
h1{
font-family: Arial, verdana, sans serif;
font-size: 16px;
color: #334d55;
padding: 0px;
font-weight:bold;
font-variant:small-caps;
margin-bottom:10px;
margin-top:10px;
border-bottom:1px solid #000000;
}
h3{
font-family: Verdana, arial, sans serif;
font-size: 14px;
text-align: right;
color: #334d55;
margin: 0px;
padding: 4px;
font-weight:bold;
}
/***********************************************/
/* haut de la page */
/***********************************************/
#all {
width: 776px;
margin: 15px 15px 15px 15px;
}
#header {
border-bottom:1px solid #000000;
margin-bottom: 5px;
}
#header img{
width: 776px;
height: 98px;
border: 0 0 0 0px;
padding:0 0 0 0px;
}
#nav_haut {
position: relative;
background-image: url(images/ui_bg_news_title.gif);
padding: 5 5 5 5px;
margin: 10 10 10 10px;
height: 25px;
}
/***********************************************/
/* menu de droite */
/***********************************************/
#navdroite{
float:right;
width: 172px;
border: 1px solid #000000;
margin-bottom: 3px;
background-image: url(images/ui_bg_news.gif);
}
.navdroite_links {
width:100%;
}
#navdroite_links a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px;
color:#006699;
width:166;
}
#navdroite_links a:hover{
background-color: #dddddd;
border-top: 1px solid #000000;
color:#999966;
}
#navdroite_bas img {
filter:alpha(opacity=25); /* IE */
-moz-opacity:0.25; /* Mozilla */
-khtml-opacity: 0.25; /* Safari */
opacity: 0.25; /* CSS3 */
}
/***********************************************/
/* contenu de la page (news) */
/***********************************************/
#news {
width: 600px;
float: left;
}
.tableau_news {
color:#000000;
padding: 5px;
width : 100%;
}
.titre_news {
font-weight: bold;
margin-bottom:10px;
width:100%;
background-color:#EFEFEF;
}
.contenu_news {
margin-bottom:10px;
width:100%;
}
.date_news {
font-weight:bold.
padding: 4px;
background-color:#EFEFEF;
}
#der_real_img{
position: relative;
}
#der_real_img img{
float:right;
margin: 5px 30px 5px 5px;
width: 115px;
height: 147px;
}
/***********************************************/
/* bas de la page */
/***********************************************/
#bottom {
margin: 5px 0 5px 0px;
padding: 0 0 0 0px;
border:1px solid #000000;
clear: both;
background-color:#000000;
background-image:url(images/angle_noir_gris.gif);
background-position: bottom right;
background-repeat:no-repeat;
font-size: 14px;
font-weight: bold;
color:#FFFFFF;
}
Je m'auto répond dans quelques minutes pour faire les commentaires !
Quelle chance tu as !
Juste un petit commentaire, ceci ne validera pas en XHTML Strict :
Il faut plutôt écrire ceci :
De toute façon, je pense qu'adebisi va regarder pour changer d'hébergeur ! Non ?
Modifié le 28 Jan 2005 - 15:55
Juste un petit commentaire, ceci ne validera pas en XHTML Strict :
[#red][b]<script language=javascript>[/b][/#]
function kill_ad()
{
window.top.document.body.cols = "*,0";
setTimeout("kill_ad()",10);
}
function setInterval(x,y)
{
return 0;
}
window.setTimeout("kill_ad()",10);
</script>
Il faut plutôt écrire ceci :
<script type="text/javascript">
De toute façon, je pense qu'adebisi va regarder pour changer d'hébergeur ! Non ?
Modifié le 28 Jan 2005 - 15:55
Allez hop mes commentaires les autres corrigez moi s'il le faut :
- les background-image : je maitrise pas trop mais dans mon esprit soit elle est plus petite que la div et il faut la répéter : pas de problème. On fait repeat-x ou repeat-y. Soit elle est plus petite que la div (de taille fixe) et il ne faut pas la répeter à ce moment là il vaut mieux modifier la taille de l'image source plutot que de se taper des width et des height qui en plus t'oblige a rajouter des sous classes : du genre #header img{ width : 150px;}
- la multiplication des div (voir dans ton exemple le footer). Pas besoin de faire une div par élément si les éléments n'entrent pas en concurence. Dans une div tu peux mettre plein de chose à partir du moment ou elle n'entre pas en concurrence : une image, du texte, un background, une couleur de background etc..
- les filtres je maitrise pas du tout : sous mozilla ton image avec le filtre est horrible, par contre ca passe sous ie. Peut être revoir ou chercher (sur ce forum) comment appliquer les filtres correctement en fonction des navigateurs)
- les éléments de base sont bien utiles pour la mise en page pas besoin d'en inventer de nouveau. tu n'utilises aucune balise <p> <blocquote> ou autre.
- quand tu définis une police il vaut mieux mettre une liste de police alternative au acs ou l'ordi des visiteurs ne la posséde pas. En tous les cas finir par sans serif (catégorie générale !)
- ton site n'est pas fluide ! mais peut être est-ce fait exprès.
- dans des blocks de largeur fixe il est dangereux de mettre des polices de taille variable ! cela nuit a l'acessibilité et ca peut foutre en l'air ta mise en page !
- dans ton css original (quel horreur !) faut expurger toutes les trucs qui servent à rien ! de même je reprends a mon compte les remarques sur ton HTML déplorable (2 head, 2 body, des balises pas fermé, des <div> </div> qui trainent
Voila si t'a des questions je epux t'aider (y'a bon les rtt
)
- les background-image : je maitrise pas trop mais dans mon esprit soit elle est plus petite que la div et il faut la répéter : pas de problème. On fait repeat-x ou repeat-y. Soit elle est plus petite que la div (de taille fixe) et il ne faut pas la répeter à ce moment là il vaut mieux modifier la taille de l'image source plutot que de se taper des width et des height qui en plus t'oblige a rajouter des sous classes : du genre #header img{ width : 150px;}
- la multiplication des div (voir dans ton exemple le footer). Pas besoin de faire une div par élément si les éléments n'entrent pas en concurence. Dans une div tu peux mettre plein de chose à partir du moment ou elle n'entre pas en concurrence : une image, du texte, un background, une couleur de background etc..
- les filtres je maitrise pas du tout : sous mozilla ton image avec le filtre est horrible, par contre ca passe sous ie. Peut être revoir ou chercher (sur ce forum) comment appliquer les filtres correctement en fonction des navigateurs)
- les éléments de base sont bien utiles pour la mise en page pas besoin d'en inventer de nouveau. tu n'utilises aucune balise <p> <blocquote> ou autre.
- quand tu définis une police il vaut mieux mettre une liste de police alternative au acs ou l'ordi des visiteurs ne la posséde pas. En tous les cas finir par sans serif (catégorie générale !)
- ton site n'est pas fluide ! mais peut être est-ce fait exprès.
- dans des blocks de largeur fixe il est dangereux de mettre des polices de taille variable ! cela nuit a l'acessibilité et ca peut foutre en l'air ta mise en page !
- dans ton css original (quel horreur !) faut expurger toutes les trucs qui servent à rien ! de même je reprends a mon compte les remarques sur ton HTML déplorable (2 head, 2 body, des balises pas fermé, des <div> </div> qui trainent
Voila si t'a des questions je epux t'aider (y'a bon les rtt
)gilles6975 a écrit :
- les filtres je maitrise pas du tout : sous mozilla ton image avec le filtre est horrible, par contre ca passe sous ie. Peut être revoir ou chercher (sur ce forum) comment appliquer les filtres correctement en fonction des navigateurs)
Je ne vois pas vraiment l'intérêt d'utiliser des filtres ici. Ça risque tout simplement de brouiller les cartes et donner des résultats inattendus.
a écrit :
- ton site n'est pas fluide ! mais peut être est-ce fait exprès.
Que veux tu dire par là?
a écrit :
- les filtres je maitrise pas du tout
Tu parles de l'image de droite en transparence?
Et pour la taille de la police, ce serait mieux de mettre des pourcentages?
Aussi, je voulais mettre un background pour le header, qui soit la continuité de la bannière, je l ai fait comme suit:
#header {
border-bottom:1px solid #000000;
margin-bottom: 5px;
background-image:url(bg_bandeau2.gif);
}
Enfin, il y a moyen que les border-bottom des h1 ne soient pas collées à la barre de droite.
Ah et dernières chose, Je te dois combien?
- Modif pour le h1 uniquement sur le xhtml :
tu mets le titre h1 entre <div id="news"> et tu fermes cette div après ton dernier paragraphe. Donc tu vires le </div> qui est juste après </table> et tu le mets après </p>
Tu peux faire varier la largeur de cette div (dans le css) pour avoir plus ou moins d'espace ou alors en mettant un padding.
D'aileurs en relisant la solution que je t'avais mise n'est pas bonne ! Celle la c'est bon.
- un site fluide est un site qui s'adapte à la taille de la résolution et au choix de la taille de police du surfeur.
En gros le conteneur est en % et la taille du texte en em (cela pour les éléments essentiels). Du coup la taille s'adapte mais attention si tu a des div de largeur fixe à l'interieur !
- pour le header si tu veux que ton image soit normal et le poursuivre par un fonds il faut faire comme ce qu j'ai fait dans le footer.
Tu vires dans #header img le width et le height et tu rajoutes dans #header une couleur de background ! Tu remarqueras que #header img ne sert qu'à spécifier (dans ce que j'ai fait) la taille de l'image. Si tu la veux normal (sans redimensionnement) tu peux te passer de cette sous classe. Et hop une div de gagnée
- les filtres : oui il s'agit bien de l'image dj dans le navdroite qui merde sous mozzila (cf capture cliquer dessus)
De façon général il vaut mieux modifier les images elles même que de leur appliquer des contraintes via le code c'est plus rapide, plus sur, et plus light. Sauf quand on a pas le choix bien sur !
- la taille de la police en % est bien quand tous le site est en %. La pluspart du temps tu te retrouve avec des titres sur 2 lignes et des mises ne page foireuse. Mais bon on fait ce qu'on veut.
- ce que tu me dois : 1 millions de dollars si tu veux un SAV Plus serieusement c'est un bon training pour moi et ton site m'a plus dans sa conception je l'ai donc fait volontier et presque avec plaisir.
- Si t'a d'autres questions n'hésite pas. Au fait faut absolument se passer de Lycos !
Modifié le 28 Jan 2005 - 19:26
tu mets le titre h1 entre <div id="news"> et tu fermes cette div après ton dernier paragraphe. Donc tu vires le </div> qui est juste après </table> et tu le mets après </p>
Tu peux faire varier la largeur de cette div (dans le css) pour avoir plus ou moins d'espace ou alors en mettant un padding.
D'aileurs en relisant la solution que je t'avais mise n'est pas bonne ! Celle la c'est bon.
- un site fluide est un site qui s'adapte à la taille de la résolution et au choix de la taille de police du surfeur.
En gros le conteneur est en % et la taille du texte en em (cela pour les éléments essentiels). Du coup la taille s'adapte mais attention si tu a des div de largeur fixe à l'interieur !
- pour le header si tu veux que ton image soit normal et le poursuivre par un fonds il faut faire comme ce qu j'ai fait dans le footer.
Tu vires dans #header img le width et le height et tu rajoutes dans #header une couleur de background ! Tu remarqueras que #header img ne sert qu'à spécifier (dans ce que j'ai fait) la taille de l'image. Si tu la veux normal (sans redimensionnement) tu peux te passer de cette sous classe. Et hop une div de gagnée
- les filtres : oui il s'agit bien de l'image dj dans le navdroite qui merde sous mozzila (cf capture cliquer dessus)
De façon général il vaut mieux modifier les images elles même que de leur appliquer des contraintes via le code c'est plus rapide, plus sur, et plus light. Sauf quand on a pas le choix bien sur !
- la taille de la police en % est bien quand tous le site est en %. La pluspart du temps tu te retrouve avec des titres sur 2 lignes et des mises ne page foireuse. Mais bon on fait ce qu'on veut.
- ce que tu me dois : 1 millions de dollars si tu veux un SAV
Plus serieusement c'est un bon training pour moi et ton site m'a plus dans sa conception je l'ai donc fait volontier et presque avec plaisir.- Si t'a d'autres questions n'hésite pas. Au fait faut absolument se passer de Lycos !
Modifié le 28 Jan 2005 - 19:26
Je suis content que tu ais résolu ton problème, mais je tiens à m'excuser d'une éventuelle agressivité. Ce n'était pas le but. Simplement, essaye de "cerner" le problème de ton CSS, plutôt que de balancer tout ton code, parce que le code entier, on peut l'avoir sur ta page...
Sans rancune ?
@+, HoPHP
Sans rancune ?
@+, HoPHP