Simple problem - but impossible for a newbie

Dev Shed Forums Sponsor:

December 17th, 2012, 03:45 PM

ngr

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 34 m 34 sec
Reputation Power: 0

Simple problem - but impossible for a newbie

I had started making my new site with frames - like this:

A header from left to right, 100 pixels high

Under that

A menu frame in the left side, 300 pixels wide
A content frame, filling the rest of the screen.

But then I tried to make it with CSS instead - but after having fought with it for 5 hours, I gave up.

Can someone help me with some code I can use?

Thanks a lot

December 17th, 2012, 04:54 PM

rdoyle720

Contributing User

Join Date: Dec 2003

Posts: 646

Time spent in forums: 2 Weeks 3 Days 4 h 44 m 24 sec
Reputation Power: 400

There's probably a lot more you want that you're not mentioning, but in the most basic terms, things flow top to bottom naturally. To get things to display side by side you can "float" elements (though that's not the only way).

An ultra basic approach to what you're describing would be:

Code:

<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="content">Content</div>

Then in your CSS:

Code:

.header {height: 100px; background: red}
.menu {width: 300px; float: left; background: blue}
.content {background: yellow}

If you have any design sense you'll come back and say things like "but I want the menu to be as tall as the content" and "I want a footer at the bottom of the screen no matter how tall the page is" and that's where you get into the more complicated stuff. But the above is the basic shell of what you're talking about.

December 17th, 2012, 09:19 PM

ngr

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 34 m 34 sec
Reputation Power: 0

Oh, mine

Are you sure, that works - always?
I am asking, because other suggestions, I have seen, are far more complicated.

December 17th, 2012, 09:26 PM

ngr

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 34 m 34 sec
Reputation Power: 0

One problem :(

I want the whole screen to have the same colour (maybe with the menu on top of it with a different colour).

How do I do that?

December 17th, 2012, 09:30 PM

ngr

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 34 m 34 sec
Reputation Power: 0

Solved it

Giving the body div the colour I want must be the correct way?

December 18th, 2012, 08:27 AM

rdoyle720

Contributing User

Join Date: Dec 2003

Posts: 646

Time spent in forums: 2 Weeks 3 Days 4 h 44 m 24 sec
Reputation Power: 400

Yes, assigning a background color to the <body> would be one way to handle that.

December 19th, 2012, 07:28 AM

ngr

Registered User

Join Date: Dec 2012

Posts: 5

Time spent in forums: 34 m 34 sec
Reputation Power: 0

Doesn't work

When I put enough text in the content, that last of it is placed beneath menu

December 19th, 2012, 09:12 AM

rdoyle720

Contributing User

Join Date: Dec 2003

Posts: 646

Time spent in forums: 2 Weeks 3 Days 4 h 44 m 24 sec
Reputation Power: 400

I wouldn't say it "doesn't work", you're just simply noticing the things that aren't there you didn't ask for. Coming from frames, if I had told you everything you needed for a bulletproof CSS design, your head would have exploded.

When you float something, other content will wrap around it. You can stop that by either setting a margin on that content, or by setting the content to overflow: hidden or auto.

If you add overflow: hidden to your content CSS, it will no longer wrap underneath the menu. (Cue your next complaint that the menu and content aren't the same height in 5...4...)

Simple problem - but impossible for a newbie

Developer Shed Advertisers and Affiliates