28220 sujets

CSS et mise en forme, CSS3

Float left, j'y arrive pas... [résolu]

J'ai écris: 

#cadre1 {
width:280px;
height:410px;
border:1px solid gray;
float:left;
}

#cadre2 {
width:515px;
height:302px;
border:1px solid gray;
}

<edit modo="Olivier">Tu peux éditer toi même tes messages pour corriger...</edit>

je voudrais qu'ils se placent l'un à côté de l'autre... mais ça ne marche pas. Pourquoi? En plus ça n'affiche pas les mêmes choses sur mozilla et sur IE. Pourquoi?

Merci.
Modifié par mathmax (04 Sep 2005 - 18:24)
Peut-être en déclarant un margin-left à ton #cadre2 ?

#cadre1 {
width:280px;
height:410px;
border:1px solid gray;
float:left;
}

#cadre2 {
width:515px;
height:302px;
border:1px solid gray;
[b][#blue]margin-left: 280px;[/#][/b]
}

Au passage, pourrais-tu baliser ton code proprement en utilisant le BBCode [ code][ /code] (sans les espaces) ?

Merci.
J'ai rajouté le margin-left mais ça ne résoud pas mon problème. Dans IE, le 2ème cadre est affiché en dessous...une autre idée?

Pour l'affichage du code, j'ai oublié de fermer la balise code. Désolé... Smiley confused
C'est bon. j'ai résolu mon problème (enfin partielement). Je m'explique: J'avais défini une largeur pour le body qui était trop petite. Du coup avec IE, le 2eme cadre passait en dessous du 1er.
En fait IE fait une marge entre les deux cardes. Ce qui fait qu'avec Mozilla les deux cadres tenaient dans la largeur du body, mais avec cette marge dans IE, ça ne tenait pas. Le problème que j'ai maintenant est de suprrimer cette marge dans IE. Je donne mon code html et CSS:


<body>
	<div id="cadre1"><p>cadre1</p></div>
	<div id="cadre2"><p>cadre2</p></div>
</body>




#cadre1 {
width:280px;
height:410px;
border:1px solid gray;
float:left;
}

#cadre2 {
width:515px;
height:302px;
border:1px solid gray;
margin-left: 280px;
}
mathmax a écrit :

Le problème que j'ai maintenant est de suprrimer cette marge dans IE.

C'est un bug connu.

The IE Three Pixel Text-Jog (en).

Ça peut être fixé à coup de « star html hack » cachés dans un « commented backslash hack ».

Pas très joli en fait :

#floatbox {
  float: left;
  width: 100px;
  }
 
p {
  margin-left: 110px;
  }
 
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #floatbox {
  margin-right: 10px;
  }
 
* html p {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */

Modifié par Stephan (17 Aug 2005 - 03:18)
Ok merci! J'ai recopié le code (à ceci pret que j'ai mis un -10 px pour le margin-left de * html #floatbox) et ça marche. Deux petites questions tout de même:

1/ ça veux dire quoi:
a écrit :

Ça peut être fixé à coup de « star html hack » cachés dans un « commented backslash hack ».


2/ Dans le code, ce sont les étoiles qui précisent que seul IE doit tenir compte de ces corrections?
Pour des raisons que je n'expliquerai pas ici, la synthaxe * html (star html) est un non-sens, donc les navigateurs modernes n'interprètent pas les déclarations visées par ce sélecteur. Sauf Internet Explorer.

Donc,

* html {seulement Internet Explorer voit ceci.}

Puis, en mettant un backslash dans un commentaire, IE/Mac ne voit pas les déclarations qui suivent :

/* Backslash dans un commentaire \*/
Internet Explorer version Mac ne voit pas ceci.
/* Fin du hack */

En combinant les deux « hack », on arrive à servir des déclarations pour Internet Explorer en excluant la version Mac.

/* Backslash dans un commentaire \*/
* html {seulement Internet Explorer Windows voit ceci.}
/* Fin du hack */

Je ne sais pas si c'est clair Smiley ohwell
Modifié par Stephan (17 Aug 2005 - 03:50)
Administrateur
mathmax a écrit :
Si merci! C'est parfaitement clair. Merci pour ces précisions!

Bravo, le sujet est [Résolu] ? Smiley smile

En passant, tu as Neuf sujets en attente dont personne ne sait s'ils sont résolus, oubliés ou en cours.
Merci de bien vouloir faire le ménage une fois pour toute.

EDIT : après vérification, merci de ne pas se croire au supermarché : on t'a déjà signalé ce débordement ! Smiley sweatdrop
http://forum.alsacreations.com/topic.php?fid=4&tid=6073&s=#p52994

Dernière chose : merci d'éviter à l'avenir de poster plusieurs fois la même chose :
- Positionnement en XHTML : http://forum.alsacreations.com/topic.php?fid=4&tid=6073&s=
- Positionner en XHTML : http://forum.alsacreations.com/topic.php?fid=1&tid=6019&s=
Modifié par Raphael (17 Aug 2005 - 15:12)
Bon maintenant j'ai un autre problème. Je voudrais cette fois ci placer 4 cadres de la manière suivantes. Le premier en haut à gauche, le deuxième flottant à droite du premier, le troisième flottant à droite du premier en dessous du second et le quatrième flottant à droite du troisième en dessous du second. (le premier étant d'une hauteur supérieur au second). (voir schémà ci dessous)

__________________________
| | 2 |
| | |
| 1 |------------------
| | 3 | 4 |
| | | |
--------------------------------

J'aimerais utiliser des float, mais là où j'ai des problèmes c'est pour placer les cadres 3 et 4. Une idée? Bon je sais le problème est un peu tordu, mais sincèrement j'ai besoin de faire ce type de mise en page...

Merci d'avance.
Bonjour,

As-tu pris soin de lire le message qui t'a été envoyé juste en dessus ?

Pour intégrer les positionnements, il y a de très bons tutoriels qui t'ont sûrement été indiqués et il faut s'y mettre une bonne fois pour toute en cogitant un peu tout seul ...
Sinon, tu vas toujours poser les mêmes questions ....

Allez, courage !

Smiley cligne
Modifié par Vero (18 Aug 2005 - 01:21)
Sujet clos
Aller à