LinuxQuestions.org - Positioning with CSS in HTML

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - Positioning with CSS in HTML (https://www.linuxquestions.org/questions/programming-9/positioning-with-css-in-html-84643/)

Positioning with CSS in HTML

Okay, I have been playing with this for a while and thought I would ask for some help. I am a hobbiest that types code for my html pages for what it is worth. I am trying to convert from tables to CSS. Mainly because I like some of the options CSS provides. Particularly with Java. Anyway...

I am wanting to make a page that is centered in the browser. At the same time, I want a title banner, left navigation and body elemtent as well. Below is an example of the layout. Each box is currently a <DIV> tag. Ideally the entire thing would be centered (horiz.) and everything inside would stay relative.

Code:

+-------------------------+

|+--------++---+  +------+|

||        ||  |  |      ||

||        |+---+  +------+|

||        |              |

||        |+-------------+|

||        ||            ||

||        ||            ||

||        ||            ||

||        ||            ||

||        ||            ||

||        ||            ||

||        ||            ||

|+--------+|            ||

|          +-------------+|

+-------------------------+

I have tweaked this until it does actually work in Firebird, but it is trashed in everything else. I don't have the code or I would post it here.

I was hoping for some suggestions on how to do this the cleanest and for the most browsers. I don't like the idea of using java to determine browser and writting an entire page for each.

Well, thanks for the help. I look forward to hearing your suggestions.

PhilD

P.S. Code examples would be great!!

Have you looked at http://glish.com/css/

Its hard to advise without any idea how you where doing it.

Code:

HTML

<div class="page">

        <div class="title">

        ...

        </div

        <div class="body">

        ...

        </div>

        <div class="menu">

        ...

        </div>

</div>



CSS

div.page{margin:auto}

div.title{height:whatever}

div.body{width:yourwidth}

div.menu{width:menuwidth;float:left}

But its really just a a brief guess.

I remember having to resort to javascript when wanting absolution positioning from the centre of a page, but in this case pure CSS positioning, or maybe some javascript page dimentions calculations would work.

I think you want somehitng like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>Css Test Page</TITLE>

</HEAD>

<BODY>

<DIV style="float:left;background:#00FF00;width:15%"><P>My contents<BR>Item 1<BR>Item 2<BR>Item 3</P></DIV>

<DIV style="float:right;background:#0000FF;width:85%"><H3>This is my header</H3></DIV>

<DIV style="float:right;background:#00FFFF;width:85%"><P>This is the body</P></DIV>

</BODY>

</HTML>

I have used inlines styles so you can see it a bit easier but you probably want to put it in a css file later.

floats are cool but in IE if you make the window really small, the floats get all out of whack. for example, go here: http://www.wmucradio.com/new_page and make the window about half the size of the screen (if you happen to be using IE) and you see that the left bar drops for some reason. i have no idea why this is and i am using floats.

Try getting rid of all the html errors and it may work better.
If you don't tknow what I mean then try running the source through tidy:
http://tidy.sourceforge.net/

ran it through, didn't have any errors. just a bunch of warnings. i dunno what to do about that column dropping

Thank you all for your replies. I have been swampped with work and school just starting back. When I have some time I will try to post a test page I was working with on my own. I will also work through some of the examples you provided.

If you are currious, the page I am wanting to redo and center is linked below...

http://www.geocities.com/phil41dean/deans/home.html

Sorry for the geocities adds. One day I will get my own domain.

Again, thanks for the help.

PhilD