16 replies [Last post]
moonboy
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-06-24
Posts: 22
Points: 0

Hi:

Here is the link for a template I'm building:

http://www.misaworld.com/index.php

I'm trying to get the vertical bg for the menu div to flush the bottom of the viewport, but it keeps pushing the page down...

can you tell me how to fix? Also, have I made any other glaring mistakes?

thanks much,

moonboy

here's the css:

html {
margin: 0px;
padding: 0px;

}
body {
font: 11px/14px Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
margin: 0px;
padding:0px;
background: url(../images/misc/body_bg_feet.gif) no-repeat;
}
p {
font: 11px/14px Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-bottom: 16px;
text-align: left;
}

/* specific divs */

#container {
background: url(../images/misc/bg_stripe.gif) repeat-x top left;
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#column1{
position: relative;
top: 130px;
left: 300px;
width: 450px;
}
#menu{
position: absolute;
margin: 100px 0px 0px 25px;
padding: 20px 0px 0px 30px;
width: 150px;
height: 100%;
background: url(../images/misc/bg_stripe_menu.gif) repeat-y right;
}

eagel
Offline
Regular
Last seen: 16 years 44 weeks ago
Joined: 2005-01-29
Posts: 11
Points: 0

site check please, problem with vertical bg...

I found that when you use the "%" and the "px" together it could cause some weirdness.. But then again I am not as experienced as some people here.. So I could be wrong... But is worth a try, it solved some minor problems for me.. Cool

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 4 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

site check please, problem with vertical bg...

Remove this:

<?xml version="1.0" encoding="iso-8859-1"?>

it throws IE into quirks mode.

THen, seriously think if you need to use absolute positioning.

Verschwindende wrote:
  • CSS doesn't make pies

eagel
Offline
Regular
Last seen: 16 years 44 weeks ago
Joined: 2005-01-29
Posts: 11
Points: 0

site check please, problem with vertical bg...

Is absolute positioning not advised? Because I changed my css last night and I used allot of absolute positioning.. I did not see any strange behavior, but your remark makes me worry... Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 4 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

site check please, problem with vertical bg...

It's really not recommended unless you know what you're doing. I'll whip something up for you.

Verschwindende wrote:
  • CSS doesn't make pies

eagel
Offline
Regular
Last seen: 16 years 44 weeks ago
Joined: 2005-01-29
Posts: 11
Points: 0

site check please, problem with vertical bg...

You can see my website @ http://www.marienit.nl/www2/
So you can see what I am up to.. with the absolute positioning..

I used absolute positioning because my buttons where moving around when I switched to another page on my site, this helped solve this problem. So I was pretty happy with it... Wink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 day 4 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

site check please, problem with vertical bg...

Here you go. You'll need the attached image in place of the old one,

<!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>
   <title>Welcome to Misa Ono World!</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link href="misa.css" rel="stylesheet" type="text/css" />
</head>

<body>

   <div id="container">

	<div id="header">&nbsp;</div>

	<div id="menu">
		<p>bio</p>
		<p>wordforest</p>
		<p>illustrations</p>
		<p>paintings</p>
		<p>links</p>
		<p>contact</p>
	</div>

	<div id="column1">
		<p><img src="wordforest_1.gif" alt="test" width="450" height="413" /></p>
	</div>

   </div>
  
</body>
</html>

* {
	margin: 0;
	padding: 0;
}

body {
	font: 13px/15px Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	background: url(bg_stripe_menu.gif) repeat-y;

	}
p { 
	font: 13px/15px Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 16px;
	text-align: left;
	}
	
/* specific divs */

#container {
	width: 100%;
	height: 100%;
	}

#header {
	width: 100%;
	height: 100px; /* With the border the actual height is 102px */
	background: url(body_bg_feet.gif) no-repeat;
	border-bottom: 2px solid #AEC787;
}

#menu{
	float: left;
	padding: 20px 0 0 30px;
	width: 150px; /* Due to box model, width is actually 180px */
	height: 100%;
	}

#column1{
	float: left;
	width: 450px;
	}

Verschwindende wrote:
  • CSS doesn't make pies

moonboy
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-06-24
Posts: 22
Points: 0

site check please, problem with vertical bg...

thanks!

Can you tell me the reason you use * instead of html at the top of the css?

Also, in IE right not, the column1 div is covering over the vertical bg line...

What's the best way to move it over and down a little, given that you are using float?

thanks,

moonboy

Anonymous
Anonymous's picture
Guru

site check please, problem with vertical bg...

moonboy wrote:
Can you tell me the reason you use * instead of html at the top of the css?
* = everything. html = only that which can inherit from html (not everything).

moonboy
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-06-24
Posts: 22
Points: 0

site check please, problem with vertical bg...

I just took out the top line in the html re: xml and it fixed IE as you said...

moonboy
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-06-24
Posts: 22
Points: 0

site check please, problem with vertical bg...

one other question:

why do you say that using absolute positioning can be problematic unless you really know what you are doing? What are the typical problems you come up against?

thanks,

Moonboy

Anonymous
Anonymous's picture
Guru

site check please, problem with vertical bg...

moonboy wrote:
why do you say that using absolute positioning can be problematic unless you really know what you are doing? What are the typical problems you come up against?
  • divs covering other divs
  • absolutely positioned items are removed from the normal document flow so they don't move other things out of the way and they don't move out of the way of other things
  • other such fun stuff.
It's not really that hard to get in touch with.

[/]
moonboy
Offline
Regular
Last seen: 17 years 23 weeks ago
Joined: 2004-06-24
Posts: 22
Points: 0

site check please, problem with vertical bg...

thank you!

I'm wondering if you could have a look at another site I'm developing, to see, perhaps, if there are any changes you recommend based on the approach suggested above.

Currently, I am using a number of absolute divs, it's not really 'fluid', it's optimized for a 17" screen at high resolution...

Maybe I should change that? So far, In IE and FF it looks pretty
good...

Note: one thing I am struggling with, is how to create a footer that will flow at the bottom of the page, regardless of the content...

Based on my researcha while back, there still didn't seem any really easy way to do this is css, maybe that's changed?

really appreciate all the help, thanks again!

moonboy

the link: http://www.kees.ca/Kees_New/index.php

the css:
/* basic elements */

body {
font: 11px/13px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
background: url(../images/misc/body_bg4.gif) no-repeat;
}
p {
margin-top: 0px;
margin-bottom: 16px;
text-align: left;
}
h1 {
font: normal 20px/23px verdana, Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin-bottom: 0px;
margin-top: 0px;
color: #F30100;
text-indent: 22px
}
h3 {
font: bold 14px/16px verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
margin-bottom: 0px;
color: #000000;
}
h4 {
font: bold 12px/14px verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: normal;
text-decoration: none;
color: #62A5CE;
}
a:visited {
font-weight: normal;
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #8EC450;
}
a:active {
text-decoration: none;
color: #62A5CE;
}

/* specific divs */
#container {
padding: 0;
margin: 0;

}
#column1new{
position: relative;
top: 123px;
left: 251px;
width: 380px;
background: url(../images/misc/line.gif) repeat-y;
padding-left: 33px

}
#column1{
position: absolute;
top: 123px;
left: 251px;
width: 380px;
background: url(../images/misc/line.gif) repeat-y;
padding-left: 33px

}
#leftcolumn{
position: absolute;
top: 264px;
left: 39px;
width: 180px;
}
#leftcolumn p{
font: 10px/17px Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: italic;
margin-bottom: 21px;
color: #000000;
}
#rightcolumn{
position: absolute;
top: 129px;
left: 740px;
width: 190px;
}
#rightcolumn p{
font: 10px/12px Verdana, Arial, Helvetica, sans-serif;
margin-top: 5px;
margin-bottom: 0px;
color: #000000;
}
#menu{
position:absolute;
top: 26px;
left: 310px;
width: 400px;
}
#footerold {
font: 10px/15px Verdana, Arial, Helvetica, sans-serif;
margin: 565px 0px 0px 0px;
text-align: center;
color: #999999;
}
#footernew {

position: absolute;
top : 0px;
left: 0px;
width: 100%;
text-align: left;

}
#footer {
clear: left;
position: absolute;
margin: 570px 0px 0px 0px;
width: 100%;
text-align: center;
}

Anonymous
Anonymous's picture
Guru

site check please, problem with vertical bg...

Take a look here for some free layouts: http://www.inknoise.com/experimental/layoutomatic.php

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

site check please, problem with vertical bg...

Moonboy, check out the 'How To' section for a guide on positioning footers and also google, you should come across 'Exploring Footers' at the ALA site, it's perfectly possible to position one at the bottom of the viewport.

Hugo.

P.S The * is called a 'universal selector' and selects any element it was used to ensure that all elements margins were reduced to zero; html is just the top most level of the page or the DOM nothing can be higher.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy99
Offline
newbie
Last seen: 16 years 40 weeks ago
Joined: 2005-02-27
Posts: 3
Points: 0

site check please, problem with vertical bg...

eagel wrote:
You can see my website @ http://www.marienit.nl/www2/
So you can see what I am up to.. with the absolute positioning..

I used absolute positioning because my buttons where moving around when I switched to another page on my site, this helped solve this problem. So I was pretty happy with it... Wink

Just went to have a quick squiz at your site and all the content is hidden behind the nav butoons.
I am using Firfox 1.0

Just thought id let you know

Anonymous
Anonymous's picture
Guru

site check please, problem with vertical bg...

fatfreddy99 wrote:
Just went to have a quick squiz at your site and all the content is hidden behind the nav butoons.
I am using Firfox 1.0

If that doesn't explain the problems with absolute then nothing will. Wink