bonjour à tous 
comme je vous l'ai dit sur mon post de présentation je suis pas pro et je fait ça vraiment pour le fun.
Mais voilà pour avancer il faut bien bosser sur quelquechose donc je me suis mis en tête de réaliser une mise en page full CSS pour convaincre les gens qui m'entourent que faire un site en respectant les standards, redimensionnable et avec un minimum d'accessibilité et visible sous 5 navigateurs différents c'est possible, et leur expliquer comment je m'y suis pris.
le hic c'est que faire un site qui tienne la route avec son discours c'est pas évident.
donc j'ai éssayé de respecter quelques bases:
*redimensionnement de la police
*les liens ont une couleur et une graisse différente
*pas d'image transparente (heu! un background-image c'est bon??)
*niveau couleurs par contre j'ai pas encore trop potassé
*je travaillerais bien sur les accesskey, tabindex, alt... avec une feuille sur les fonctions d'accessibilités.
*j'ai organisé mes pages avec des titres(le choix de l'ordre h1,h2(page)
h3(titre menu) est-il bon??)
*j'ai utilisé une liste pour les menus (verticaux)
*pour les horizontaux j'ai pas encore décidé
mais il y'as tellement de trucs auxquels il faut penser que j'avoue être un peu dépassé il se peux même que des trucs évidents ne soit pas présent mais je me barre dans tellement de direction au niveau doc que
j'ai un peu de mal à faire le point.
Pour l'instant au niveau mise en page cela à l'air de se tenir sous IE6,
FIREFOX1.0,Opéra7,Mozilla1.6, Netscape7.
avec lynx le problème c'est que le choix de ma mise en page (tout n'est pas en absolute) fait que tout les menus se retrouve avant et aprés le contenu.
donc je voulais vôtre avis sur ce que j'ai réalisé jusqu'à maintenant.
comme je voudrais que ce soit assez complet je mets tout ce qu'il faut
html, css et adresse.
je précise que pour l'instant je n'ai éffectué aucun test de validité c'est du travail brut (ça me reservera peut être des surprises
).
d'avance merci!
l'adresse:
http://thesheet.free.fr/site_css
le html:
le css:
Modifié le 06 Jan 2005 - 17:54
comme je vous l'ai dit sur mon post de présentation je suis pas pro et je fait ça vraiment pour le fun.
Mais voilà pour avancer il faut bien bosser sur quelquechose donc je me suis mis en tête de réaliser une mise en page full CSS pour convaincre les gens qui m'entourent que faire un site en respectant les standards, redimensionnable et avec un minimum d'accessibilité et visible sous 5 navigateurs différents c'est possible, et leur expliquer comment je m'y suis pris.
le hic c'est que faire un site qui tienne la route avec son discours c'est pas évident.
donc j'ai éssayé de respecter quelques bases:
*redimensionnement de la police
*les liens ont une couleur et une graisse différente
*pas d'image transparente (heu! un background-image c'est bon??)
*niveau couleurs par contre j'ai pas encore trop potassé
*je travaillerais bien sur les accesskey, tabindex, alt... avec une feuille sur les fonctions d'accessibilités.
*j'ai organisé mes pages avec des titres(le choix de l'ordre h1,h2(page)
h3(titre menu) est-il bon??)
*j'ai utilisé une liste pour les menus (verticaux)
*pour les horizontaux j'ai pas encore décidé
mais il y'as tellement de trucs auxquels il faut penser que j'avoue être un peu dépassé il se peux même que des trucs évidents ne soit pas présent mais je me barre dans tellement de direction au niveau doc que
j'ai un peu de mal à faire le point.
Pour l'instant au niveau mise en page cela à l'air de se tenir sous IE6,
FIREFOX1.0,Opéra7,Mozilla1.6, Netscape7.
avec lynx le problème c'est que le choix de ma mise en page (tout n'est pas en absolute) fait que tout les menus se retrouve avant et aprés le contenu.
donc je voulais vôtre avis sur ce que j'ai réalisé jusqu'à maintenant.
comme je voudrais que ce soit assez complet je mets tout ce qu'il faut
html, css et adresse.
je précise que pour l'instant je n'ai éffectué aucun test de validité c'est du travail brut (ça me reservera peut être des surprises
).d'avance merci!
l'adresse:
http://thesheet.free.fr/site_css
le html:
<!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" xml:lang="fr" lang="fr">
<head>
<title>LE SITE A MACHIN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="mon_tuto2_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="global">
<div class="header">
<img id="logo" src="logo1.jpg" alt="logo (site à machin)" />
</div>
<div class="header_menu">
:::<a href="?page=accessibilite">Accessibilité</a>:::
:::<a href="?page=accueil">Accueil</a>:::
:::<a href="?page=forum">Forum</a>:::
:::<a href="mailto:Ouam@internenet.com">Contact</a>:::
</div>
<div class="global_bis">
<div class="gauche">
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu">
</div>
<ul class="menu">
<li><a href="?page=test1">Test de la page n°1</a></li>
<li><a href="fvrcr">lien2</a></li>
<li><a href="gcvr">lien3</a></li>
<li><a href="tgc">lien4</a></li>
<li><a href="cvrcxx">lien5</a></li>
</ul>
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu">
</div>
<ul class="menu">
<li><a href="gfgfg">lien1</a></li>
<li><a href="fvrcr">lien2</a></li>
<li><a href="gcvr">lien3</a></li>
<li><a href="tgc">lien4</a></li>
<li><a href="cvrcxx">lien5</a></li>
</ul>
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu">
</div>
<ul class="menu">
<li><a href="ctrxe">lien1</a></li>
<li><a href="xcyug-">lien2</a></li>
<li><a href="hgff">lien3</a></li>
<li><a href="nbccvdfy">lien4</a></li>
<li><a href="eoffuye">lien5</a></li>
</ul>
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu">
</div>
<ul class="menu">
<li><a href="ctrxe">lien1</a></li>
<li><a href="xcyug-">lien2</a></li>
<li><a href="hgff">lien3</a></li>
<li><a href="nbccvdfy">lien4</a></li>
<li><a href="eoffuye">lien5</a></li>
</ul>
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu">
</div>
<ul class="menu">
<li><a href="gfgfg">lien1</a></li>
<li><a href="fvrcr">lien2</a></li>
<li><a href="gcvr">lien3</a></li>
<li><a href="tgc">lien4</a></li>
<li><a href="cvrcxx">lien5</a></li>
</ul>
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu"></div>
<ul class="menu">
<li><a href="gfgfg">lien1</a></li>
<li><a href="fvrcr">lien2</a></li>
<li><a href="gcvr">lien3</a></li>
<li><a href="tgc">lien4</a></li>
<li><a href="cvrcxx">lien5</a></li>
</ul>
</div>
<div class="centre">
<!-- DEBUT SCRIPT PHP INCLUDE ET IF -->
<!-- FIN SCRIPT PHP INCLUDE ET IF -->
</div>
<div class="droite">
<div class="dessusmenu">
</div>
<h2>BLABLA</h2>
<div class="dessusmenu">
</div>
<ul class="menu">
<li><a href="gfgfg">lien1</a></li>
<li><a href="fvrcr">lien2</a></li>
<li><a href="gcvr">lien3</a></li>
<li><a href="tgc">lien4</a></li>
<li><a href="cvrcxx">lien5</a></li>
</ul>
</div>
<div class="spacer">
</div>
</div>
<div class="footer">
site crée par OUAM<a href="">Mentions Légales</a>
</div>
</div>
</body>
</html>
le css:
*{margin: 0;
padding: 0;}
body, html{
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
text-align: center;
background-color: #cccccc;
}
.header{
height: 100px;
background-image: url(fond_header.jpg);
}
.header_menu{
background-color: #cccccc;
margin-top: 1%;
}
.global{
position: absolute;
width: 90%;
left: 50%;
margin-left: -45%;
text-align: left;
min-height: 100%;
background-image: url(carre_fond.jpg);
font-size: 1em;
}
.global_bis{
width: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
.spacer{
clear: both;
}
.centre{
float: left;
width: 68%;
margin-left: 1%;
height: 100%;
}
.droite{
float: right;
width: 15%;
}
.gauche{
float: left;
width: 15%;
}
.footer{
height: 70px;
background-image: url(footer.jpg);
text-align: center;
line-height: 2.7em;
}
.menu{
margin-bottom: 10px;
background-color: BLACK;
list-style-type: none;
border: solid 1px WHITE;
}
li{
padding: 0 0 2px 8px;
}
a:link{
color: WHITE;
text-decoration: none;
}
a:visited{
color: YELLOW;
font-style: italic;
text-decoration: none;
}
a:hover{
color: RED;
text-decoration: none;
font-weight: bold;
}
.footer a:link{
color: BLUE;
text-decoration: none;
}
.footer a:hover{
color: RED;
text-decoration: none;
font-weight: bold;
}
h2{
background-color: #00ffff;
color: BLACK;
font-size: 0.8em;
margin: 0;
}
p{
text-align: justify;
color: WHITE;
}
h3,h1{
background-color: #00ffff;
margin: 0 0 5px 0;
border: solid 1px BLACK;
text-align: center;
}
.contenu{
background-color: BLACK;
border: solid 1px YELLOW;
text-align: justify;
padding: 5px;
font-size: 1em;
margin-top: 7px;
}
.rss{
list-style-type: none;
color: #ffffff;
}
.rss a:link {color: YELLOW;}
.rss a:visited {
color: #00ffff;
font-style: italic;
}
#avatar{
float: left;
margin-top: 5px;
margin-right: 3px;
width: 75px;
height: 75px;
border: 0;
}
#logo{
position: absolute;
margin-top: 12px;
margin-left: 12px;
border: 0;
}
.dessusmenu{
background-image: url(dessus_menu.jpg);
height: 6px;
width: 100%;
border: 0;
line-height: 0;
font-size: 0;}
Modifié le 06 Jan 2005 - 17:54
