Problems with CSS
Miscellaneous Forums/General Discussion/Problems with CSS
Hi, I am in the process of developing a web site using ASP .NET and I am a bit stuck when it comes to designing the layout using CSS. I have created a <DIV> that holds the main content of the page. The width is fixed at 900px and it is centred horizontally using CSS. All of the content of the page will be inside, apart from the main navigation system. Also inside this DIV I want to have a column that holds a search box, general information, a login box etc. but I want the column to be on the right and with a fixed width. Is there an easy way to do this with DIV's and CSS? I realise it would be easy to do with a table but I get the impression that using DIV's is seen as better practice these days. I don't want to use absolute positioning because it seems a little unpredictable.
Anyway, thanks for your help.
James
That's a funny quote although reflecting the entire tragedy, but anyway.
yes, I think DIV is ok. I wouldn't worry too much about absolute positions and make sure the user can scroll of required.
Here's an example:
<html><head><title>position</title>
<style type="text/css">
#box1 { position:absolute; top:50px; left:10px; width:150px; height:150px; z-index:1; }
#box2 { position:absolute; top:80px; left:40px; width:100px; height:100px; z-index:2; }
#box3 { position:absolute; top:120px; left:50px; width:150px; height:150px; z-index:3; }
#box4 { position:absolute; top:80px; left:20px; width:70px; height:70px; z-index:1; }
#box5 { position:absolute; top:100px; left:10px; width:80px; height:80px; z-index:2; }
#box6 { position:absolute; top:60px; left:50px; width:90px; height:90px; z-index:-1; }
</style>
</head><body>
<div id="box1" style="background:red; border:solid 2px blue;">box1</div>
<div id="box2" style="background:blue; border:solid 2px white;">box2</div>
<div id="box3" style="background:yellow; border:solid 2px red;">box3
<div id="box4" style="background:gold; border:solid 2px green;">box4</div>
<div id="box5" style="background:lime; border:solid 2px navy;">box5</div>
<div id="box6" style="background:red; border:solid 2px blue;">box6</div>
</div>
</body></html>
Look up the 'float' property. You can use float : right to get your div to stay over to the right as long as there is another div next to it.
... or you can drop CSS formating since CSS is designed for making things pretty, not placing them in the right place...
Html is designed for putting things in place... Yay Tables..
www.recipicky.com is frames and tables.. 2 frames nav and body, and tables for all the formating... works fine... and works fine on dial up as well.
I don't see why you would want to use CSS for anything other than what I did... changing the look... (recipicky members can pick from a list of style skins)
css is cool because it allows you to define certain styles in a central file. So if you will ever feel the need for a new layout, you only need to edit one file. Cause not only fonts etc. can be definied here, but entire page layouts that may be used by multiple topics.
I also still use tables and frames, but sometimres I think they really suck. tables will never exactly do what you want. They have their little "individual interpretations" that makes them hard to use in absolute positioning.
Frames are said to be no way any longer. Also, search engines may point to some of your content frames, so you need to add a javascript that detects if the mainframe is the topframe and if it isn't it will have to reload the frameset with the displayed content. making the page hard to navigate without javascript enabled (mine is disabled by default).
Layer was meant to be what DIV is on msie compatibles. It's html. Defining their attributes in css is like declaring constants, so why not.
granted, but when you are using PHP that does the same thing as a central layout in css, most of the point becomes moot.
I hear ya about frames and search engines... but once again, it becomes moot when you use PHP and you just detect a session variable that says (hey, I came from the frames) and you reload if it didn't.