text area & side bar layout problem

newtocssuk

12-14-2010, 09:20 AM

i'm having a problem with the legth of the pages, every page on my website is a different size and i want the side bar to move with the text area i'm not sure how to fix it, any help would be great

body {
background-image: url("img/backkk9.gif");
font-size: 10px;
font-family: "Verdana",Arial,Helvetica,sans-serif;
height: 780px;
}
h1 {
font-size:2.5em;
}
h2 {
font-size:1.875em;
}
p.date {
text-align:right;
}
p.main {
text-align:justify;
}
a:link {
color: #105289;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #105289;
}
a:hover {
text-decoration: none;
color: #d31141;
}
a:active {
text-decoration: none;
color: #368AD2;
}

#wrapper {
width: 797px;
margin: 0 auto;
}
#mainbackground {
position: relative;
top: 10px;
width: 797px;
margin: 0px auto;
height: 760px;
border: 1px solid #CADCEB;
background: #ffffff;
}
#logo {
position: relative;
top: 15px;
width: 767px;
height: 122px;
margin: 0px auto;
border: 1px solid #CADCEB;
background-image: url("img/testing1.png");
}
#navbar {
position: relative;
top: 18px;
width: 767px;
height: 24px;
margin: 0px auto;
border: 1px solid #CADCEB;
background: #CADCEB;
}
#text {
position: relative;
top: 25px;
width: 600px;
left: 14px;
float: left;
height: 568px;
border: 1px solid #CADCEB;
border-right-style:none;
background: #ffffff;
}
#sidebar {
position: relative;
top: 25px;
width: 167px;
left: 14px;
float: left;
height: 568px;
border: 1px solid #CADCEB;
border-left-style:none;
background: #E1EBF2;
}

<!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 rel="SHORTCUT ICON" href="img/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="mainbackground">
<div id="topnavbar"></div>
<div id="logo"></div>
<div id="navbar"></div>

<div id="text">my text </div>
<div id="sidebar">my sidebar</div>
</div>
</div>
</body>
</html>

paolo1

12-14-2010, 10:25 AM

Can you explain what exactly is wrong and what do you want to achieve? In your example sidebar is moving with the text area when scrolling the page.

newtocssuk

12-14-2010, 10:59 AM

this is my live website using html tables

http://staffy-bull-terrier.co.uk/

you will see it dont matter what size the page is the text area and side bar always level up.

and on the css codes i have posted dont level up

newtocssuk

12-14-2010, 11:15 AM

i know they look level up now but if you add the text into the page and the link into the sidebar they are miles apart

Excavator

12-14-2010, 11:18 AM

newtocssuk

12-14-2010, 11:40 AM

Hello newtocssuk,
I would normally suggest the faux columns (http://nopeople.com/CSS%20tips/faux_columns/index.html) method of creating equal heights but I'm not sure that will work with your table layout. See the link about tables in my signature line.

yea table are a pain that why i'm trying rebuild with CSS, someone said to me adding some javascript will fix the problem but i dont know anything about javascript

Excavator

12-14-2010, 11:45 AM

Have a look at a simple 2-column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html). It might give you something to base your re-write on.

newtocssuk

12-14-2010, 11:54 AM

Have a look at a simple 2-column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html). It might give you something to base your re-write on.

when i remove the top:25px; it make the text and side bar shootting off somewhere i dont want it :( what a nightmare

Excavator

12-14-2010, 12:09 PM

I didn't read your question very well the first time. Thought you were working on the live site.
The code you've made would work but could use some adjustments.

If you move the 2 navbars and logo out of #mainbackground then all you need is the right background image repeated on the Y axis to make your columns. Did you look at that faux columns demo?

Try your code like this - <!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 rel="SHORTCUT ICON" href="img/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topnavbar"></div>
<div id="logo"></div>
<div id="navbar"></div>
<div id="mainbackground">
<div id="text">
my text
</div>
<div id="sidebar">
my sidebar
</div>
</div>
</div>
</body>
</html>body {
background: #f63 url("img/backkk9.gif");
font-size: 10px;
font-family: "Verdana", Arial, Helvetica, sans-serif;
}
#wrapper {
width: 797px;
border: 1px solid #cadceb;
background: #fff;
margin: 0 auto;
}
#topnavbar {
height: 35px;
background: #f00;
}
#logo {
width: 767px;
height: 122px;
margin: 0px auto;
border: 1px solid #cadceb;
background: url("img/testing1.png");
}
#navbar {
height: 24px;
width: 767px;
margin: 0px auto;
border: 1px solid #cadceb;
background: #cadceb;
}
#mainbackground {
width: 797px;
margin: 0px auto;
overflow: auto;
}
#text {
height: 568px;
width: 600px;
float: left;
margin: 0 0 0 14px;
}
#sidebar {margin: 0 14px 0 628px;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p.date {text-align:right;}
p.main {text-align:justify;}
a:link {
color: #105289;
text-decoration: none;
}
a:visited {color: #105289;}
a:hover {color: #d31141;}
a:active {color: #368AD2;}

newtocssuk

12-14-2010, 12:41 PM

i dont think you are understanding me i'm sorry

the code you posted is just doing the same what my was.

http://staffy-bull-terrier.co.uk/ <<--- that what i want but in CSS have look around all pages are differenets sizes but the text and size bar always the same

http://staffy-bull-terrier.co.uk/Copynewwebsite/index.html << that your codes

http://staffy-bull-terrier.co.uk/newwebsite/index.html <<-- just the same but i have fixed the height of the text & side bar bit

Excavator

12-14-2010, 12:50 PM

i dont think you are understanding me i'm sorry

But I am understanding you. You are not seeing what the faux columns does for you. It's all in the background image.

...old links

newtocssuk

12-14-2010, 02:43 PM

i get you now sorry :)

http://staffy-bull-terrier.co.uk/Copynewwebsite/index.html

im getting there :)

Excavator

12-14-2010, 04:50 PM

That's looking pretty good.
Now you need to know about the validator. See the links about validation in my signature line. Seriously, they will help you a lot.

And your #gap ... there is no real need for an empty div to make a space like that. Remember spacer.gifs?
Just put some margin on one of those elements instead.