...

View Full Version : Having a bit of css difficulty..



SlyOne
03-08-2009, 04:42 PM
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...



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



@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

Excavator
03-08-2009, 05:52 PM
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.




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



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

SlyOne
03-08-2009, 06:51 PM
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...


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



@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 :)

Excavator
03-08-2009, 07:04 PM
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.

SlyOne
03-08-2009, 07:34 PM
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

Excavator
03-08-2009, 08:18 PM
It really does look like there is no need for 3 nested divs. See a link explaining divitis (http://www.onyx-design.net/weblog2/css/css-diseases-divitis-classitis/).

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_image_resize/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/

SlyOne
03-09-2009, 01:45 PM
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

SlyOne
03-09-2009, 02:55 PM
I also noticed this code in my "wrap" and "background_image" style tags...

for the background_image

z-index: 1;

for the wrap...

z-index: 2;


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

cheers
Sly

Excavator
03-09-2009, 05:16 PM
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
#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 (http://www.w3.org/TR/CSS2/box.html).


...

Excavator
03-09-2009, 05:23 PM
z-index: 1;



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.

SlyOne
03-10-2009, 09:45 PM
You have not made room for your sidebar
#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 (http://www.w3.org/TR/CSS2/box.html).


...



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:


@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

Excavator
03-10-2009, 10:19 PM
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/

SlyOne
03-10-2009, 10:34 PM
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

Excavator
03-10-2009, 10:42 PM
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.

SlyOne
03-10-2009, 11:13 PM
Ah ok nice!

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum