Jump to content


Photo

setting width, height


  • Please log in to reply
7 replies to this topic

#1 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 02 June 2006 - 02:03 PM

Need help, I am in the middle of a lot of projects, I am having a lot of fun, but I encountered a small problem.
I have set a header, stretched it wide 100%, put a logo picture(the name of the site), and a picture of what he wanted. Ok now, I was trying to, I can't show a url because it's not live. Now what I want to do is have a 3 column layout, this is his master homepage, it will have a bunch of stuff linked to 3 drawers, with a bunch of mouse events to do some popping in and out. What i want is to have the header, all the way across the top, the two images are set and everything, it's done, now I have 3 columns, left, middle, right, each with a different background color, background image, and pictures. I need them to equally take up a section of the screen, I tried width:33% for all 3 of them, and then I tried setting height:100% for all 3 of them but it didn't work, I need each section to take up an equal part of the page, and I need all 3 to extend to the bottom of the page, I don't want to take the chance of setting it in pixels, because if I do, then if he uses that as a template later, with more content, and a scroll bar appears on the side, then the background will cut out, early. I need it to always go to the bottom of the screen, and if you scroll down, then it will either stretch with it or whatever, here is what i Have, you can copy this into a file and preview in browser, you won't see the pics, but you will get an idea of what I am wanting to do.

body
{
padding:0px;
margin:0px;
}

#header
{
width:100%;
height:120px;
background-color:#000000;
background-image:url(indexPgImagesEtc/ShelfMolding.jpg);
background-position:bottom;
background-repeat:no-repeat;
}

#logo
{
margin-left:300px;
margin-top:50px;
}

#left
{
height:auto;
width:33%;
background-color:#000000;
}

#middle
{
height:auto;
width:33%;
background-color:#7B7B7B;
}

#right
{
height:auto;
width:33%;
background-color:#FFFFFF
}

<!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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="huttonio.css" />
<title>Huttonio Brooks: Furniture, Photographic Works, Sculpture and Fine Art Works, etc
</title>
</head>
<body>
<div id="header">
<img src="indexPgImagesEtc/HBlogoSm.jpg" alt="Name Logo" id="logo" />
</div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>



Any advice or guidance would be greatly appreciated.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 02 June 2006 - 02:27 PM

This is possible with css. Have a look at [a href=\"http://solardreamstudios.com/learn/css/footerstick/\" target=\"_blank\"]footerStick[/a] for an explanation of how to do it. Also ahve a look at [a href=\"http://www.themaninblue.com/writing/perspective/2005/08/29/\" target=\"_blank\"]footerStickAl[/a] too which is better way of doing it.

#3 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 02 June 2006 - 02:31 PM

There won't be a footer, but that helps, I will keep that in mind for the future.
What I mean was for instance, I have say there are 4 sections to my website, the header, and 3 for the body. It's a standard 3 column layout. I want to have the 3 columns stretch all the way from left to write, that is pretty easy, I think, but I want all 3 columns, to go from the top, Where I have them below the header, ALL the way down to the bottom of the screen. Without having to set it in pixels
I set the widths for all 3 to 33%, and the height to 100%, and it didn't work.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 02 June 2006 - 06:04 PM

Height is a mystery for all browsers and CSS (none of them treat it the same way). If you want to use height:100% you have to set all the parent elements height (including the body and html)

What I usually do when I have a lot of column is to set the height using javascript. when the page load, I get the window height and the three columns, than set the height to the highest amount.

NoGray.com


#5 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 02 June 2006 - 06:40 PM

I have something worked out with it I might, I try to avoid using javascript to deal with aspects of the design, because I have had issues with it, when people didn't have it enabled.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#6 seanlim

seanlim
  • Members
  • PipPipPip
  • Advanced Member
  • 355 posts
  • LocationLondon, United Kingdom

Posted 03 June 2006 - 10:01 AM

I have tried many times to create a three column layout. I tried looking up previously on this issue and the most common solutions are to use javascript or using a 1px by 1px image (if i'm not wrong).

However, i have never like these kinds of workaround as i feel it not 'pure' css and i have turned to creating three column layouts with a similar background color so it can blend in.

If you are really really really desperate though, i supposed u could use tables? Yeah.. that's like breaking on of the most basic rule of web designing and i know disadvantages/problems of using a table, but if you are really desperate.. why not? and its not hard to use

If anybody has a proper solution to this without javascript or any other scripts in css, i would be more than happy to see it.

#7 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 03 June 2006 - 01:00 PM

I have will have a 3 column css solution by the end of the week if it kills me, I will let you know.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#8 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 03 June 2006 - 01:03 PM

No need to kill yourself.

[a href=\"http://www.searchenginefriendlylayouts.com/layouts/3_column_liquid_layout%2c_header%2c_footer_23.html\" target=\"_blank\"]http://www.searchenginefriendlylayouts.com..._footer_23.html[/a]
Legend has it that reading the manual never killed anyone.
My site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users