Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Having a serious positioning headache.
Trying to created a left hand nav using jpeg and gif images. Using the test-indent and image-replacement for rollovers with CSS.
My real issue is trying to get the elements to stay in the nav and flow/order correctly. See layout here:
http://www.kucia.com/bcs/BC_Surgical_08/
(Layout is not complete)
Want each group on the left to stack below each other. So I play with the positioning (absolute and relative) with different results.
Also, using the float (right and left) with no luck.
On top of this the shadow in the wrapper should be running all the down the page.
I know its crazy but I am still having issue with this CSS thing.
Any help would be great.
Eric -
You xhtml code is a mess, which is the first part of your problem. You have:
- 2 title tags in the header
- your meta tags aren't closed out properly for your doctype (in XHTML all tags must be closed so add a /)
- you are using IDs more than once (why_bc and people)
- you have a UL(ID="why_bc_group") starting inside of another UL but not withing an LI.
- You are also wrapping all your ULs in DIVs which is pointless, they are both block level elements so the DIVs are really just code bloat.
- You could also get rid of a few other divs, for example you have a div with an id of "masthead_quotes". The only thing in that DIV is an image, and it is the only image in the DIV that contains the "masthead_quotes". So you could target the image using the parent DIV to "masthead_quotes" or if you want just add the id to the image.
Bottom line is validate your code, which can be done here. Validating your code will make debugging css easier. If after you clean up the code you are still having issues let us know.
-
Thank you for pointing out the errors.
Shows you my skill level.
Anyways...
Fixed everything, passes validation on HTML and CSS.
Still having issues setting up something that I built before.
My columns just won't fall in line. Its a basic three column layout, but I want to keep the height so it expands as the center content grows.
Here is the updated layout: http://www.kucia.com/bcs/BC_Surgical_08/
Any help would be great. -
Okay. Why is CSS so hard for me?
Fixed the layout (was down on my knees for awhile praying to the code gods in thanksgiving)
Have a few tweaks on the layout.
one question: How can I keep the layout so it expands with the browser window, without the footer overlapping the content?
Thanks! -
Looks like you've come across the old clearing floated divs problem. This has always been a major problem when using floats for layout but luckily there are many solutions out there - some better than others. Without making this a whole tutorial on how to clear floated divs I would suggest doing a google search for "clear float css" or something similar. There would also be plenty of posts here on the subject.
Just for the record I often use the "overflow: hidden" method which when tweaked a bit is quite robust.
Good luck - I feel your pain!! -
Thanks sardwon.
I have decided to start a little experiment site to test and play with floats and positioning.
A lot of options out there, just need to find the one that works.
1 to 6 of 6