Topic: Please help! CSS question!

Hi! I'm a CSS newbie and I really hope you can help me with the site I'm making for my father's firm.
This is what I want it to look like: http://www.monica-hagen.com/screenshot.jpg

I have a div called #sidebar, #nyheter and #content inside a div called #package. English is not my first language, so I've explained what I've done in this pic: http://www.monica-hagen.com/divimage.jpg

My problem is with the #content. I'm confused about what values to give the different divs so that the text in the #content stays inside the #package when I add more content. I've read about absolute and relative position, but I get so confused when I try them in the different divs! I tried to give #package position: relative and the divs inside it position: absolute, but the #content ended up below #nyheter. I have everything where I want it now because I've set the #content's margin to -310px 0 0 200px;.
But when I add more text, the text overlaps the banner! Can you look at my css document and let me know what I've done wrong?
http://www.monica-hagen.com/ny/style.css

Here's the link to the site: http://www.monica-hagen.com/ny/side.html

I hope you understand my question and that there's a simple solution to my problem. *sigh*

Hi fenja,

First let me recommend that you avoid mixing absolute and relative positions in the same design. It will lead to a lot of troubles you shouldn't have to deal with when starting out. Try using float: left instead.

I'm having a little difficulty understanding your problem. I looked at your page in IE6 and FF1.0.2 and it looks fine in both. Except that your fly-out menus go off the screen to the left instead of into the window area so that I can read them.

Try doing your css with % or em instead of px. It will make your pages scale to other screen sizes and resolutions better.

Oh! By the way, your English is fine. I don't think you need to worry about making yourself clear in it.



.

-- not necessarily stoned... just beautiful.

Thanks! I've been working on it some more. I removed the #nyheter div and put the content inside the #sidebar div instead and added float: left to the div. I also fixed the fly-out menus. The site looks fine in IE6, but in FF1 there is a space below the banner and above the footer. Is there a way I can fix that?

I fixed the space problem by adding margin-bottom: -5px; to the #Frame div and margin-top: -5px; to the #footer div. It took care of it and it looks fine in my browser. Maybe I can start working on the other pages now. whew!

I'm glad you were able to get it to work. I would still suggest you get rid of the px units and use %.



.

-- not necessarily stoned... just beautiful.

okay, should I remove all of the px units and use %? Does the page look fine in your browser, btw? Thanks.

Nice code.

(Edited by reisio on 04-02-2005 01:18)

The places I particularly notice your use of 'px' is when specifying widths and heights of boxes that contain text. These values should be specified as 'em' or '%'. For example, you have specified the #sidebar to be 150px wide with a left margin of 20px. If you changed those values to 20.8% for the width and 2.7% for the margin, the page should look the same, but will scale to maintain the same proportions when someone looks at the page at a different resolution.

You can try this out yourself by changing the screen resolution on your machine to display at a different resolution and see how the page looks at different screen resolutions and window sizes. Since everything is specified using 'px' you won't see much difference in the page as you change the window size because all the elements will stay the same relative size. You will see radical differences in the page as you change from one screen resolution to another.

I was just looking at the source for the page while making some comments below and realized that the image you are using for the background of #package is the reason you are using 'px' as a unit. I would suggest you find a different way to create the drop shadow for #sidebase. Possibly removing the drop shadow from the #package background image and placing the #sidebar in another <div> with the shadow float:right inside that <div> will work. This will give your design more flexibility so you are not mandating its width with the #package background image.


============


It is a very pretty page. I like the layout and the graphical design. The page presents a minimalist view which I always think is good in page design, but then you add just a touch of color with the red and green ivy leaves in the upper left corner. The way you have the bottom leaves and shadow overlapping the top of the menu draws the eye down into the menu which is where you want it to be after they look at the content.

If you were to place a colored horizontal rule in the middle of the content, just above or below the grey box titled "Hvorfor velge sprosser fra oss" it would draw the eye back into the content from the menu creating a cycle from content to the windows at the top to the leaves to the menu and back to the content. This keeps the eye moving on the page and holds the viewers interest rather than sending the eye wandering off to look at something else.

You might also want to add something to the fly-out menus so they will standout from the content when visible. Maybe add a wider or brighter border or a drop shadow as you have with the #sidebar.

Since I don't know Norwegian, the page makes me wonder what the content is about. I can't figure it out from the image and the layout. Is your father selling windows or maybe he is a building contractor?

This question is more for my personal interest, but in future designs you might want to think about how pages present themselves to people without the accompanying text. I feel that trying to address the question of what this page is about when I can't read the text would create a radical re-design of this page and it is such a pretty page, it probably is not worth the effort to try to add the additional information that could be conveyed without the text.



.

-- not necessarily stoned... just beautiful.

I have no idea what it's called in English, but the "decoration" you see on the window in the pic is one of the products my father's firm is making. My father wanted me to upload the web site today, and I've made some of the other pages. I'm going to finish the rest of the pages when I have more pics of the products. You can see the page here: http://www.hagen-snekkerverksted.no

I'll continue working on the web site that's up on my web account and try to follow the advice you've given me. Then I'll upload the site again to his account when it's done. Thanks alot for the help, I really appreciate it. I'll work more on the page tomorrow.

Awfully nice work!

I'll chime in on the above.
Very nice! both the clean design, representative images and the extreamly clean code.
Works perfectly on Safari OSX

Very very well done!


Ps... Ok, now I'm really impressed... It doesn't fall apart in Internet Exploder on Mac!
98% of all css designs I've seen does that...


/Dan

{cell 260} {Blog}
-{ ?The Internet treats censorship as a malfunction and routes around it.? (-Barlow, John Perry) }-

Aww, thanks! I've been worried about how it looks in other browsers. My father is happy with the site and hopefully his customers will like it as well.

quote:

---

IP logged posted posted 04-03-2005 18:22 Edit Quote

Aww, thanks! I've been worried about how it looks in other browsers. My father is happy with the site and hopefully his customers will like it as well.

---

if they don't then they must have problems. I'll share my 2cents and say also that the code is nice and clean, easy to follow and layed out very well. Good job.

Where did the fly-out menu code come from? I rarely see a side flyout menu like that, that works well.

Later,

C:\

The fly-out menu code is from: http://www.alistapart.com/articles/horizdropdowns/ I think I read that it doesn't work in Netscape, but I decided to use it anyway.


I've tried to follow hyperbole's advice about using % instead of px, but it was too difficult and I couldn't get it to look right. I think I'll just leave it as it is and use % instead of px the next time I make a web site from scratch. I'll work on the look of the front page though. I tried to add a horizontal rule, but it looked weird. Maybe I should add a photo or two under the text?



(Edited by fenja on 04-04-2005 20:29)

thanks for the link.

I personal like to use px instead of %'s. Most of the sites I do are a set width anyway.

On the border you could put a div around the entire page and set a background to it. Something like a drop shadow or something of that nature. Much like you did with the frame div. Only difference would be that you would need to set the repeat to y. background-repeat: repeat-y or something of that nature.

Later,

C:\