/    Sign up×
Community /Pin to ProfileBookmark

Alignment & width problems

Copy linkTweet thisAlerts:
Jul 18.2012

Hello,

Newbie in CSS, I have 3 problems (today) with [URL=”http://goo.gl/rnPXz”]my website[/URL] that I can’t fix :/ You’re help would be welcome!

  • –

    Do you know why my logo and slogan are not vertically aligned with the horizontal menu? They have both top: 30px in my CSS sheet…

  • –

    The width of my page seems to be more than 100% (I can scroll hori-zontally) eventhough I put 100% in the css sheet. This is odd.

  • –

    The menu categories (presentation, services, contact) are in the opposite order (looks like this is due to float: right). I can fx it by putting float/left, but in that case the menu is no longer aligned on the right side of the page. Is there a way to fix this?

    • Many thanks for your help,

    Greg

    to post a comment
    CSS

    7 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @Sc0rp1oJul 19.2012 — Before you place a 100% div you should add a body div first, that puts top, left and right to 0px or %, so then you can add 100% to it.
    Copy linkTweet thisAlerts:
    @GrekauthorJul 19.2012 — Thanks. Actually I have removed "width: 100%" from each div and it's working fine now.

    Anyone can help with my other problems?

    Many thanks,
    Copy linkTweet thisAlerts:
    @Sc0rp1oJul 19.2012 — Try this, place your both logo and menu into the same div, then change your logo and menu float to left, set both of their width to 50%, btw if you change margin or padding, they will get bigger and will not be in the same height anymore, if that happens edit the width for 45% for example.

    Also you will need to change the height for the div they place, because if they are floated, they will not change height automaticly.

    About that last one, try to change them manually, simply edit the links.
    Copy linkTweet thisAlerts:
    @GrekauthorJul 19.2012 — Unfortunately doesn't seem to be working :-/

    Updated path: http://goo.gl/Di4jX
    Copy linkTweet thisAlerts:
    @hmsgoddessJul 23.2012 — Grek,

    The problem with the nav and logo is your widths on the 2 overlap each other which makes the browsers automatically drop one down a bit to allow room. You need to set a width for the nav div and the logo div. This may require reducing the font sizes or some other adjustment. I only played with this a little bit and I was able to get both to line up with each other by setting the logo at 50% width with a left float and the nav at 40% with a right float. This will get you the results I think your looking for.

    Going to look at your other problem now. If I figure it out I'll post another reply for that.
    Copy linkTweet thisAlerts:
    @hmsgoddessJul 23.2012 — Ok IF you fix you alignment issues of your logo and nav as I suggested in my previous reply, then you should be able to change the float on the buttons to a left alignment there by making them appear in order as you wish. I would not have placed the float on the actual a link I would have placed it on the nav li tag instead but I guess either way will work. Hope I helped some.
    Copy linkTweet thisAlerts:
    @hmsgoddessJul 23.2012 — As for the width of your page creating a horizontal scroll, your container widths within the body are most likely causing expanding issues making the width larger than the 100%. I did not however, look at this issue.
    ×

    Success!

    Help @Grek spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.10,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...