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 to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css coding problem

    I am trying to code a new layout and am having some problems with it. When the window is maximized the layout looks great, but when I resize the window smaller, and it gets smaller than the 'logo' div, the layout gets out of whack. The content div and menu start moving, but the background header image stays the same. I've tried all kinds of stuff to try and fix it, but I just cant get it right for some reason. If anyone can help me out, it would be MUCH appreciated.

    Here's the html code:

    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>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <Link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="logo">
    </div>
    <div id="page" >
    	<div id="menu">
    		<ul>
    			<li><a href="Link.html" title="Link">Link</a></li>
    			<li><a href="Link.html" title="Link">Link</a></li>
    			<li><a href="Link.html" title="Link">Link</a></li>
    			<li><a href="Link.html" title="Link">Link</a></li>
    		</ul>
    	</div>
      <div id="content"><h1>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc diam. Nullam at sem. Vivamus faucibus pede vitae ligula. Curabitur accumsan blandit lacus. Morbi tortor magna, tincidunt ac, vulputate at, rhoncus eu, risus. Pellentesque dignissim diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lectus. Etiam erat.
    <br />
    <br />
    Nullam vehicula ante sit amet pede. Vestibulum sapien orci, dictum id, imperdiet sed, bibendum vitae, eros. Vestibulum molestie. Integer varius justo mattis magna. Curabitur ullamcorper, nulla id interdum tempor, massa velit eleifend nisl, eget iaculis ligula turpis vitae felis. Donec sagittis rutrum augue. Fusce eu felis pellentesque diam tincidunt auctor. In rutrum aliquet nulla. Nunc mattis. Morbi dictum tincidunt felis.
    </h1><br />
      <br />
      <br />
    
      <!-- end #page -->
    
      </div>
    	<div class="style9" id="footer"><br />
    	</div>
    </body>
    </html>
    and the css code:

    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	margin: 0 0;
    	background: #ffffff url(images/img01.gif) repeat-x;
    	font: normal 13px Arial, verdana, sans-serif;
    	color: #000000;
    }
    
    h1, h2, h3 {
    	color: #ffffff;
    }
    
    h1 {
    	margin: 0;
    	padding: 0;
    	font:  12px "verdana", Times, serif;
    	color: #292929;
        letter-spacing: .25px;
        line-height: 2.4em;
    }
    
    h2 {
    	font:  10px "verdana", Times, serif;
    	font-size: 100%;
    	color: #4f5977;
        letter-spacing: 0px;
    }
    
    h3 {
    	margin-bottom: 1em;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    	font-size: 77%;
    	font-weight: bold;
    }
    
    ol {
    	list-style-position: inside;
    }
    
    ul {
    	list-style: none;
    }
    
    ul li {
    	padding-left: 20px;
    	background: url(images/img09.gif) no-repeat left center;
    }
    
    a {
    	text-decoration: none;
    	color: #2d57b3;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #000000;
    }
    
    /* Logo */
    
    #logo {
    	width: 900px;
    	height: 545px;
    	margin: 0 auto;
    	padding: 0;
    	background: url(images/header.jpg) no-repeat;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #000000;
    }
    
    /* Page */
    
    #page {
    	width: 676px;
    	margin: 0 auto;
    	background: url(images/textbg.jpg) repeat-y;
    }
    
    /* Content */
    
    #content {
    	width: 646px;
    	margin: -160px 0 0 0 ;
    	padding: 15px;
    	background: url(images/textbg.jpg) no-repeat;
    }
    
    #content .content {
    	padding: 0px 0px 0px 0;
    }
    
    #welcome {
    	float: left;
    	margin: 12px 0 0px 30px;
    	width: 392px;
    	height: 27px;
    	text-align: center;
    	background: url(images/welcome.gif) no-repeat 0 0	
    }
    
    /*- Menu --------------------------- */
    	
    #menu {
    	font:  14px "verdana", Times, serif;
    	list-style-type: none;
    	float: right;
    	width: 142px;
    	border-style: none;
    	border-color: #34415a;
    	margin: -255px 44px 0px 0px;
    	}
    	
    #menu li a {
    	height: 32px;
      	voice-family: "\"}\""; 
      	voice-family: inherit;
      	height: 24px;
    	text-decoration: none;
    	}	
    	
    #menu li a:link, #menu li a:visited {
    	color: #34415a;
    	display: block;
    	background: url(images/menu1.gif);
    	padding: 8px 0 0 10px;
    	}
    	
    #menu li a:hover {
    	color: #dce0e6;
    	background: url(images/menu1.gif) 0 -32px;
    	padding: 8px 0 0 10px;
    	}
    	
    #menu li a:active {
    	color: #53668f;
    	background: url(images/menu1.gif) 0 -64px;
    	padding: 8px 0 0 10px;
    	}
    	
    /*- End Menu --------------------------- */
    
    /* Footer */
    
    #footer {
    	width: 676px;
    	height: 105px;
    	margin: 0 auto;
    	background: url(images/footer.gif) no-repeat;
    }
    
    #footer p {
    	font:  10px "verdana", Times, serif;
    	font-size: 100%;
    	color: #4f5977;
        letter-spacing: 0px;
    	margin: -25px 4px;
    	font-size: 85%;
    }
    
    #footer .legal {
    	float: right;
    	margin: 45px 4px;
    	color: #444444;
    }
    
    #footer a {
    	color: #444444;
    }
    
    #footer a:hover {
    	color: #4f5977;
    	}
    Thanks!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link? the above code(without images) is not enough to replicate the issue at your end.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure, ill throw the images in it and upload it when i get home. thanks

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    my new hosting hasn't came through yet, so I just uploaded it to you.send.it, hope thats ok.


    http://www.yousendit.com/download/Y2...T2JvQnZIRGc9PQ

  • #5
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by zoo_vault View Post
    my new hosting hasn't came through yet, so I just uploaded it to you.send.it, hope thats ok.


    http://www.yousendit.com/download/Y2...T2JvQnZIRGc9PQ
    not too many people are going to download that...
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #6
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    where could i temporarily upload it until my hosting goes through?



    edit: free hosting ftw! haha

    here's the link

    http://zoovault.110mb.com/
    Last edited by zoo_vault; 11-16-2008 at 05:06 AM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend you to put everything inside a wrapper div, say
    Code:
    <div id="wrapper">
      ...........
    </div>
    and then set the required width(I think a 646px would be enough) for that. Now there is no need to apply a width for the other stretched elements. There by you will get a better control over the layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it works!

    i set the width to 900 and the margins to auto, and it works great. i dont understand it completely, but it does the job haha.

    Thanks alot!


  •  

    Posting Permissions

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