[CSS] Imbrication de structures [Résolu]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Imbrication de structures [Résolu]

20cent

Hello, :hello:

Voici mon problème !

J'ai 2 structures qui fonctionnent parfaitement sous IE6 et Firefox :

- n°1 : un menu gauche fixe, un menu droit fixe et un corps en %

Code :

<html>
<head>
<title>Structure 1</title>
<style>
#menu_gauche
{
float:left;
width:160px;
background-color:#EEEEEE;
}
#menu_droit
{
float:right;
width:160px;
background-color:#DDDDDD;
}
#corps
{
width:100%;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="menu_gauche">menu gauche</div>
<div id="menu_droit">menu droit</div>
<div id="corps">corps</div>
</body>
</html>

- n°2 : plusieurs encarts

Code :

<html>
<head>
<title>Structure 2</title>
<style>
#encart_gauche
{
float:left;
width:50%;
background-color:#EEEEEE;
}
#encart_droit
{
float:right;
width:50%;
background-color:#DDDDDD;
}
#encart
{
float:left;
width:100%;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="encart_gauche">1</div>
<div id="encart_droit">2</div>
<div id="encart">3</div>
<div id="encart_gauche">4</div>
<div id="encart_droit">5</div>
<div id="encart">6</div>
</body>
</html>

Je souhaiterais simplement inclure la structure n°2 dans la n°1 (au niveau du corps bien sûr).
Or, si cela fonctionne sous IE6, impossible d'afficher quelque chose de correct sous Firefox.

Can you help me ? (pleaaaaaaaase !)

Message édité par $weblook le 13-02-2004 à 09:21:08

Publicité

gizmo

C'est parce que IE est buggé et qu'il gère mal les floats, le problème n'est pas lié à firefox.

20cent

arf ! Oui, il m'avait semblé voir ça.
C'est plutôt une solution que je cherche.

Personne n'a d'idée ?
Je vois mal comment faire tout ça sans float.

gizmo

bah commence par expliquer en mot ce que tu veux, on trouvera ensuite une solution en code pour y arriver.

20cent

Je suis pas clair ? zut !
Désolé, désolé.

J'aimerais une structure comme celle-çi, simplement.

Un menu gauche, un menu droit, et le centre en proportionnel qui contient les 6 encarts.
Ca doit bien être possible ? Je débute en CSS, j'avoue que je suis un peu refroidi : c'est dur dur ! :sweat:

Merci pour ton aide en tout cas !

Message édité par $weblook le 12-02-2004 à 14:43:17

gizmo

ok, et les encarts du milieu qui sont côte à côte, ils ont toujours la même hauteurs?

20cent

L'idéal serait qu'ils le soient, mais ce n'est pas essentiel, loin de là.

Comme tu veux donc.

gizmo

Ok, alors voici une solution, ce n'est pas la seule: mets tes deux menus en positionnement absolu en fin de code. L'un que tu colles à gauche (avec left:0) l'autre à droite (avec right:0). Ensuite, pour le milieu, tu pourrais reprendre ton code en présent en rajoutant les marges de gauche et de droite pour laisser l'espace nécessaire aux menus.

A priori, ça devrait fonctionner.

20cent

Ca fonctionne en effet ! :sol:

Mais c'est sous IE que ça foire maintenant. :sweat:

Code :

<html>
<head>
<title>Structure 1 + 2</title>
<style>
#menu_gauche
{
position:absolute;
width:160px;
height:500px;
left:0px;
top:0px;
background-color:#EEEEEE;
}
#menu_droit
{
position:absolute;
width:160px;
height:500px;
right:0px;
top:0px;
background-color:#DDDDDD;
}
#corps
{
margin-left:160px;
margin-right:160px;
}
#encart_gauche
{
float:left;
width:50%;
background-color:#EEEEEE;
}
#encart_droit
{
float:right;
width:50%;
background-color:#DDDDDD;
}
#encart
{
float:left;
width:100%;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="corps">
<div id="encart_gauche">1</div>
<div id="encart_droit">2</div>
<div id="encart">3</div>
<div id="encart_gauche">4</div>
<div id="encart_droit">5</div>
<div id="encart">6</div>
</div>
<div id="menu_gauche">menu gauche</div>
<div id="menu_droit">menu droit</div>
</body>
</html>

Encore les float si je comprend bien...
Ca arrive souvent ce genre de galères ou c'est moi qui m'y prends comme un manche ?

Je vais retourner à mes tableaux chteumeuleu rapido moi, je le sens. Dommage.

Bref, si vous voyez une solution à ce nouveau pb...
Merci du coup de main gizmo !

Message édité par $weblook le 12-02-2004 à 16:28:01

gizmo

bon, j'ai pas IE ici, donc si tu ne me décris pas le problème, je ne sais pas t'aidere plus

Publicité

20cent

Une capture, ça te va ?

Un souci avec les % peut-être ?

Message édité par $weblook le 12-02-2004 à 16:34:40

gizmo

ok, bon, plusieurs choses:

- dans le code que tu mets, je ne vois pas de trace d'un doctype, essaye de rajouter au moins celui du HTML 4 strict

- un id est unique, remplace tes id=... par des class=...

- si cela ne fonctionne toujours pas, tu peux toujours imbriquer encart gauche dans encart droit si ton fond est uni. Dans ce cas, n'oublie pas de rajouter un clear:both dans encart

Message édité par gizmo le 12-02-2004 à 16:41:03

20cent

J'essaye tout ça et je reposte.
Encore merci !

Message édité par $weblook le 12-02-2004 à 17:46:24

20cent

La fin de journée approche ! Et je n'ai rien trouvé de convenable malheureusement.

A demain donc.

...vous serez encore là ?

Message édité par $weblook le 12-02-2004 à 17:57:50

youdontcare

Ie se plante dans la taille du div avec une marge. J'ai rajouté un div à l'intérieur de corps, en spécifiant 'width = 100%', et giclé un float sur une des cellules, rajouté un clear sur l'encart.

<html>
<head>
<title>Structure 1 + 2</title>
<style>
#menu_gauche
{
position:absolute;
width:160px;
height:500px;
left:0px;
top:0px;
background-color:#EEEEEE;
}
#menu_droit
{
position:absolute;
width:160px;
height:500px;
right:0px;
top:0px;
background-color:#DDDDDD;
}
#corps
{
margin-left:160px;
margin-right:160px;
border: solid 1px blue;
}
#encart_gauche
{
float:left;
width:50%;
background-color:#EEEEEE;
border: solid 1px red;
}
#encart_droit
{
efloat:right;
background-color:#DDDDDD;
border: solid 1px green;
width: 100%;
}
#encart
{
clear: both;
float:left;
width:100%;
background-color:#CCCCCC;
}
</style>
</head>
<body>
<div id="corps">
<div style='width: 100%'>
<div id="encart_gauche">1 rze r zer ezr ze r zer ze rez r ezr ez r ezr ez re zr ze rze r ze rze rze r e aze az eaz e aze az eza e aze za e </div>
<div id="encart_droit">2 rez rlmze krezrml ermzel rkzelm rkzemlr zemlr kzemlr kzemlkr zemlr kzemlkr</div>
<div id="encart">3</div>
<div id="encart_gauche">4</div>
<div id="encart_droit">5</div>
<div id="encart">6</div>
</div>
</div>
<div id="menu_gauche">menu gauche</div>
<div id="menu_droit">menu droit</div>
</body>
</html>

20cent

Mon dieu ! Ca marche !!! :sol:
Un grand grand merci youdontcare !

Me voilà rassuré ! Je commençais à me dire que ce n'était pas si bien que ça les feuilles de style.

Je vais regarder le code en détail de ce pas.

Génial ! La journée commence bien.
Encore merci.

Je m'attaque au reste du code, en espérant que se sera plus simple maintenant.

Message édité par $weblook le 13-02-2004 à 09:20:34

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Imbrication de structures [Résolu]

Sujets relatifs
[ORACLE FORMS] validité d'une variable globale ? [Résolu]	[XHTML/CSS] Une div de hauteur 100% de la page...
[Résolu]nOOb, problème de class path	[CSS] Probleme de couleurs de liens et scrolling bar
CSS, DIVs, positionnement : IE va me rendre fou ...	[Resolu] pb avec qt designer et kdevelop
[CSS] Sur liste déroulante	[RESOLU] Ds quels cas un TClientdataset ne se crée pas ?
[Résolu] - [Perl] nommer un repertoire par la date en cours	[CSS] cet effet possible en css ???
Plus de sujets relatifs à : [CSS] Imbrication de structures [Résolu]

Page générée en 0.089 secondes