[HTML/js] Hauteur d'un bloc <div> sous Mozilla

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/js] Hauteur d'un bloc <div> sous Mozilla

sephiburp

j'ai 2 <div> imbriqués :

Code :

<div class="bloc1">
<div>pouet</div>
</div>

Voici la classe CSS :

Code :

.bloc1 {
border: 1px solid #777763;
height: 35px;
}
.bloc1 div {
display: inline;
list-style-type: none;
padding: 0px 35px;
border: 1px solid #DDDDDD;
height: 35px;
}

Je veux fixer la hauteur de tous les <div> contenus dans 'bloc1' à 35 pixels. Sous IE, pas de problème. Mais avec d'autres naviguateurs comme Mozilla, çà veut pas !
Quelqu'un a une solution ?

Un exemple ici --> YEP
-> Sous IE le cadre blanc fait bien 35 pixels de hauteur, mais sous Mozilla il est plus petit.

Si on enlève le "display: inline", çà résoud le problème. Mais j'ai besoin de cette propriété, je l'utilise pour mettre une liste (<ul> ; boite en bloc par défault) en ligne.

Thx

Publicité

fastclemmy

(re-)Dictateur en plastique

En effet c'est à cause du inline. Mais tu peux l'enlever et l'appliquer juste à ton <ul> plutôt qu'à ton <div> non ?

Message édité par fastclemmy le 20-02-2004 à 12:35:14

cerel

Si tu mets le 2e div en inline, alors ensuite la hauteur de ce dernier est la hauteur de la ligne... Don c'est normal que la propriete "height" se soit pas prise en compte. A la limite tu peux essayer avec "line-height"...

De plus la propriete "list-style-type: none;" est pour les listes par pour les divs...

Comme l'a dit fastclemmy, il vaudrait mieux laisser ce div en "block" et appliquer les proprietes voulues a ta liste....

PS : Je suis pas sur a 100% de mes propos, j'espere n'avoir pas dit une betise grosse comme un camion...

sephiburp

yep il vaut mieux que j'applique les propriétés à la liste. Mais toujours le même problème grrr.

et line-height ne donne malheureusement pas le résultat attendu.

Code HTML :

Code :

<div class="test">
<ul><li>AAA</li>
<li>BBB</li>
<li>CCC</li></ul>
</div>

CSS :

Code :

.test {
border: 1px solid #777763;
height: 80px;
}
.test ul{
border: 1px solid #96FD3B;
margin: 0;
padding: 0;
height: 60px;
}
.test li{
border: 1px solid #DDDDDD;
display: inline;
list-style-type: none;
padding: 5px 5px;
height: 40px;
}

- L'exemple ICI -
--> Notez que sur IE çà fonctionne, mais sous Mozilla non
De plus, les cadres blancs <li> sont décalés vers le haut sur Mozilla.

Message édité par sephiburp le 20-02-2004 à 13:43:49

cerel

Je te conseille d'aller faire un tour sur ces deux sites :

http://openweb.eu.org
http://www.alsacecreations.com/articles

Je te propose notament la lecture de cet article :
http://www.alsacreations.com/articles/menu/
Dont tu peux voir un exemple ici :
http://www.alsacreations.com/artic [...] smenu2.htm

sephiburp

Yes ! apparament je vais pouvoir trouver ma solution

merci beaucoup Cerel, je connaissais pas ce site, il a l'air bien foutu

Edit : yep, le truc c'est d'utiliser un mode block et non en ligne, avec un float: left;

:bounce:

Message édité par sephiburp le 20-02-2004 à 16:41:46

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/js] Hauteur d'un bloc <div> sous Mozilla

Sujets relatifs
[CCS HTML] Le dashed et le IE	Cacher du texte à l'impression HTML
[HTML/JS ?] Fenetre d'avertissement spéciale. Comment faire ?	[php/mysql] Stocker un texte avec mise en forme et tag html [ok]
[HTML] comment faire ce type de frame ? enfin de page plutot ...	différence php-html
[VBA Excel] Comment incorporer une frame html dans un UserForm ?	[HTML] Outil de compactage des pages HTML
[HTML] afficher une image qui se trouve a une certaine URL	[HTML/JS] petit soucis d'espace sous une image
Plus de sujets relatifs à : [HTML/js] Hauteur d'un bloc <div> sous Mozilla

Page générée en 0.032 secondes