28173 sujets

CSS et mise en forme, CSS3

Refont d'un design tableaux => div

Bonjour,

Je viens de refaire entièrement le design de mon site pour le passer en div.
Il est finie, mis à part un dépassement du contenu sur le footer comme ceci :
(edit par Igor: merci d'éviter d'afficher des illustrations gigantesques qui déforment le forum sur les tailles d'écran habituelles. Cocher le bouton "vignette" si vous transférez vos images sur le forum)

Le site est disponible ici.
Pouvez-vous me dire ce qui va pas ?

Merci d'avance, Guillaume.
Modifié par Igor (24 Dec 2007 - 12:50)
Je viens de déplacer la balise <div class="footer_bas"></div> en dehors du contenu, et ça marche !
Désolé pour le dérangement Smiley confused
Modifié par gcvoiron (24 Dec 2007 - 11:03)
Attention : "passer des tableaux aux div" ne veut pas dire remplacer les <tr> <td> par des des <div>. Ça na aucun sens structurellement et sémantiquement parlant.

Je te conseille de revoir les tutos sur Alsacréations qui traitent des bases de l'intégration Web.
Par contre, j'ai un gros problème de compatibilité avec IE.
Sur cette page, le menu du haut reste fixe sur la page (quand on la redimenssionne).
Voilà le source :
		<div class="nav">
			<div class="nav_gauche"></div>
			<div class="nav_accueil"></div>
			<div class="nav_news"></div>
			<div class="nav_livre_dor"></div>
			<div class="nav_newsletter"></div>
			<div class="nav_forum"></div>
			<div class="nav_contact"></div>
			<div class="nav_partenaires"></div>
			<div class="nav_droite"></div>
			<div class="nav_sep"></div>
		</div>
ET le css qui s'y rattache :

.nav {
	position: relative;
}

.nav_gauche {
 	position: absolute;
	left:0;
	top:-40px;
	width:48px;
	height:33px;
	background:url("../images/design/nav_01.gif") no-repeat;
}

.nav_accueil {
 	position: absolute;
	left:48px;
	top:-40px;
	width:126px;
	height:33px;
	background:url("../images/design/nav_02.gif") no-repeat;
}

.nav_news {
 	position: absolute;
	left:174px;
	top:-40px;
	width:89px;
	height:33px;
	background:url("../images/design/nav_03.gif") no-repeat;
}

.nav_livre_dor {
 	position: absolute;
	left:263px;
	top:-40px;
	width:130px;
	height:33px;
	background:url("../images/design/nav_04.gif") no-repeat;
}

.nav_newsletter {
 	position: absolute;
	left:393px;
	top:-40px;
	width:154px;
	height:33px;
	background:url("../images/design/nav_05.gif") no-repeat;
}

.nav_forum {
 	position: absolute;
	left:547px;
	top:-40px;
	width:98px;
	height:33px;
	background:url("../images/design/nav_06.gif") no-repeat;
}

.nav_contact {
 	position: absolute;
	left:645px;
	top:-40px;
	width:122px;
	height:33px;
	background:url("../images/design/nav_07.gif") no-repeat;
}

.nav_partenaires {
 	position: absolute;
	left:767px;
	top:-40px;
	width:180px;
	height:33px;
	background:url("../images/design/nav_08.gif") no-repeat;
}

.nav_droite {
 	position: absolute;
	left:947px;
	top:-40px;
	width:100%;
	height:33px;
	background:url("../images/design/nav_09.gif") no-repeat;
}

.nav_sep {
 	position: absolute;
	left:0px;
	top:-7px;
	width:100%;
	height:23px;
	background:url("../images/design/nav_10.gif") no-repeat;
}


En fait je donne une position à chaque bouton se trouvant dans la classe "nav". Savez-vous d'où provient l'incompatibilité ?
Modifié par gcvoiron (24 Dec 2007 - 14:22)
Sujet clos
Aller à