Grow your CSS skills. Land your dream job.

Problem with menu shifting around

  • # January 11, 2009 at 7:32 am

    Hi Guys,

    I’m creating a website for a friend and have a slight problem with this page:

    http://www.darrenclarkdesign.com/Guy%20 … llery.html

    ..in comparison to http://www.darrenclarkdesign.com/Guy%20 … ntact.html

    As you can see when you hit the gallery button the menu shifts up a little. Basically the gallery menu is moving slightly in comparison to the rest of the site.

    The whole issue started when I imported the highslide gallery. I am linking to two stylesheets (which I presume is frowned upon, yet it doesnt seem to have slowed the site down).

    Can anybody help?

    Thanks!

    Darren

    Rob
    # January 11, 2009 at 8:24 am

    Hi :)

    firstly, 2 stylesheets is fine :) Personally I would make a "style.css" file that would import all the css files I use and then only link in that one, but what you have done is fine.

    For your problems, I think its all down to your code you know. Please don’t take this as a dig…

    You are using some strange methods – are you building the site with a WYSIWYG editor? like the graphic side of Dreamweaver?

    I ask because there are alot of the old ‘ommouseover="MM_swapimage…’ and other strange things going on – you dont need all that, they are probably going to cause more issues that joy…

    Your menu bar is built out of <a> tags completly, so it dosnt really have any structure, save for the div its contained in

    Your main section is positioned with padding, this also can be bad, as is the left of your menu and other such things.

    basically its quite messy, and I would have to say it might be better to start again :S…

    Im gonna have a little dig around in it and see what I can do…

    # January 11, 2009 at 9:11 am

    Thanks for your reply!

    The "onmouse over" etc is code that Dreamweaver has put in for replacing the images in the menu. Maybe I should have created this area in flash instead?

    I’ll be honest I’m a designer rather than a developer and haven’t done much work with CSS, Java and the likes!

    Rob
    # January 11, 2009 at 10:00 am
    "DarrenClark" wrote:
    I’ll be honest I’m a designer rather than a developer and haven’t done much work with CSS, Java and the likes!

    hehe – im half in between lol

    its a problem with using WYSIWYG editing – is that its not accurate. Gonna bash it for you anyway – check back in a wee while

    Rob
    # January 11, 2009 at 2:25 pm

    Ok I had a dig through just now, and I changed a few things… there is actually quite alot of mess in there, and I dont really have the time to go through it all – its probably easyer to recode it.

    I re-did your header and nav bar like this – this is to show you how much different your code is.

    Code:

    and the CSS to go with it looks like:

    Code:
    h1 {
    height: 92px;
    width: 700px;
    background:url(images/head.jpg) 0px 0px no-repeat;
    text-indent:-9999px;
    position:relative;
    top:25px;
    left:-20px;
    float:left;
    }

    /*Menu Start*/

    ul#menu {
    width:700px;
    position:relative;
    list-style:none;
    float:left;
    left:-5px;
    top:25px;
    padding:0px;
    }

    ul#menu li {
    height:42px;
    display:inline-block;
    list-style:none;
    float:left;
    line-height:42px;
    }

    ul#menu li a {
    display:block;
    width:100%;
    text-indent:-9999px;
    }

    ul#menu li.news {
    width:69px;
    background:url(images/menu.png) 0px 0px no-repeat;
    }

    ul#menu li.news:hover {
    background-position:0px -42px;
    }

    ul#menu li.bio {
    width:46px;
    background:url(images/menu.png) -69px 0px no-repeat;
    }

    ul#menu li.bio:hover {
    background-position:-69px -42px;
    }

    ul#menu li.audio {
    width:73px;
    background:url(images/menu.png) -115px 0px no-repeat;
    }

    ul#menu li.audio:hover {
    background-position:-115px -42px;
    }

    ul#menu li.chart {
    width:68px;
    background:url(images/menu.png) -188px 0px no-repeat;
    }

    ul#menu li.chart:hover {
    background-position:-188px -42px;
    }

    ul#menu li.press {
    width:72px;
    background:url(images/menu.png) -256px 0px no-repeat;
    }

    ul#menu li.press:hover {
    background-position:-256px -42px;
    }

    ul#menu li.gallery {
    width:80px;
    background:url(images/menu.png) -328px 0px no-repeat;
    }

    ul#menu li.gallery:hover {
    background-position:-328px -42px;
    }

    ul#menu li.podcast {
    width:102px;
    background:url(images/menu.png) -408px 0px no-repeat;
    }

    ul#menu li.podcast:hover {
    background-position:-408px -42px;
    }

    ul#menu li.contact{
    width:92px;
    background:url(images/menu.png) -510px 0px no-repeat;
    }

    ul#menu li.contact:hover {
    background-position:-510px -42px;
    }

    ul#menu li.links {
    width:62px;
    background:url(images/menu.png) -602px 0px no-repeat;
    }

    ul#menu li.links:hover {
    background-position:-602px -42px;
    }

    Some of the issues i had were, because its a "whitespace" kinda site, I wasnt sure how wide you actually wanted it. You had the margin:0 auto; hack goin on which was good, but then you had kinda padding things in a little.

    Like I said above padding is always bad for positioning, as is margin. its best to use "position:relative/absolte" and specifiy with "top: 100px, left:100px;" for example. It just makes things more soild. Also if you are using inline elements like <a> as block links, its best to make the <a> tag display as an inline block – you can then give it a set proportion and make it more solid too.

    You may notice I have changed your menu layout. it now uses just one image, and positions it around. The image you can find here, if you want to do it that way:

    http://www.svgonline.co.uk/menu.png

    What you might want to look at doing is getting friendly with a person who can code, then give them all your coding work, giving them a bit of the cash made on it. The design is very important of course, but the code can be ever more so. If you can’t get your head around it, maybe you don’t have time, then it might be more pratical to get someone else to do it for you.

    For the long term, I would try and spend some time away from dreamweaver and onto the old CSS/HTML tutorials.

    I saw you were maybe trying to implementing the "sticky footer" solution – which tells me you do play with the code :D I’m sure its something you could pick up really quick :)

    Sorry I couldnt be much more help – I had the kids jumping on me every few seconds lol

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".