General Question

johnny0313x's avatar

Can anyone give me some CSS positioning help?

Asked by johnny0313x (1855points) February 23rd, 2009

I am working on redoing my portfolio site, and it’s kind of my first ish attempt at a CSS layout. I am having some trouble with the positioning. I thought maybe someone more knowledgeable may be able to help me out. All my code is posted at this forum since I won’t try to post it here on fluther. Thanks

http://csscreator.com/node/34305

the URL to my site is
http://www.lyonsdesign.info/lyonsdesign/

Observing members: 0 Composing members: 0

6 Answers

jrpowell's avatar

Care to share what you think is wrong?

Other than the red mess on the right it seems to render alright in Firefox.

Perchik's avatar

Setting an empty span to have the background image for the links might be throwing it off.

Just set “links a” as display:block, and put the background image on there.

You could also try setting list-style:none for links.

johnny0313x's avatar

Well my issue is a couple of things:
1. When you change the browsers window size it pushes the right box (transparent black) to the left which is okay, but after awhile the browser windows cuts it off.

2. the Background is on both the first and second top divs so it doesnt match up perfect, any suggestions?

3. the links I can’t center.

Vinifera7's avatar

Follows…

I’ll come check this out later. I need to sleep now.

Vinifera7's avatar

Can’t sleep…

First, there is an issue with your usage of the id attribute. You have two elements with id=“links”, so that could be creating ambiguity in how your CSS rules are applied. Change the <ul> to have something like id=“linksList”, then change the rules in your CSS. Or better yet, get rid of that <div> entirely. <ul> is a block level element, so you don’t need a surrounding <div> unless you need to apply some extra styling (like an additional border).

Next, don’t use the holly hack (* html). There is no reason to do this whatsoever. If absolutely need to provide older versions of IE with different CSS rules, you can use Internet Explorer Conditional Comments, which aren’t as much of a browser exploit hack as they are a comment with content that is actually parsed by specific versions of IE that you specify. This will allow you to serve specific versions of IE (like version 6 and lower) with a stylesheet. Because of the “cascading” nature of CSS, you can serve your main stylesheet first, then the IE conditional stylesheet for overriding certain rules.

Next, it’s not always the best approach to float everything, but if you want to go that way make sure everything is floating the same way. Float <div id=“featured”> left. It’s currently floating to the right. Floating it left will place it just to the right of <div id=“logo”>, since that already has float:left;. The floating concept works the same way as your links below.

Other than that, it’s looking halfway decent from what I can tell. Try those suggestions and we’ll go from there if problems remain.

johnny0313x's avatar

@Vinifera7 Okay, I will work on this when I get home tonight from work (around 10PM) and let you know how I make out, I appreciate your help and suggestions :)

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther