Petite question CSS
Fermé
fredtux06
Messages postés
3
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
26 mai 2008
-
26 mai 2008 à 12:30
Zempachi Messages postés 7472 Date d'inscription vendredi 14 octobre 2005 Statut Contributeur Dernière intervention 5 juin 2020 - 26 mai 2008 à 17:47
Zempachi Messages postés 7472 Date d'inscription vendredi 14 octobre 2005 Statut Contributeur Dernière intervention 5 juin 2020 - 26 mai 2008 à 17:47
2 réponses
AdminTOURS
Messages postés
403
Date d'inscription
jeudi 5 juillet 2007
Statut
Membre
Dernière intervention
14 janvier 2011
92
26 mai 2008 à 13:18
26 mai 2008 à 13:18
si tu intégre ta colonne de gauche avec fond gris + logo en bas (si j'ai bien compris) dans un Div sans hauteur définie, à l'intérieur de ton div de ton cadre central, ça devrait le faire !
Tu as déjà un bout de code pour qu'on regarde ?
Tu as déjà un bout de code pour qu'on regarde ?
AdminTOURS
Messages postés
403
Date d'inscription
jeudi 5 juillet 2007
Statut
Membre
Dernière intervention
14 janvier 2011
92
26 mai 2008 à 17:06
26 mai 2008 à 17:06
/* ----------banner -------------- */
#banner {
margin: 0;
padding: 0;
background-color:#a19b96;
background:url(img/imagelogo.jpg) no-repeat;margin:20px 0px 0px 0px;height:179px;
}
J'enleverais le height dans un premier temps. Ca donne quoi ? Je n'ai pas myen de tester d'ici...
#banner {
margin: 0;
padding: 0;
background-color:#a19b96;
background:url(img/imagelogo.jpg) no-repeat;margin:20px 0px 0px 0px;height:179px;
}
J'enleverais le height dans un premier temps. Ca donne quoi ? Je n'ai pas myen de tester d'ici...
fredtux06
Messages postés
3
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
26 mai 2008
26 mai 2008 à 17:26
26 mai 2008 à 17:26
Bon en fait j ai trouvé une solution qui me plait pas sur l'exemple du haut donc en fait je vais repartir de 0 dans ce que je recherche.
Je recherche tout simplement une colonne de gauche qui grandit en fonction de ma colonne centrale.
Sur la colonne de gauche je voudrais mettre tout en bas une image qui se trouvera donc tjrs a coté du bas de la colonne centrale et que je puisse avoir un fond de couleur different pour tous. Je sais pas si tout ca est possible.
merci d'avance
Je recherche tout simplement une colonne de gauche qui grandit en fonction de ma colonne centrale.
Sur la colonne de gauche je voudrais mettre tout en bas une image qui se trouvera donc tjrs a coté du bas de la colonne centrale et que je puisse avoir un fond de couleur different pour tous. Je sais pas si tout ca est possible.
merci d'avance
Zempachi
Messages postés
7472
Date d'inscription
vendredi 14 octobre 2005
Statut
Contributeur
Dernière intervention
5 juin 2020
906
>
fredtux06
Messages postés
3
Date d'inscription
lundi 26 mai 2008
Statut
Membre
Dernière intervention
26 mai 2008
26 mai 2008 à 17:47
26 mai 2008 à 17:47
Salut,
oui c'est possible.
En fait, on utilise "des fausses colonnes".
Exemple:
<div class="conteneur">
<div class="gauche">[...]</div>
<div class="droite">[...]</div>
<div class="clearboth"></div>
</div>
</div>
Donc le div "conteneur" va contenir le background entier avec un repeat-y a priori.
Par exemple, tu veux que les deux colonnes contiennent chacune un background de couleur différente.
La première colonne fera 200px et la seconde 500px;
Et bien tu vas couper une image d'un pixel de hauteur et de XXX pixels de largeur(XXX = au height des deux colonnes et donc du "conteneur") qui va, pour les 200 premiers pixels avoir, la couleur de la colonne de roite et la suite (500px donc) la couleur de gauche ; image que tu vas répéter en y.
Les div gauche et droite en float left.
Le clearboth (.clearboth {clear:both;height:1px;font-size=1px;}) va permettre de "pousser" le bas du div "conteneur" afin d'adapter le background à la hauteur la plus grande entre les div gauche et droite.
Tu pourras placer ton image à ce niveau là par exemple.
=>plus de détails:
http://www.pompage.net/traduction/colonnesfactices
L'autre solution est de jouer avec les pourcentage des height.
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
oui c'est possible.
En fait, on utilise "des fausses colonnes".
Exemple:
<div class="conteneur">
<div class="gauche">[...]</div>
<div class="droite">[...]</div>
<div class="clearboth"></div>
</div>
</div>
Donc le div "conteneur" va contenir le background entier avec un repeat-y a priori.
Par exemple, tu veux que les deux colonnes contiennent chacune un background de couleur différente.
La première colonne fera 200px et la seconde 500px;
Et bien tu vas couper une image d'un pixel de hauteur et de XXX pixels de largeur(XXX = au height des deux colonnes et donc du "conteneur") qui va, pour les 200 premiers pixels avoir, la couleur de la colonne de roite et la suite (500px donc) la couleur de gauche ; image que tu vas répéter en y.
Les div gauche et droite en float left.
Le clearboth (.clearboth {clear:both;height:1px;font-size=1px;}) va permettre de "pousser" le bas du div "conteneur" afin d'adapter le background à la hauteur la plus grande entre les div gauche et droite.
Tu pourras placer ton image à ce niveau là par exemple.
=>plus de détails:
http://www.pompage.net/traduction/colonnesfactices
L'autre solution est de jouer avec les pourcentage des height.
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur
26 mai 2008 à 15:36
Je te donne mon code html et mon code css a part :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="metal2.css" rel="stylesheet" media="screen" />
<title>metal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="banner" ><img src="img/logopetit.png" alt="peinture métal">
</div><!-- end banner -->
<div id="left">
<div id="colonne">
<div class="menu"><a href="accueil.html" title="métal surface">Accueil</a></div>
<div class="menu"><a href="grenaillage.html" title="grenaillage métal">Grenaillage</a></div>
<div class="menu"><a href="metallisation.html" title="métallisation var">Métallisation</a></div>
<div class="menu"><a href="peinture.html" title="surface var">Peinture</a></div>
<div class="menu"><a href="contact.html" title="surface var">Contact</a></div>
<div class="menu"><a href="quisommesnous.html" title="surface var">Qui sommes nous?</a></div>
<div class="menu1">Savoir faire</div>
<div class="colonnegaucheb"></div>
</div>
</div> <!-- end menu left -->
<div id="content">
</div>
</div>
<div id="footer"></div>
</body>
</html>
et le code css
/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License - https://creativecommons.org/licenses/by/2.0/deed.en */
body {
background:#44423f;color: #FFFFFF;
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
/* ----------container -----*/
#container {
width:849px;
margin: 0 auto;
padding: 0;
background-color:#dfdddb;
}
/* ----------banner -------------- */
#banner {
margin: 0;
padding: 0;
background-color:#a19b96;
background:url(img/imagelogo.jpg) no-repeat;margin:20px 0px 0px 0px;height:179px;
}
/* -----------------contenu--------------------- */
#content {
min-height:800px;
background-color: #ffffff;
padding: 0;
border:1px solid red;
}
/* --------------left navigavtion------------- */
#left {
float: left;
width: 167px;
margin: 0;
padding:15px 0 0 0;
color:#ffffff;
height:70%;
border:1px solid blue;
}
.colonnegaucheb{float:left;height:291px;width:167px;background:url(img/marche.png);background-position:top;}
#colonne{min-height:800px;border:1px solid green;}
.menu{float:left;width:167px;padding:20px 0px 0px 10px;color:#161817;text-align:left;}
.menu1{float:left;width:167px;padding:20px 0px 0px 20px;color:#ffffff;text-align:left;font-weight:bold;font-size:18px;}
.menu a{text-decoration:none;color:#161817;font-size:16px;font-weight:bold;}
.menu a:hover{text-decoration:none;color:#FFFFFF;font-size:16px;font-weight:bold;}
/* -----------footer--------------------------- */
#footer {clear:both;margin:0px auto;padding:0px;text-align:center;width:975px;margin-bottom:5px;margin-top:10px;}
merci d'avance