PDA

View Full Version : Simple problem. I can't seem to figure out.



blasph
Mar 28th, 2010, 02:34 AM
I used to make websites. LONG time ago, and I can't seem to recall a lot of what I used to know. So my problem is... I can not get the two div layers on the left and right moved up to meet the middle div. I've tried pretty much everything I can think of, Reordered them, but then the middle div goes too low or the first div goes wonky. Can anyone please help me figure this out?





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color:black; background: #000000; background-image:url background-position:center; background-repeat:repeat-y; } body, table, div { font-family:Verdana; font-size:8pt; } a:link {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase; decoration:none;} a:visited {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:hover {color:#8a99c2; font-size:6pt; font-weight:bold; text-transform:uppercase;} a:active {color:white; font-size:6pt; font-weight:bold; text-transform:uppercase;} scrollbar {visibility:collapse !important; } browser { overflow: hidden !important; } .indent { margin-right: 2%; margin-left: 2% } div {position:relative;} * { margin: 0; padding: 0; } p { margin: 1em 0; } #wrapper { width: 800px; margin: 0 auto; } #header { height: 100px; z-index: 2; } #right-col { border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; width: 154px; float:right; z-index: 2; margin-right:16px; } #left-col { width: 154px; z-index: 4; left:6px; border:1px; background:#29334d; font-size:6pt; text-transform:uppercase; border-style:solid; border-color:black; } #content { margin-left: 179px; z-index:3; top:204px; width:430px; } #footer { height: 78px; clear: both; z-index: 2; top:152px; padding: 5px; width:350px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"><map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT" coords="13,233,67,249"> <area href="http://rumormillnewsradio.com/guestbios/insidersloungefree/ByDate.html" alt="Products" title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!" title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538" src="" width="790" usemap="#map1" style="z-index:1; border="0"></div> <div id="footer"> <iframe width="100%" height="100%" name="about" src="news.html" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="content"><table bgcolor="#3b4974" width="100%"><tr><td> </div><p><font color="#8a99c2"> <p class="indent"> Your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. your content here. </p></font> </td></tr></table></div> <div id="right-col"><font color="#59637d"> <br> <b>&nbsp;&nbsp;Shows last week:</b><br><br> <iframe width="100%" height="100%" name="Lastweekshow" src="" frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div> <div id="left-col"> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> <br> <br> <b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="http://">Link</a></b> <br><center>.....................................</center><br> </font></div> </div> </body> </html>

Excavator
Mar 28th, 2010, 02:39 AM
Hello blasph,
Check out the link about tables in my signature line.
Have a look at a very simple 3 column layout (http://nopeople.com/CSS/simple3column/index.html).

A bunch more 3 columns demos (http://www.google.com/search?q=css+3+column+layout&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1) here.

Excavator
Mar 28th, 2010, 05:28 AM
If you run your code through the validator you will see a few errors in the CSS and 26 errors in your markup... what really messes you up is the errant closing tags.

Here is your code emptied out for ease of demonstration, re-ordered and re-styled. I was kind of unclear what #footer was supposed to be doing so I made it full width and moved it to the end where a footer would go -

<!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 {background: #000;}
#wrapper {
width: 800px;
margin: 0 auto;
background: #ccc;
}
#header {
height: 100px;
background: #999;
/*z-index: 2; this doesn't do anything if you're not using positining*/
}
#right-col {
width: 154px;
float: right;
border: 1px solid #000;
background: #29334d;
}
#left-col {
width: 154px;
float: left;
border: 1px solid #000;
background:#29334d;
}
#content {
/*width:430px; if no width specified, #content will fill available space*/
margin: 0 179px;
background: #f00;
}
#footer {
height: 78px;
width: 800px;
clear: both;
background: #0f0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!--end header--></div>
<div id="right-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end right-col--></div>
<div id="left-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end left-col--></div>
<div id="content">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end content--></div>
<div id="footer">
<!--end footer--></div>
<!--end wrapper--></div>
</body>
</html>

blasph
Mar 28th, 2010, 06:15 AM
The footer was just named footer, I never got around to renaming it, it's actually the news area that fits into a certain area on the image that is supposed to be there. That's why it was up on the top, and only a certain width.

I didnt get a chance to look at the coding and see if you fixed what I needed cause I'm running to the shower really fast, but I will look in a few minutes and post if I have anymore problems. Thank you.

blasph
Mar 28th, 2010, 06:43 AM
Okay the problem is... I can make all the div layers align perfectly but they are supposed to align ontop of this image which is image mapped, and with the coding you replied with all the divs lay under it. The "footer" is actually a newsfeed iframe that is supposed to fit in the top area. My problem is getting all the frames to fit in their areas with out setting a definite left and top pixel thing. I had them close in my first code, but the left and right cols went too low. They needed to be a little higher than the middle but not by much. This is the image they need to go into.

http://img690.imageshack.us/img690/9987/image3fq.png

Excavator
Mar 28th, 2010, 09:24 AM
with the coding you replied with all the divs lay under it.
How are you putting your background image in the document?

Try something like 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">
html, body {background: #000;}
#wrapper {
height: 538px;
width: 790px;
margin: 0 auto;
background: url(http://img690.imageshack.us/img690/9987/image3fq.png);
}
#header {
height: 250px;
background: #999;
}
#footer {
height: 78px;
width: 355px;
padding: 0 430px 0 5px;
}
#right-col {
width: 150px;
margin: 55px 8px 0 0;
float: right;
border: 1px solid #000;
outline: 1px solid #fff; /*outlines for demo only*/
}
#left-col {
width: 150px;
margin: 55px 0 0 8px;
float: left;
border: 1px solid #000;
outline: 1px solid #fff;
}
#content {
margin: 65px 182px 0 180px;
outline: 1px solid #fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<!--end header--></div>
<div id="footer">
a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a
<!--end footer--></div>
<div id="right-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end right-col--></div>
<div id="left-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end left-col--></div>
<div id="content">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end content--></div>
<!--end wrapper--></div>
</body>
</html>

blasph
Mar 28th, 2010, 01:46 PM
Yes, yes... well.. if I did that.. it wouldn't be imaged mapped. -.- I feel like headdesking right now.

The image has links in the image, it needs to be mapped, you will see in my original code I have done this, it's lacking an image url but the code is there, I cant set it as a background image, or I would have done that. It loses functionability if I set it to a background image, and I can not do that.

It needs to be a image mapped layer set under the div layers.

Thank you all for your answers but I feel like no one has read exactly what I've said.

I need these layers, ontop that image. That image needs to be image mapped for the links in the image. The div layers need to then go ontop of the image, and inside the designed areas.

The only way I know to do this is with absolute positioning and I do not want to do that because I want the page to look the same on every resolution.

blasph
Mar 28th, 2010, 02:06 PM
The div layers are now where I want them to be. So I do thank you for that, but I still have the problem of getting them to lay over top the imagemapped image.

If you could just copy and paste this code to look at, see what I'm talking about.

I wish it were as easy as placing the image as a background, but it's not ... there's three linked areas above the news feed that have to be there, so the image has to be mapped. I'm not understanding how to do that and get the divs to show up on top of it, and stay in the same place as you've put them. I tried adding "top" to the left and right columns like "float:left, top;" that messed the whole placement up so I removed it, but it put them on top the image, and I cant think of another way to do so other than z-indexes which haven't been working even if setting the divs to relative.



<!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 {background: #000;}
div {
style:relative;}

#wrapper {
height: 538px;
width: 790px;
margin: 0 auto;
}
#header {
height: 250px;
}
#footer {
height: 78px;
width: 355px;
padding: 0 430px 0 5px;
}
#right-col {
width: 150px;
margin: 55px 8px 0 0;
float: right;
border: 1px solid #000;
outline: 1px solid #fff; /*outlines for demo only*/
}
#left-col {
width: 150px;
margin: 55px 0 0 8px;
float:left;
border: 1px solid #000;
outline: 1px solid #fff;

}
#content {
margin: 65px 182px 0 180px;
outline: 1px solid #fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">

<map name="map1"> <area href="" alt="Contacts" title="Contacts" shape="RECT"

coords="13,233,67,249"> <area

href="url" alt="Products"

title="Products" shape="RECT" coords="82,233,135,249"> <area href="hl" alt="New!"

title="New!" shape="RECT" coords="150,233,203,249"> </map> <img height="538"

src="http://img690.imageshack.us/img690/9987/image3fq.png" width="790" usemap="#map1"

border="0">
<!--end header--></div>


<div id="footer">
<iframe width="100%" height="100%" name="about" src="news.html"

frameborder=0 ALLOWTRANSPARENCY="true"></iframe></div>


<div id="right-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end right-col--></div>
<div id="left-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end left-col--></div>
<div id="content">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end content--></div>
<!--end wrapper--></div>
</body>
</html>

Excavator
Mar 28th, 2010, 06:09 PM
Thank you all for your answers but I feel like no one has read exactly what I've said.

I need these layers, ontop that image. That image needs to be image mapped for the links in the image. The div layers need to then go ontop of the image, and inside the designed areas.

The only way I know to do this is with absolute positioning and I do not want to do that because I want the page to look the same on every resolution.

Position your menus the same way we've positioned the larger divs. I read what you wanted, I just showed you one way of positioning some elements and left plenty of work for you to do.

If you want to use image mapping that's fine, just don't cover those areas of the background image with the divs.


===
Instead, if you were to do a little photoshop work, you could make buttons cut right out of that background image and use them where ever you like. Take a menu from this page (http://nopeople.com/design/CSS%20tips/index.html), resize it and fit it with your images.

If you make #wrapper position relative, you absolute positioned elements would stay with it so the site would look the same no matter what resolution was viewing it.

Look at this example and resize your browser window to watch what the red absolute positioned element does. There is also a blue space for a menu that is not positioned -
<!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 {background: #000;}
#wrapper {
width: 790px;
margin: 0 auto;
position: relative;
background: url(http://img690.imageshack.us/img690/9987/image3fq.png);
}
#header {
height: 250px;
outline: 1px solid #fff; /*outlines for demo only*/
}
#menu {
height: 20px;
width: 370px;
position: absolute;
top: 230px;
left 15px;
background: #f00;
}
#footer {
height: 78px;
width: 355px;
padding: 0 430px 0 5px;
outline: 1px solid #fff;
}
#right-col {
width: 150px;
margin: 55px 8px 0 0;
float: right;
outline: 1px solid #fff;
}
#left-col {
width: 150px;
margin: 55px 0 0 8px;
float: left;
outline: 1px solid #fff;
}
#content {
margin: 40px 182px 0 180px;
outline: 1px solid #fff;
}
#content_menu {
height: 25px;
background: #00f;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
<!--end menu--></div>
<!--end header--></div>
<div id="footer">
a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a
<!--end footer--></div>
<div id="right-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end right-col--></div>
<div id="left-col">
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end left-col--></div>
<div id="content">
<div id="content_menu">
<!--end content_menu--></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--breaks for demo only-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!--end content--></div>
<!--end wrapper--></div>
</body>
</html>

blasph
Mar 28th, 2010, 06:52 PM
Thank you. That worked perfectly, I never thought to make the inside elements absolute, and anchored on the parent. Duh. >_<

I'll also look into the link you sent, thanks very much. You made this so much simpler than what I had been doing. Googling for 10+ hours is not fun.

Excavator
Mar 28th, 2010, 07:27 PM
I can sympathize. I know I've done my fair share of extra reading from not knowing what to call the problem. Hard to google it if you don't even know what it's called!

blasph
Mar 30th, 2010, 04:30 AM
Another quick question. I've done this before but it's no longer working. Dont know if it's my browser(chrome) or what. I'm trying to set the background image a certain amount of pixels from the top, and also be centered. I used to use 50%, 50% but thats not working. Only moves it from the left, not the top. Is there any way you know of to either move the bg image from the top or fix the wrapper to be aligned exactly 0px from the top cause currently it's sitting a couple pixels down.



body
{
background-image:url('');
background-repeat:repeat-y;
background-position:50%, 50%;
}
#wrapper {
margin:0 auto;
width: 790px;
position: relative;
}
#header {
top:0px;
position:absolute;
}

Excavator
Mar 30th, 2010, 04:52 AM
This code background: #fc6 url(ajsweetness.jpg) repeat-y center 50%; is similar to what you have but condensed. It will start the image 50% down containing div only if that div's height is defined. Of course the repeat-y part will fill in the part above the 50% liine you started at.

Try this one to place an image in the middle -
body {
height: 100%;
background: #fc6 url(ajsweetness.jpg) no-repeat 50% 50%;
}


This one centers the image 300px from the top
body {
background: #fc6 url(ajsweetness.jpg) no-repeat center 300px;
}

It's the repeat-y part that's probably getting you. There is no way to stop a repeated image from filling in the gap you move it down. You will need to nest a div in there to do that, or a different image.

See the w3schools page on the background property (http://www.w3schools.com/css/pr_background-position.asp).

blasph
Mar 30th, 2010, 05:16 AM
Thanks, I just added a div layer over the top to hide it since I needed it to repeat. ^_^ I think I'm done with the questions now. I appreciate the help.