Web Analytics Made Easy -
StatCounter i'm guessing this is simple? - CodingForum

Announcement

Collapse
No announcement yet.

i'm guessing this is simple?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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>
    Whatever you do, do not click me!

  • #2
    this is what I was trying ath the mintute but its not working
    Code:
    .rss {
    	float: right;
    }
    .leftnav {
    	float: left;
    }
    Whatever you do, do not click me!

    Comment


    • #3
      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

      Comment


      • #4
        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; Apr 9, 2009, 06:29 PM.
        Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
        Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          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.
          Whatever you do, do not click me!

          Comment


          • #6
            Sounds like you are not clearing the floats properly before the text. Put the floats in a wrapper and give the wrapper overflow:auto;.
            .My new Javascript tutorial site: http://reallifejs.com/
            .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
            .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

            Comment


            • #7
              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;
              }
              [COLOR="Red"]
              .sidebar p {
              clear: both;
              margin: 0 10px;
              }[/COLOR]
              .rss {
              	float: right;
              }
              .leftnav {
              	float: left;
              }
              [COLOR="Red"].foot {
              clear: both;
              }[/COLOR]
              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; Apr 16, 2009, 10:23 AM.
              Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
              Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

              Comment


              • #8
                much thanks!
                Whatever you do, do not click me!

                Comment

                Working...
                X