CSS To Compromise or not

Question

Hi
Looking to start a new project and wanting to base it around
CSS. Hoping to keep it clean and compliant. Partly because I want
to do it as a bit of a purists tutorial and partly as I want to
ensure its easily modified/maintained.
First thing I did was draw up a mokup in fireworks.. you know
the ones with all the embossed buttons, curves, graphics, drop
shadows etc. Then I stopped and thought cricky.. how the hell am I
going to do that lot in CSS and HTML. including the fancy nav i
did.
I suddenlly find myself at a decision... compromise the CSS
code or compromise the design ?
Do you guys find that you reach this desision or is it my
inexperience.
Your thoughts would be appriciated
Carlo

Answer 1

Can you post a link to the page, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"carlosalt" <[email protected]> wrote in
message
news:[email protected]...
> One little issue ive got with below which u guys might
be able to help me
> with.
> Otherwise I can see im gonna spend all evening sussing
it out is :-
> My menu image slices are 186X24
> I expected my rollover locations to be at a top
coordonate of 24,48 and 72
> (top one is offset down)
> However when set to this the rollovers images wernt
quite poitioned
> correctly
> vertically.
> I had to modify them to 28,52 and 74
> Strange.. Any ideas why ? Its the same in IE and FFox.
> Do I need to put a dummy one at the top ?
>
> Carlo
>
>
>
quote:
Originally posted by:
carlosalt
> Ill have a look
> Ive just spent the last 4 hours with a mockup
> Basically I created my vertical nav bar in fireworks
then sliced it up.
> I then used an unordered list with the up state of the
navbar as one
> background image. Then swapped out the individual down
buttons image. it
> works.. not sure yet if its the best way. ill drop the
code below... Its
> that
> old techniques (as others in here pointed me too) of
using css to swap out
> images. Its pretty clean.. What u think ?
> Ive actually uploaded this test here
http://www.nortonradstock.com
its
> just
> a menu test for now
>
> MARKUP -
>
> <ul id="sidenav">
> <li id="menu1"><a
href="#1"></a></li>
> <li id="menu2"><a
href="#2"></a></li>
> <li id="menu3"><a
href="#3"></a></li>
>
>
>
> CSS-
>
> #sidenav {
> background-image: url(images/sidenavbase.jpg);
> height: 540px;
> width: 186px;
> padding: 0;
> position: relative;
> left: 0px;
> margin: 0px;
> top: 0px;
> }
>
> #sidenav li {
> margin: 0;
> position: absolute;
> list-style-image: none;
> list-style-type: none;
> }
>
> #sidenav li, #sidenav a {
> display: block;
> width: 186px;
> height: 24px;
> }
>
> #menu1 {
> height: 24px;
> top: 28px;
> }
> #menu2 {
> height: 24px;
> top: 52px;
> }
> #menu3 {
> height: 24px;
> top: 74px;
> }
>
>
> #menu1 a:hover {
> background-image: url(images/home1.jpg);
> background-repeat: no-repeat;
> }
> #menu2 a:hover {
> background-image: url(images/nortonradstock2.jpg);
> background-repeat: no-repeat;
> }
> #menu3 a:hover {
> background-image: url(images/accomodation3.jpg);
> background-repeat: no-repeat;
> }
>
>
>
>