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 15 of 15
  1. #1
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Having a bit of css difficulty..

    hi,

    having a little problem with my css at the moment (i'm seriously rusty). Anyway, i'm attempting to attach a sidebar next to a main "frame" or template. I'm trying to attach this sidebar to the right of a horizontally and vertically centered image of size 760 by 760 and the sidebar will be width of 100 and height 760. However, nothing i do is working...I'm wanting to keep the sidebar in the css and not in the html as it'd be used over other pages. here's the code so far...

    the Images/pswd_tempbacking.jpg is my main template or frame...
    and the ../Images/under_cons.gif is my sidebar...


    Code:
    <body>
    
        <div "wrapperhold">
        <div id="wrapper">
        <div id="center">
        <img src="Images/pswd_tempbacking.jpg" width="760" height="760"/>    </div>
        </div>
    </div>
    
    </body>

    and now the css, its a bit messy...


    Code:
    @charset "utf-8";
    
    * {
    	padding:0;
    	margin: 0;
    	}
    	
    body {
    	background-color: #333; /* cosmetic */
    	margin: 0px; /* required */
    }
    div#wrapper {
    	background-color: red; /* cosmetic */
    	height: 0px; /* set to taste */
    
    	/* required */
    	position: absolute;
    	overflow: visible;
    	display: block;
    	width: 100%;
    	left: 0px;
    	top: 50%;
    	
            position:relative;
    	background: #fff url(../Images/under_cons.gif);
    }
    div#center {
    	background-color: #666; /* cosmetic */
    
    	overflow: auto; /* set to taste */
    
    	position: absolute; /* required */
    	left: 50%; /* required */
    
    	margin-left: -430px; /* half of width */
    	width: 860px; /* width of div */
    
    	height: 760px; /* height of div */
    	top: -380px; /* half of height */
    }


    any help regarding this problem would be greatly appreciated. If what I have said is confusing i'll attempt another explanation...

    thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello SlyOne,
    I'll try to explain what's not working. I've highlighted the code that is not required and commented on some of the errors and contradictions.
    Also, you didn't post the entire code so I don't know if you have a DocType but you need one. Check the link in my sig about that.

    Quote Originally Posted by SlyOne View Post
    Code:
    <body>
    
        <div id="wrapperhold">
        <div id="wrapper">
        <div id="center">
        <img src="Images/pswd_tempbacking.jpg" width="760" height="760"/>    </div>
        </div>
    </div>
    
    </body>

    and now the css, its a bit messy...


    Code:
    @charset "utf-8";
    
    * {
    	padding:0;
    	margin: 0;
    	}
    	
    body {
    	background-color: #333; /* cosmetic */
    	margin: 0px;  /*required */
    }
    div#wrapper {
    	background-color: red; /* cosmetic */
    	height: 0px; /* set to taste */
    
    	/* required */
    	position: absolute; /*it's absolute or relative, not both*/
    	overflow: visible;
    	display: block;
    	width: 100%;
    	left: 0px;
    	top: 50%;
    	
            position:relative;
    	background: #fff url(../Images/under_cons.gif);
    }
    div#center {
    	background-color: #666; /* cosmetic */
    
    	overflow: auto; /* set to taste */
    
    	position: absolute; /* required */
    	left: 50%; /* required */
    
    	margin-left: -430px; /* half of width */
    	width: 860px; /* width of div */
    
    	height: 760px; /* height of div */
    	top: -380px; /* this should be margin*/ 
    }

    This centers... it's hard to tell what you want to do with 3 layers of nested divs but I left them in for you. When you goto use them, you'll have to be careful not to break the centering.
    Have a look at 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">
    * {
    	padding:0;
    	margin: 0;
    	}
    	
    body {
    	background-color: #333; /* cosmetic */
    	margin: 0px; /* required */
    }
    #wrapperhold {
    width: 1000px;
    	background: #000; 
    	margin: 0 auto;
    }
    #wrapper {
    	width: 1000px;
    	height: 1000px;
    	position:relative;
    	background: #fff url(../Images/under_cons.gif);
    }
    #center {
    	background-color: #666; /* cosmetic */
    	position: absolute; /* required */
    	top: 50%; /* required */
    	left: 50%; /* required */
    	width: 860px; /* width of div */
    	height: 760px; /* height of div */
    	margin: -380px 0 0 -430px; /* half of height and half of width*/
    }
    #sidebar {
    	width: 100px;
    	height: 760px;
    	float: right;
    	background: #fc6;
    }
    </style>
    </head>
    <body>
        <div id="wrapperhold">
            <div id="wrapper">
                <div id="center">
                	<img src="Images/pswd_tempbacking.jpg" width="760" height="760" alt="description goes here" />    
                    <div id="sidebar">
                    <!--end sidebar--></div>
                <!--end center--></div>
            <!--end wrapper--></div>
    	<!--end wrapperhold--></div>
    </body>
    </html>
    Here is a simplified example of the "dead center" method your using here -http://nopeople.com/CSS/vertical%20center%20with%20CSS/pg2.html
    View the source to see how it's done.
    Last edited by Excavator; 03-08-2009 at 06:54 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

  • Users who have thanked Excavator for this post:

    SlyOne (03-08-2009)

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi,

    thanks for your reply and the code...had alot of problems when i applied it but now I just have one more problem on it. As the sidebar image is dropping underneath the main frame or template and leaving a grey space of roughly 100px wide i think.

    Here's my updated code, i'll include it all this time...

    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" />
    <title></title>
    <link href="css/pswd_main.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <style type="text/css">
    <!--
    body {
    	background-image: url(Images/splash_faded.gif);
    	background-color: #666666;
    }
    -->
    </style>
    </head>
    
    <body>
        <div id="wrapperhold">
            <div id="wrapper">
                <div id="center">
                	<img src="Images/pswd_tempbacking.jpg" width="760" height="760" alt="description goes here" />    
                    <div id="sidebar">
                    <!--end sidebar--></div>
                <!--end center--></div>
            <!--end wrapper--></div>
            			</div>
            
    	
    </body>
    
    </html>

    and the css...


    Code:
    @charset "utf-8";
    * {
    	padding:0;
    	margin: 0;
    	}
    	
    body {
    	background-color: #333; /* cosmetic */
    	margin: 0px; /* required */
    }
    #wrapperhold {
    	width: 860px;
    	background: #000; 
    	margin: 0 auto;
    }
    #wrapper {
    	width: 860x;
    	height: 760px;
    	background: #000;
    	position: relative;
    	background: #fff url(../Images/splash.jpg);
    }
    #center {
    	background-color: #666; /* cosmetic */
    	position: absolute; /* required */
    	top: 50%; /* required */
    	left: 50%; /* required */
    	width: 860px; /* width of div */
    	height: 760px; /* height of div */
    	margin: -380px 0 0 -430px; /* half of height and half of width*/
    }
    #sidebar {
    	width: 100px;
    	height: 760px;
    	float: right;
    	background: #fff url(../Images/under_construction.jpg);
    }

    thanks again

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I'm confused as to what we are centering now. When you make #wrapperhold and #wrapper the size of the image and #sidebar...
    the image and #sidebar are then contained and there is nothing to center.



    I'm not seeing the float drop in IE8, IE7 or any FF so I'm assuming your viewing this in IE6? I'm sure we've invoked several IE6 bugs with all that % positioning and negative margins in a container the same size as it's content.


    We could center #wrapperhold now, if you want.


    Also, it might be nice to see a link to this. If we could goto your test site we would be able to see the images your using.
    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
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I've been testing in google chrome at the moment.

    Anyway, here is the link to my testing server...when you see the page i'm sure you'll gather what i'm attempting to do. Just being quite difficult with my explanations, I apologise.

    http://www.pswebdesigns.co.uk/index.html

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It really does look like there is no need for 3 nested divs. See a link explaining divitis.

    I'm just goofing around with this ... but I didn't like the way your 1600X1200 pixel background image disappeared at smaller resolutions so I made it scale with the browser window. Resize your browser and watch the bg image.
    Here is a demo of that technique - http://nopeople.com/CSS/background_i...ize/index.html

    When we get rid of the extra divs your container is a lot easier to center. Still no IE6 here so I hope the float drop is gone...
    Have a look at the test site - http://nopeople.com/slyOne/
    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

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Nice little trick with the re-sizing background. That is most definately something I will now use in all my future projects from now on...thanks!

    However, the under_construction sidebar image (which is really acting for an image placement holder for the future on this site) is now invisible, I THINK it may be behind the grey bar...anyway to bring it to the front?

    many thanks

  • #8
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I also noticed this code in my "wrap" and "background_image" style tags...

    for the background_image
    Code:
    z-index: 1;
    for the wrap...
    Code:
    z-index: 2;

    just wondering what these pieces of code do? Trying to learn as i go here

    cheers
    Sly

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by SlyOne View Post
    Hi Excavator,

    Nice little trick with the re-sizing background. That is most definately something I will now use in all my future projects from now on...thanks!

    However, the under_construction sidebar image (which is really acting for an image placement holder for the future on this site) is now invisible, I THINK it may be behind the grey bar...anyway to bring it to the front?

    many thanks
    You have not made room for your sidebar
    Code:
    #wrap {
    	background-color: #2e3e3e; /* cosmetic */
    	position: absolute; /* required */
    	z-index: 2;
    	top: 50%; /* required */
    	left: 50%; /* required */
    	width: 760px; /* width of div */
    	height: 760px; /* height of div */
    	margin: -380px 0 0 -380px; /* half of height and half of width*/
    }
    See this diagram about the box model.


    ...
    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

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by SlyOne View Post
    Code:
    z-index: 1;

    Code:
    z-index: 2;

    just wondering what these pieces of code do? Trying to learn as i go here

    cheers
    Sly
    http://www.w3schools.com/Css/pr_pos_z-index.asp
    I think z-index is needed when your markup is not in order. Absolute positined elements are not part of the normal flow of the document so could sit on top of each other the wrong way. the z-index order tells who gets to be more visible.
    Swap them around and see what happens.

    ...

    You've seen "Pitfalls of Absolute Positioning" so you know the troubles that go with it. It's only used here because that's the only way it works.
    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

  • #11
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    You have not made room for your sidebar
    Code:
    #wrap {
    	background-color: #2e3e3e; /* cosmetic */
    	position: absolute; /* required */
    	z-index: 2;
    	top: 50%; /* required */
    	left: 50%; /* required */
    	width: 760px; /* width of div */
    	height: 760px; /* height of div */
    	margin: -380px 0 0 -380px; /* half of height and half of width*/
    }
    See this diagram about the box model.


    ...


    Hi Excavator,

    I've allocated space for the under_construction jpeg sidebar. But still no luck, just doesnt show up, take a look...

    http://www.pswebdesigns.co.uk/


    here's the code again:

    Code:
    @charset "utf-8";
    * {
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    }
    html, body {
    	height: 100%;
    	width: 100%;
    	overflow: hidden;
    }
    #background_image {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	height: 100%;
    	width: 100%;
    	z-index: 1;
    }
    #wrap {
    	background-color: #2e3e3e; /* cosmetic */
    	position: absolute; /* required */
    	z-index: 2;
    	top: 50%; /* required */
    	left: 50%; /* required */
    	width: 862px; /* width of div */
    	height: 760px; /* height of div */
    	margin: -380px 0 0 -431px; /* half of height and half of width*/
    }
    #sidebar {
    	width: 100px;
    	height: 760px;
    	float: right;
    	background: url(Images/under_construction.jpg);
    }

    put an extra 2 px of space on the width in the hope that it may fix it, but to no avail

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Gotta love IE6, huh?
    I'm sorry I didn't check in that browser for you, might have saved you a bit of headache if I had.
    Anyway, looking at this it seems likely your going to want to put something in that box so maybe that image should have been a background to start with...
    Have a look at this now - http://nopeople.com/slyOne/
    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:

    SlyOne (03-11-2009)

  • #13
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    ah nice one mate, thanks!

    Sorry to keep on, but how did you do that? Been looking through those links you've put up for me to read up on, but still couldnt make heads or tails of it.

    thanks again

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by SlyOne View Post
    ah nice one mate, thanks!

    Sorry to keep on, but how did you do that? Been looking through those links you've put up for me to read up on, but still couldnt make heads or tails of it.

    thanks again
    Instead of bothering to cure the IE6 float drop, I just made the image a background of #wrap. That way you won't have any trouble putting something else in #wrap, whatever content you had in mind for this layout.
    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

  • #15
    Regular Coder
    Join Date
    Feb 2009
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ah ok nice!

    Anyway, thanks very much for the help...you've been great.


  •  

    Posting Permissions

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