28173 sujets

CSS et mise en forme, CSS3

Pb CSS lors d'une mise en page en table vers les standards du web

Bonjour à tous!!

Je suis nouveau sur le forum et tout débutant en ce qui concerne les standards du web (j'ai commencé pour tout vous dire hier!)

En fait je dois développer un site web pour une société et j'avais déjà fait la maquette mais en utilisant des tableaux pour faire la mise en page (haaaa horreur et damnation, honte à moi ! Je sais, mais bon on me l'a appris comme cela et j'ai bien décidé de changer!)

C'est pourquoi j'aimerais passer à du xhtml en utilisant les feuilles css pour faire la mise en page mais lors de ma transformation deux problèmes me résistent et j'ai beau trifouiller partout sur les forums je ne trouve pas (peut-être est-ce parce que je ne connais pas encore la façon de chercher et les bon mots-clés non plus!)

Bref. Je m'attarde dans un premier temps seulement sur la page d'accueil du site!

Pour commencer jetez un oeil sur la version de base (avec tableaux) disponible ici :
http://hycwaulsort.free.fr/clients/swep/index2.htm

Voilà j'ai dans un premier temps retiré tout ce qui concernait la présentation dans le code et utiliser les balises de manière sémantique pour en arriver à ceci :
http://hycwaulsort.free.fr/clients/swep/v2/index.htm
Avec cette version je passe le test du W3C en version XHTML Strict ! Donc je pense avoir réussi à tout bien nettoyer!

Ensuite j'ai travaillé le design avec les feuille de style CSS et trois problèmes restent pour moi un mystère encore ! Mais voyez par vous même :
http://hycwaulsort.free.fr/clients/swep/v2/test.htm

Les problèmes sont les suivants :
- Dans Firefox ma page ne s'étend pas jusqu'en bas une fois qu'il y a du scrolling vertical tandis que dans IE oui!

- Je n'arrive pas à centrer mes boîtes de logo dans le conteneur, ainsi que les boîtes "actualités" et "sur le forum" (chaque boite est un div avec l'attribut float:left;)

- Toujours dans Firefox et pas dans IE, il n'y a pas de retour à la ligne pour la partie "ce site à été créé par ..." alors que le conteneur des deux boite "actualité" et "forum" fait toute la largeur et que la boite signature à également une largeur maximum (760px) !

Voici les parties de mon CSS qui risquent de vous intéresser :


html, body {
	margin: 0;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #DDDDDD;
}
#fond {
	margin-left: auto;
	margin-right: auto;
	width: 780px;
	text-align: left;
	height: 100%;
	background-image:url(../template/fond.gif)
}
#page {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	text-align: center;
	background-color: #FFFFFF;
	height: 100%;
}
#slogan {color: #333333; text-align: center; vertical-align:middle;}
#slogan h1 {font-size: 18px; margin: 25px 0 4px 0;}
#slogan h2 {font-size: 13px; margin: 4px 0 25px 0;}

#leslogos{
	width:760px;
	margin-left: auto;
	margin-right: auto;
	height: 240px;
	text-align: center;
	color: #EEEEEE;
}
#bloclogobleu {
	float:left;
	background-color: #313163;
	width: 140px;
	height: 240px;
	margin-left: 4px;
	margin-right: 4px;
}
#bloclogoorange {
	float:left;
	background-color: #CD6713;
	width: 140px;
	height: 240px;
	margin-left: 4px;
	margin-right: 4px;
}
/*... ainsi de suite pour les autres couleurs*/
#suitelarge {
	width:760px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 25px;
}
.box_b {
	width: 300px;
	margin-left:10px;
	margin-right:10px;
	float:left;
	background-color: #313163;
	text-align:left;
	color: #EEEEEE;
}
#sign {
	padding: 5px;
	width: 760px;
	text-align:right;
}


Je ne sais pas si vous arriverez à m'aider mais je n'en doute pas ! Je n'ai fait que commencer hier donc je suppose que j'ai encore une montagne à apprendre mais autant se baser sur la connaissance de chacun ce qui permettra à tout le monde de construire un internet stable et respectant tous les standards!!!

Merci d'avances!

Biloduo qui a été très prolifique pour un premier post! Hihi Smiley eek
Modifié par biloduo (15 Jun 2006 - 12:33)
Bon j'ai joué un peu avec ton code et il y a eu des modifications à faire :

1) Au lieu des tag P pour tes liens dans blocklist j'ai mit des UL LI, c'Est beaucoup plus clean Smiley cligne et sémantiquement c'est mieux.

2) Au lieu de mettre une tag a 180px pour mettre ton background, met un background qui se répète en Y avec le milieu blanc et les bordure gris dégradé ... tu le centre ensuite avec background-position: 50%; Il y a un petit hack /html etc... parce que Explorer a 2px de différence avec les autres navigateur.

3) Quand tu utilises les mêmes propriétés plusieurs fois, créé une class et met les dedans. Ca va simplifier ton code.

4) Le pourquoi du comment ta page ne s'étendait pas jusqu'en bas, c'est que Firefox ne comprend pas le height: 100%; c'est le pourquoi du background dans le body qui donne l'impression que ta page va jusqu'en bas.

5) Fait attention au Margin car elle ne sont pas pareille dans Explorer et Firefox etc... Utilise le LEFT quand tu Float et accumule le nombre de pixel ... exemple avec 10px entre chaque : 10px 20px 30px etc...

6) Ton liens créé par est en position avec la tag id="suitelarge" et cette tag n'a pas de hauteur défini, donc je lui ai donné un hauteur de 70px ce qui descend ton liens à la bonne place.

7) Tu peux centrer de cette facon ta tag DIV principale, cela donne plus de controle : 

#tagDIVprincipale {
    position: relative;   
    left: 50%; 
    width: 760px;
    margin-left: -380px;
}


Voila, je crois que c'est tout, je te met le code à ta disposition, et tu peux regarder l'exmple que j'ai fait pour toi :

Click ici pour voir l'exemple

Fait attention, j'ai mit des liens complet, si tu veux les remettres comme ils étaients, libre à toi. Pour le background, enregistre l'arrière plan sous et le fichier est bgWallone.jpg.

LE CODE CSS
body {
	margin: 0px;
	padding:0px;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #DDDDDD;
	background-image:url(bgWallone.jpg);
	background-repeat:repeat-y;
	background-position: 50%;
}
hr {
	color:#313163;
	height: 4px;
	text-align: center;
	background-color: #313163;
}
div { position:relative;}

a:link, a:visited {
	color:#313163;
}
a:hover {
	color:#5A5A82;
	text-decoration:none;
}
h3 {
	font-size: 12px;
	margin: 0 0 0 0;
}

ul {  margin:0px; padding:0px; margin-left:22px;}
li { margin:0px; padding:0px; list-style-type:square; list-style-position:outside; padding-left:0px;}

#page {
	left: 50%;
	top:0px;
	margin-left: -380px;
	width: 760px;
	background-color: #FFFFFF;
	height: 100%;
}

*html #page { margin-left:-379px !important;}

#slogan {color: #333333; text-align: center; vertical-align:middle;}
#slogan h1 {font-size: 18px; margin: 25px 0 4px 0;}
#slogan h2 {font-size: 13px; margin: 4px 0 25px 0;}

#leslogos{
	width: 760px;
	height: 240px;
	color: #EEEEEE;
}
#leslogos a:link, #leslogos a:visited {color:#EEEEEE; text-decoration:none;}
#leslogos a:hover {text-decoration: underline;}

div.blocklogo {
	float:left;
	width: 140px;
	height: 240px;
}

#bloclogoorange { background-color: #CD6713;left:10px;}
#bloclogojaune { background-color: #CB9703;left:20px;}
#bloclogobleu { background-color: #313163;left:30px;}
#bloclogorouge { background-color: #98121B;left:40px;}
#bloclogovert { background-color: #0C6427;left:50px;}

#photos_assoc, #photos_activ, #photos_docum, #photos_links{
	position:relative;
	left:0px;
	top:-5px;
}
.bloctitre {
	text-align:center;
	vertical-align: top;
	padding: 4px 0px 1px 0px;
	width: 140px;
	height: 51px;
}
.blocliste {
	text-align:left;
	vertical-align: bottom;
	padding: 1px 0px 4px 0px;
	width: 140px;
	height: 90px;
	font-size:9px;
}

.blocimage {
	width: 140px;
	height: 99px;
}
#suitelarge {
	width:760px;
	height:70px;
	margin-top: 25px;
	text-align: center;
	margin-bottom: 25px;
}
.box_b {
	width: 280px;
	left: 10px;
	padding:5px;
	float:left;
	background-color: #313163;
	text-align:left;
	color: #EEEEEE;
}

.box_b a:link, .box_b a:visited {color:#EEEEEE; text-decoration: none;}
.box_b a:hover {text-decoration:underline;}

#sign {
	width: 750px;
	padding-right:10px;
	text-align:right;
}


ET LE CODE HTML DANS LE BODY
<div id="page">


<div id="photos_index">
	<img src="http://hycwaulsort.free.fr/clients/swep/swf/photos_index.jpg" alt="Photos d'animation pour la page" width="760" height="240" />
</div>
<script type="text/javascript">
	var so = new SWFObject("http://hycwaulsort.free.fr/clients/swep/swf/photos_index.swf", "photos_index", "760", "240", "7", "#313163");
	so.write("photos_index");
</script>
<div id="slogan">
	<h1>Pour une meilleure <a href="#">gouvernance</a> par l'<a href="#">&eacute;valuation</a> et la <a href="#">prospective</a>.</h1>
	<h2>Bienvenue sur le site de la Soci&eacute;t&eacute; Wallone de l'&Eacute;valuation et de la Prospective (SWEP)</h2>
</div>
<hr />
<div id="leslogos">
	<div class="blocklogo" id="bloclogoorange">
		<div class="bloctitre">
			<h3><a href="page.php?name=assoc">L'ASSOCIATION</a></h3>
		</div>
		<div class="blocliste">
			<ul>
				<li><a href="page.php?name=assoc">Histoires et missions</a></li>
				<li><a href="page.php?name=assoc">Organes, structures et ressources</a></li>
				<li><a href="page.php?name=assoc">Prises de positions et interventions</a></li>
				<li><a href="page.php?name=assoc">Devenez membres</a></li>
			</ul>
		</div>
		<div id="photos_assoc">
			<img src="http://hycwaulsort.free.fr/clients/swep/swf/intro_assoc.jpg" alt="Image sur l'association" width="140" height="87" />	</div>
		<script type="text/javascript">
			var so = new SWFObject("http://hycwaulsort.free.fr/clients/swep/swf/intro_assoc.swf", "photos_assoc", "140", "87", "7", "#FFFFFF");
			so.write("photos_assoc");
		</script>
	</div>
	
	<div class="blocklogo" id="bloclogojaune">
		<div class="bloctitre">
			<h3><a href="page.php?name=activ">LES ACTIVIT&Eacute;S</a></h3>
		</div>
		<div class="blocliste">
		 	<ul>
				<li><a href="page.php?name=activ">Nos petits déjeuners</a></li>
				<li><a href="page.php?name=activ">Nos conférences</a></li>
				<li><a href="page.php?name=activ">Nos ateliers</a></li>
				<li><a href="page.php?name=activ">Nos colloques</a></li>
			</ul>
		</div>
		<div id="photos_activ">
			<img src="http://hycwaulsort.free.fr/clients/swep/swf/intro_activ.jpg" alt="Image sur les activit&eacute;s" width="140" height="87" />	</div>
		<script type="text/javascript">
			var so = new SWFObject("http://hycwaulsort.free.fr/clients/swep/swf/intro_activ.swf", "photos_activ", "140", "87", "7", "#FFFFFF");
			so.write("photos_activ");
		</script>
	</div>
	
	<div class="blocklogo" id="bloclogobleu">
		<img src="http://hycwaulsort.free.fr/clients/swep/template/b/logo_menu.jpg" alt="Logo de la SWEP" width="140" height="240" />
	</div>
	
	<div class="blocklogo" id="bloclogorouge">
		<div class="bloctitre">
			<h3><a href="page.php?name=docum">LA DOCUMENTATION</a></h3>
		</div>
		<div class="blocliste">
		Qu'est-ce que :
			<ul>
				<li><a href="page.php?name=docum">La prospective</a></li>
				<li><a href="page.php?name=docum">L'&eacute;valuation</a></li>
				<li><a href="page.php?name=docum">La gouvernance</a></li>
				
			</ul>
		<a href="page.php?name=docum">Notre base documentaire</a>
		</div>
		<div id="photos_docum">
			<img src="http://hycwaulsort.free.fr/clients/swep/swf/intro_docum.jpg" alt="Image sur la documentation" width="140" height="87" />	</div>
		<script type="text/javascript">
			var so = new SWFObject("http://hycwaulsort.free.fr/clients/swep/swf/intro_docum.swf", "photos_docum", "140", "87", "7", "#FFFFFF");
			so.write("photos_docum");
		</script>
	</div>
	
	<div class="blocklogo" id="bloclogovert">
		<div class="bloctitre">
			<h3><a href="page.php?name=links">LE MONDE DE L'&Eacute;VALUATION ET DE LA PROSPECTIVE </a></h3>
		</div>
		<div class="blocliste">
			<ul>
				<li><a href="page.php?name=links">Les acteurs </a></li>
				<li><a href="page.php?name=links">Offres d'emplois </a></li>
				<li><a href="page.php?name=links">Appels d'offres </a></li>
			</ul>
		</div>
		<div id="photos_links">
			<img src="http://hycwaulsort.free.fr/clients/swep/swf/intro_links.jpg" alt="Image sur le monde de la perspective" width="140" height="87" />	</div>
		<script type="text/javascript">
			var so = new SWFObject("http://hycwaulsort.free.fr/clients/swep/swf/intro_links.swf", "photos_links", "140", "87", "7", "#FFFFFF");
			so.write("photos_links");
		</script>
	</div>
</div>
<hr />
<div id="suitelarge">
	<div class="box_b">
		<h3><a href="page.php?name=actu">&gt; Notre actualit&eacute; :</a></h3>
		<ul>
			<li><a href="page.php?name=actu">Nos petits d&eacute;jeuner : Comprendre et gouverner le d&eacute;veloppement</a></li>
			<li><a href="page.php?name=actu">La SWEP, Bilan et perspectives</a></li>
		</ul>
	</div>
	
	<div class="box_b" style=" left:20px;">
		<h3><a href="#">&gt; Sur le forum :</a></h3>
		<ul>
			<li><a href="#">Le r&ocirc;le de l&rsquo;IWEPS</a></li>
			<li><a href="#">L&rsquo;ind&eacute;pendance de  l&rsquo;&eacute;valuateur</a></li>
		</ul>
	</div>
</div>	

<div id="sign">
	<a href="http://cv.biloduo.be">Site cr&eacute;&eacute; par Simon Dejean</a>
</div>

	
</div>
Merci pour ta réponse et ton aide précieuse!!!

Je suis désolé de répondre si tardivement mais comme j'étais en examen pas facile de travailler sur mes sites ...

Mais ca me permet mainteannt d'avancer grandement!!

Merci encore Smiley biggrin
Encore une petite quesiton si je n'abuse pas j'espère ... Tu dis de mettre une hauteur de 70 px pour que le div contenant "site créé par" passe à la ligne, mais que se passe-t-il quand ce contenu dépasse les 70 px ... car ce sont deux boîtes qui doivent pourvoir s'agrandir comme bon leurs sembles vu que le contenu dépens de ce qu'il y a dans l'acutalité et de ce q'uil y a sur le forum ???
Ok, alors enlève le margin-bottom: 25px; à #suitelarge

Ensuite ajoute ceci dans la tag #sign

#sign {
	width: 750px;
	padding-right:10px;
	text-align:right;
[b]	padding-top:15px;
	float:left;[/b]
}


Tu va ainsi réglé le problème. La tag #sign en étant en Float, elle prend position avec les autres tags en float, donc elle se positionne après celle-ci.
Bonsoir,

je voulais signaler un bug qui se produit chez moi sur ce post. Mais UNIQUEMENT sur ce post. Une erreur d'interprétation de la CSS ou je ne sais...

Le fait est que quand on réduit la taille du navigateur, le cadre des réponses au post sort du cadre blanc du forum.

Je joins une capture d'écran pour montrer.
J'ai disposé deux firefox ouverts, un en fullscreen et l'autre en fenètre pour que la différence soit explicite.

Ce bug ne se produit sur Firefox (1.5.0.4 ma version)

http://mikachudesign.free.fr/divers/alsabug.jpg
Modifié par Mikachu (20 Jun 2006 - 21:17)
C'est quoi la différence entre les deux ... pour ne pas écrire betement l'un ou l'autre et que je comprenne vraiment à quoi ca sert ... (-_-')
J'ai déjà remarqué une différence ... avec le clear, dans firefox il ne respecte pas le margin de 15 tandis qu'avec le float oui!!! Smiley ohwell

Par contre avec un padding ça fonctionne ...
Modifié par biloduo (21 Jun 2006 - 19:24)
Sujet clos
Aller à