28220 sujets

CSS et mise en forme, CSS3

Problème entre l'attribut float et ie

Bonjour à tous,

Je repose ici une question postée dans le topic "min-width et ie" car elle n'avait aucun rapport avec le sujet.

Remettre l'ensemble des codes ne servira à rien donc je vous conseille d'aller voir la page suivante pour mieux comprendre le problème : http://kellibickman.net/kelli.php

Dans le header, l'image d'une tête (en haut à gauche) est là grâce l'attribut "float: left" (c'est d'ailleurs le seul attribut qui lui est propre).

Tout marche bien sur firefox, mais sous ie, l'image ne se colle pas tout à fait à gauche et l'image d'après (celle avec "kelli bickman" et qui a aussi l'attribut float: left) est décalée aussi (du même espace multiplié par 2, car il y a l'espace qui suit l'image 1 et celui qui précède l'image 2) et il y a le même espace à la fin de cette image. Pour résumé, l'image est entourée à doite et à gauche d'une zone de "on ne rentre pas!".

Pourquoi, monde cruel?

Je remercie tout le monde d'avance, car, ayant acheté une corde et un tabouret ce matin, il est possible que je ne sois plus là pour vous remercier. Smiley biggrin

PS : J'ai essayé de mettre un border="0" et ça n'a rien fait.

Si personne n'a de solution à ce problème, je pense revenir à la bonne vieille solution de l'insertion d'un tableau (width="100%" dans la div header, avec trois cases à taille fixe : la tête (width="100px"), le nom de l'artiste (width="301px") et les petits bonzommes (le menu avec width="408px") et une case tampon entre les deux dernières (largeur non défini).
Modifié par korben (04 Nov 2005 - 16:38)
salut

ouhhh quel code affreux Smiley eek
déjà je ne saurai que trop te conseiller de nettoyer tout ca : balises en minuscules, alt corrects, pas de sauts de lignes malheureux, etc...

ensuite, je pense qu'il faudrai repartir sur une structure plus saine
il faudrai voir en fonction de tes besoisn : quelles tailles sont fixes, quels éléments seront à adapter au contenu, etc etc.

Essaye de définir tout ça
Sinon voici une structure certes fixe et pas du tout modulable mais au moins les éléments sont en place

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
body{width:600px;}
#topleft{
background-color:#FFFFCC;
width:100px;
height:100px;
float:left;
}
#topbar{
background-color:#0099FF;
float:left;
width:500px;
height:100px
}
#leftbar{
background-color:#CCCCCC;
clear:both;
float:left;
height:400px;
width:100px;
}
#barblack{
background-color:#000000;
width:15px;
float:left;
height:400px;
}
#maincontent{
background-color:#993333;
float:left;
height:400px;
width:485px;
}
</style>
</head>
<body>
<div id="topleft">topleft</div>
<div id="topbar">topbar</div>
<div id="leftbar">leftbar</div>
<div id="barblack"></div>
<div id="maincontent">main content</div>
</body>
</html>
Merci pour ta réponse.

Je vais améliorer le code dès que je le peux (en enlevant tous les passages à la ligne, si tu dis que c'est cela qui pose les problèmes). Par contre, toutes les balises sont déjà en minuscules (sauf les <br>, il est vrai).

Quant à la structure, si des éléments se superposent, c'est paar ce que c'est la seule solution : si je veux que le header ait la largeur de la fenêtre ET une hauteur fixe, et que la barre de gauche ait une hauteur proportionnelle ET une largeur fixe, je suis obligé de m'arranger pour que les deux aient une hauteur (ou une largeur) égale à 100%. Donc ils se chevauchent! La seule autre solution, à ma connaissance, c'est de définir la largeur du header par l'expression :
a écrit :
expression(document.body.clientWidth - 100)

et de faire prendre toute la hauteur à la barre de gauche. (merci à Xavier pour la solution)

Je vais essayer de réécrire la structure en fonction de cela... et je croise les doigts pour que cela marche car Firefox a quelques problème avec la comptabilité de cette expression et de overflow: auto (cf mon autre topic).
Sujet clos
Aller à