01-20-2013, 06:38 PM
|
PM User |
#4
|
|
New Coder
Join Date: Feb 2012
Posts: 75
Thanks: 8
Thanked 0 Times in 0 Posts
|
Quote:
Originally Posted by Excavator
Hello aaronoafc,
Look at it this way. - I took the image out of #sidebar and moved it up in the markup so it would come first
- I removed the images containing div as it's not needed
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Oldham Athletic Blog!</title>
<style type="text/css">
body {
margin: 0;
background: #003DF5;
font-family: Arial, sans-serif;
font-size: 0.8em;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
p {
line-height: 1.5em;
color: #FFF;
}
a:hover { text-decoration: none; }
/****************
Header
****************/
#header {
float: left;
margin: 20px 0;
}
#header h1 {
font-size: 3em;
margin: 0;
color: #FFF;
}
#header h2 {
margin: 0;
color: #FFF;
font-size: 1.4em;
}
/****************
Navigation
****************/
#nav {
list-style: none;
padding: 0;
float: right;
margin: 40px 0;
}
#nav li {
float: left;
margin: 14px;
font-size: 1.4em;
}
#nav li a {
color: #FFF;
text-decoration: none;
}
#nav li a:hover { color: yellow; }
/****************
Content
****************/
#content {
float: left;
width: 660px;
margin-right: 20px;
}
#content .post {
background: #33A1C9;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #ccc;
overflow: auto
}
#content .post h3 {
margin: 0;
color: #ccc;
font-size: 1.4em;
}
#content .post h3:hover { color: yellow; }
.pic1 {
margin-left: 10px;
float: right;
width: 300px;
height: 200px;
}
.pic2 {
margin-left: 10px;
float: right;
width: 300px;
height: 200px;
}
.pic3 {
margin-left: 10px;
float: right;
width: 100px;
height: 130px;
}
/****************
Sidebar
****************/
#sidebar {
float: left;
width: 200px;
padding: 10px;
background: #33A1C9;
border: 2px solid #ccc;
}
#sidebar h3 {
color: #ccc;
font-size: 1.4em;
margin: 0;
}
#logo { float: left; }
img#logo {
height: 200px;
width: 200px;
margin: 0 12px 12px;
background: #f00;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Oldham Athletic Blog</h1>
<h2>The life of an Oldham fan</h2>
</div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Forum</a></li>
</ul>
<div id="content">
<div class="post">
<h3>First Post</h3>
<img src="images/nottingham_win.jpg" class="pic1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mollis eros,
nec laoreet sapien bibendum vitae. In at iaculis ipsum. Nunc vitae tortor vitae elit molestie
porttitor quis nec justo.
</p>
</div>
<div class="post">
<h3>Second Post</h3>
<img src="images/baxter_dickov.jpg" class="pic2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mollis eros,
nec laoreet sapien bibendum vitae. In at iaculis ipsum. Nunc vitae tortor vitae elit molestie
porttitor quis nec justo.
</p>
</div>
<div class="post">
<h3>Third Post</h3>
<img src="images/new_badge.jpg" class="pic3">
</div>
</div>
<img src="images/new_badge.jpg" alt="description" id="logo">
<div id="sidebar">
<div class="section">
<h3>Latics to play Liverpool!</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices lacinia elit eget placerat.
Nullam aliquet, erat ac auctor placerat.
</p>
</div>
<div class="section">
<h3>Too early for Daniel Taylor?</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices lacinia elit eget placerat.
Nullam aliquet, erat ac auctor placerat.
</p>
</div>
</div>
</div>
</body>
</html>
|
Life saver! Thank you 
__________________
Don't Click Here!
|
|
|