[HTML & CSS] Positionnement DIV

**Yoshidu62** · 25/04/2006, 15h27

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/

**hebus73** · 25/04/2006, 15h49

pour utiliser float il faut utiliser position:relative ou absolute

**Yoshidu62** · 25/04/2006, 15h58

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.

**hebus73** · 25/04/2006, 16h03

tu doit faire casur id="banniere":
position:relative;
float:left;

**Yoshidu62** · 25/04/2006, 16h07

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.

**hebus73** · 25/04/2006, 16h09

attention tu a 2 ;

background-image : url(images/bangauche.png);;

**Yoshidu62** · 25/04/2006, 16h14

C'est pas ça

Qu'est-ce qui peut bien créer cet espace entre les div?

**hebus73** · 25/04/2006, 16h17

tu peu avoir des margin ou des padding
Si tu veux pas t'embeter avec ca, tu peux faire ca:
* margin :0;
* padding : 0;

**Yoshidu62** · 25/04/2006, 16h24

J'ai mis

* {
margin : 0;
padding : 0;
}

au début de mon css mais ça ne change rien

**hebus73** · 25/04/2006, 16h29

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

<!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>

**Yoshidu62** · 25/04/2006, 16h32

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

**hebus73** · 25/04/2006, 16h44

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 :

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
<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>

**marsupix** · 25/04/2006, 16h46

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 :

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

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 :

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

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 :

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
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

**Yoshidu62** · 25/04/2006, 16h56

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.

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...

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 :

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

1
2
3
#banniere1, #banniere2, #banniere3, etc{
...
}

Correct! je corrige

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

**marsupix** · 25/04/2006, 16h58

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...

**Yoshidu62** · 25/04/2006, 17h09

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.

**Yoshidu62** · 25/04/2006, 20h35

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

**ilood** · 25/04/2006, 21h40

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 :

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

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 :

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
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>

**Yoshidu62** · 25/04/2006, 23h00

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.

**ilood** · 25/04/2006, 23h26

C'est justement pour ça que je te dis de jouer avec les padding-left, pour obtenir cette courbe.

[HTML & CSS] Positionnement DIV

Positionnement en CSS

Discussions similaires

Partager

Partager