28172 sujets

CSS et mise en forme, CSS3

Bonjour/bonsoir à tous,

Mon petit soucis ce trouve ici.

Je voudrais savoir comment je peux faire pour que la barre latérale soit a la meme hauteur que le block de contenu à sa gauche.

Voila un shéma de ce à quoi ca doit ressembler au final.

Merci pour le coup de pouce Smiley smile
Modifié par pansement (06 Aug 2010 - 13:54)
J'ai essayer de faire un contenant pour ces deux blocs qui ai la même couleur de fond mais cela ne marche pas.

@audrasjb: J'ai consulté quelque unes des ressources que tu m'as donné mais il y a très peu de code css pour expliquer et comme je suis pas très bon (pour pas dire mauvais) je ne comprends pas comment il faut faire.

Merci de votre aide.
Modifié par pansement (02 Aug 2010 - 17:09)
Re,

Il n'y avait pas à chercher bien loin, je viens même de me rendre compte qu'il y a même un tuto complet sur le sujet sur alsa...
Bon allez, un petit exemple Smiley murf
En gros et très rapidement :

Côté html :

<div id="entete"></div>
<div id="principal">
  <div id="contenu"></div>
  <div id="lateral"></div>
  <div id="pied"></div>
</div>


Côté css :

#principal {
width: 800px;
background: url(background.jpg) repeat-y; //applique un arrière plan et le répète verticalement
}
#contenu {
width: 500px;
float:left;
}
#lateral {
width: 300px;
float: right;
}
#pied {
clear: both; //permet de reprendre le flux du document
}


L'arrière plan de #principal est une image de (par exemple) 800px par 5px qui comprend tes deux colonnes et la séparation éventuelle entre ces deux colonnes Smiley cligne

Pour que l'affichage soit correct sur IE, il faut jouer avec les contextes de formatage et le layout : la dernière page du tutoriel de Thomas D Explique tout cela en détail Smiley smile
Modifié par audrasjb (02 Aug 2010 - 17:56)
Alors pour l'instant j'ai englober les div contenu et barre latéral dans un conteneur auquel j'ai attribué l'image en question.

Mais si je ne spécifie pas de hauteur l'image ne s'affiche pas..

Autre chose ?
pansement a écrit :
Mais si je ne spécifie pas de hauteur l'image ne s'affiche pas..


C'est surtout qu'il faut mettre du contenu dans ta division Smiley cligne Et oui, il ne faut pas spécifier de hauteur. Mais mon exemple était vraiment succinct, je te conseille de compléter avec le tutoriel dispo sur Alsa Smiley smile