웹 사이트 템플릿을 작업 중이며 텍스트 콘텐츠가 잘못되어 ul 클래스 Navbar를 사용하게됩니다. 텍스트 콘텐츠 영역의 높이가 495px이 필요하지만 어떤 줄을 엉망으로 만들 었는지 알 수 없습니다.
@charset "utf-8";
/* CSS Document */
/* CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
text-align:center;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End CSS Reset */
/* Temporary Style for Testing
* {
border:#FFFFFF 1px dashed !important;
}
End Temporary Style for Testing */
/* Layout CSS Rules */
#container {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 1020px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
background-image: url(../images/containerbackground.jpg);
}
#header {
width: 1008px;
height: 123px;
background-image: url(../images/Header.jpg);
display:inline-block;
margin: 0 auto;
background-repeat: no-repeat;
}
#logo {
width: 236px;
height: 80px;
float: left;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
#navBar {
width: 1008px;
height: 43px;
float: left;
}
#navBar .navButtons {
width: 252px;
height: 43px;
float: left;
}
#imageContent {
width: 254px;
height: 250px;
float: left;
img.center{
text-align: center;
margin: 0 auto;
}
#textContent {
width: 706px;
height: 495px;
float: left;
padding-right: 0px;
color: #000066;
text-align: left;
padding-bottom: 15px;
}
#textContent h1 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #000066;
text-align: center;
padding-bottom: 10px;
}
#textContent p {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
font-weight:normal;
color:#FFFFFF;
line-height:20px;
text-align: left;
}
#footerContent {
width: 1008px;
height: 58px;
float: left;
}
/* End Layout Styles */
/* Tag Selectors */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- Container for whole site-->
<div id="container">
<!-- Header Content -->
<div id="header">
<div id="logo">
<a href="index.php" title="Link to home page"> <img src="images/logo.png" alt="logo"></a>
</div>
</div>
<!-- End Header Content -->
<!-- Logo in header content -->
<!-- End logo header content -->
<!-- main Navigation Bar -->
<div id="navBar">
<!-- main Navigation Bar List -->
<ul class="navBar">
<li><a href="about.php" title="about">About</a></li>
<li><a href="news.php" title="news">News</a></li>
<li><a href="events.php" title="events">Events</a>
<ul class="navBar">
<li><a href="#.php" title="#">page 1</a></li>
<li><a href="#.php" title="#">page 2</a></li>
<li><a href="#.php" title="#">page 3</a></li>
</ul> <!-- end portfolio submenu -->
</li>
<li><a href="contact.php" title="Contact">Contact</a></li>
</ul>
<!-- End main Navigation Bar List -->
</div> <!-- End main Navigation Bar -->
<!-- Image Content Area -->
<div id="imageContent">
<img src="images/textimage.png" alt="Image Placeholder">
<!-- Image Placeholder -->
</div>
<!-- End Main Content Area -->
<!-- Text Content Area -->
<div id="textContent">
<h1>Welcome</h1>
<p>Thanks for viewing this website, I will past a recent news article as a place holder. OCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher SurigaOCEAN ISLE, N.C. -- Flooding has been a concern for Ocean Isle Beach, just north of Myrtle Beach, in recent years. However, the heavy rainfall the Carolinas have seen lately is now causing concern for tidal flooding.
Photos sent to us by Christopher Suriga </p>
</div>
<!-- End Text Content Area-->
<!-- Footer Content -->
<!-- Footer Navigation List -->
<div id="footer">
© 2015 Created by Bounkong Sibounheuang
<a href="contact.php" title="Contact Us">Contact Us</a>
<a href="https://www.gliffy.com/go/publish/7665711" title="Site Wireframe">Wireframe</a>
<a href="https://www.gliffy.com/go/publish/7596189" title="Sitmap">Sitemap</a>
<a href="http://voo2do.com/pub/bounkongm6" title="Voo2Do">Voo2Do</a>
<!-- End Footer Navigation List -->
<!-- End Footer Content Area -->
<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid-css.png" alt="Valid CSS"></a>
</div>
</div>
<!--End container for whole site-->
<!--W3C Code Validator Start-->
<!--W3C Code Validator End-->
</body>
</html>Navbar에 float : left 속성을 사용합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다