Barre de séparation entre deux colonnes <DIV>

labarique · 27 Mars 2008

Bonjour,

je souhaite dorénavant séparer deux colonnes (deux <DIV colonnes> au sein d'un <DIV zone de texte>) par un trait. Comment faire pour que ce trait soit de la longueur de la cellule la plus longue de ce "faux tableau" (que j'aurais codé en TABLE TD TD très simplement il y a quelques années) ? Ici, c'est entre les deux cellules roses que je souhaiterais insérer ce trait...

Pour info, une petite partie de mon CSS :

CODE

<HTML>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<style type="text/css" title="mes_styles" media="all">
<!--
body
	{
		font-family: Verdana, Geneva, Arial, sans-serif;
	line-height: 180%;
	background-color: #F4F4F4;
	margin: 0
	}
	
#en_tete
	{position : relative;
		background-color: #F4F4F4;
	height: 130px
		}
.nav_gauche
	{
	text-align: right;
	width: 20%;
	float: left
	}
.milieu
	{
	padding-left: 36px;
	width: 50%;
	float: left;
	}
.cellule_milieu
	{
		background: #E6E6FA;
		font-size: small;
		width: 100%;
		clear: left
	}
	
.cellule_milieu h1
	{background: #E6E6FA;
		font-weight: bold;
		font-size: 12px;
		width: 100%;
		background-color: #6b6c5a
			}
.col_milieu
{
 width: 50%;
margin: 1px solid #000;
 font-size: 12px;
 background-color: #FF1493;
 float: left;
 }
	
.nav_droite
	{
	font-size: 10px;
	font-style: italic;
	line-height: 20px;
	padding-left: 3%;
	width: 15%;
	float: left
	}
#pied-de-page
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color: #6b6c5a;
	text-align: center;
	letter-spacing: 6px;
	height: 16px;
	clear: left
	}
 -->
</style>
</head>
<BODY>
<div id="en_tete"><img src="IMG/logo_mv.png" ></div>
<div class="nav_gauche">
			<p> </p>
			<P>Actualités<P>
			<P>Séminaires<P>
			<P>Expériences></P>
			<p> </p>
</DIV>
<div class="milieu">
<Div class="cellule_milieu">
<H1>Actualités</H1>
<DIV CLASS="col_milieu">Petit texte assez intéressant.</DIV>
<DIV CLASS="col_milieu">QQSD QDQSDLK JKL lkjsfdjkl j lksflkjsdlkf sklfjklj.QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j lksdjflkjsdlkf sklfjklj.
</DIV>
</Div>
<BR />
<Div class="cellule_milieu">
<H1>Expériences</H1>
QQSD QDQSDLK JKL lkjqlksdj lkjklsfdjkl j <STRONG>lksdjflkjsdlkf</STRONG> sklfjklj.QQSDlkjsdlkf sklfjklj.
</Div>
</DIV>
<DIV CLASS="nav_droite">
<div class="element-de-menu">Derniers commentaires</DIV>
<div class="element-de-menu">Derniers documents</DIV>
</DIV>
</BODY>
</HTML>

Merci !

labarique · 27 Mars 2008

Promis, c'est ma dernière question de la journée...

;-)

Eric (11) · 27 Mars 2008

Tout dépend (je n'ai pas pris le temps de regarder exactement ton code) mais si ton conteneur est en float, un simple background avec un trait et centré s'adaptera, sinon, mettre un br avec un clear après la seconde colonne permettra de donner la hauteur à ce conteneur (toujours avec un background).

Eric.

labarique · 28 Mars 2008

Désolé, je n'ai pas dû bien comprendre ta réponse... Je n'y arrive vraiment pas !

MarvinLeRouge · 28 Mars 2008

Salut,

Cherche un sujet sur pompage.net qui doit s'appeler "colonnes factices" (la trduction de "faux column"), tu trouveras ton bonheur.

Connexion

Barre de séparation entre deux colonnes <DIV>

Sujets conseillés

labarique

Lien vers le commentaire

Partager sur d’autres sites

labarique

Lien vers le commentaire

Partager sur d’autres sites

Eric (11)

Lien vers le commentaire

Partager sur d’autres sites

labarique

Lien vers le commentaire

Partager sur d’autres sites

MarvinLeRouge

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité