2 replies [Last post]
yuza
Offline
Regular
Last seen: 12 years 11 weeks ago
Joined: 2008-10-28
Posts: 15
Points: 0

I'm trying to create a layout which would look like this:
http://yuzacreative.jussitarvainen.com/test/layout.jpg
(consider the dark border that it would be on the browser edges whatever the window size like here www.metajive.com)
There would be a minimum size for the layout(ow if you resize the browser too small things start to jump around. How can I lock them down like the topbar, navigation, homelogo and leftgraphic?). Basically I want everything to stay put except the content and footer to move according to how much content is on the page. Also I want the 10px border on the edges of the browser move if the browser window is resized. But also the boarders need to have minimum so they don't go over the layout if the browser window is sized too small.

I know I'm asking a lot so any hint of help would be great. Trying to learn more of CSS here:)

The coding I've done so far kinda works but it doesn't. A lot of problems here as it has been a while since I worked with css and don't understand how to get over the problems. It looks like this on Safari and FireFox:
http://yuzacreative.jussitarvainen.com/test/layoutproblem.jpg

You can view the site at http://yuzacreative.jussitarvainen.com/test/

Any help would be very appreciated. If you can explain the principles of what I'm doing wrong. I'm not quite sure how to position the different parts of the layout as I'm so used to using tables and can't remember(know) all the commands for CSS.

Here's the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yuza Creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" HREF="styles.css" TYPE="TEXT/CSS">
</head>
 
<body><div id="containerall">
<div id="container">
<div id="left"><a href="index.html"><img src="layout-img/logohome.jpg" width="101" height="92" border="0" ALT="Home"></a><img src="layout-img/leftgraphic.jpg" width="101" height="186" border="0" ALT="Graphic"></div>
 
 
 
 
 
<div id="emptytopbanner"></div>
<div id="topbanner"><img src="layout-img/topbanner.jpg" width="934" height="235" border="0" ALT="Top Banner Graphic"></div>
 
 
<div id="navigation">
<a href="biography.html">biography</a> <b>/</b>
<a href="fineart.html">fineart</a> <b>/</b>
<a href="design.html">design</a> <b>/</b>
<a href="photography.html">photography</a> <b>/</b>
<a href="contact.html">contact</a> <b>/</b>
<a href="blog.html">blog</a> <b>/</b>
</div>
 
<div id="content">
<p>This site is dedicated to art and design of Jussi Tarvaine, please enjoy.</p><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
 
 
<div id="footer"><img src="layout-img/bottombanner.jpg" width="934" height="42" border="0" ALT="footer"></div>
 
 
</div>
</div>
 
 
</body>
</html>

And here's the CSS:

body {
margin: 10 10 10 10;
background: #4c4640;
text-align: center;  
}
 
#containerall {
width: 100%;
height: 100%;
background: white;
text-align: left;
}
 
#container {
float: left;
margin:0 0 0 0;
background: white;
margin: auto;
text-align: left;
}
 
#left {
float: left;
height: 778px;
width: 101px;
text-align: left;
}
 
#emptytopbanner {
float: left;
height: 44px;
}
 
#topbanner {
float: left;
height: 235px;
width: 934px;
padding: 0px;
margin-top: 47px;
text-align: left;
}
 
#content {
float: left;
width: 704px;
padding: 0px;
font-color: #464646;
font-family: Verdana; 
font-size: 12px;
text-align: left;
}
 
 
#navigation {
float: left;
height: 21px;
padding: 0px;
margin: 0px 0px 0px 6px;
text-align: left;
font-color: #75706a;
}
 
 
#footer {
float: left;
width: 934px;
}

mrmarkelrayes
mrmarkelrayes's picture
Offline
newbie
Earth
Last seen: 12 years 13 weeks ago
Earth
Joined: 2008-10-24
Posts: 2
Points: 0

w3 schools position

I'm not sure i'de be able to fix your problem without being at your computer or sitting for a long time and figuring out the details with you but..

You should learn the position command in css:

http://www.w3schools.com/css/css_positioning.asp

thats the w3 school. I'll sum it up.

You have:

-----

position:absolute *

position:relative

position:fixed * This doesn't work right with every browser

-----

Position absolute basically puts a div box absolutely somewhere meaning..

<div id="topbox"></div>
 
#topbox {position:absolute; top:10px; left:10px;}

would be 10px from the top of the page and 10px from the left.

--

Position relative works the same way except it is positioned from where it comes naturally in your code.

So if you have two divs on top of each other and you want to move the bottom one you would set the bottom div to position:relative and it would move from its starting position on the bottom.

--

Position fixed basically says (assuming we used top 10px and left 10px) from the edge of the browser screen always stay that far away. So if you scrolled down it would scroll with you, but it doesn't always work with older browsers.

W3 schools has an in-depth explanation and adjustable examples for you to learn. good luck dude

mark

yuza
Offline
Regular
Last seen: 12 years 11 weeks ago
Joined: 2008-10-28
Posts: 15
Points: 0

mrmarkelrayes: Thank you

mrmarkelrayes: Thank you very much for pointing me to the right direction. A lot learned and figured out most of the problems.

Cheers mate