Aide sur la mise en page d'un site (HTML/CSS)

121 messages
DVD-RW
DVD-RW

Le 27 Octobre 2011 à 18h54

Bonjour,

J'ai deux soucis : la partie droite où se situe le texte n'a pas la même hauteur que la partie avec le menu -qui pourrait la dépasser selon la quantité de texte et d'images- enfin je n'arrive pas à borner l'espace disponible pour le texte, j'aimerais qu'il reste que dans la partie blanche.

Voici le texte HTML et celui du CSS :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

		<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />

        <title>...</title>

    </head>



    <body>

<div id="header"></div>

<div id="container">

<div id="menu">

<img src="images/menu.png" alt="Menu">

</div>

<div id="main"><div id="texte">

<p>.</p>

</div></div></div>

<div id="footer"></div>

    </body>

</html>

body

{

   width: 960px;

   margin: auto; /* Pour centrer notre page */

   margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */

   margin-bottom: 0x;    /* Idem pour le bas du navigateur */

   background-color: #000000; /* Le fond de la page sera vert */

   font-size: medium; /* Paragraphes de 14 pixels */

   text-align: justify;

   font-family: Georgia, Arial, Verdana, serif;

   padding-left: 5px;

   padding-right: 5px;

}

div#header {

	float: center;

	width: 960px;

	height: 258px;

	background: black url(images/banniere.gif) no-repeat right bottom;

}

div#menu {

	float: left;

	width: 215px;

	background: black url(images/fondmenu.png) repeat right bottom;

}

div#main {

	float: left;

	width: 745px;

	background: black url(images/corps.jpg) repeat right bottom;

}

div#footer {

	clear: left;

	width: 960px;

	height: 231px;

	background: black url(images/footer.gif) no-repeat right bottom;

}

Merci beaucoup !!

JVelon

9 messages
Neurone isolé

Le 20 Novembre 2011 à 14h02

Bonjour,

Personnellement, j'utiliserais une table (table, tr, td...)
Je sais, c'est pas "à la mode", mais le résultat serait, je crois, plus fiable.

ju2cho7

7342 messages
No-Life
No-Life

AidoCodeur

Modérateur

Le 24 Novembre 2011 à 18h14

Bonsoir, Clin d'oeil

Citation de JVelon

Bonjour,

Personnellement, j'utiliserais une table (table, tr, td...)
Je sais, c'est pas "à la mode", mais le résultat serait, je crois, plus fiable.

Au-delà des questions de mode, c'est surtout toute la sémantique du HTML qui est ignorée. Un tableau est prévu pour stocker des données, et même si le résultat est bon, la structure s'alourdit alors que le CSS permet la même chose (et en mieux, puisque facilement modulable).

Pour en revenir au problème, pourquoi utiliser une image comme fond, alors qu'il te suffirait d'utiliser l'image seulement pour le texte d'en-tête, et de mettre une bordure rouge et un fond blanc pour le reste ? Cela te permettrait de fait que ton texte se limite à ton cadre blanc Clin d'oeil

	Informations	Messages
Sarti 121 messages DVD-RW		Le 27 Octobre 2011 à 18h54 Bonjour, J'ai deux soucis : la partie droite où se situe le texte n'a pas la même hauteur que la partie avec le menu -qui pourrait la dépasser selon la quantité de texte et d'images- enfin je n'arrive pas à borner l'espace disponible pour le texte, j'aimerais qu'il reste que dans la partie blanche. Voici le texte HTML et celui du CSS : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" /> <title>...</title> </head> <body> <div id="header"></div> <div id="container"> <div id="menu"> <img src="images/menu.png" alt="Menu"> </div> <div id="main"><div id="texte"> <p>.</p> </div></div></div> <div id="footer"></div> </body> </html> body { width: 960px; margin: auto; /* Pour centrer notre page / margin-top: 0px; / Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! / margin-bottom: 0x; / Idem pour le bas du navigateur / background-color: #000000; / Le fond de la page sera vert / font-size: medium; / Paragraphes de 14 pixels */ text-align: justify; font-family: Georgia, Arial, Verdana, serif; padding-left: 5px; padding-right: 5px; } div#header { float: center; width: 960px; height: 258px; background: black url(images/banniere.gif) no-repeat right bottom; } div#menu { float: left; width: 215px; background: black url(images/fondmenu.png) repeat right bottom; } div#main { float: left; width: 745px; background: black url(images/corps.jpg) repeat right bottom; } div#footer { clear: left; width: 960px; height: 231px; background: black url(images/footer.gif) no-repeat right bottom; } Merci beaucoup !!


Publicité

JVelon 9 messages Neurone isolé		Le 20 Novembre 2011 à 14h02 Bonjour, Personnellement, j'utiliserais une table (table, tr, td...) Je sais, c'est pas "à la mode", mais le résultat serait, je crois, plus fiable.
		Merci de visiter mon site : http://www.calagenda.fr/ : un calendrier agenda gratuit et sans inscription

ju2cho7 7342 messages No-Life AidoCodeur Modérateur		Le 24 Novembre 2011 à 18h14 Bonsoir, Citation de JVelon Bonjour, Personnellement, j'utiliserais une table (table, tr, td...) Je sais, c'est pas "à la mode", mais le résultat serait, je crois, plus fiable. Au-delà des questions de mode, c'est surtout toute la sémantique du HTML qui est ignorée. Un tableau est prévu pour stocker des données, et même si le résultat est bon, la structure s'alourdit alors que le CSS permet la même chose (et en mieux, puisque facilement modulable). Pour en revenir au problème, pourquoi utiliser une image comme fond, alors qu'il te suffirait d'utiliser l'image seulement pour le texte d'en-tête, et de mettre une bordure rouge et un fond blanc pour le reste ? Cela te permettrait de fait que ton texte se limite à ton cadre blanc
		Nous ne fournissons pas d'aide par MP. ;)