Css positioning

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Css positioning

Post 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;
}
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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>
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post 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.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post 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 :)
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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;
}
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

a long time ago

Post 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
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

glad it could help :)
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post 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
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

omg you were still coding for NS 4!!!
I feel your pain
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post 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
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

NS4

Post 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.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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.
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Looks good in Firefox :)

Mac
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post 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.
Post Reply