28172 sujets

CSS et mise en forme, CSS3

Aide mise en forme DIV

Bonjour a tous,

J'ai 2 petites questions, car j'ai dû mal à m'en sortir avec ces DIV Smiley decu , je n'arrive pas à comprendre pourquoi mon div (container) sort du div (global) alors que je pense avoir bien définit les propriétés ? (Et je ne veux pas faire de overflow: hidden)

2ème question : Je souhaite que mon div à droite (en blanc) occupe toute la partie de droite que la colonne continu à droite du vert et du gris, comment puis je faire ?

Merci beaucoup de votre aide...je vous joins mon code :

----- Ma page html ------


<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=utf-8" />

<link type="text/css" rel="stylesheet" href="css/style2.css"  />

</head>
<body>
  <div id="global">
   
    <!-- Dock Header -->
    <div id="Header">
    </div>   

    <!-- Page Centrale -->
  	<div id="Container"> 
	</div>
	
	<!-- Menu Droite --> 
    <div id="Container_Right">
	</div>
	
	<!-- Fil d'ariane -->
	<div id="fil_ariane">
    </div>
	  
	<!-- Bas de page -->        
    <div id="Bottom">
	</div>
	
  </div>     
</body>
</html>


----- Ma feuille css ------



/* General */
html , body {
	font: 11px Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	background-color:pink;
	width: 100%;
	height: 60%;
}

img {
	border: none;
}

#global { 
    position:relative;
    left:50%;
    width: 1024px; 
    height: 100%;
    margin:10px 0 10px -500px;
    border-style: solid;
    border-color: #FFFFFF;
}

/* Header */
#Header {
    position: relative;
	height: 100px;
    background-color:red;
}

#Container {
    position: relative;
    height: 100%;	
    width: 800;
    background-color:black;
    float:left;	
}

/* Container */
#Container_Right{
    position: relative;
    height: 100%;
    width: 224;
    background-color:#FFFFFF;
    float:right;
}

/* Fil ariane */
#fil_ariane {
    position: relative;
    height: 30px;
    width: 800;
    background-color:Green; 
    float:left;
}

/* Bottom */
#Bottom {
    position: relative;
    height: 50px;
    width: 800;
    background-color: #d2d2d3;
    float:left;
}
Please !!! Personne pour un dépannage, j'aimerai éviter de partir dans les tableaux pour faire mon site. Mais là je ne vois pas d'où vient le problème. Merci infiniment pour celui\celle qui viendra m'aider.
Bonjour,
pareto a écrit :
4.01 Transitional pour le doctype
Un doctype est présent, mais mal inséré.

Kiara, la première chose à faire est de supprimer <html> au tout début de ton code, ensuite vérifier que ton code est bien valide.

Ensuite, tu pourra te concentrer sur le problème, qui est un dépassement des flottants. En ajoutant clear:both; à bottom cela devrait résoudre le problème.

Pour ta seconde question, il te faut mettre en place des colonnes factices, ou utiliser le display table-cell. Pour cela, je te laisse faire une petite recherche dans la section "Apprendre" du site.
Sujet clos
Aller à