Sujet Précédent Sujet Suivant

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
Bonjour,
Je voudrais pour mon site web faire une colonne gauche avec une hauteur qui se defini en fonction de la taille du contenu de mon cadre central. Le probleme est que je veux insérer une image en bas de la colonne de gauche et que le centre de ma colonne avec un fond gris augmente tout seul.
Je suis pas sur de mettre bien expliquer si besoin dites moi et je reformulerais ma question.
Merci d'avance
fred

2 réponses

Réponse 1 / 2
AdminTOURS Messages postés 404 Date d'inscription jeudi 5 juillet 2007 Statut Membre Dernière intervention 14 janvier 2011 92
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 ?
0
fredtux06 Messages postés 3 Date d'inscription lundi 26 mai 2008 Statut Membre Dernière intervention 26 mai 2008
26 mai 2008 à 15:36
bonjour,
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
0
Réponse 2 / 2
AdminTOURS Messages postés 404 Date d'inscription jeudi 5 juillet 2007 Statut Membre Dernière intervention 14 janvier 2011 92
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...
0
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
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
0
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
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
0

Discussions similaires

comment savoir qu'une personne nous a supprimé Snapchat
ano -
HAD -

8 réponses
Snap - croix grise
Thenou35210 -
Radinoz -

1 réponse
Bloquage d'un ami snap
QuestionSnap -
QuestionSnap -

1 réponse
ordre de grande en taille de fichier
liverpool -
f894009 -

1 réponse
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses