2011-04-08 2 views
0

J'essaie de démarrer un site web pour le plaisir, mais j'ai des problèmes avec les styles CSS et les balises avec l'alignement, j'ai un conteneur, nav horizontale, Nav gauche, Nav Right, Header et pied de page.CSS Image Problèmes

Ils sont tous dans l'élément conteneur mais je ne peux pas les aligner correctement. L'en-tête et la navigation norz sont très bien, tout comme les pieds de page. Le problème que j'ai est que le corps gauche et le droit ne s'alignent pas correctement peut-on aider. ci-dessous est le codage pour le HTML

<body> 
<div id="container"> 
<div id="header"> 

</div> 

<div id="horizontalnav"> 
     <div class="navlinks "> 
      <ul> 
      <li><a href="http://www.Facebook.com" target="_blank">Facebook</a></li> 
      <li><a href="http://www.gaiaonline.com" target="_blank">Gaia</a></li> 
      <li><a href="http://www.roblox.com" target="_blank">Roblox</a></li> 
      <li><a href="http://www.adventurequest.com" target="_blank">Adventure Quest</a></li> 
      <li><a href="http://www.animefreak.tv" target="_blank">Anime Freak</a></li> 
      <li><a href="http://www.youtube.com" target="_blank">Youtube</a></li> 
      </ul> 
     </div> 
</div> 

<div id="leftnav"> 
    <p>Left Nav </p> 
</div> 


<div id="body"> 


</div> 

<div id="rightnav"> 

    <p>right Nav </p> 

</div> 

<div id="footer"> 
this is the footer 
</div> 


</div> 

</body> 

et maintenant pour le oui j'utiliser css l'un des hors 2createawebsite.com et essayer de le manipuler

#container { 
width: 100%; 
} 

#header { 
    width: 89%; 
height: 15%; 
position: relative; 
background-image: url(Header.jpg); 
border-bottom: 2px solid #000000; 
} 

#header a { 
color: #ffffff; 
text-decoration: underline; 
font-weight: bold; 
font-family: Verdana; 
font-size: 14px; 
} 

#header a:visited { 
color: #000000; 
text-decoration: underline; 
font-weight: bold; 
} 

#header a:hover { 
color: #cc0000; 
text-decoration: none; 
font-weight: bold; 
} 
#horizontalnav { 
width: 89%; 
height: 30px; 
position: relative; 
background-color: #F2D6AF; 
border-bottom: 2px solid #000000; 
} 
.navlinks { 
position: absolute; top: 4px; left:240px; 
} 
.navlinks ul { 
margin: auto; 
} 
.navlinks li { 
margin: 0px 18px 0px 0px; 
list-style-type: none; 
display: inline; 
} 
.navlinks li a { 
color: #000000; 
padding: 5px 12px 7px; 
text-decoration: none; 
font-size: 16px; 
font-family: Verdana;} 
.navlinks li a:hover{ 
color: #ffffff; 
background-image: url(Header.jpg); 
text-decoration: underline; 
} 
#header p { 
color: #000000; 
font-family: Arial; 
font-weight: bold; 
} 
.smalltext { 
font-size: 9px; 
font-family: Arial;} 
#leftnav { 
float: left; 
width: 10%; 
height: 70%; 
background-color: #F8AA3C; 
border-right: 1px dashed #694717;} 
#rightnav { 
float: right; 
width: 10%; 
height: 70%; 
background-color: #F8AA3C; 
border-left: 1px dashed #694717;} 
    #body { 
margin-left :0px ; 
width : 50% ; 
padding: 0px 0px 0px 0px; 
} 
#body p { 
word-wrap : true ; 
font-family : courier new ; 
} 
    #footer { 
clear: both; 
background-color: #D1C0A7; 
} 
+0

Vous aurez probablement besoin de poster un croquis, un lien direct ou un http://JSFiddle.net pour cela, et de décrire ce que vous entendez par "aligner correctement". Il est impossible de dire à partir du code comment les images s'alignent. –

+0

Je suppose que vous voulez que la div qui dit «Right Nav» soit sous la barre de liens supérieure, comme celle qui dit «Left Nav»? – Ilkka

+0

@llkka oui j'ai pensé que dehors et juste flotter quitté le corps et la navigation droite mais maintenant je voudrais que le corps pour faire défiler vers le bas avec les nav gauche et droite pour se déplacer – daddycardona

Répondre

2

Si vous changez #header et #horizontalnav à 100% cela fait tout étendre à la largeur de la page; Je suppose que c'est ce que vous vouliez accomplir

#header { 
    /* existing code */ 
    width: 100%; 
} 

#horizontalnav { 
    /* existing code */ 
    width: 100%; 
} 

Quant à la colonne de gauche, colonne de corps et la colonne de droite, ceux-ci peuvent être réglés sur inline-block (flotteur n'est pas nécessaire alors) et leurs largeurs peuvent être réglées sur 10%, 80%, 10% respectivement. En général, cela devrait corriger la mise en page.

+0

pas exactement mais merci j'avais la largeur définie à la image réelle – daddycardona

+0

battu au coup de poing :) – Ilkka