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 8 of 8
  1. #1
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post

    i'm guessing this is simple?

    hi there, I'm new to this styling and laying out using ccs so sorry for sounding like a dumass still tryin to grip it. Anyways the thing I'm havg trouble with is I was my title image aligned left of the div and my rss icon aligned right, but I've tried a few ways and it just muddles them up?

    <div class="sidebar">
    <p><img src="images/blog.png" alt="mini blog" width="161" height="47" /><a href="/n13news/rss.php"><img style="border: 0px" src="images/rss.png" alt="RSS Subscribe" /></a></p>
    <p>text goes here.</p>
    </div>

  • #2
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    this is what I was trying ath the mintute but its not working
    Code:
    .rss {
    	float: right;
    }
    .leftnav {
    	float: left;
    }

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Not enough info. We'll need to see your actual page in order to figure out how it's being "muddled up." Providing a link to your page is especially crucial when dealing with image issues.
    matt | design | blog

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Yes twistedsoul,
    Not enough info, otherwise it would be simple.
    To put things side by side you need to float them.

    In the snippet of html you posted there is neither a .leftnav or .rss class so your CSS
    Code:
    .rss {
    	float: right;
    }
    .leftnav {
    	float: left;
    }
    isn't going to do anything.

    ================

    Without knowing how wide your .sidebar is or what size your rss image is... I just grabbed some random images and did this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    .sidebar {
    	width: 300px;
    	height: 400px;
    	float: left;
    	overflow: auto;
    }
    	.sidebar img {
    		float: left;
    	}
    	.sidebar a {
    		float: right;
    	}
    .sidebar p {
    	clear: both;
    }
    
    </style>
    </head>
    <body>
        <div id="container">
            <div class="sidebar">
                    <img src="blog.png" alt="mini blog" width="161" height="47" />
                    <a href="/n13news/rss.php"><img src="rss.jpg" alt="RSS Subscribe" width="86" height="117" /></a>
                <p>text goes here.</p>
            <!--end sidebar--></div> 
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 04-10-2009 at 12:29 AM.
    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

  • #5
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    sorry for a real late reply, away easter weekend

    but anywys I've uploaded a sample page to show you http://www.skylinedesigns.co.uk/test/
    the trouble is when I set my title image to float left and my rss button right the text does'nt sit nicely underneath instead sets itself in the middle of both images.

  • #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Sounds like you are not clearing the floats properly before the text. Put the floats in a wrapper and give the wrapper overflow:auto;.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello again zooeyglass,

    Your .container does have floats that are not cleared. You can see by adding a background color like this -
    Code:
    .container {
    	width: 1000px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    background: #f00;
    }
    If you clear the floats with overflow:auto; the .container expands to enclose the floated elements.
    Like this -
    Code:
    .container {
    	width: 1000px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    background: #f00;
    overflow: auto;
    }
    Here's an explanation of how that works - http://www.quirksmode.org/css/clearing.html


    Along with your text, at the bottom your .foot is weird.
    Add this to your CSS -
    Code:
    .sidebar {
    	float: right;
    	width: 30%;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #999999;
    	overflow: auto;
    }
    
    .sidebar p {
    clear: both;
    margin: 0 10px;
    }
    .rss {
    	float: right;
    }
    .leftnav {
    	float: left;
    }
    .foot {
    clear: both;
    }
    Added a bit to your markup too -
    Code:
          <div class="sidebar">
            <img src="images/blog.png" alt="mini blog" class="leftnav" height="47" width="161"><a href="http://www.skylinedesigns.co.uk/n13news/rss.php"><img src="images/rss.png" alt="RSS Subscribe" class="rss" style="border: 0px none ;"></a>
            <p>some words here some more words and even more to make this longer</p>
            <p>some more words here </p>
      </div>
      <div class="foot">Content for  class "foot" Goes Here</div>
    </div>
    Last edited by Excavator; 04-16-2009 at 04:23 PM.
    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

  • The Following 2 Users Say Thank You to Excavator For This Useful Post:

    sphinx1994 (04-16-2009), twistedsoul (04-16-2009)

  • #8
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    much thanks!


  •  

    Posting Permissions

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