Html/positionnement css aide

alt text Html/positionnement css aide

Comment puis-je aligner côté jaune côte à côte avec le rouge tout en gardant le texte « compétences » sous le gris? Ce que j'ai essayé: using float: gauche avec le rouge mais qui pousse le texte de compétences aussi bien. J'ai essayé d'utiliser relatif et absolu, mais ils sont confus pour moi.

HTML: id div clés de: profiletable (gris), profileleft (rouge), profileright (jaune).

<!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" lang="en" xml:lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
     <title>Starbuzz Coffee</title> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

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

      <div id="main"> 
       <h1>Jonny</h1> 
       <div id="profiletable"> 
        <div id="profileleft"><?php echo $gravatar ?></div> 
        <div id="profileright"> 
         <strong>Name:</strong> <?php echo $member->getFirstName() . ' ' . $member->getLastName(); ?><br /> 
        <strong>Name:</strong> <?php echo $member->getFirstName() ?><br /> 
        </div> 
       </div> 



       <h1>Skills</h1> 
       <p> 
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type 
        specimen book. It has survived not only five centuries, but also the leap into 
        electronic typesetting, remaining essentially unchanged. It was popularised in 
        the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
        and more recently with desktop publishing software like Aldus PageMaker including 
        versions of Lorem Ipsum. 
       </p> 
      </div> 

      <div id="sidebar"> 
       <p class="beanheading"> 
        sidebar 
       </p> 

      </div> 

      <div id="footer"> 
       &copy; 2005, Jonny 
      </div> 
     </div> 
    </body> 
</html>

CSS: ids clés tout en bas

body { 
    background-color: #eeeeee; 
    font-family:  Georgia, "Times New Roman", Times, serif; 
    font-size:  small; 
    margin:   0px; 
} 

#header { 
    background-color: #675c47; 
    margin:   10px; 
    height:   108px; 
} 

#main { 
    background:  #ffffff; 
    font-size:  105%; 
    padding:   15px; 
    margin:   0px 10px 10px 0px; 
    width:   510px; 
    float:   left; 
} 

#sidebar { 
    background:  #7DCFE7; 
    font-size:  105%; 
    padding:   15px; 
    margin:   0px 0px 10px 540px; 
} 

#footer { 
    background-color: #675c47; 
    color:   #efe5d0; 
    text-align:  center; 
    padding:   15px; 
    margin:   10px; 
    font-size:  90%; 
    clear:   left; 
} 

h1 { 
    font-size:  120%; 
    color:   #954b4b; 
} 

.slogan { color: #954b4b; } 

.beanheading { 
    text-align:  center; 
    line-height:  1.8em; 
} 

a:link { 
    color:   #b76666; 
    text-decoration: none; 
    border-bottom: thin dotted #b76666; 
} 
a:visited { 
    color:   #675c47; 
    text-decoration: none; 
    border-bottom: thin dotted #675c47; 
} 

#allcontent { 
    width:   800px; 
    padding-top:  5px; 
    padding-bottom: 5px; 
    background-color: #675c47; 
    margin-left:  auto; 
    margin-right:  auto; 
} 

#profiletable{ 
    width:   510px; 
    background:  #eee; 
} 

#profileleft { 
    background:  red; 
    font-size:  105%; 
    padding:   0px 10px 10px 0px; 
    margin:   0px 10px 10px 0px; 
    width:   128px; 
} 

#profileright { 
    background:  yellow; 
    font-size:  105%; 
    padding:   0px 10px 10px 0px; 
    margin:   0px 0px 10px 128px; 
    width:   200px; 
}

Source

2010-11-08 Jonathan

.......... merci! .......... – Jonathan

Modifier la marge sur #profileright à margin:0px 0px 10px 10px; [vous modifiez la dernière valeur pour la marge pour le côté gauche de l'élément]
Ajouter float:left; sur #profileleft et #profileright
Ajouter dans votre css les suivantes .clear {clear:both};
Après la #profileright ajouter <div class="clear"></div>

exemple en direct [fixe - j'avais la position de la div claire mauvaise position ]: http://jsbin.com/afonu3/2

Source

2010-11-08 20:58:06 Sotiris

Tout d'abord, si vous travaillez à largeur fixe, vous pouvez toujours position en utilisant top et left.

Mais pour avoir une présentation plus fluide, mettre

profileleft comme float: left,
profileright comme float: left; clear: right

et vos compétences tomberont sous les (vous pouvez même ajouter un float: left).

Vous pourriez avoir besoin d'un petit élément de fermeture sous profileright et les compétences (un <br /> avec clear: both devrait faire)

Source

2010-11-08 20:44:33 Konerak

dans votre CSS définir vos divs rouge et jaune pour avoir les éléments suivants:

float: left; 
display: inline-block;

Créer une nouveau style

.clear { 
    clear: both; 
}

Mettre en tout élément de bloc, j'utiliser un div, avec la classe = « clear » après le bloc jaune et avant votre compétence s en-tête.

Source

2010-11-08 20:46:02 Tom

Ajouter un

float:right;

à #profileright

alors clair avec <br clear="all"> ici:

<strong>Name:</strong> 
<?php echo $member->getFirstName() ?> 
<br /> 
</div> 
<br clear="all" /> 
</div>

Source

2010-11-08 20:46:42

Répondre

Questions connexes