18041 sujets

Questions générales et questions de débutants

[résolu] Question fondamentale sur les dimensions des blocs

Bonjour à tous !

Avant toute chose, je vous pris de pardonner les questions simplistes d'un débutant en webdesign comme moi. Mais je pense que j'ai besoin qu'on me remette les idées en place sur des notions de bases.
Voici mon problème :
J'ai un site basique composé des élements suivants :
-un conteneur principal de 780px de largeur et centré
-une bannière occupant toute la largeur.
-juste en dessous, un menu horizontal
-après sur la gauche, un petit menu de navigation flottant (120 de large et marges extérieur de 20px)
- et enfin sur la droite un "conteneur d'article" de 540px de large.

Sur ce même conteneur d'article, j'ai appliqué un margin-left de 180px, donc mathématiquement la taille maximale de mon conteneur peut être de 600px ( 180+600=780).
Et bien en pratique que NINI ! Si je mets 600 en largeur au conteneur d'articles il se barre en dehors du contneur principal. Smiley fache

Voilà... si une ames charitable pouvait éclarer ma lanterne, car le monde du css est depuis redevenu un peu obscure pour moi ! Smiley rolleyes

merci d'avance
Modifié par faenor (26 Sep 2007 - 12:05)
Salut faenor Smiley cligne ,

on peut suspecter des margin, padding ou border par défaut mais sans voir la page en ligne ou le code complet ça va être difficile d'en dire plus...

A+ Smiley smile
Salut Heyoan,

Tu as surement raison pour le praticien c'est plus évident avec le css sous les yeux...
Donc le voici :

#conteneur
{
	width : 780px ;
	margin-top : 20px ;
	border : 2px solid blue ;
	min-height : 780px ;
	margin:  auto ;
	
}

#bannière
{
	margin : 0 ;
	padding : 0 ;
	height : 180px ;
	border-bottom : 2px solid rgb(228,57,27) ;
	background-image : url("images/ban3.jpg") ;
	
}

#menuhaut
{
	margin: 0 ;
	padding: 0 ;
	list-style : none ;
	height : 35px ;
	border-bottom : 2px solid rgb(228,57,27) ;
}

#menuhaut li
{
	
	float: left ;
	width : 120px ;
	line-height : 35px ;
	margin-right : 1px ;
	background : #ffa601 ;	
}

#menuhaut li a
{
	display : block ;
	text-align : center ;
	height : 35px ;
	text-decoration : none ;
	color: #fff ;
	font-weight: bold ;
}

#menuhaut li a:hover
{
	text-decoration : underline ;
	background : rgb(190,15,15) ;
}

#menugauche
{
	margin : 0 ;
	padding : 0 ;
	list-style : none ;
	margin-top : 30px ;
	margin-left : 20px ;
	float : left ;
	min-height : 520px;
	width :  120px ;
	border : 2px dotted red ;
	text-align : center ;
}
...
#contenart
{

	margin : 0 ;
	padding : 0 ;
	margin-top : 30px ;
	margin-bottom : 30px ;
	margin-left : 180px ;
	width : 540px ;
	min-height : 600px ;
	border : 2px dotted red ;
	padding-left : 20px ;
	padding-right : 20px ;
	
}

#contenart h2
{
	border-bottom : 2px solid green ;
}

#pied_page
{
	text-align : center ;
}


et une capture d'écran résultant du code...
upload/14199-workinprog.jpg

désolé pour la qualité médiocre, Paint me fait n'importe quoi.... Smiley biggol
Bonjour,

Il faut ajouter les padding left et right à ton calcul, ce qui donne :
180+600+20(padding-left)+20(padding-right)=820

Réduit la width de 40px (180px --> 140px) et ça devrait fonctionner.

En espérant avoir été assez clair.
Bon courage.
Modifié par mecho (26 Sep 2007 - 17:08)
salut mecho ! merci là ça colle

en fait j'ai maintenant un nouveau problème : 

#conteneur
{
	width : 780px ;
	margin-top : 20px ;
	background : url("images/bordconteneur.jpg") repeat-y center ;
	min-height : 780px ;
	margin:  auto ;
	position : relative ;
	padding : 10px ;
}


comme vous le voyez j'ai essayé de mettre une bordure simulée par un background comme dans le tuto "creation d'un design avec 2 colonnes". Mais mes padding ne fonctionnent plus.... Smiley fache

Heyoan : voici le code xhtml si tu vois des trucs à améliorer dans l'architecture :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Page d'exemple pour tester le CSS</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="design.css" />
   </head>
   <body>
	<div id="conteneur">
		<div id="bannière">
		</div>
		<ul id="menuhaut">	
			<li><a href="#" title="aller à la section 1">Item 1</a></li>
			<li><a href="#" title="aller à la section 2">Item 2</a></li>
			<li><a href="#" title="aller à la section 3">Item 3</a></li>
			<li><a href="#" title="aller à la section 4">Item 4</a></li>
			<li><a href="#" title="aller à la section 5">Item 5</a></li>
		</ul>
		<div id="menugauche">
			<div class="element_menu">
				<h3>Les cours </h3>
				<ul>
					<li><a href="">Cours 1</a></li>
					<li><a href="">Cours 2</a></li>
					<li><a href="">Cours 3</a></li>
				</ul>
			</div>
			<div class="element_menu">
				<h3>Les annexes</h3>
				<ul>
					<li><a href="">Annexe 1</a></li>
					<li><a href="">Annexe 2</a></li>
					<li><a href="">Annexe 3</a></li>
				</ul>
			</div>
			
		</div>
		<div id="contenart">
			<h1>bienvenue sur logicae</h1>
			<h2>Accueil</h2>
			<p>				
				blablabla
			</p>
		</div>
		<div id="pied_page">
			Copyright 2007 logiquae.fr
		</div>
	</div>
		
       
   </body>
</html>


avec la nouvelle capture d'écran :
upload/14199-pb.jpg

ça me gene surtout au niveau du menu horizontal et de la bannière.

merci Smiley cligne
Modifié par faenor (26 Sep 2007 - 19:22)
rebonjour,

Bon entre temps j'ai pu m'arranger pour que visiuellement ça colle...
La preuve en image :
rebonjour,

Bon entre temps j'ai pu m'arranger pour que visuellement ça colle...
La preuve en image : upload/14199-presquebon.jpg

mais je ne suis pas satisfait parce que je comprend pas un truc.
Malgré mes padding extérieurs au conteneur principal le menu flottant du haut et la banniere n'en tenaient pas compte et dépassaient.

Pourquoi donc a-t-il fallu que je mette des margin à ces 2 éléments ? Alors que dans le tuto "Design XHTML/CSS complet avec 2 colonnes de même hauteur" , pas besoin tout marche sans problemes.

Pour info l'image de fond fait 800px de large et la banniere 780.

voici mon CSS final :

#conteneur
{
	width : 780px ;
	background : url("images/bordconteneur.jpg") repeat-y center ;
	min-height : 100% ;
	margin:  auto ;
	position : relative ;
	padding-left : 10px ;
	padding-right : 10px ;
	margin-top : 0 ;
}

#bannière
{
	margin : 0 ;
	padding : 0 ;
	height : 180px ;
	border-bottom : 2px solid rgb(228,57,27) ;
	background : url("images/ban3.jpg")  ;
	margin-left : 13px ;
	margin-right :12px ;
}

#menuhaut
{
	margin: 0 ;
	padding: 0 ;
	list-style : none ;
	height : 35px ;
	border-bottom : 2px solid rgb(228,57,27) ;
	margin-left : 13px ;
	margin-right :12px ;
}


Voilà c'est ma dernière question, après je ne vous embeterais plus promis ! Smiley lol
merci de votre patience
Modifié par faenor (27 Sep 2007 - 11:07)
c'est bon j'ai trouvé ; en fait le problème venait d'une mauvaise mise à l'échelle de mon image qui a déformé des bordures. Smiley ohwell

désolé pour le dérangement ! Smiley rolleyes Smiley lol
Modifié par faenor (28 Sep 2007 - 21:54)
Sujet clos
Aller à