Can anyone give me some CSS positioning help?
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
Care to share what you think is wrong?
Other than the red mess on the right it seems to render alright in Firefox.
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.
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.
Follows…
I’ll come check this out later. I need to sleep now.
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.
@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
This question is in the General Section. Responses must be helpful and on-topic.