Maneuvering and Modifying CSS and HTML

Hello all...
This is my first post! I've been browsing through the user forum for awhile now looking around for other sites that i can aspire to! I like others who 'break the mold' when designing their site layout! One of the ones that stood out from the rest was http://princessperfect.com! Nice slideshow and very clean!

I have been planning this project for the last year or so... been working on transforming the default layout to an EXOTIC template that will showcase exotic woods jewelry thats imported from Central America. I've designed my home page in photoshop... I have attached a .jpg image for all to check out. My goal was to keep the home page above the fold line - 600px high by 760px wide. So visitors dont have to scroll anywhere on the homepage! Go to ... http://www.vardanyanjewelry.net to get a feel of my site. I use firefox browser mostly... in addition to the webdeveloper toolbar extension... I also have Aardvark, CSSViewer and Related extensions installed to help me disect and identify parts of a page easily. I've duplicated the html and css code from my browser and placed it into a defined site in dreamweaver 8. Thus giving me all the css style options available when molding out my site.

Anyway... i'm a little stumped here. I have been trying to manuver the boxes individually and i having difficulty positioning the 'navMainWrapper in the top right corner. Whats occuring is the 'footer top' ul tag section is linked with the 'navMainWrapper and prevents me from manuvering them seperately. Does anyone know how to break those sections apart so I can style them seperately? And regarding the style sheet... I noticed that some of the styles are bunched together and sharing the same property values. Are the groups made to be to be styled seperately? I mean... can i take a style... extract it out of a group along with its shared properties and give its own seperate entry on the style sheet so it doesn't affect the other styles in the group?

If anyone can share some light on the above... it would be GREATLY appreciated... my new found friends!

Michael

Hi Michael and welcome to the Zen Community :)

In reponse to your question about the css elements that are lumped together you can do things 2 ways.

You can remove things that are lumped from the lump and give them their own definitions. This is useful when you don't want the specific element you are working with to have the values assigned in that "lump".

You can also leave the elements in the lumped area and add additional attributes to a specific element as well.

Such as this :
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
say you want the #logo element to have a border - but you do indeed also want it to float left. In that case you can leave the "lumped" define above in your stylesheet and then add a new define for #logo and put the other elements that you want to apply to that style in there. The CSS is written in such a way that it reads the "last" define as an over ride to the first. So again you could even tell it to move the #logo to float=right and as long as your float define falls below the line I pasted above in the stylesheet, it will over ride the previous define.

I hope this makes sense and helps in some way!

Thanks Tina!

Didn't know that... I'll have to play around and give it a whirl.