28172 sujets

CSS et mise en forme, CSS3

Problème : 3 colonnes dont une fixe

Bonjour à tous.

Voilà, j'ai un petit soucis avec une page, je voudrais créer une sorte de porte de sas qui est sensé s'ouvrir verticalement, et tout ça uniquement avec du CSS (pas d'image) et Jquery ensuite pour l'anim'.
Je joins une image pour vous expliquer.
upload/37843-Fondindex.jpg

J'ai déjà faite la partie haute, mon problème se trouve sur la partie basse de cette porte, plus particulièrement la partie haute de la partie basse ! (J'espère me faire bien comprendre Smiley smile ).

J'ai créé pour ça 3 div, dans une div conteneur #pied_haut. Ces 3 div de hauteur fixe doivent être alignées horizontalement de sorte que :
- la div du milieu ait une largeur de 600px
- la div du milieu soit alignée au centre de la page
- les 2 div latérales doivent occuper le reste de la largeur de manière égale

Voici ce que j'ai pour l'instant en code :


<body>
	<div id="tete"></div>
	<div id="corps"></div>
	<div id="pied">
		<div id="pied_haut">
			<div id="pied_haut1"></div>
			<div id="pied_haut2"></div>
			<div id="pied_haut3"></div>
		</div>
		<div id="pied_bas"></div>
	</div>
</body>


Et pour ce qui est du CSS :


body { margin:0; padding:0; }
#tete { ... }
#pied {
    bottom: 0;
    position: fixed;
    width: 100%;
}
#pied_haut {
}
#pied_haut1 {
    background-color: #FF0000;
    float: left;
    height: 30px;
    width: 332px;
}
#pied_haut2 {
    border-left: 50px solid #FF0000;
    border-right: 50px solid #FF0000;
    border-top: 30px solid transparent;
    height: 0;
    width: 600px;
}
#pied_haut3 {
    background-color: #FF0000;
    float: left;
    height: 30px;
    width: 332px;
}
#pied_bas {
    background-color: #FF0000;
    height: 10px;
    clear: both;
}


Et pour l'instant les largeurs (#pied_haut1 et #pied_haut3) sont fixes, donc c'est pas bon.
Avez-vous une solution pour moi ?
Modifié par SolidSnake (13 May 2011 - 14:53)
Bonjour,

SolidSnake a écrit :
et tout ça uniquement avec du CSS (pas d'image)

Autrement dit: «bonjour, je voudrais planter un clou dans une porte, mais uniquement avec la tête, et pas avec un marteau... comment faire?» Smiley cligne

Une image serait parfaitement adaptée ici.
Faire une structure à trois «colonnes» avec une colonne centrale (et centrée) de largeur fixe et deux autres comblant l'espace restant, c'est à la fois malaisé et souvent inutile. Une image de fond sur un bloc conteneur suffira la plupart du temps.

Si tu tiens absolument à éviter les images de fond, tu peux essayer un dégradé en CSS pour obtenir le même résultat, mais c'est loin d'être compatible avec tous les navigateurs actuels.
Euh, ça ne m'arrange pas trop comme réponse, le fait est que c'est pour moi une façon de parfaire ma culture en CSS, je galère avec les position, float...
Pour ce qui est des dégradés, c'est prévu, mais ça je sais faire.

Donc oui je souhaiterais enfoncer un clou avec ma tête, peux-tu m'aider ?
SolidSnake a écrit :
Donc oui je souhaiterais enfoncer un clou avec ma tête

Je peux comprendre ça. Smiley smile

SolidSnake a écrit :
peux-tu m'aider ?

Personnellement je n'ai strictement aucun intérêt pour ces techniques de dessin à partir d'éléments DOM multiples et de border/border-radius et autres propriétés CSS pour faire des formes élémentaires. Toutes les autres solutions sont plus intéressantes à explorer (background PNG en data URI, background SVG). Je passe donc mon tour.
Mais ma question n'est pas : "Est-il intéressant de faire des formes en css ?", je veux juste savoir comment centrer une div fixe entre deux autres ?
Sujet clos
Aller à