Posted by: Zulaika May 28 2012, 05:44 PM
How can I make split the content division into two columns? and how can I fill in the background with an image above the navigation bar?
index.html:
CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<p><span id="header-title">Header</span></p>
<p><span id="header-description">Description</span></p>
</div>
<div id="navigation">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div id="border-padding">
<div id="content">
<div id="post">
<span id="post-title">Test Post</span>
<p>Hello World!</p>
</div>
</div>
<div id="sidebar">
<p><span id="sidebar-title">Sidebar Title</span></p>
<p>This is a sample content and <a href="#">link</a>.</p>
</div>
</div>
<div id="footer">
<p>All right reserved.</p>
</div>
</div>
</body>
</html>
style.css
CODE
a:link {
color:#ff0000;
}
a:visited {
color:#ff0000;
}
a:hover {
color:#dd0000;
}
a:active {
color:#dd0000;
}
body {
font-family:arial,sans-serif;
background-image:url('images/bg.jpg');
background-repeat:no-repeat;
}
#container {
background: #fff;
border: solid #000 1px;
border-radius: 5px;
margin-left: 25%;
margin-right: 25%;
}
#border-padding {
padding-left: 5px;
padding-right: 5px;
}
#header {
text-align: center;
}
#header-title {
font-size: 26px;
font-weight: bold;
}
#header-desciption {
}
#navigation {
background: #ff0000;
display: block;
float: left;
margin: 0 auto 1em;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}
#navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#navigation li {
float: left;
position: relative;
}
#navigation a {
display: block;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
color:#fff;
border-right: solid #000 1px;
}
#navigation li:hover > a {
background: #dd0000;
}
#navigation ul ul a:hover {
background: #dd0000;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation li:active > a {
background: #dd0000;
}
#content {
}
#post {
}
#post-title {
font-weight: bold;
font-size: 20;
}
#indent {
padding-left:15px;
}
#sidebar {
}
#sidebar-title {
font-weight: bold;
font-size: 20;
}
#footer {
text-align: center;
}
Posted by: Frederiek May 29 2012, 04:52 AM
Have a look here: http://css-discuss.incutio.com/wiki/Two_Column_Layouts .