28220 sujets

CSS et mise en forme, CSS3

Mise en forme Site Complexe en Css

Bonjour,
Je débute depuis peu le Css, et j'ai à ma charge la réalisation et la mise en page du design d'un site web.
Je dois effectuer la mise en forme suivante:

http://www.tchatroom.com/beta/plan.JPG

( Fais sous Paint en 5 / 5 ne faites pas gaffe Smiley smile )

Pour cela j'ai déja fais le code CSS suivant:


<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 202px;
}
#conteneur {
position: absolute;
width: 800px;
left: 50%;
margin-left: -400px;
}
#centre {
margin-left: 153px;
margin-right: 153px;
}
#gauche {
position: absolute;
left:0;
width: 153px;
background-image:url(images/middle.JPG);
}
#droite {
position: absolute;
right:0;
width: 153px;
background-image:url(images/middle.JPG);
}
#pied {
height: 51px;
background-image:url(images/copyright.jpg);
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 4px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:0;

}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 4px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>


ainsi que le code html allant avec :

<div id="conteneur">

	  <div id="header">
	  	<object type="application/x-shockwave-flash" data="images/Entete.swf" width="800" height="202">
			<param name="movie" value="images/Entete.swf" />
			<param name="wmode" value="transparent" />
			<p>Image ou texte alternatif</p>
		</object>
	</div>
  <div id="gauche"><p>menu</p>
	  	<p>largeur fixe : 150px</p>
	  
<ul class="menugauche">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>

			<li><a href="">Menu 3</a></li>

			<li><a href="">Menu 4</a></li>
			</ul>
		
	        <p>&nbsp;</p>
	        <p>&nbsp;</p>
	        <p>&nbsp;</p>
  </div>
	  
	  <div id="droite"><p>droite</p>
	  	<p>largeur fixe : 150px</p>

	  	
			<ul class="menudroit">
			<li><a href="">Menu 1</a></li>

			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>

		

	        <p>&nbsp;</p>
	        <p>&nbsp;</p>
	        <p>&nbsp;</p>
	  </div>
	  
  	<div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />

  	  partie avec du contenu occupant le reste de la largeur                <br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	</div>
	  
	  <div id="pied">pied de page</div>

</div>


Ce qui donne ceci : http://www.tchatroom.com/beta/test2.htm

Mais voilà, premièrement je ne trouve pas comment rajouter les "tops" et les "bas" des menus sur les cotés de manière fixe.
Et deuxièmement, je rencontre le problème suivant: http://www.tchatroom.com/beta/pb.htm lorsque je veux rajouter du texte, les menus ne s'étirent pas avec la box centrale.

Comment Faire ??

Merci à l'avance pour vos réponses, si mon problème n'est pas assez clair demandez moi quels points voulez vous que je détaille.

Cordialement,
DJo
Modifié par DrDJo (11 May 2005 - 21:57)
Modérateur
Vu ton interface, personnellement, j'utiliserais un background pour donner l'effet des colonnes. Voir cet article très intéressant : http://pompage.net/pompe/colonnesfactices/

Dans l'exemple donné, l'article indique de mettre le background au body, mais tu peux très bien le mettre seulement dans ton div central. Tu vois un peu l'idée ?
Modifié par Merkel (11 May 2005 - 22:27)
Administrateur
Salut et bienvenue ici,

Pour les questions souvent posées, n'oublie pas de faire une Recherche sur le forum, ou sur la FAQ car la réponse s'y trouve Smiley smile
J'ai effectué une recherche avant de poster mais sans succes, rien ne correspond précisement a mon problème, ou alors mes recherches n'ont pas été bien ciblées, dsl, personne ne peux m'aider avec du code ?
Voilà une base

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Mise en page 3 colonnes</title>
		
		<style type="text/css" media="screen">
		* { margin: 0; padding: 0 }
		
		body
		{
			text-align: center;
		}
		
		div#conteneur
		{
			width: 800px; /* mieux vaut faire des mises en page de 770px */
			margin: 0 auto;
			text-align: left;
			background: #0f0;
		}
		
		div#header
		{
			height: 202px;
		}
		
		div#menu1
		{
			float: left;
			width: 153px;
			background: #ff0;
		}
		
		div#menu1 ul, div#menu2 ul
		{
			list-style-type: none;
		}
		
		div#menu2
		{
			float: right;
			width: 153px;
			background: #f00;
		}
		
		div#contenu
		{
			margin: 0 153px;
			background: #00f;
		}
		
		p#footer
		{
			clear: both;
		}
		</style>
	</head>
	
	<body>
	<div id="conteneur">
		<div id="header">Animation flash</div>
		<!-- utiliser <h1>Titre du site</h1> en alternative à l'animation flash si le flash est inactif -->
		
		<div id="menu1">
			<h2>Titre de rubrique 1</h2>
			<ul>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
			</ul>
			
			<h2>Titre de rubrique 2</h2>
			<ul>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
			</ul>
		</div>
		
		<div id="menu2">
			<h2>Titre de rubrique 3</h2>
			<ul>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
			</ul>
			
			<h2>Titre de rubrique 4</h2>
			<ul>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
				<li><a href="index.html">item</a></li>
			</ul>
		</div>
		
		<div id="contenu">
			<h2>Titre de page</h2>
			<p>Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf. Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf. Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf.</p>
			<p>Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf. Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf. Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf.</p>
			<p>Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf. Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf. Lorem ipsum dolor sit amet bla bjpdf osdf s pdosf dsf dosfidf odfpoidf opdifpdsf poidsf.</p>
		</div>
		
		<p id="footer">Pied de page</p>
	</div>
	</body>
</html>

J'ai pas trop le temps de faire plus pour tout de suite
J'ai trouvé une solution temporaire ( suivant l'idée de Merkel ), dans le conteneur, j'ai mis un fond d'écran avec la zone du milieu et les menus, ainsi les menus s'élargissent, mais il reste encore un problème, je ne peux pas écrire sur le menu et sur la zone de texte sur la même ligne désormais...

#conteneur {
position: absolute;
width: 800px;
left: 50%;
margin-left: -395px;
background-image:url(images/fond.JPG);
}


Exemple:

MenuG_____________________Centre Texte_________________________MenuD

Menu1
Menu2
_______1ere ligne de Texte ici au lieu de 2 ligne plus haut
_______________________________________________________________Menu1

Voilà mon problème concrétement, tout devrait être sur la même ligne sauf Menu2 a gauche qui devrait être a la ligne...

De plus il faut que j'intègre maintenant les chapeau en haut des menus et en bas de position fixe et qu'il puisse être poussés par le bas par le texte soit du milieu soit des menus, Une idée ?
Modifié par DrDJo (12 May 2005 - 10:16)
Sujet clos
Aller à