Forum Moderators: not2easy
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>
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
Also, can position: fixed and floats be mixed? Not that I've ever tried mind you ...
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.
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>
