28172 sujets

CSS et mise en forme, CSS3

Ben un peu d ' aide je séche sur du trés facile .....

Bonjour je veux rendre adjacents deux blocs en fait une image de 90x70 et un texte de hauteur variable au moins égale à l' image ...
POur la hauteur ok j' ai un hack qui simule min-height mais je me retrouve avec un probléme d' espacement de 10px dans la largeur que je comprends vraiment pas (sur ie6 bien sur) .
Le code : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Les Escapades d Yves </title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
<link rel="stylesheet" href="../styles/Cadre.css" type="text/css">
<link rel="stylesheet" href="../styles/Style.css" type="text/css">
<link rel="stylesheet" href="../styles/Tableaux.css" type="text/css">


<style type="text/css">


#colonnegauche {width:25%;height:90%; border-width:1px;border-style:solid;border-color:#000000;
position:absolute;left:0%;top:09%;margin-top:0px;overflow:auto;}

.image {display:block;width:90px;height:70px;background-color:red;
float:left;border:1px solid blue;}

.texte {display:block;background-color:green;height: auto;min-height: 70px;text-align:center;}

* html .texte {height: 70px;}/*pour ie6 seulement*/
</style>
</head>


<body class="fondwebmestre">
<div class="conteneur100">


<div id="colonnegauche">
<span class="image">

</span>

<span class="texte">
bla bla llllllllllllllll  llllfffffffff
</span>



</div>











</div><!--conteneur-->


 
</body>
</html>


J' ai essayé de mettre des margin à opx un peu partout mais rien à faire j' ai un espacement entre les deux blocs dans ie6,....et je craque! en plus iesforlinux me plante assez souvent)
MErci .
ps d' aprés les derniéres stats ie6 représente encore 20% des navigateurs sur mon site ...!
Modifié par yves (30 Nov 2008 - 19:08)
quirks alors !
que dois je choisir comme doctype (les entêtes sont générés par mon logiciel quanta) ?

et le reste du code ?
Modifié par yves (30 Nov 2008 - 21:25)
Hello,

Essaye déjà, comme le dit Florent, en changeant ton DOCTYPE pour en mettre un correct (voir Le tuto et Le Quircks).

Et sinon, une petite copie d'écran du problème ?
Modifié par mistike (30 Nov 2008 - 21:14)
Bàn je suis fatigué la .
je reprendrais ce fil demain soit aprés le boulot.
a plus .
si j' ai bien lu je dois rajouter "http://www.w3.org/TR/html4/loose.dtd" à tous mes doctypes n' est ce pas (pour rester en html4 transitional)?
Et ainsi ie6 interpréterait enfin les boites en ajoutant les bordures et padding dans le calcul de la largeur ?
Si c' est bien ça je tombe vraiment des nues à ce niveau !!!
yves a écrit :
si j' ai bien lu je dois rajouter "http://www.w3.org/TR/html4/loose.dtd" à tous mes doctypes n' est ce pas (pour rester en html4 transitional)?
Et ainsi ie6 interpréterait enfin les boites en ajoutant les bordures et padding dans le calcul de la largeur ?

Oui. Ça vaut pour IE (6, 7 et 8) mais aussi pour d'autres navigateurs qui utilisent le mécanisme de Doctype Switching. Mais les différences entre le mode de compatibilité (Quirks) et le mode standard sont beaucoup moins flagrantes avec les autres navigateurs. Smiley smile
Modifié par Florent V. (01 Dec 2008 - 22:16)
yves a écrit :
si j' ai bien lu je dois rajouter "http://www.w3.org/TR/html4/loose.dtd" à tous mes doctypes n' est ce pas (pour rester en html4 transitional)?


Salut,

Par curiosité, pourquoi est-ce que tu tiens à rester en HTML4 transitional ?
a écrit :
Salut,

Par curiosité, pourquoi est-ce que tu tiens à rester en HTML4 transitional ?


Ben parce que j' ai écris les pages en html 4 et que j' ai besoin de iframe pour "loger" jalbum .
je ferais le test quirks dés que possible ..
excusez moi j' ai été pris par d' autres préoccupations ...
Bon je viens de tester en rajoutant "http://www.w3.org/TR/html4/loose.dtd" ...
résultat dans ie6 : ..... plus rien du tout !!
Smiley biggol
Sujet clos
Aller à