28173 sujets

CSS et mise en forme, CSS3

[résolu] Block non alignés (cf tuto design complet)

bonjour

j'ai suivi le tutoriel de design de ce site pour arranger mon menu, le résultat n'est pas du tout correct.

Sous IE, les block ne s'alignent pas
Sous Safari, il manque un bout du header (le bord droit)
Sous FF, ça va (pour l'instant)

je voudrais savoir ce que je dois mettre pour que les block s'alignent (j'ai fait un autre design hier avec des block et ça passe très bien sous IE, je pige pas)

le site : http://www.carcan-de-verre.eu.org

merci d'avance et si vous avez une idée pour le header sous Safari, je prends aussi
Modifié par Elianora la blanche (27 Feb 2006 - 18:46)
Bonjour miss Smiley cligne
Désole mais je ne sais plus excatement ce qui a permit d'arranger la situation mais avec ce code ça à la'ir de fonctionner.
J'ai supprimé certaines déclaration inutiles et mis quelques commentaires.

ul#menuHaut {  /*border:0 inutile*/
	height: 24px;
	line-height: 24px;
	margin: 0;   /*pas besoin des px qd la valeur est à 0*/
	padding: 0;
	list-style-type: none;
	font-size: 12px;
}

ul#menuHaut li {
	float: left;
	text-align: center;
}

ul#menuHaut li.actif {
	text-align: center;
	background: transparent url(menu_sel.jpg) repeat-x left bottom;
}

ul#menuHaut li a {
	display:block;
	font-weight: bold;
	background: transparent url(menu_sep.jpg) no-repeat right bottom;
	padding: 0 8px;
	color: #333;   /*code raccourci egale à #333333*/
	text-decoration: none;
}

ul#menuHaut li a:hover {
	color: #fff;
}
merci ça fonctionne déjà beaucoup mieux

maintenant c'est comme pour le header, c'est pas parfaitement aligné, le menu est décalé d'1px vers le bas sous IE (ailleurs ça va)

de même le bout droit du logo est décalé vers le haut de 2-3px

une idée?
Modifié par Elianora la blanche (26 Feb 2006 - 08:29)
est-ce ques les differences d'affichage dependent uniquement di navigateur ou aussi de la résolution/taille de la fenêtre

parce que firefox ne m'affiche pas la même chose entre Mac (1280*1024) et Win (1024*768)
Bon j'ai midifié pas mal de chose superful dans ta css et des déclaration qui se font qu'amener des complications et qui alourdissent inutilement ta css.

Voila le code xhtml modifié avec les flottant placés au début de leur conteneur. Le placement des flottant dans le code ne devrait pas neccessairement suivre l'odre d'apparition des élément dans ta page. En général pour éviter les problème il vaut mieux les placé le plus haut possible dans leur conteneur pour des raisons que je ne saurais t'expliquer précisemnnt,
tu dois pouvoir en trouver ici...

le xhtml 


<div id="header">
<img id="header_left" src="logo_lef.jpg" width="54" height="114" alt="" />
<img id="header_right" src="logo_rig.jpg" width="54" height="114" alt="" />
<img src="logo0000.jpg" width="690" height="114" alt="" />
</div>
<div id="menu">
<img id="mg" src="menu_lef.jpg" width="24" height="24" alt="" />
<img id="md" src="menu_rig.jpg" width="24" height="24" alt="" />
<img id="sep" src="menu_sep.jpg" width="8" height="24" alt="" />
<ul id="menuHaut">
	<li class="actif"><a href="http://www.carcan-de-verre.eu.org/index.php">Accueil</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/index.php?page=news">News</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/index.php?page=qui">Qui sommes-nous ?</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/index.php?page=rea">Nos R&eacute;alisations</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/index.php?page=cond">Nos Conditions</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/index.php?page=faq">F.A.Q.</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/index.php?page=liens">Liens utiles</a></li>
	<li><a href="http://www.carcan-de-verre.eu.org/forum">Forum</a></li>
	<li><a href="mailto:contact[at]elianora-la-blanche.info?subject=Site%20Carcan%20de%20Verre" title="Remplacez [at] par @">Contact</a></li>
</ul>
</div>


et la css commentée

body {
	background: #E5EBF0 url(bg000000.jpg) repeat-x;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #000;  /*= #000000*/
	margin: 0 auto;    /*qd la valeur est de 0 inutile de mettre l'unité (px)*/
	text-align: center;   
	font-size: 12px;
} 
#header {
	margin: 0 auto;
	padding: 0;
	height: 114px;
	width: 980px;
	background: url(logo_bg0.jpg) repeat-x;
}
#header_left {
	float: left;    /*inutile de répéter les taille des image au niveau de la css mais elle doit être indiqué dans le html pour des raisons d'accessibilité*/
}
#header_right {
	float: right;
}
#menu {
	margin: 0 auto 5px;
	height: 24px;
	line-height: 24px;
	width: 960px;
	background: #E5EBF0 url(menu_bg0.jpg) repeat-x left center;
}
#mg {
	float: left;
}
#md {
	float: right;
}
#sep {
	float: left;
	height: 24px;
	width: 1px;
}
ul#menuHaut {
	height: 24px;
	line-height: 24px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 12px;
}


Une actuces pour voir d'ou viennent les décalage est de mettre dans les élément impliqués la déclaration border: 1px solid
Modifié par Hermann (26 Feb 2006 - 13:04)
Sujet clos
Aller à