[HTML] pb de positionnement float:right;

**Emcy38** · 22/08/2006, 11h04

bonjour,

http://cmarmonier.free.fr/voyages_im...01_paysage.htm

pourquoi, ma bordure droite jaune est male positionnée ?

**speedev** · 22/08/2006, 11h11

Heu je dis peut-être une bêtise mais si tu mets float:right, ton div "flottera" à droite. Ou alors j'ai rien compris, tu parles de la bordure rouge ou jaune? Car je remarque la bordure jaune est à droite de ta page...float:left?

**Emcy38** · 22/08/2006, 11h19

excuses moi, je voulais dire jaune et non pas rouge.

donc, je veux que la bordure jaune de droite soit collée au bloc blanc (je sais pas pourquoi mais il ne veux pas me la coller (on dirait qu'il y a une marge))

**speedev** · 22/08/2006, 11h21

change ton css en mettant ceci:

#bloc_droit
{
float: left;
margin: 0;
padding: 0;
color: black;
background-color: yellow;
height:600px;
width: 30px;
border: none;
}

J'ai juste mis float:left...

Ca ne change rien?

**Emcy38** · 22/08/2006, 11h30

c'est presque bon (j'ai modifié le fichier).

Regardes sous firefox, l'affichage est correcte par contre sous IE, il me met le bloc centrale en bas

**speedev** · 22/08/2006, 11h37

oui ça doit venir de tes bordures je pense. Car les bordures ne sont pas prises en compte dans les tailles. il te faut ajuster... réduis par exemple la taille de ton div central pour voir.

**Candygirl** · 22/08/2006, 11h38

Hello,

Je suppose que tu parles de la bordure droite jaune et non pas rouge ?

Tu ne donnes aucune dimension à ton div principal "page". Celui-ci s'étend donc sur toute la largeur de l'écran. Comme tu as mis ton bord droite en float:right celui-ci vas le plus à droite possible. Tu peux, par exemple, donner une taille à ton #page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#page {width:860px;}

mais tu risques quelques soucis sur IE.
Ou encore mettre bloc_image et droite en float:left et un clear:left sur le bas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#bloc_image {float:left;}
#bloc_droit {float:left;}
#bloc_bas {clear:left;}

bien sûr il faut alors placer bloc_droit après bloc_image dans ton html et enlever les marges de ton bloc_image

**Emcy38** · 22/08/2006, 12h08

je suis parti sur ta premiere solution.

j'en ai mare de ce IE de m... => c'est decidé, maintenant je programme uniquement pour FireFox : les internautes n'auront qu'a installer un navigateur qui respecte les standard W3C.

**Candygirl** · 22/08/2006, 12h19

Prends la deuxième et tu auras beaucoup moins de souci

Du moment que ton design est de taille fixe tu as bien meilleur temps de mettre tout en float. la technique des marges pour le corps central est surtout intéressante lors d'un design extensible pour éviter de donner une taille au corps.

**speedev** · 22/08/2006, 12h20

^^ mouais....oublie pas tout de même qu'environ 88% des internautes sont encore sous IE il me semble. et 10 à 15% de non IE.

Moi je développe désormais (depuis 2 mois seulement) entièrement en fonction du W3. J'ai purifier à 100% mon code (me suis bien pris la tête crois-moi) et mes 3 sites sont enfin compatibles sur toute plate-forme et sans la moindre différence de présentation, si ce n'est une infime et très légère différence de padding (disons de 2px à peine) non visible à l'oeil nu entre IE et mozilla.

Et je trouve qu'entre IE et Mozilla, l'interprétation du W3 se vaut. Parfois, mozilla se débrouille mal....parfois c'est IE...

Tu devrais sérieusement tenter de développer une appli compatible toute plate-forme, les outils du net, les forums peuvent t'aider largement pour ça!

**speedev** · 22/08/2006, 12h36

Autre chose, je ne vais pas te dire de refaire ton code en te proposant telle ou telle solution vu que tu m'as l'air bien parti pour développer une structure de ton site.

Cela dit je te propose comme candygirl de fixer une taille maximale de ton site. Fais en sorte déjà que ton site soit au moins compatible pour les résolutions courantes (1024*768 px). Et il est préférable d'éviter un site auto-déformable avec les fameux "%" dans le CSS. Mieux vaut qu'il soit d'une taille unique sur chaque plate-forme.

Tchaw!

**Emcy38** · 22/08/2006, 13h51

vu que le nouveau IE va bientot sortir, normalement je ne devrais plus avoir de probleme non ? => donc est-ce que ça vaut vraimment le coup de tout avoir à réécrire alors que dans quelques mois, tout le monde va passer à la nouvelle version

**speedev** · 22/08/2006, 13h54

tout le monde? haaa je ne crois pas....

"Mozilla grignote tranquillement son rival IE" : titre d'article informatique sur le net...

Malgré tout, beaucoup de gens passent à mozilla. Même si IE s'exprime à 88%.

C'est toi qui voit...mais par tranquillité d'esprit et pour ne pas avoir d'ennui plus tard, un petit redéveloppement ne fera pas de mal d'autant que ça peut te simplifier la tache de te fier au w3.

**Candygirl** · 22/08/2006, 14h17

Envoyé par Emcy38

vu que le nouveau IE va bientot sortir, normalement je ne devrais plus avoir de probleme non ? => donc est-ce que ça vaut vraimment le coup de tout avoir à réécrire alors que dans quelques mois, tout le monde va passer à la nouvelle version

Malheureusement non, il faudra compter encore un moment avec IE6 je crains. Du moment que tu commences ton site, autant le penser de manière à ce qu'il passe correctement sur IE6 ce que fait, par exemple, le 2ème montage que je t'ai proposé.

Après, comme relevé par speedev la structure va dépendre de ce que tu comptes mettre dedans. Avec une largeur de 30px, je doute que tes côtés servent pour un menu ? S'ils sont juste là pour mettre de la "déco" ils n'ont peut-être pas forcément leur raison d'être...

**Emcy38** · 22/08/2006, 14h27

bon j'ai tout changé en absolu (je ne voulais pas changer le code html).

Mais ce que je ne comprends pas c'est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#bloc_gauche
{
	position: absolute;
	top: 60px;
	left: 40px; 
	margin: 0;
	padding: 0;
	color: black;
	background-color: yellow;
	height:600px;
	width: 30px;
	border: none;
}
 
#bloc_image
{
	position: relative;
	top: 20px;
	left: 30px; 
	/* margin: 0px 0px 0px 30px; /* respectivement la marge du haut, de la droite, du bas, de la gauche */
	padding: 0;
	color: black;
	background-color: white;
	height:600px;
	width: 800px;
	border: none;
}

comment se fait-il pour la propriété left, la valeur de #bloc_gauche soit plus grande que celle de #bloc_image ? si j'ai bien compris, l'origine de la coordonée se situe bien au bord au gauche de la page web pour les deux blocs non ?

**Candygirl** · 22/08/2006, 15h01

Envoyé par Emcy38

bon j'ai tout changé en absolu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#bloc_image
{
	position: relative;
}

Tout n'est pas en asbolu puisque ton bloc_image est en relative

En relative, bloc_image est déplacé depuis la position qu'il occupait dans le flux.

**Emcy38** · 22/08/2006, 15h07

ah le sale oubli.
merci

**speedev** · 22/08/2006, 15h13

Je dirai juste, change le css, change l'html, change tout en suivant le tutoriel que je t'ai laissé, t'en as pour qlq minutes et ça te falicilitera la tache crois-moi.

**Emcy38** · 24/08/2006, 17h00

resalut,

là, je suis entrain de reconcevoir mon site, j'ai fait quelques tests :
http://cjoint.com/?iyq4DyU5u3

comment faire pour que mon bloc de new apparaisse à droite de mes blocs jaunes ?

[HTML] pb de positionnement float:right;

HTML

Discussions similaires

Partager

Partager