[HTML & CSS] Positionnement DIV

Version imprimable

25/04/2006, 15h27
Yoshidu62

[HTML & CSS] Positionnement DIV

Bonjour, alors voilà j'ai un petit souci avec le postionnement de bloc div, sous firefox tout est propre mais sour internet explorer rien ne va, j'ai un souci avec un bloc positionné en float et un autre avec un espace entre des div.

Je vous met un lien vers la page pour que vous puissez tester ça.

http://www.yoshiworld.info/test/
25/04/2006, 15h49
hebus73

pour utiliser float il faut utiliser position:relative ou absolute
25/04/2006, 15h58
Yoshidu62

J'ai essayé avec les 2 mais ça ne fonctionne pas, je suis pas sur de bien m'en servir donc si tu as une idée?

Merci.
25/04/2006, 16h03
hebus73

tu doit faire casur id="banniere":
position:relative;
float:left;
25/04/2006, 16h07
Yoshidu62

Merci j'ai bien réglé le problème du float, mais j'ai toujours un souci avec mes div de mon menu (presentation, etc...) y a des espaces entre elles sous ie, une idée?

Merci.
25/04/2006, 16h09
hebus73

attention tu a 2 ;

Citation:

background-image : url(images/bangauche.png);;
25/04/2006, 16h14
Yoshidu62

C'est pas ça :cry:

Qu'est-ce qui peut bien créer cet espace entre les div? :roll:
25/04/2006, 16h17
hebus73

tu peu avoir des margin ou des padding
Si tu veux pas t'embeter avec ca, tu peux faire ca:
* margin :0;
* padding : 0;
25/04/2006, 16h24
Yoshidu62

J'ai mis

* {
margin : 0;
padding : 0;
}

au début de mon css mais ça ne change rien :cry:
25/04/2006, 16h29
hebus73

J'ai fai ca en test et ca marche bien sous ie et firefox
Par contre di moi si tu a mis a jour ta page avec le lien pour essayer de résoudre ton prob

Citation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Sans titre</title>
<style>
.cont1
{
position:relative;
float:left;
background-color:red;
width:70%;
height:50px;
}
</style>
</head>

<body>
<div class="cont1">
sdf
</div>
<div>dsfs</div>
<div>fsdf</div>

</body>
</html>
25/04/2006, 16h32
Yoshidu62

Je viens de mettre jour la page de mon lien, normalement il ne devrait plus y voir le pb de float sous ie, il ne reste plus que l'écart entre les div à régler.

http://www.yoshiworld.info/test/

Merci pour ton soutien :lol:

C'est bizarre je n'ai jamais eu ce problème.
J'ai rajouter ca dans le test que j'ai fait si ca peut t'aider. En tout cas je n'ai toujours pas de prob
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <style> .cont1 { position:relative; float:left; background-color:red; width:70%; height:50px; } div{ border: 1px solid blue; } </style> </head> <body> <div class="cont1"> sdf </div> <div>dsfs</div> <div>fsdf</div> <div>dsfs</div> <div>fsdf</div>

alors la question que j'vais te poser est surement hors topic mais:
pourquoi tu met ton texte en image?
tu pourrai très bien faire pareil mais sans le texte et écrire ton texte en html (et changer la couleur au :hover en css, ça marchera meme sous IE car c'est sur un lien...)
résultat affiche la apge sans style sous firefox et tu vois tes images de menu alors que tu devrait avoir des liens textuels normaux...

Idem pour ton image de fond de bannière:
pourquoi tu n'a pas mis simplement une couleur de fond background-color ?...

dans le meme style, tes ID bannière1, 2, 3 etc ont tous les memes propriétés alors pourquoi des ID différents ? fait une classe "bouton_bannière" que tu met à chaque bouton, ou au moins regroupe les en mettant:
Code:

1 2 3 #banniere1, #banniere2, #banniere3, etc{ ... }
et enfin qui devrait résoudre ton problème:
tu as bien mis margin:0 à bannière1 mais pas aux autres.

EDIT si tu veut savoir coment je ferais ce menu:
html
Code:

1 2 3 4 5 6 7 8 9 <div id="banniere"> <ul id="menu"> <li id="presentation">Présentation</li> <li id="formation">Formation</li> <li id="recrutement">Recrutement</li> <li id="client">Esapce Client</li> <li id="contact">Contact</li> </ul> </div>
css
Code:

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 28 29 30 *{ margin:0; padding:0; } #banniere{ background-color:#3232A6; width:500px; height:200px; } #menu{ float:right; width: 280px ; } #menu li a{ display:block; height:40px; color:#FFF; text-indent:30px; } #menu li a:hover{ color:#F3A549; } // images #presentation{ background-image:...; } #presentation:hover{ background-image:...; } etc

25/04/2006, 16h56
Yoshidu62
Citation:

Envoyé par marsupix

alors la question que j'vais te poser est surement hors topic mais:
pourquoi tu met ton texte en image?
tu pourrai très bien faire pareil mais sans le texte et écrire ton texte en html (et changer la couleur au :hover en css, ça marchera meme sous IE car c'est sur un lien...)
résultat affiche la apge sans style sous firefox et tu vois tes images de menu alors que tu devrait avoir des liens textuels normaux...

J'y avais pensé mais comme le texte suit la courbe, je ne voyais pas trop comment faire pour le placer alors j'ai utilisé le javascript.

Citation:

Envoyé par marsupix

Idem pour ton image de fond de bannière:
pourquoi tu n'a pas mis simplement une couleur de fond background-color ?...

La bannière n'est pas finie, ce n'est pas simplement une couleur, il y aura des image dessus etc...
Citation:
Envoyé par marsupix

dans le meme style, tes ID bannière1, 2, 3 etc ont tous les memes propriétés alors pourquoi des ID différents ? fait une classe "bouton_bannière" que tu met à chaque bouton, ou au moins regroupe les en mettant:

Code:

1 2 3 #banniere1, #banniere2, #banniere3, etc{ ... }
Correct! je corrige :mouarf:

Citation:

Envoyé par marsupix

et enfin qui devrait résoudre ton problème:
tu as bien mis margin:0 à bannière1 mais pas aux autres.

Déjà essayer et ça ne règle pas mon souci :cry:
25/04/2006, 16h58
marsupix

j'ai édité ;)
en fait avec les <a> en display block t'as meme pa besoin de <li>, et donc remplace le <ul> par une <div> et met les liens en display:block;

Je pense qu'une bonne lecture de ceci t'aidera car il semble qui tu ne sache pas encore utiliser les bons "outils" pour faire ce que tu veux...
25/04/2006, 17h09
Yoshidu62

Mais est-ce qu'avec cette méthode je réussirais à placer le texte le long de la courbe, ils sont pas alignés, à la base c'est pour ça que j'ai fait du javascript.
25/04/2006, 20h35
Yoshidu62

Pas de réponse........je vais devoir reprendre la bonne vieille méthode du tableau alors :aie:

Salut

Marsupix a raison. Met ton texte dans le html et tes effets d'image rollover dans le css. Son code source à base de <li> te mache 90% du boulot.

Pour l'effet de courbe joue avec des valeurs decrescendo des padding-left sur les id de chaque section

Code:

1
2
3
4
5
6
7
8
li a #presentation {
padding-left: 250px;
}
li a #formation {
padding-left: 200px;
}
...
etc.

edit: plus précisement

Code:

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
28
<style type="text/css">
li a {
    display: block;
    height: 40px;
    line-height: 40px;
}
li#presentation a {
    padding-left: 110px;
    background: url(banbleu1.png) no-repeat;
}
li#presentation a:hover {
    background:  url(banorg.png) no-repeat;
}
 
.....
 
</style>
</head>
 
<body>
<ul id="menu">
  <li id="presentation"><a href="#">Présentation</a></li>
  <li id="formation"><a href="#">Formation</a></li>
  <li id="recrutement"><a href="#">Recrutement</a></li>
  <li id="client"><a href="#">Esapce Client</a></li>
  <li id="contact"><a href="#">Contact</a></li>
</ul>
</body>

25/04/2006, 23h00
Yoshidu62

Oui j'ai bien compris cette technique, mais le problème c'est que le texte dans le html va être aligné, l'un en dessous de l'autre, mais dans mon cas le texte n'est pas vraiment aligné, il suit une courbe (voir le lien que j'ai donné avant), donc je ne peux pas faire comme ça, il faut que je puisse positionner correctement mon texte pour qu'il suive la courbe. :roll:
25/04/2006, 23h26
ilood

C'est justement pour ça que je te dis de jouer avec les padding-left, pour obtenir cette courbe.
25/04/2006, 23h35
Yoshidu62

oupsss j'avais pas vu :oops:

Bon je teste ça demain et je vous tient au courant, merci!!!!!!
26/04/2006, 10h58
Yoshidu62

Alors j'ai refais tout mon menu avec <ul> et <li> c'est déjà plus propre, mais maintenant j'ai deux autres souci :

1 - un problème à cause du padding-left qui n'est pas traité de la même façon sous ie et ff

2 - je n'arrive pas à changer la police de mes liens 8O

Si vous pouviez y jeter un oeil, merci.

http://www.yoshiworld.info/test/
26/04/2006, 11h04
hebus73

essay de mettre du css sur ul en enlevant tt les margin et padding
26/04/2006, 11h06
Yoshidu62

Qu'est-ce que tu veux dire par mettre du css? :koi:
26/04/2006, 11h22
hebus73

ul{ margin=0; padding=0; }
26/04/2006, 11h41
Yoshidu62

J'ai réussi à régler le souci, merci :D

Reste plus que le problème de police, impossible de changer la police de mes liens, j'ai mis font-family:arial, un peu partout et rien à faire ça ne change pas (j'ai testé avec autre chose que arial au cas où j'étais en arial par defaut :lol:)

Une idée?
26/04/2006, 11h45
hebus73
1. tul'a rajouter dans le li a ?
26/04/2006, 11h46
hebus73

par contre tu a vu que dans firefox tu a une scrollbar en bas?
26/04/2006, 11h55
Yoshidu62

La scrollbar disparait quand je règle le problème de padding donc c'est bon.

Mais pour la police oui je l'ai bien mis dans li a{}; mais rien à faire ça ne change pas. :cry:
26/04/2006, 11h58
hebus73

et sinon tu a testé dans le body ?
26/04/2006, 12h07
Yoshidu62

Bon je retire ce que j'ai dis en fait ça fontionne dans le li a, c'est sur ma machine qu'y a un souci, je suis sous ubuntu et je sais pas pourquoi la police ne change pas, j'ai testé sur un poste windows avec ie et ff, les polices changent correctement :P

Par contre sous ff je suis bien centré au milieu (ma banniere), alors que sous ie je ne suis pas vraiment au milieu, une idée?

je vais mettre à jour mon lien pour que tu ai un aperçu.

http://www.yoshiworld.info/test/
26/04/2006, 12h17
hebus73

je mettrai ta bangauche et ton menu dans un div avec la taille de ta ban+ton menu et je centre le tout
26/04/2006, 12h26
Yoshidu62

Fonctionne pas :? sous ff c'est toujours nickel mais sous ie ça change rien
26/04/2006, 12h32
hebus73

arrffff je commence a etre en manque d'inspiration !!

tu peu essayé ca :

<center> <div>bangauche</div> <ul>menu</ul> </center>

Par contre en fesant ca ca va tout te centrer donc il faudra que tu rajoute a ton css du menu un alignement a gauche

C'est un peut crado mais ...
26/04/2006, 12h41
Yoshidu62

Même en utilisant <center> ça ne fonctionne pas, je commence à désespérer là :roll:, le texte se déplace centre bien mais la banniere bouge pas d'un poil.
26/04/2006, 12h46
hebus73

pourquoi tu met ton body a 780 px alors que c'est la somme de ta banniere gauche et de ton li?

Ca peu peu etre etre ca...
26/04/2006, 13h25
Yoshidu62

Je comprends pas en quoi ça gêne.......j'ai toujours fait comme ça :?
26/04/2006, 15h18
marsupix

j'suis pomé dans la soupe là mdr
pour ta police c'est p'tetre simplemnt que Arial est une police Micro$oft... et donc elle est pas sous linux à la base.

pour décaler tes textes c'est bien mieux avec text-indent (indentation) que avec des padding-left, car IE et Firefox ne gèrent pas pareil les marges, padding etc...
26/04/2006, 17h14
Yoshidu62

Enfin!!! j'ai enfin réussi à faire ce que je voulais, j'ai mis les liens dans un <div>, et j'ai utilisé le conseil de marsupix avec le text-indent, et là j'ai réussi à obtenir le bon résultat.

Merci à vous tous qui m'avez aidé, je ne manquerais pas de revenir en cas de souci :mouarf: