[CSS] mise en page et largeur dynamique

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] mise en page et largeur dynamique

Batman-Fr

bonjour a tous

j'ai un probleme de mise en page que je n'arrive pas a solutionner :

j'ai 3 div dans un div general de cette maniere (je ne dessine pas le general) :
__________________
| | | |
| A | B | C |
|_____|_____|_____|

le A et C ont une largeur fixe
B doit avoir une largeur dynamique en sachant que C n'est pas toujours present.

pour resumer, j'aimerais que B occupe toute la place restante en largeur et je n'y arrive pas

pourriez-vous m'indiquer comment proceder svp ?

merci d'avance :jap:

Message édité par Batman-Fr le 28-04-2004 à 15:31:06

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

Publicité

Batman-Fr

j'arrive presque a qlq chose :

j'ai A en float: left
B en float: left
C en float: right

ca passe sous IE mais sous Mozilla, B passe en dessous de A et C qui restent a gauche (A) et a droite (C) comme convenu

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

PunkRod

Digital Mohawk

fais voir les classes css de tes div, et explique le résultat que tu obtiens...

Batman-Fr

voila mes 'classes' :

Code :

#A {
float: left;
margin-left: 2px;
}
#B {
float: left;
background-color: white;
border: 1px solid black;
padding: 5px;
margin-left: 5px;
margin-right: 5px;
}
#C {
float: right;
background-color: silver;
width: 120px;
height: 600px;
border: 1px solid black;
margin-right: 2px;
}

sous IE : tout se passe bien, les 3 DIV sont cote a cote et si je supprime C, B prend bien la place restante

Sous Moz : A est cole a gauche, C est colle a droite et B est en dessous et prend la totalite de la largeur

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

Essaie

Code :

#general {
width : 97%;
margin-left : auto;
margin-right : auto;
}
#A {
width : 120px;
float: left;
margin-left: 2px;
}
#B {
float: left;
background-color: white;
border: 1px solid black;
padding: 5px;
margin-left: 5px;
margin-right: 5px;
}
#C {
float: left;
background-color: silver;
width: 120px;
height: 600px;
border: 1px solid black;
margin-right: 2px;
}

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Batman-Fr

sous IE : toujours OK
sous Moz : B est tjrs en dessous

je me demande si c'est simplement possible a vrai dire ...

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

ce code marche avec Moz

Code :

<html>
<head>
<style type="text/css">
<!--
#site {
text-align: center;
}
#general {
text-align: center;
width : 95%;
margin-left : auto;
margin-right : auto;
top : 0px;
}
#A {
width : 120px;
background-color: silver;
float : left;
}
#B {
background-color: red;
width : 70%;
float : left;
}
#C {
background-color: silver;
width: 120px;
float : left;
}
-->
</style>
</head>
<body>
<div id="site">
<div id="general">
<div id="A"> </div>
<div id="B">  </div>
<div id="C"> </div>
</div>
</div>
</body>
</html>

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Batman-Fr

le probleme est que le C bascule en dessous assez tot lorsqu'on joue sur la largeur de la fenetre

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

avec 65% pour B, tu passes en 800x600 et +

sinon, tu parts sur un cadre principal de 770px de large et tu positionnes tes zones A, B et C en absolu

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

ta solution est là :

http://alsacreations.com/articles/ [...] _fluid.htm

a+

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Publicité

Batman-Fr

pour g_d_fluid d'alsacreation, j'avais regarde des le debut mais mon div general qui englobe mes 3 div A, B et C est centre horizontalement du coup la solution l'alsa ne fonctionne plus

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

Batman-Fr

T509 a écrit :

avec 65% pour B, tu passes en 800x600 et +

sinon, tu parts sur un cadre principal de 770px de large et tu positionnes tes zones A, B et C en absolu

le probleme majeur est que si je supprime C, B ne prend plus la place totale qui reste du coup et c'est ca ma contrainte principale

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

je crois qu'il faut prévoir une CSS par type d'affichage alors.

CSS_ABC
CSS_AB

Sinon tu ne t'en sortira pas

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Batman-Fr

j'y pensais oui
dommage, ca ne parait pas difficile de prime abord ...

probleme d'interpretation des navigateurs ou limite des CSS :??:

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

un autre moyen est de faire : (pas testé, mais cela doit marcher)

conteneur
colonne (A) gauche 120 px, absolute, left 0
/
conteneur bis marge gauche 120 px
colonne C 120 px float right display block
/
colonne B float right display block
/
/
/

si tu ne mets pas ta colonne C, B doit normalement prendre toute la place restante

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

sibelius

Vous êtes sûr ?

Batman-Fr a écrit :

pour g_d_fluid d'alsacreation, j'avais regarde des le debut mais mon div general qui englobe mes 3 div A, B et C est centre horizontalement du coup la solution l'alsa ne fonctionne plus

Ben... le modèle non-fluide alors : http://www.alsacreations.com/artic [...] d_fixe.htm ?

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

T509

$job->GetJob(now)

Tu as changé de pseudo ?

et la solution dont je parle juste au dessus ?

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Batman-Fr

je ne suis pas sibeluis

pour ta proposition, c'est ce que je me suis resigné a faire :

2 div :
1 pour la colonne de gauche A
1 sur le reste B qui englobe le C s'il existe

ca marche bien mais l'idel aurait ete que C soit a l'exterieur de B

merci

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

si tu regardes bien, je t'ai proposé de faire 4 colonnes : A, D, C, B (dans l'ordre)

C et B sont dans D

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Batman-Fr

T509 a écrit :

si tu regardes bien, je t'ai proposé de faire 4 colonnes : A, D, C, B (dans l'ordre)

C et B sont dans D

je ne l'avait pas vu comme ca

donc 2 conteneurs generaux
pourquoi n'y ai-je pas pense ?? [:huit]

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

T509

$job->GetJob(now)

dis nous si cela fonctionne ...

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

T509

$job->GetJob(now)

T509 a écrit :

Tu as changé de pseudo ?

et la solution dont je parle juste au dessus ?

Promis j'avais pas bu ...

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Batman-Fr

j'vous dis ca demain

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] mise en page et largeur dynamique

Sujets relatifs
menu déroulant dynamique en php	mise en forme résultat d'une requete SQL
[perl] Faire une page d'attente en CGI	Page d'accès aux données : lier plusieurs champs
Disposition de blocs en CSS	[swing] creer un JButton ou JLabel qui renvoie une page au browser
[XHTML] Caller un pied de page	Ajout dynamique dans un combobox
[Php] - Resultat de la base SQL sur une page .	[html/css] espacement vertical ?
Plus de sujets relatifs à : [CSS] mise en page et largeur dynamique

Page générée en 0.077 secondes