28173 sujets

CSS et mise en forme, CSS3

Problème avec l’hauteur et le contenu

Salutation.
Je suis entrain de concevoir mon premier « template » pour joomla. Ce ci implique que je ne connais pas à l‘avance l’hauteur de la zone #content, de ce fait
J’aimerais bien que #main prenne l’hauteur exacte du #content.
Merci de votre aide

#css :
body {
	background: url(images/background.jpg);
	color: #FFFFFF;
	font: Verdana, Arial, Helvetica, sans-serif;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin-top: 0px;
}

div#banner {
	background-color: #FF0000;
	height: 60px;
	margin-top: 0px;
	text-align: left;
	top: 20px;
	width: 468px;
}

div#bannerHolder {
	background-color: #5A6365;
	height: 99px;
	left: 356px;
	margin-top: 0px;
	position: absolute;
	top: 76px;
	width: 478px;
}

div#bottom {
	background-image: url(images/bottom.gif);
	border-left: 1px #5B5650 solid;
	border-right: 1px #5B5650 solid;
	clear: both;
	height: 55px;
	margin-top: 0px;
	position: relative;
	width: 834px;
}

div#content {
   
	width: 386px;
	left: 192px;
	background-color: #3E3A36;
	position: absolute;
	
}

div#img02 {
	background-image: url(images/img_02.gif);
	height: 76px;
	margin-top: 0px;
	position: absolute;
	width: 356px;
}

div#img03 {
	background-image: url(images/img_03.gif);
	height: 76px;
	left: 356px;
	margin-top: 0px;
	position: absolute;
	width: 478px;
}

div#img05 {
	background-image: url(images/img_05.gif);
	height: 76px;
	margin-top: 0px;
	position: absolute;
	top: 76px;
	width: 356px;
}

div#img07 {
	background-image: url(images/img_07.gif);
	height: 54px;
	margin-top: 0px;
	position: absolute;
	top: 152px;
	width: 356px;
}

div#img08{
	float: left;
	height: 256px;
	margin-top: 0;
	width: 186px;
	background-image: url(images/img_08.gif);
	background-repeat: no-repeat;
	
}

div#latestnews {
	background-image: url(images/latest_news.gif);
	display: block;
	height: 40px;
	left: 183px;
	margin-top: 206px;
	position: absolute;
	width: 174px;
}

div#leftmodules {
	background-color: #3E3A36;
	margin-top: 0px;
	padding-left: 2px;
	position: absolute;
	top: 256px;
	width: 186px;
}

div#main {
	background-color: #3E3A36;
	border-left: 1px #5B5650 solid;
	border-right: 1px #5B5650 solid;
	margin-bottom: 0px;
	margin-top: 0px;
	position: absolute;
	left: 20%;
	right: 20%;
	top: 206px;
	width: 834px;
}

div#navigationmenu {
	padding-left: 20px;
	padding-top: 0px;
}

div#pathway {
	background-color: #3E3A36;
	height: 23px;
	left: 356px;
	margin-top: 0px;
	padding-top: 8px;
	position: absolute; /* padding-top: 15px;*/
	text-align: left;
	top: 175px;
	width: 478px; /*padding-top:px;*/
}

div#right {
	height: 100%;
	left: 588px;
	position: absolute;
	width: 244px;
}

div#search_box {
	background-color: #3E3A36;
	height: inherit;
	left: 590px;
	position: absolute;
}

/* PAGE ELEMENTS */
div#top {
	border-left: 1px #5B5650 solid;
	border-right: 1px #5B5650 solid;
	height: 206px;
	left: 20%;
	margin-top: 0px;
	position: absolute;
	right: 20%;
	width: 834px;
}

#bottomtext {
	color: #C2B1A0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: larger;
	margin-top: 25px;
	text-align: center;
	vertical-align: middle;
}


#html

<!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 rel="stylesheet" type="text/css" href="css.css" />
</head>

   <body>
    <div id="top">
      
		<div id="img02">&nbsp;</div>

      <div id="img03">&nbsp;</div>

	   <div id="img05">&nbsp;</div>

      <div id="img07">&nbsp;</div>

	   <div id="bannerHolder">

	    	<div id="banner">Banner Goes Here</div>

      </div>
 
      <div id="pathway">&nbsp;</div>

    </div>


         <div id="main">
			
			

	     
			<div id="img08">
           <div id="navigation_menu">Menu Here</div>
         </div>
			  <div id="right" >&nbsp;</div> 
			<div id="content">
			
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam pretium, odio quis tristique porttitor, nulla arcu luctus odio, vitae placerat tortor orci id augue. Phasellus sapien. Ut lobortis ipsum sit amet ligula. Donec magna nisl, mollis et, euismod a, rutrum luctus, dui. Curabitur semper nulla non eros. Integer luctus molestie nunc. Proin quis quam in purus hendrerit dictum. Praesent rhoncus, erat ut interdum dapibus, leo tellus pulvinar dui, in iaculis nibh neque ac est. In mi. Proin ultrices, eros nec vehicula sollicitudin, sem purus sodales pede, non euismod purus dui at magna. Suspendisse et libero non tellus laoreet tempor. Fusce quam. Vestibulum felis. Curabitur lectus tortor, auctor id, fermentum vel, blandit vitae, dui. Ut placerat. Duis posuere cursus justo. Quisque rhoncus tortor vitae diam.

Praesent ac ante. Vestibulum tempor, turpis ac porttitor vehicula, lorem justo blandit purus, et faucibus dui sapien eget arcu. In tempus vestibulum nibh. Donec nec mauris non nibh faucibus accumsan. Integer at ante volutpat massa tempor tincidunt. Quisque enim arcu, tincidunt at, vestibulum sit amet, porttitor eu, quam. Etiam nunc. Maecenas vehicula lectus ac turpis. Etiam consectetuer. Maecenas laoreet. Suspendisse potenti. Nam congue, ipsum ut faucibus pulvinar, sapien libero cursus mauris, ac aliquam augue nisl sit amet neque. Aenean sodales, dui quis fringilla pulvinar, metus ante ultrices mauris, ac dictum libero lacus ut neque. Nullam consectetuer iaculis risus. Donec mattis, augue nec sollicitudin accumsan, turpis augue vehicula purus, quis consectetuer lorem ligula interdum elit. Suspendisse vestibulum. Sed semper ullamcorper metus. Maecenas mollis. Aliquam in mauris eget urna porttitor convallis.

Quisque condimentum aliquam augue. Pellentesque at tortor sed erat luctus varius. Nullam convallis lectus. Mauris eros. Morbi vel ipsum. Morbi auctor nulla ultricies tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque aliquam, est a pharetra fermentum, lacus quam ultricies lacus, viverra eleifend dolor turpis sit amet urna. Suspendisse sodales porta dui. Suspendisse potenti. Sed semper, tellus eu ullamcorper nonummy, risus diam ultrices mauris, in aliquet tellus diam ac urna. Nulla aliquam bibendum pede. Cras odio. In eget pede. Sed neque sapien, elementum ut, ornare id, rutrum eget, erat. Pellentesque scelerisque, orci et ullamcorper pretium, quam eros ornare turpis, eu fermentum purus orci eget orci. Integer ligula turpis, cursus sed, euismod ac, sodales sed, metus. Suspendisse dignissim mi accumsan mauris. Suspendisse cursus scelerisque ante.

Vivamus malesuada gravida justo. Nullam volutpat. Maecenas sem erat, sodales in, viverra sit amet, laoreet quis, nibh. Nulla felis. Aliquam hendrerit odio placerat leo. Suspendisse viverra arcu non lectus. Nulla facilisi. Integer vulputate. Fusce a nunc nec pede pellentesque blandit. Suspendisse ac erat vel sem dapibus egestas. Sed hendrerit aliquam sapien. Aenean convallis mauris. Praesent nisi. Etiam pellentesque, nunc sed euismod cursus, massa quam elementum ipsum, et egestas nibh pede in lacus. Pellentesque fringilla odio consequat odio.

</div>
  

         <div id="left_modules"></div>
	
  <!--  <div id="bottom">
            <div id="bottomtext">©2006 Explicit UK Records Ltd. All rights reserved. All material on this site is protected by copyright law. Registered Office number: 05691571</div>

   </div> -->

  </div>
   

   </body>

</html>


page en ligne : http://dark-noise.com/explicit/
Modifié par demonark (20 Aug 2006 - 17:59)
Je diagnostique un abus caractérisé de positionnement absolu.

Les blocs positionnés en absolu ne sont plus pris en compte par les autres blocs dans le calcul de leur hauteur, par exemple. Le positionnement absolu est souvent utile, mais il me semble que tu en fais une utilisation très largement abusive. Il n'y a pas de contre-indication de principe, mais il faut savoir ce que l'on fait lorsque l'on positionne un élément en absolu.

Dans certains cas, utiliser les flottants plutôt que le positionnement absolu pourrait être indiqué.
Sur les div avec des images je n’ai pas trop le choix je pense, il faut que chaque bloc prenne sa position non ??
demonark a écrit :
Sur les div avec des images je n’ai pas trop le choix je pense, il faut que chaque bloc prenne sa position non ??

Les div avec les images, si tu penses aux blocs qui composent l'en-tête, peuvent effectivement être positionnées en absolu. Par contre, les blocs de contenu ne devraient pas l'être. Pour ces derniers, on utilisera plutôt des flottants.

Pour revenir à ce header, je m'interroge un peu sur le pourquoi de ce découpage qui rappelle furieusement un tableau de mise en forme... mais sans tableau de mise en forme. Quelle était l'utilité de découper à ce point, alors que l'on aurait peu simplifier en groupant certains blocs ?
Effectivement, vous avez raison je vais essayer de grouper certaines images mais je ne pense pas que ça va résoudre mon problème.

Sinon une question : est ce que c’est faisable d’avoir ce layout là :Explicit Records sans tableaux de mise en forme?

Merci
demonark a écrit :
Sinon une question : est ce que c’est faisable d’avoir ce layout là :Explicit Records sans tableaux de mise en forme?

Réponse : moi je peux le faire. Donc oui c'est possible... mais ça demande une certaine connaissances des différentes possibilités pour positionner des blocs, de la manière de les organiser/découper (bien qu'il ne faille pas penser en terme de découpage ImageReady, hein !), et également des quelques bugs d'Internet Explorer à contourner ou corriger.

Globalement, c'est une construction avec un conteneur global, une zone d'en-tête, trois « colonnes » (blocs flottants, à priori), et un pied de page.
Pour les trois colonnes flottantes, il y a des modèles sur Alsa, sinon celui-ci qui traîne :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

Pour le pied de page, il faudra faire quelque chose dans ce style là :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-2.html

Enfin il faudra peut-être jouer sur le positionnement relatif d'un ou deux éléments afin de créer certains effects de décalage des éléments de la maquette.


Voilà, je répète que tout ceci est tout à fait faisable, mais qu'il s'agit d'une mise en page complexe, qui demande une certaine maîtrise.
Milles merci oh grand maître mpop Smiley smile .
Je viens de suivre les exemples que vous m’avez montrés, j’ai aussi déniché quelques trucs dans un livre de CSS.
Je suis très content maintenant Merci encore. Smiley lol

Malgré que cela marche sur IE. Il y a quand même un petit problème sur FF et Opera : il y a un petit espace entre les blocs.

j'ai oublié de vous donner la nouvelle adresse :http://explicitrecords.net/
Modifié par demonark (21 Aug 2006 - 22:23)
Sujet clos
Aller à