Welcome to WebmasterWorld Guest from 3.228.24.192

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Positioning Again...

     
2:08 pm on Sep 22, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 11, 2004
posts:71
votes: 0


i am re designing a site that i made because we have some special needs in our college and i need to to be viewed by all

im trying to a the page to have a

top logo (this works
a side bar (for menu (this works))
a middle content section (for content (this works))
and another side bar (for something else (this doesnt work)

im using the float and wonder if anyone can help me

heres my html


<html>
<head>
<title>Test Site</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html;">
</head>
<body>
<div id="top">
Test Site
</div>

<div id="sideleft">
Side Bar
</div>
<div id="center">
Content
</div>
<div id="sideright">
Side Bar
</div>

</body>
</html>


and heres my css

a:link{
color:#0000F0;
text-decoration:none;
}
a:visited{
color:#0000F0;
text-decoration:none;
}
a:active{
color:#0000F0;
text-decoration:none;
}
a:hover{
color:#00C8C8;
text-decoration:underline;
}

body{
margin-top:0px;
margin-left:0px;
margin-right:0px;
font: 1em arial, verdana,sans-serif;
}

.copy{
font: .8em arial, verdana,sans-serif;
text-align:center;
}

#top{
position: relative;
background: #FFFFFF;
display: block;
border: 2px solid #000000;
color: #000000;
text-align:left;
text-decoration:none;
font: bold 2.3em arial, verdana,sans-serif;
width:100%;
}
#box{
margin-top:10px;
}

#sideleft{
float:left;
position: fixed;
background: #FFFFFF;
color: #000000;
text-align:left;
align:left;
text-decoration:none;
font: bold 2.3em arial, verdana,sans-serif;
width:20%;
}
#center{
float:center;
position: fixed;
background: #FFFFFF;
border: 2px solid #000000;
color: #000000;
text-align:center;
align:center;
text-decoration:none;
font: bold 2.3em arial, verdana,sans-serif;
width:50%;
}
#sideright{
float:;
position: fixed;
background: #FFFFFF;
color: #000000;
text-align:right;
align:right;
text-decoration:none;
font: bold 2.3em arial, verdana,sans-serif;
width:20%;
}

what happens it that the right hand side bar is on a different line to the content bar and the menu bar.... if your looking at this you should also note that im trying to get this to be strict xhtml (i know i forgot the doctype)

thanks for reading

Dominic Liversidge

2:15 pm on Sept 22, 2004 (gmt 0)

Preferred Member from GB 

10+ Year Member

joined:July 26, 2002
posts:535
votes: 0


The first things that I noticed were float:; on your right column and float:center; on the center. Float properties have to be either left or right.

Also, can position: fixed and floats be mixed? Not that I've ever tried mind you ...

2:16 pm on Sept 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


i am re designing a site that i made because we have some special needs in our college and i need to to be viewed by all

When you say "viewed by all," do you really mean ALL, as in every single person who visits the site? If so, you need to be absolutely certain of the browsers your audience will be using. If there are some old or unusual browsers being used, CSS Positioning is probably not a realistic technique for you to use - if the display has to look the same to all browsers. You could give the other browsers an unstyled page, which would still be readable but not too attractive.

2:23 pm on Sept 22, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 11, 2004
posts:71
votes: 0


i ment viewed by all in the college i.e. special needs we have a program called jaws which is a text to speach program and my last site sued too many images and about the browsers... the site is going to be seen mainly only on the college network which uses IE6
2:29 pm on Sept 22, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 11, 2004
posts:71
votes: 0


and i have tryed it without the center float and without the fixed position ... no change
2:31 pm on Sept 22, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


If you want to use floats to position two sidebars, you can float one of them to the left and the other to the right. You would need to alter your source code order, however. If the right sidebar floats (which it doesn't with your code, as jetboy said float:; is an empty value), it must come BEFORE the non-floated center content div (again, as jet boy said, float: center is not a valid value).

Change the source order to...

leftbar
rightbar
centercontent

...all enclosed in a container div.

Then style it something like this...

#container {
float: left;
width: 100%;
}

#leftbar {
float:left;
width: 20%;
}

#rightbar {
float: right;
width: 20%;
}

#centercontent {
margin-left: 20%;
margin-right: 20%;
}

I used the width values from your code here, but I strongly advise against using relative (% or EM) width values in a double floated layout like this. If the user shrinks the viewport too much those floated sidebars will stack vertically, pushing your content way down on the page and totally destroying your layout.

Also note that this method puts the content below both sidebars in the source code, something not very desireable if (a) you want search engine optimization, or (b) users might be viewing the page unstyled. Both seem relatively unlikely in a college environment, especially if it's for intranet usage (class related as opposed to recruitment related), but it's worth considering.

<added> I just saw your post about some visitors using JAWS to access your site. Since screen readers present information in the order they show up in the source code, the above floated layout will force them to listen to the material in BOTH sidebars before they get to the center content. I would avoid this, especially since you KNOW that some users are on JAWS.</added>