Page 1 of 1

Css positioning

Posted: Wed May 19, 2004 6:52 pm
by d3ad1ysp0rk
http://68.237.139.169:12/os/

How do I make the "main" div rely on the "menu" div for where it should be?

I want it to be like this:

|menu | |main |

so when i add content to menu:
|menu - some links| |main|

main div moves over with it.

right now my css looks like this:

Code: Select all

body {font-size:12px;font-family:tahoma;}
#container {background-color:#000000; width:100%;height:100%;}
#menu {
   background-color:#CCCCCC;
   font-color:#000000;
   border-color:#FFFFFF;
   border-width:1px;
}

#main {
   background-color:#CCCCCC;
   font-color:#000000;
   border-color:#FFFFFF;
   border-width:1px;
   left:50px;
   position: relative;
}

Posted: Thu May 20, 2004 12:21 pm
by Draco_03
I would do a main div that contains 2 other leftcolumn and right column

Code: Select all

#main {
	width: 100%;
	height: 100%;
}
#left {
	border-style: solid;
	float: left;
	width: 30%;
	height: 100;
}
#right {
	border-style: solid;
	float: right;
	width: 60%;
	height: 100;
}
play around :)

EDIT
i forgot.. in the BODY put something like

Code: Select all

<div id="main">
	<div id="left">
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
	</div>
	<div id="right">
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
		Test<br />
	</div>
</div>

Posted: Thu May 20, 2004 1:36 pm
by d3ad1ysp0rk
Is there anything like width="*" in tables, in css?

I tried:

Code: Select all

#menu {
   background-color:#CCCCCC;
   font-color:#000000;
   border-color:#FFFFFF;
   border-width:1px;
   float: left;
   height: 50%;
}
#spacer {
   float: middle;
   width: 20px;
}
#main {
   background-color:#CCCCCC;
   font-color:#000000;
   border-color:#FFFFFF;
   border-width:1px;
   float: right;
   width: *%;
   height: 100%;
}
but the middle is huge, and the right part (width: *%;) is only as big as the text inside it.

Posted: Thu May 20, 2004 2:07 pm
by Unipus
Draco's got the right approach. Here's a little diagram.

Code: Select all

------------------- container --------------------
| ---- menu ----   ---------- main ------------  |
| |            |   |                          |  | 
| |            |   |                          |  |
| |            |   |                          |  |
| |            |   |                          |  |
| |            |   |                          |  |
| --------------   |                          |  |
|                  |                          |  |
|                  ----------------------------
|
|
----------------------------------------------------
You should specify a width for the container and for one or the other of the internal elements. The other one should scale normally to fill the space. You can do this in percentages if you like. I'd use floats like this:

#container { width: 75%;}
#menu { float: left; width: 25%;}
#main {float: left;}

"main" would then occupy as much width as its content. You could set it's width to 75% and then then it should fill up the remainder of container. You'll probably need to play around a bunch with margins and such.

Posted: Thu May 20, 2004 2:47 pm
by Draco_03
Yep indeed...
and if you want a "space" between the 2 well play with the %

ex : putting left at 15 and right at 75%
u have a 10% free that should fill up the middle (not sure been a long time..)

i'll test it later :)

Posted: Fri May 21, 2004 8:14 pm
by no_memories

Code: Select all

#main {
width: 100%;
margin: 0;
padding: 0;
}

#left {
float: left;
width: 100px;
margin: auto;
padding: 0;
}

#right {
width: auto;
margin: 0px 0px 0px 100px;
padding: 0;
}

a long time ago

Posted: Wed Oct 06, 2004 9:26 am
by phpScott
I know that this post was done quite a while ago but it has solved about a week's worth of headache's for me.
I am fine with css for redefining tags and elements and the like but when my boss said all positioning must done be done using css i went crezy trying to rewrite some classes that display row elements from the db using css.
This code from Draco_03 solved the issue.
Yeah for me. :D :D :D

Posted: Wed Oct 06, 2004 9:38 am
by Draco_03
glad it could help :)

Posted: Wed Oct 06, 2004 9:40 am
by twigletmac
CSS positioning is most entertaining (specially when it won't work for toffee) - since my boss has finally decided that Netscape 4 users don't have to see the site in all its styled glory we'll hopefully be moving out of tables and into this soon :).

Mac

Posted: Wed Oct 06, 2004 9:45 am
by Draco_03
omg you were still coding for NS 4!!!
I feel your pain

Posted: Wed Oct 06, 2004 9:50 am
by twigletmac
Draco_03 wrote:omg you were still coding for NS 4!!!
I feel your pain
It is painful but we are steadily moving towards validating fully as XHTML transitional which will be bolstered when we can remove old code simply there for old browsers. Still want the site to be accessible to all though so I'm hoping to go for a similar approach to A List Apart.

Mac

NS4

Posted: Wed Oct 06, 2004 10:21 am
by phpScott
IS dead, or aleast it should be, back in the days of the browser wars nothing was more nightmarish then a cutomer saying it had to be cross-browser compatible.

If you looking for a good free xhtml validator check out xml spy home edition is free and very good, does all sorts of xml validation.

great fun an only all little headache.

Posted: Thu Oct 07, 2004 7:13 pm
by no_memories
On the subject of taking CSS to a whole new level.

Tabeless Structured phpBB Template?

Is it possible?

I think it is and I will officially be opening my forum to prove it in the next few weeks.

I'm doing a xhtml template for phpBB. My goal is to have tables only for forum category output; using the scope value for the <th> elements to properly define the columns. I've basically got the core of the template done, or the index.php is fully validating with only a two tables left to remove. Yes, it's structured with <div>s and CSS. So it is possible to open the on-line application door to these standards.

BTW, I purchased the graphics from extremepixels.com, I just liked the layout and wanted to make sure I had all rights to modify it.

Here it is - warning, the template is still far from finished and there will be unexpected things happing until I get everything in sync. The old phpbb styles and markup were horrible to be nice. On the index page, check out the source code, you will quickly see the templates core structure is now using <div>s.

I may submit the core design to phpBB when it's done, providing they will feature the template. The structure is well commented so you can see where everything is (not on the other pages as of yet, just the overall_header.tpl. index_body.tpl, overall_footer.tpl

Additionally, I'll be taking the CSS out of the equation from old browsers by using the @import rule once I get finished with the CSS.

Posted: Fri Oct 08, 2004 3:38 am
by twigletmac
Looks good in Firefox :)

Mac

Posted: Fri Oct 08, 2004 9:20 am
by no_memories
yeah, that's the nice thing about a standards compliant site, it should look the same in most modern browsers; in at least 5 of the giants - I.E. (YUK!), Mozilla based, KDE, Opera 7, and the derivative of KDE, Apple's Safari.

Ok, I have a question for you folks. I have my font order for most of my sites as such: Verdana, "Lucida Grand", Lucida, Helvetica, Arial, and sans-serif;

Now, I know that 99.5% of windows users will have Verdana, probably say 80%+ of Mac users will have Verdana and the rest who don't "Lucida Grand" looks almost identical to Verdana (in OS X and I think most Macs have "Lucida Grand", it's almost as widely used in Apple boxes as Verdana is on Windows boxes).

Now here is the big million dollar question, and this might be a split topic - in Linux, which font is common in the system if Window's core fonts are not installed? As of now I am using Lucida as my Linux first line of defense. After that it gets pretty blurry (Helvetica, which looks more like Arial and shrivels up when compared to the aforementioned fonts). Anyone have any suggestions to which core Linux font would match up to Windows Verdana and Apple's "Lucida Grand"? Or is Lucida the trick after these two biggies?

The reason being is that these better fonts make a site ring so much smoother, and I don't want to exclude the Linux crowd from experiencing the full impact. I don't want them to have to install, even though I know many Linux users install the MS core Internet fonts, to view my sites as they were intended.

I've researched this until my fingers turned blue.