Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1857 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bloc qui descend légérement [CSS]

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Bloc qui descend légérement [CSS]

n°2007977
willy54
Posté le 08-07-2010 à 10:45:17  profilanswer
 

Bonjour à tous.
Je rencontre un petit problème. La colonne de droite descend légèrement quand j'inscris du texte dans la colonne du centre.
 
http://img580.imageshack.us/img580/8707/howsitecss.png
 
Code style.css:
 
body
{
   background-color: #C0C0C0;
}
 
#cadresuperieur
{
 width: 881px;  
 height: 100px;
    margin: auto;
 margin-bottom: 20px;
 background-color: #FF7F50
}
#grandcadre
{
 width: 881px;  
 height: 500px;
    margin: auto;
 background-color: #FFFFCC  
}
#cadreinterieurgauche
{
width: 150px;  
height: 500px;
float: left;
background-color: #FF0000
}
 
#cadreinterieurcentre
{
 
 
}
 
#cadreinterieurdroit
{
width: 150px;  
height: 500px;
float: right;
background-color: #FF0000
}
 
#cadreinferieur
{
 width: 881px;  
 height: 20px;
    margin: auto;
 margin-top: 20px;
 background-color: #FF7F50
}

 
Code index.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" xml:lang="fr">
<head>
<title>Site en test</title>
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/test3/style.css" />
</head>
<body>
<div id="cadresuperieur">
On affiche ici le logo
</div>
<div id="grandcadre">
<div id="cadreinterieurgauche">
Texte de gauche
</div>  
<div id="cadreinterieurcentre">
Hello
</div>
<div id="cadreinterieurdroit">
Texte de droite
</div>  
</div>
<div id="cadreinferieur">
On affiche le copyright, le nom du concepteur...
</div>
</body>
</html>

 
-----------
 
Comment faire?
 
 

mood
Publicité
Posté le 08-07-2010 à 10:45:17  profilanswer
 

n°2007978
David Bori​ng
Posté le 08-07-2010 à 10:47:40  profilanswer
 

#cadreinterieurcentre
{
 
 float:left
width:xxxpx
}

n°2007982
willy54
Posté le 08-07-2010 à 10:56:52  profilanswer
 

David Boring a écrit :

#cadreinterieurcentre
{
 
 float:left
width:xxxpx
}


 
Merci bien, ça fonctionne.
Tu pourrais m'expliquer pourquoi il faut utiliser float:left au centre?

n°2009485
meekch
Posté le 16-07-2010 à 13:11:02  profilanswer
 

Pour qu'il se positionne en flottant juste à côté de la colonne de gauche.  
Sans le "float" la balise div étant de type block, celui-ci occupe automatiquement toute la largeur. Du coup le contenu qui suit, se retrouve à la ligne.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bloc qui descend légérement [CSS]

 

Sujets relatifs
Tuto pour faire un menu horizontal en CSS[CSS] transformer une charte tableau en div
[HTML/JS] application du setTimeOut pour un effet "machine à ecrire"Problème CSS : Espace non désiré d'origine inconnue sous les images
[Resolu] Probleme image en bordure de bloc ![CSS] problème de mise en page
aide modification CSSProblème avec un menu CSS
Header puis bloc occupant 100% du reste de la pageCSS : Ombre portée sur tableau
Plus de sujets relatifs à : Bloc qui descend légérement [CSS]


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR