Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    quick question about CSS

    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
    Attached Thumbnails Attached Thumbnails quick question about CSS-untitled.jpg  
    Don't Click Here!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    aaronoafc (01-20-2013)

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Be sure to check the code in a validator. This code passes:

    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" 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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •