1
나란히 놓는 것과 관련하여 DIV에 문제가 있습니다. 이미지가 도움이 될 것입니다.div 컨테이너의 HTML 나란히 나란히 div
빨간색 상자 (또는 내가 좋아하는 것)가 녹색 윤곽선 영역에 있어야합니다. 나는 float : left와 같은 것을 피하려고 노력하고 싶다. 탐색 막대의 형식이 파손 되었기 때문입니다.
네비게이션 바 주변에서 특정 픽셀을 사용하여 스팬 태그를 사용해 보았습니다 (제대로 작동하지 않아 어쨌든 그렇게하지 않습니다).
나는 초보자이므로 익숙하지 않음을 명심하십시오. 당신이 할 수있는 일
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