Html分区定位

-4

即时通讯尝试获得这些div的定位权，我希望它的横幅，div是页面的一半，并在页面的右侧，以便它覆盖容器所在的同一水平空间，并让菜单栏div左对齐。Html分区定位

HTML：

<html> 
    <head> 
    <meta content="en-gb" http-equiv="Content-Language"> 
    <title>hhhh</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <style type="text/css"> 
    </style> 
    </head> 
    <body> 

    <div id="bannerdiv" title="Banner" align="center"> 

     <img alt="logo" height="63" src="images/Logo.gif" width="126"></div> 


    <div id="container"> 
    <h2 class="auto-style2">tgfdgfdgfghgfhgfh</h2> 

     </div> 

    <div id="menubar" title="menu" style="width: 13%"> 
    <ul> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    </ul> 
    </div> 
    <div id="mainpage" class="auto-style1" style="height: 96px; width: 82%"> 


    </div> 


    </body> 
    </html>

CSS：

#container { 
    background-color: #008852; 
    font-family: Arial; 
    color: #FFFFFF; 
    text-align: center; 
    margin-top: 10px; 
} 

#menubar 

ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 
a:link, a:visited { 
    display:block; 
    font-weight:bold; 
    color:#000000; 
    background-color:#EFF1EB; 
    width:120px; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-transform:uppercase; 
    border-style: solid; 
    border-color: #638529; 
    font-family: Arial, Helvetica, sans-serif; 
    border-top-width: 1px; 
} 
a:hover, a:active { 
    background-color:#7A991A; 
} 
#mainpage { 
    width:50%; 
    float:left; 
    background-color: #EDEFEE; 
} 
#menubar { 
    font-size: xx-small; 
    width:50%; 
    float:left; 
}

来源

2013-07-16 Rob

<div id="mainpage" class="auto-style1" style="height: 96px; width: 82%;float:right;height:50%;">

？

来源

2013-07-16 12:32:51 JohnnyFaldo

为什么问号？这是一个问题/评论？或者这是一个答案？ –

这是一个奇怪的答案，因为我相信它回答了这个问题，但我并不是100％确定问题是什么！ – JohnnyFaldo

您所有的造型应该通过CSS来实现，而不是通过样式，宽度，高度等

<div class="container"> 
    <div id="banner"> 
    <img src="image"/> 
    </div> 
<div id="nav"> 
    <ul> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    </ul> 
</div> 
<div id="main-content"> 
    <h2>title</h2> 
    <p>main content</p> 
</div>

你的CSS然后

#container{ 
    width:960px; 
} 
#nav{ 
    width:240px; 
    float:left; 
} 
#main-content{ 
    width:720px; 
    float:left; 
}

我建议watching the series at nettuts有关HTML和CSS来获得一个正确的方式来使用CSS的想法。祝你好运

来源

2013-07-16 14:12:33

回答

相关问题