CSS图像问题

我想获得启动一个网站的乐趣，但我有CSS样式和标签与对齐的问题我有一个容器，水平导航，左导航，右导航，页眉和页脚。CSS图像问题

它们都在容器元素中，但我无法正确对齐它们。 header和norz nav都很好，页脚也很好。我遇到的问题是左侧身体和右侧不能正确对齐，任何人都可以帮助。下面是对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>

，现在的CSS是我用的是一次性2createawebsite.com，并试图操纵它

#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; 
}

来源

2011-04-08 daddycardona

您可能需要为此发布草图，实时链接或http://JSFiddle.net，并描述“正确对齐”的含义。这是不可能的从代码告诉如何图像对齐 – 2011-04-08 08:22:00

我想你想要说“右导航”的div在顶部链接栏下，就像那个说“左导航”？ – Ilkka 2011-04-08 08:24:55

@llkka是的我想通了，只是漂浮离开身体和右侧导航，但现在我想身体向下滚动左侧和右侧导航移动 – daddycardona 2011-04-08 08:29:43

如果更改的#header和#horizontalnav的编码100％，这使得一切都扩展到页面的宽度;我想这是你想要完成的

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

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

至于左边的列，身柱，右列是什么，这些都可以被设置为inline-block的（无需浴液从而）和它们的宽度可以设置为10％，80％，10％。一般来说，这应该修复布局。

来源

2011-04-08 08:27:49

不完全，但谢谢你，我有宽度设置为实际图像 – daddycardona 2011-04-08 08:30:50

殴打:) – Ilkka 2011-04-08 08:31:56

CSS图像问题

回答

相关问题