1
私はDIVを並べて並べることにいくつか問題があります。イメージが役に立ちます。divコンテナのHTML side by side div
赤いボックス（または好きなもの）を緑の輪郭のある領域に配置する必要があります。私はフロートのようなものを避けるようにしたい：左;これはナビゲーションバーの書式設定を破棄するためです。
ナビゲーションバーの周りに特定の量のピクセルを使用してスパンタグを使用しようとしました（これはうまくいかず、とにかくやっていません）。
私は初心者であり、未経験であることに注意してください。あなたは何ができるか
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="en">
<head>
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<img id="header" alt="Banner" longdesc="Text Here" src="rsc/banner_phone.jpg"/>
<div class="sidebar">
<ul class="navigation">
<li class="current"><a href=""><em class="home"></em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="templates"> </em><b>Homepage</b></a></li><br /><br />
<li><a href="d"><em class="psd"> </em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="tutorials"> </em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="shop"> </em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="contact"> </em><b>Homepage</b></a></li><br /><br />
</ul>
</div>
<div class="main">
<p>sdfds</p>
</div>
</div>
</body>
</html>
css:
/* PAGE CONTAINERS */
/* Background Color */
body {
background:#CCCCCC
}
.page {
width:80%;
margin-left:10%;
background-color:white;
box-shadow: 4px 4px 4px #000000;
}
.main {
position:absolute;
left:180px;
background-color:red;
}
/* NAVIGATION ELEMENTS */
#header {
width:100%;
height:185px;
}
.navigation {
padding:3px 0 3px 0;
margin:0;
list-style:none;background-color:#DDDDDD;
width:180px;
height:100%;
}
.navigation li a {
float:left;
height:40px;
line-height:40px;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
font-size:11px;
}
.navigation li a b {
float: left;
display: block;
padding: 0 20px 0 8px;
}
.navigation li.current a {
color:#0000FF;
font-weight: bold;
font-size:13px;
}
.navigation li a:hover {
color:#0000FF;
padding: 0 0px 0 20px;
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}
/* ICON ELEMENTS */
.navigation li a em.home {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/contact.png);
background-repeat: no-repeat;
background-position: center center;
ありがとう、面白いのは、インラインで表示しようとしていて、前にブロックを表示しようとしています。私はこの時点で絶望的でした。これはうまくいった。私はちょうど上にテキストを揃えなければなりませんでした。 tyvm。私はそれ以上の問題がある場合私は戻ってきます。 – Ryan
喜んでそれは助け...そして受け入れてくれてありがとう... – mtahmed