...

View Full Version : quick question about CSS



aaronoafc
01-20-2013, 04:47 PM
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


<!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


/****************
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

AndrewGSW
01-20-2013, 05:03 PM
You can use css z-index to change the stacking-order of elements; this property only applies to positioned elements (position: relative; absolute or fixed).

Excavator
01-20-2013, 06:05 PM
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



<!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>

aaronoafc
01-20-2013, 06:38 PM
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



<!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 :)

jerry62704
01-22-2013, 03:14 PM
Be sure to check the code in a validator. This code passes:


<!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" alt="nottingham"/>
<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" alt="baxter"/>
<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" alt="badge"/>
<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" alt="badge"/>
</div>
</div>
</div>
</body>
</html>

Your CSS has one extra closing brace as well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum