| aaronoafc |
01-20-2013 04:47 PM |
quick question about CSS
1 Attachment(s)
Is there a way in css to basically take priority over something else? As you can see the oldham logo on the right hand side is inside the sidebar, looks like its nested inside.
I basically want on the right side, the logo at the top of the sidebar (but not part of it) just beneath the nav...but aligned with the main content on the left...then the sidebar pushed down due to the logo being there.
Shown in the screenshot, top red box is where i want logo - bottom red where right sidebar should begin
HTML
Code:
<!DOCTYPE html>
<html>
<head>
<title>Oldham Athletic Blog!</title>
<link rel="stylesheet" type="text/css" href="css/style.css"
</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">
<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>
<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 id="logo">
<img src="images/new_badge.jpg">
</div>
</div>
</div>
</body>
</html>
CSS
Code:
/****************
Page Styles
****************/
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;
}
#logo img {
width:200px;
height:200px;
}
}
Cheers |
