LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 08-22-2003, 04:31 PM   #1
PhilD
Member
 
Registered: Mar 2003
Location: Iowa, US
Distribution: Mint
Posts: 174

Rep: Reputation: 30
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!!
 
Old 08-22-2003, 04:41 PM   #2
leonscape
Senior Member
 
Registered: Aug 2003
Location: UK
Distribution: Debian SID / KDE 3.5
Posts: 2,313

Rep: Reputation: 48
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.

Last edited by leonscape; 08-22-2003 at 05:02 PM.
 
Old 08-22-2003, 04:44 PM   #3
Proud
Senior Member
 
Registered: Dec 2002
Location: England
Distribution: Used to use Mandrake/Mandriva
Posts: 2,794

Rep: Reputation: 116Reputation: 116
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.
 
Old 08-22-2003, 04:50 PM   #4
david_ross
Moderator
 
Registered: Mar 2003
Location: Scotland
Distribution: Slackware, RedHat, Debian
Posts: 12,047

Rep: Reputation: 67
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.
 
Old 08-25-2003, 01:26 PM   #5
sk8guitar
Member
 
Registered: Jul 2003
Location: DC
Distribution: mandrake 9.1
Posts: 415

Rep: Reputation: 30
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.
 
Old 08-25-2003, 01:38 PM   #6
david_ross
Moderator
 
Registered: Mar 2003
Location: Scotland
Distribution: Slackware, RedHat, Debian
Posts: 12,047

Rep: Reputation: 67
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/
 
Old 08-25-2003, 08:53 PM   #7
sk8guitar
Member
 
Registered: Jul 2003
Location: DC
Distribution: mandrake 9.1
Posts: 415

Rep: Reputation: 30
ran it through, didn't have any errors. just a bunch of warnings. i dunno what to do about that column dropping
 
Old 08-26-2003, 11:49 AM   #8
PhilD
Member
 
Registered: Mar 2003
Location: Iowa, US
Distribution: Mint
Posts: 174

Original Poster
Rep: Reputation: 30
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
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
A little HTML/CSS help? jon_k General 9 07-17-2005 02:49 AM
html/css retrodict Programming 5 11-01-2004 07:56 PM
html/css hylke Programming 0 06-27-2004 03:39 PM
CSS / HTML in Mozilla jpbarto Programming 4 04-26-2004 09:08 PM
html/css problemo tearinox Programming 4 01-26-2004 03:45 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 05:09 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration