Remplacer un tableau par des div... Height 100% ??

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Remplacer un tableau par des div... Height 100% ??

Arjuna

Aircraft Ident.: F-MBSD

Structure :

Je veux que les 4 divs "menu_block" soient les uns à côté des autres. Ca c'est fait.
Ensuite, je veux que ces 4 divs fassent la même hauteur... Comment faire, sâchant que :
-> La taille maximale des divs dépends du plus gros d'entre eux.
-> Cette taille est inconnue, et je ne peux pas la fixer (dynamique)

Actuellement niveau css, j'ai ça :

#menu
{
position: absolute;
top: 75px;
left: 0px;
width: 736px;
background-color: #f5f5f5;
}

.menu_block
{
border-right: #aaaaaa 1px solid;
float: left;
width: 184px;
display: block;
padding: 10px;
border-bottom: #aaaaaa 1px solid;
height: 100%;
}

Mais le height: 100% n'est pas pris en compte, auto marche pas mieu.

Message édité par Arjuna le 02-06-2004 à 15:33:44

Publicité

Arjuna

Aircraft Ident.: F-MBSD

OK, dans #menu, si je mets "height: 1px;" ça marche... Sous IE 6.0 SP1 du moins. Mais bon, si possible un truc pas porc c'est mieu (et qui marche sous IE 5 et ultérieur par contre, moz c'est bien, mais c'est pas la cible du site)

Arjuna

Aircraft Ident.: F-MBSD

En l'absence de réponse, j'ai utilisé la bidouille à 1px (haha)

Par contre, maintenant j'ai un autre problème...

x divs les un derrières les autres, dans un div plus grand.
Les divs font 50% en largeur.

Avec un align float:left

Le but : Afficher de façon "sexy" des news sur deux colonnes.

Problème : Si la news 1 est grosse, puis deux petites, les deux petites se mettent bien à droite de la grosse.
Mais si la 1° est un peu plus petite que la seconde, alors la troisième se met sous la seconde (à droite), et la quatrième se met tout en dessous à gauche, au niveau du bas de la 3°... Il me reste donc un énorme trou blanc entre la news 1 et la news 4 (spa clair, désolé, vous verrez mieu là)

http://perso.wanadoo.fr/magicbuzz/ge/default.htm

Flyman30

Arjuna a écrit :

y a comme un soucis d'affichage avec Mozilla :sweat:

Hermes le Messager

Breton Quiétiste

Dans ce cas précis, l'organisation est visiblement tabulaire donc --> tableau.

Arjuna

Aircraft Ident.: F-MBSD

Hermes le Messager a écrit :

Dans ce cas précis, l'organisation est visiblement tabulaire donc --> tableau.

ça changera rien à mon problème. Si j'ai une news de 50 lignes et à côté une news de 5 lignes, je vais avoir un trou énorme avant l'apparition de la ligne du tableau suivante, ce que je veux justement éviter. En fait, je veux un affichage naturel, comme ce qu'on peut avoir dans une page de journal : des colonnes les unes à côté des autres, et les paragraphes qui ne sont pas en face les uns des autres, et de taille différente (par contre, évidement, je ne tiens pas à couper une news en deux pour avoir un affichage "pile poil", juste une ventillation correcte des news entre les deux colonnes... Y'a vraiment pas moyen de faire ça ?

Arjuna

Aircraft Ident.: F-MBSD

Flyman30 a écrit :

y a comme un soucis d'affichage avec Mozilla :sweat:

http://files.shawt.net/users/Flyman30/magic.png

Ouais en effet, il va falloir que je regarde ça.
Mais d'un autre côté, le site actuel merde à 100% avec tout ce qui n'est pas IE, et aucun client ne s'en est jamais plainds, simplement parcequ'ils sont tous sous IE. A partir de là, je tiens pas à m'éterniser sur l'affichage sous Moz, je préfère obtenir un résultat léché sous IE et un truc tout pas beau sous Moz, plutôt qu'un truc moyen qui passe partout (sinon je le fait en HTML 2.0 ça va être rapide :whistle: )

Hermes le Messager

Breton Quiétiste

Arjuna a écrit :

heu, là, je t'arrête, tu dis n'importe quoi. Tout ce que l'on peut faire avec IE, on peut le faire sous Moz ou opera....

gm_superstar

Appelez-moi Super

Arjuna a écrit :

Je veux que les 4 divs "menu_block" soient les uns à côté des autres. Ca c'est fait.

Pas de "_" dans le nom des classes. Utilise le trait d'union.

Arjuna a écrit :

Ensuite, je veux que ces 4 divs fassent la même hauteur... Comment faire, sâchant que :
-> La taille maximale des divs dépends du plus gros d'entre eux.
-> Cette taille est inconnue, et je ne peux pas la fixer (dynamique)

C'est une limitation des DIV... Il n'y a pas tellement de solution si ce n'est de ruser avec une image de fond qui-va-bien appliquée au DIV conteneur...
Utiliser pas un tableau n'est pas spécialement choquant vu que tu as un intitulé et un menu correspondant, ça se rapproche des données tabulaires.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

Arjuna a écrit :

Y'a vraiment pas moyen de faire ça ?

Non.

Edit: ou alors faut monter une usine à gaz en JS...

Message édité par gm_superstar le 02-06-2004 à 20:37:50

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Publicité

Arjuna

Aircraft Ident.: F-MBSD

C'est relou... Bon, ben ça va finir par un truc pourri quoi...

Franchement au W3C ils pourraient penser depuis tout ce temps que l'affichage en colone ça peut être utile... N'importe quel traîtement de texte sous MS-DOS le gère depuis 10 ans :sweat:

Arjuna

Aircraft Ident.: F-MBSD

gm_superstar a écrit :

Pas de "_" dans le nom des classes. Utilise le trait d'union.

C'est une limitation des DIV... Il n'y a pas tellement de solution si ce n'est de ruser avec une image de fond qui-va-bien appliquée au DIV conteneur...
Utiliser pas un tableau n'est pas spécialement choquant vu que tu as un intitulé et un menu correspondant, ça se rapproche des données tabulaires.

Pas bien compris ton histoire d'image de fond... Elle vient faire quoi là-dedans ?

PS: je parle bien des 4 blocks en bas hein, pas des menus en haut, eux ils sont ok, y'a pas de problème avec, ils font ce que je veux.

foxcssfox

The design of CSS...

Je pense que tu te compliques trop la vie ARJUNA : ou tu fais des tableaux ou tu fais des blocs... Si tu fais des blocs, ne pense plus en "tableau" : ton code HTML pourrais être beaucoup plus simple :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>TEST BLOC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
<!--
/*************************
****** les titres*********
*************************/
h3{
font-size: 17px;
color : #FFF;
text-align : center;
margin: 0;
}
#rouge h3{background-color: red;}
#vert h3{background-color: green;}
#bleu h3{background-color: blue;}
#jaune h3{background-color: jaune;}
/*************************
****** les blocs*********
*************************/
#rouge,
#vert,
#bleu{
width: 200px;
float: left;
}
#jaune{
border-left: 1px solid Yellow;
}
#rouge{
border-left: 1px solid red;
}
#vert{
border-left: 1px solid green;
}
#bleu{
border-left: 1px solid blue;
}
/*************************
****** les listes*********
*************************/
ul {
list-style : none;
}
/*************************
****** les liens*********
*************************/
a, a:link, a:visited, a:active{
text-decoration: none;
font-weight: bold;
}
a:hover{
text-decoration: underline;
color: black;
}
#rouge a:link, #rouge a:visited, #rouge a:active{color: red;}
#bleu a:link, #bleu a:visited, #bleu a:active{color: blue;}
#vert a:link, #vert a:visited, #vert a:active{color: green;}
#rouge a:hover,
#bleu a:hover,
#vert a:hover{color: black;}
--!>
</style>
</head>
<body>
<div id="general">
<div id="rouge">
<h3>TITRE 1</h3>
<ul>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
</ul>
</div>
<div id="vert">
<h3>TITRE 2</h3>
<ul>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
</ul>
</div>
<div id="bleu">
<h3>TITRE 3</h3>
<ul>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
<li><a href="page1.html"><span>lien1</span></a></li>
</ul>
</div>
</div>
</body>
</html>

Voila, j'ai fait ça vite fait, pour aider certains d'entre vous à comprendre les CSS

Message édité par foxcssfox le 02-06-2004 à 21:48:11

---------------
"Nous sommes tous dans le caniveau, mais certains d'entre nous regardent les étoiles" Oscar Wild

Arjuna

Aircraft Ident.: F-MBSD

J'en en effet pensé à l'élément liste pour la partie des menus, mais je préfère la souplesse de divs imbriqués, dedans je paramètre ce que je veux, alors que dans un <li> on ne peux pas mettre tout ce qu'on veut.

FORUM HardWare.fr

Programmation

HTML/CSS

Remplacer un tableau par des div... Height 100% ??

Sujets relatifs
Remplacer les accents	Remplacer "es" à la fin d'un mot par e
conversion adresse de tableau de pointeurs	Parcourir un tableau à colonnes variables
sauver un tableau de short dans un format d'image	rechercher et remplacer dans une QString
efacer les caractere d'un tableau de char	Problème de tableau dynamique
[JSP/SERVLET] Stocker un tableau dans un cookie	passer tableau js à autre page web
Plus de sujets relatifs à : Remplacer un tableau par des div... Height 100% ??

Page générée en 0.069 secondes