[résolu]Design XHTML/CSS complet avec 2 colonnes de même hauteur

Tout d'abord merci pour ce tuto intéressant pour ceux qui veulent mettre au rebut table, tr, td...
Or, je n'ai pas résolu le div footer pour ie, qui ne s'affiche pourtant pas comme il devrait !
l'overflow:visible dans la css ie sur le div center accentue l'erreur en générant un mini ascenceur vertical absorbant tout le contenu du div.Que faire ?
http://maquettefebus.ovh.org/exo/exo2.html

Merci de votre support, pour finaliser ce tuto.
Bouzette
Modifié par bouzette (04 Jun 2009 - 13:14)

je joins ci-après extrait de la CSS specifique pour I.E. pour solliciter votre aide :

body {position: relative;height: 100%;margin: 0;font: 90% "Trebuchet MS", sans-serif;}

html {background: url(html.png)}

div#header {position: relative; background: #7fcf2e url(header.jpg) no-repeat; color: #fff;height: 201px;}

div#header h1 {margin: 0;position: absolute;bottom: 10px;left: 30px; font: 3em Georgia, serif;}

ul#menu {margin: 0;padding: 0;list-style: none}

ul#menu li a {display: block;height: 30px;line-height: 30px;color: #390; font: small-caps 1.1em/30px Georgia,serif;text-decoration: none; background: url(img/fond_lien.png) no-repeat left top; padding-left: 35px; margin: 2px 0; border-bottom: 1px solid #7fcf2e;}

ul#menu li a:hover {background-position: left bottom;color: #c30;}

div#global {height: 100%;width: 750px;padding: 0 10px;margin: 0 auto; position: static;padding: 0 10px;background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");}


/* Pour éviter la superposition du pied de page et du contenu : RESULTAT overflow:visible ;height: 1%;: ne fonctionne pas */

div#center {padding-bottom: 50px;}

div#footer {position: absolute; width: 750px; bottom: 0; background: #7fcf2e url(footer.png) repeat-x;color: #fff;}

div#footer p {margin: 2px 0;font-size: 0.9em;}

a {color: #6c0;font-weight: bold; position: relative;}

a:hover {color: #c00; position: relative;}

div#content {margin-top: 15px; float: left; display: inline;width: 530px; margin-left: 10px;}

div#content h2 {padding-left: 35px;background: #fff url(titre.png) left center no-repeat; color: #6c0;}

div#content h3 {color: #c00;font-variant: small-caps;}

div#sidebar {margin-top: 15px;float: right; width: 200px;}

div#sidebar h3, div#footer p, div#sidebar p {padding: 0 10px;}

Salut,

Je viens de regarder la page donnée en lien, et je ne vois pas l'appel à la feuille de style réservée à IE ...

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

Re.

Les règles destinées à IE6 doivent être déclarées après les règles CSS "standards", car elles doivent écraser ces dernières.

Excusez pour le retard pris à vous répondre et vous remercier de vos conseils. le problème est résolu. j'expérimente un gabarit n°8 d'Alsace créations, mais j'ai toujours le problème avec IE mais pour le menu droit que j'ai ajouté!
j'ai crée une feuille css spécifique pour IE mais le flottant gauche repousse le droit. Misère à galérer autant.
Si vous aviez quelques conseils..

Grand Merci
Bouzette


http://maquettefebus.ovh.org/projet2/index.html

Salut,

tout irait beaucoup mieux si tu supprimais les propriétés suivantes de #menud :
float:right
margin: 0pt 1px 10px 620px (en tout cas le 620px)
width:100%

bouzette a écrit :
j'expérimente un gabarit n°8 d'Alsace créations

Euh... les mots Alsace et Créations sont bien à l'origine du nom actuel mais ça date un peu !


Edit: les gabarits sont très biens pour partir d'une structure solide mais il n'est pas inutile de passer du temps à lire le guide du positionnement CSS.
Modifié par Heyoan (02 Jun 2009 - 23:45)

Ben oui Alsacreations ..

J'ai désactivé les propriétés que tu as citées et ajouté mais IE est pour le moins récalcitrant, et ça une journée que je m'acharne.
J'ai testé le clear right/left/both sur le flottant parent : aucun résultat positif non plus.
Je désespère!

bouzette a écrit :
J'ai désactivé les propriétés que tu as citées

La version en ligne est pourtant la même qu'avant.

Bonsoir,
j'ai fini par hacké le #menud pour cause de pb de lecture de feuilles de style (3), passé tout au crible même les droits des fichiers et repertoire, résultat médiocre :
- ds IE 6 le menu s'affiche correctement,
- ds IE 7 affichage partiel (chevauchement des 2 div (secondaire et menu)
- idem ds Mozilla Firefox, alors que ça s'affichait parfaitement auparavant.

Ce gabarit n°8 (colonnes factices) ne serait pas approprié puisque un tel menu vertical tout simple dans la colonne de droite, met à mal la présentation alors que le modele du gabarit lui même s'affichait parfaitement quelque soit le navigateur.
Merci de votre support.
Bouzette

bouzette a écrit :
j'ai fini par hacké le #menud

Ça veut dire quoi hacké pour toi ?

Sinon :

Heyoan a écrit :
tout irait beaucoup mieux si tu supprimais les propriétés suivantes de #menud :
float:right

Pourquoi l'avoir laissé ?

Pour moi hacké, ce dont j'ai parcour du moins sur un site récemment, c'est ajouter :
- " /" aux propriétés , ce spécifiquement pour IE,
- " !important" , ce specifiquement pour Mozilla.
Cela vient traduire que IE ne prend pas en compte :
- ni le float : right,
- ni width : 100%,
- ni le padding : 0;



#menud {
/height: 1%;
float: right ;!important
width: 100%; !important
margin : 0 1px 10px 620px;!important/* -> 6 *//* expression des marges : top right bottom left*/
padding: 0;!important
color:#FF4C00;
border: 1px dotted #FF4C00;/* provisoire*/
}

Hum... eh bien alors je te suggère d'arrêter de hacker !

Et STP voudrais-tu essayer au moins une fois de supprimer complètement les propriétés de menud comme je te le suggérais dans ce post ?

les propriétés sont supprimées et Eureka ça fonctionne ! mais je ne peux visualiser ds la foulé sur IE7.
J'ai la tête dure j'avoue !
Bon, et bien sincèrement merci de ton aide.
Bouzette

bouzette a écrit :
J'ai la tête dure j'avoue !

Je dois dire que ça m'a effleuré l'esprit !

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.