5568 sujets

Sémantique web et HTML

Bonjour !

Je n'ai, jusqu'à présent pas eu besoin de poster sur ce forum car j'avais toujours pu trouver ce que je voulais dans les tuto ou par recherche sur le site. Hélas, ce temps là est révolu, comme je rencontre une tuile sur laquelle je n'ai aucune piste de résolution, aucun fil à dérouler.

A titre professionnel et pour "cadrer" mon niveau, je suis administrateur de système et programme de temps à autre en perl bash, dont un peu de développement web via cgi.

Je confectionne actuellement un site web html/css/php. Je n'en suis qu'à la page d'accueil mais rencontre déjà des problèmes de portabilité de mes css avec IE. J'ai pu trouver pas mal de question à ce sujet sur ce forum, hélas à chaque fois une petite différence faisait que je ne pouvait pas adapter une solution pour mes propres besoins.

Le problème que je rencontre c'est que, tout simplement, le css n'est pas du tout considéré de la même manière sur IE7 (sur IE8 c'est bon), ce qui donne des choses totalement improbables. Du coup j'en viens à me demander si la structure même de ma page est bonne, vu que je ne suis pas tout à fait à l'aise avec les div, malgré la lecture répétée des tutoriaux sur ce site.

Vous trouverez le site en question ici : www.suture-clothing.com/try/index.html

Le code html est le suivant :

<!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>
	<meta name="description" content="Suture-clothing" />
	<meta name="keywords" content="clothes,clothing,gothic,lolita,suture,shop" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />	
	<title>Suture-clothing : official web-site</title>
	<link rel="icon" type="image/png" href="./pics/favicon.png" />
	<link rel="stylesheet" href="defaut.css">
	<link rel="stylesheet" href="index.css">
</head>

<body>
<!-- Div de contenu -->
<div id="main">
	<!-- Première ligne de contenu -->
	<div class="border_top_left"></div>
	<div class="tetiere"></div>	
	<div class="border_top_right"></div>
	<!-- Seconde ligne de contenu -->
	<div class="border_bottom_left"></div>
	<div class="collections"></div>
	<div class="parcours"></div>
	<div class="newsletter"></div>
	<div class="commander"></div>
	<div class="border_bottom_right"></div>
	<!-- Div de bas de page --> 
	<div id="bottom">All Images &amp; Content © 2011 by <a href="">www.Suture-clothing.com</a><img src="./pics/fb.png"></div>
</div>
</body>
</html>


Et les css :

html
	{
	cursor: url(pics/fourchette.cur),default;
	width:100%;
	height:100%;
	}
	
body
	{
	margin:0px;
	min-width:1280px;
	background-color:black;
	width:100%;
	height:100%;
	}
	
div#main 
	{
	padding:0px;
	background-image: url(pics/side_background.jpg);
	background-position:center top;
	background-repeat:repeat-y;
	width:1280px;
	height:100%;
	height:auto;
	min-height:100%;
	position:absolute;
	left:50%;
	margin-left:-640px;
	}
/** Première ligne d'images **/

.border_top_left
	{
	float:left;
	margin-left:135px;
	width:5px;
	height:300px;
	background-image: url(pics/edge_lt.jpg);
	}

.tetiere
	{
	position:absolute;
	margin-left:140px;
	width:1000px;
	height:300px;
	background-image: url(pics/tetiere.jpg);
	}
	
.border_top_right
	{
	float:right;
	margin-right:135px;
	width:5px;
	height:300px;
	background-image: url(pics/edge_rt.jpg);
	}

/** Seconde ligne d'images **/

.border_bottom_left
	{
	float:left;
	margin-left:-5px;
	margin-top:300px;
	width:5px;
	height:300px;
	background-image: url(pics/edge_lb.jpg);
	}
	
.collections
	{
	float:left;
	margin-top:300px;
	height:300px;
	width:258px;
	background-image: url(pics/button_collections_b.jpg);
	}

.collections:hover
	{
	background-image: url(pics/button_collections_p.jpg);
	}
	
.parcours
	{
	float:left;
	margin-top:300px;
	height:300px;
	width:226px;
	background-image: url(pics/button_parcours_b.jpg);
	}

.parcours:hover
	{
	background-image: url(pics/button_parcours_p.jpg);
	}
	
.newsletter
	{
	float:left;
	margin-top:300px;
	height:300px;
	width:255px;
	background-image: url(pics/button_newsletter_b.jpg);
	}
	
.newsletter:hover
	{
	background-image: url(pics/button_newsletter_p.jpg);
	}
	
.commander
	{
	float:left;
	margin-top:300px;
	height:300px;
	width:261px;
	background-image: url(pics/button_commander_b.jpg);
	}

.commander:hover
	{
	background-image: url(pics/button_commander_p.jpg);
	}
	
.border_bottom_right
	{
	float:left;
	width:5px;
	height:300px;
	background-image: url(pics/edge_rb.jpg);
	}

/** Bas de page **/

div#bottom
	{
	bottom:10px;
	position:absolute;
	margin: 0 auto;
	left:50%;
	margin-left:-200px;
	width:400px;
	}



Merci d'avance pour le temps consacré à ce post,

Wolfrei
Première boulette, je croyais être dans la rubrique CSS.
Merci à celui qui rectifia le tire !
Salut,

Sur ie7 ce qui ne passe pas c'est la position absolute de ton header.
Il va alors falloir :
- enlever la position absolute
- changer tous les floats par des float:left
- enlever les margin en surplus (top et left)


Je pense que tu gagnerais à te repencher sur l'html de ta page Smiley smile