28172 sujets

CSS et mise en forme, CSS3

Prb alignement en colonnes

Bonjour,

Je viens vers vous car je souhaiter comprendre le positionnement dans un conteneur ou il y aurais un menu et 2 colonnes avec titre et texte alignées à droite du menu.
Le but est de mettre un seul div pour le menu et d'utiliser le positionnement via le css de mes 2 colonnes de droite avec leurs titres et d'utiliser la même class pour les titres et le paragraphe.
J'arrive bien à positionner le menu et le titre et le text de la 1er colonne, mais pour le second titre et texte, j'ai un décalage vers le bas qui correspond à la hauteur du titre de la 1er colonne et je n'arrive pas à caler le second titre au même niveau que le premier sans bien sur rajouter un autre div pour les colonnes. J'aimerai aussi que le div de mon menu occupe toute la hauteur de sont parent (une seconde variant mais sans fixer la hauteur du div menu, quelle puisse s'adapter à sont ancêtre).
Je voulais aussi voir le text de mon pied de page ce placer automatiquement en bas de page en utilisant la propriété clear: left

Le code HTML :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen" />
<title>SiteTest Footer</title>
</head>
<body>

<div id="conteneur">
    <div id="head">
    <h1>Titre de test</h1>
    </div>
        <div id="contenu">
    <div id="menu">
        <ul>
            <li>menu 1</li>
            <li>menu 2</li>
            <li>menu 3</li>
            <li>menu 4</li>
        </ul>
    </div>
        <h2 class="titre">Lorem ipsum 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Phasellus eget eleifend risus. Proin quis neque enim. Mauris nulla mi, 
        rhoncus nec scelerisque vel, fermentum et ligula. Morbi arcu quam, 
        pretium tincidunt ullamcorper ac, sodales ut est. 
        Quisque sit amet sem sed ante pellentesque euismod. 
        Aenean nunc lectus, aliquet ut aliquet in, luctus et urna. 
        In posuere ipsum vitae est egestas vulputate. In sed laoreet neque. 
        Aliquam non blandit urna. Mauris ornare, tellus in rhoncus sagittis, 
        magna sapien sollicitudin leo, id bibendum libero felis eu magna.</p>
        <h2 class="titre">Lorem ipsum 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Phasellus eget eleifend risus. Proin quis neque enim. Mauris nulla mi, 
        rhoncus nec scelerisque vel, fermentum et ligula. Morbi arcu quam, 
        pretium tincidunt ullamcorper ac, sodales ut est. 
        Quisque sit amet sem sed ante pellentesque euismod. 
        Aenean nunc lectus, aliquet ut aliquet in, luctus et urna. 
        In posuere ipsum vitae est egestas vulputate. In sed laoreet neque. 
        Aliquam non blandit urna. Mauris ornare, tellus in rhoncus sagittis, 
        magna sapien sollicitudin leo, id bibendum libero felis eu magna.</p>
    </div><!-- contenu -->
    <div id="footer">
        <p id="footer">Cras scelerisque tristique vehicula. Morbi porta cursus volutpat.</p>
    </div>
</div><!-- conteneur -->
</body>
</html>


Le code CSS :


**************************************
*            Test footer            *
**************************************

/* -- corps --*/

body h2 p {
    margin: 0;	
    padding: 0;
}

#conteneur {
    width: 700px;
    margin: 0 AUTO;
    padding: 10px;
    background-color: #CCCFFF;
}

#head {
    width: 100%;
    height: 250px;
    background-color: #FFFFCC;
}

h1 {
	padding: 180px 15px 0 0;
	text-align: right;
	font-size:35px;
	font-family: verdana;
	color: #FF953F;
}

#contenu {
	float: left;
    width: 100%;
    border: 1px solid #5A0AAF;
    background: #49FF3F;
}

#menu {
	float: left;
	margin-right: 10px;
    width: 170px;
    boder: 1px solid #000000;
    background-color: #B3B8BF;
}

.titre {
    margin: 0;
    padding: 0;
    font-family: verdana;
    font-size: 18px;
    color: #304D6F;
    border: 1px solid #0015FF; /* contour block titre */
}

#contenu p {
    float: left;
	margin-right: 10px;
	padding: 0;
	width: 180px;
    font-family: arial;
    font-size: 0.9em;
    color: #4F9FFF;
    border: 1px solid #000000; /* contour block paragraphe */	
}

#footer {
    clear: left;
    margin: 0;
    padding: 5px;
    text-align: center;
    font-family: verdana;
    font-size: 10px;
    color: #9F2737;	
}


Merci de vos explications
Modifié par reman (23 Oct 2010 - 22:58)
Sujet clos
Aller à