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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Akron, Ohio
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Trouble with DIV positioning for CSS layout

    So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text.

    I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want.

    Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!!


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
    
    <style type="text/css">
    
    body {
    	font-family: 'Lato', sans-serif;
    	margin: 0;
    	background: #0C0 url(landscaping1.jpg) no-repeat center top;
    	overflow:auto
    }
    
    #leftcontent
    {
    border:1px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:300px;
    height:300px;
    border-radius:12px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    box-shadow: 10px 10px 5px #888888;
    float:left;
    position:relative;
    top:450px;
    left:80px;
    }
    
    </style>
    <title>Mueller Lawn and Lanscape 2012</title>
    </head>
    
    <body>
    
    <div id="leftcontent">
    Some text goes here. 
    </div>
    
    </body>
    </html>
    Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now.
    Last edited by jamez14; 01-15-2012 at 01:38 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jamez14,
    A couple quick comments on your CSS -
    Code:
    body {
    	font-family: 'Lato', sans-serif;
    	margin: 0;
    	background: #0C0 url(landscaping1.jpg) no-repeat center top;
    	overflow:auto /*what is it you're trying to do with this?*/
    }
    #leftcontent {
    	border:1px solid #a1a1a1;
    	padding:10px 40px;
    	background:#dddddd;
    	width:300px;
    	height:300px;
    	border-radius:12px;
    	-moz-border-radius:25px; /* Firefox 3.6 and earlier */
    	box-shadow: 10px 10px 5px #888888;
    	float:left; /*it's float or positioning... not both, though it can be float and relative positioning*/
    	position:relative;
    	top:450px;
    	left:80px;
    }
    Maybe this link will help you a bit - http://www.barelyfitz.com/screencast...s/positioning/
    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:

    jamez14 (01-15-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Akron, Ohio
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I believe I accidentally put that overflow in there and forgot to take it out.

    And I've actually looked at that exact same link you posted when trying to figure out all this positioning stuff. I've tried numerous different things in hopes of finding what I need and still can't figure out how to get my DIVs to remain in one place.

    Thanks for your help though with my CSS!!

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Akron, Ohio
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Basically I want the DIV to "disappear" and force you to scroll to find it if you were to resize the window. Obviously I don't plan on users actually having to do this, unless they have an extremely small resolution.


  •  

    Tags for this Thread

    Posting Permissions

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