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
    Xiy
    Xiy is offline
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need Positioning help

    Hey, I'm pretty new to CSS only been learning 1/2 days and each time I create a full width header and input images, for example I've included 3 images, (Twitter, RSS and Email) - each time I resize the browser the images fly of the pages.

    If I set a width they stay in there position fine but I'm wanting it so the header is 100%.

    Code:
    <div id="container">
         <div id="top">
         <img src="images/g2_01.jpg" />
         <div id="social">
         <a href="#"><img src="images/g2_02.jpg"  border="0" /></a><a href="#"><img src="images/g2_03.jpg"  border="0" /></a><a href="#"><img src="images/g2_04.jpg"  border="0" /></a>
         </div>
         </div>
    
    
    </div>
    
    
    #container {
    width: 100%;
    }
    
    #social {
    float: right;
    height: 42px;
    }
    
    #top {
    background-image: url(images/g2_01.jpg);
    background-repeat: repeat-x;
    height: 42px;
    width: 100%; 
    position: relative; 
    left: 0; 
    top: 0;
    }
    If you don't understand what I mean have a check here:

    1) http://img80.imageshack.us/img80/7413/33436788.jpg

    2) http://img683.imageshack.us/img683/7634/47424581.jpg

    I'm not sure if this is a easy fix or not, please help.
    Last edited by Xiy; 01-02-2010 at 02:02 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Xiy,
    That will work, you are just putting an image in twice when you don't need to.
    Delete this bit in red-
    Code:
    <div id="container">
    <div id="top">
    <img src="images/g2_01.jpg" />
    <div id="social">
    <a href="#"><img src="images/g2_02.jpg" border="0" /></a><a href="#"><img src="images/g2_03.jpg" border="0" /></a><a href="#"><img src="images/g2_04.jpg" border="0" /></a>
    </div>
    </div>
    
    
    </div>
    Just a wild guess but, for #social to drop when the page is that wide makes me think that g2_01.jpg is a very wide image. It could be that a little slice of that, say 42px by 1px, might look fine repeated on the X axis.

    Also, in the CSS for #social you have float:right;
    For a float to work correctly and dependably, it needs to have a width.

    Please use the code tags, - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post. That #i button really only works for highlighting a single line of code.
    Last edited by Excavator; 01-02-2010 at 01:33 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

  • #3
    Xiy
    Xiy is offline
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, I think I've fixed it now, deleted the image then added a width on #social and put the right margin to 1200px, seems to of worked . Also do you have any tips on making my code cleaner?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Xiy View Post
    Also do you have any tips on making my code cleaner?
    If that was the entire code then you definitely need a DocType Declaration. See the link about DocTypes in my sig below.
    I would recomend a Strict DocType for any new website.
    Start with something like 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>
    </head>
    <body>
    </body>
    </html>
    Also, the links about spellchecking in my signature line can be a lot of help.


    Other than that, the way you layout your markup can also help. I like to comment each closing tag so it's easier to keep track of what div it's actually closing. Indenting your code will help with that too.
    With that in mind, change that code above to look like 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: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
    </body>
    </html>
    That's just a snippet that DW opens for me when I start a new .html document.
    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:

    Xiy (01-02-2010)

  • #5
    Xiy
    Xiy is offline
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey Thanks, I already had a DOC Type declared just I didn't want to bore you with the whole code. As for commenting my code I'll start doing it more, thanks again.


  •  

    Posting Permissions

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