28173 sujets

CSS et mise en forme, CSS3

Mise en page avec CSS

Bonjourà tous. Smiley smile

Voilà j'ai un petit soucis avec CSS...

Un problème qui peut sembler banal à première vue, mais avant de m'envoyer sur des articles lisez bien Smiley cligne

En fait j'aimerai réaliser un site avec cette apparence :


upload/10200-Exemple1.GIF




Le border du Header,du Menu, du Contenu et du Footer est défini à 1px solid black;


Quel que soit le contenu du Menu ou du Contenu,ces deux éléments doivent avoir la même hauteur (la hauteur de l'élément le plus haut).

Les grandes images pouvant être insérées dans le contenu doivent étirer l'ensemble de la structure (Pas de contenu qui dépasse dans le vide).

Cette structure est EXTENSIBLE. Important sinon c'est trop facile Smiley cligne

Seules les hauteurs du header et du footer sont définies à 150px ainsi que la largeur du menu à 200px.

Il y a un espace de deux pixels entre chaque élément.


J'aimerai que ce site soit compatible sous au moins FireFox et I.E.

J'ai réussi à réaliser cette structure sous forme de tableau sans trop de problèmes.

Mais à l'aide du CSS, impossible. Smiley fache

Voyons si le CSS mérite vraiment sa réputation vantant que l'on peut tout faire sans l'aide des tableaux.

J'ai déja regardé les articles de ce site en vain... J'ai également fait des recherches sur le net... en vain. Smiley decu

Impossible de trouver quelque chose qui corresponde à une structure avec un BORDER sur chaque élément...


J'ai besoin d'aide, ça fait un moment que je suis sur ce problème Smiley bawling

Help me plzzzzz ! Smiley biggrin
Administrateur
Hello et bienvenue,

Voilà sans-doute l'un des sujets les plus souvent évoqués sur le forum
Le réflexe de la recherche dans la FAQ s'est-il perdu ?
En tout cas, je pense que ce point devrait te donner de bonnes pistes Smiley smile
Voici une proposition : http://www.bochon.net/_/entrepot/alsa/gabarit1.html

Voici son code source :


<!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="fr" lang="fr">

<head>
<title>Gabarit1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">


BODY {

	background-color: white;

	margin:  0;
	padding: 0;
}


P {

	margin:   0px;
	padding: 5px;
}


.bordure {

	border: solid 1px black;
}


#tete {

	background-color: red;

	height: 150px;
}


#menu {

	width: 150px;
	float: left;
}


#contenu {

	background-color: yellow;

	margin-left: 150px;
}


#pied {

	background-color: blue;

	height: 150px;
	clear: both;
}


</style>
</head>

<body>

<div id="tete"    class="bordure"><p>tete</p></div>
<div id="menu"    class="bordure"><p>menu</p></div>
<div id="contenu" class="bordure"><p>contenu</p></div>
<div id="pied"    class="bordure"><p>pied de page</p></div>

</body>

</html>
Maxwell7 a écrit :
Voici une proposition : http://www.bochon.net/_/entrepot/alsa/gabarit1.html

Cela ne correspond hélas pas aux besoins exprimés. On peut corriger cette proposition pour obtenir les écarts de 2px souhaités entre les blocs, mais on se casse les dents sur le moyen d'obtenir deux « colonnes » de même hauteur, quelles que soient les hauteurs de leurs contenus respectifs.

Pour ce dernier point, on explorera la technique dite des « colonnes factices ». Cf. le point de la FAQ indiqué par Raphaël.

Note : avec les colonnes factices, le design voulu risque d'être un poil compliqué à mettre en oeuvre. Il faudra sans doute jouer avec les images de fond pour faire ça bien. Si le design voulu n'est pas plus compliqué (graphiquement) que le schéma fourni, ça devrait aller. Pour des choses plus pointues, c'est à voir.
Merci à tous pour vos réponses Smiley smile

Je crois que je vais me tourner vers la solution des colonnes factices mais là encore j'ai un soucis...

Avec une page qui a une largeur fixe c'est facile à réaliser mais avec un desgin extensible je vois mal comment faire en sorte d'afficher correctement la deuxième colonne qui a une largeur non fixée. (La première colonne est en largeur fixe donc aucun problème).

Si quelqu'un a une idée je suis preneur Smiley cligne
Sandrine a écrit :
Avec une page qui a une largeur fixe c'est facile à réaliser mais avec un desgin extensible je vois mal comment faire en sorte d'afficher correctement la deuxième colonne qui a une largeur non fixée. (La première colonne est en largeur fixe donc aucun problème).

Si quelqu'un a une idée je suis preneur Smiley cligne

Tu n'as pas précisé si l'image que tu as présentée correspond à ton design, ou bien à une version simplifiée ?

Si ça correspond à ce que tu veux faire en terme d'habillage des colonnes, je proposerais ceci pour la partie « centrale » (deux colonnes).
- Les couleurs de fond et les bordures de gauche et du centre (bordure de droite de la colonne de gauche, bordure de gauche de la colonne de droite) font partie de l'image de fond d'un div central. L'image de fond est alignée en bas à gauche (background-position: left bottom;).
- Les bordures extérieures (tout à gauche et tout à droite) correspondent à un border-left et à un border-right, appliqués sur le conteneur central.
- Les bordures inférieures font partie de l'image de fond du conteneur central.
- Les bordures supérieures sont celles des deux blocs « colonnes », le premier (flottant à gauche) étant dimensionné en pixels, et le second n'ayant pas de largeur fixe mais une marge à gauche correspondant à la largeur de la colonne de gauche + l'écart voulu.

Ça me semble tout à fait jouable, même si c'est un peu de la gymnastique CSS avec des figures imposées un peu étranges...


Sinon, si on a peur de ne pas réussir à faire ça correctement (et compatible tous navigateurs...), il y a une solution simple : faire un tableau à deux cellules pour cette partie centrale.

En cas d'allergie aux tableaux de mise en forme, on peut lire ceci : quand utiliser des tableaux ?
Modifié par mpop (06 Jan 2007 - 00:27)
Sujet clos
Aller à