www.webdeveloper.com
Results 1 to 8 of 8

Thread: Alignment & width problems

  1. #1
    Join Date
    Jul 2012
    Posts
    3

    Alignment & width problems

    Hello,

    Newbie in CSS, I have 3 problems (today) with my website 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

  2. #2
    Join Date
    Jul 2012
    Posts
    8
    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.

  3. #3
    Join Date
    Jul 2012
    Posts
    3
    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,

  4. #4
    Join Date
    Jul 2012
    Posts
    8
    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.
    Last edited by Sc0rp1o; 07-19-2012 at 01:26 PM.

  5. #5
    Join Date
    Jul 2012
    Posts
    3
    Unfortunately doesn't seem to be working :-/
    Updated path: http://goo.gl/Di4jX

  6. #6
    Join Date
    Jul 2012
    Location
    Florida
    Posts
    22
    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.

  7. #7
    Join Date
    Jul 2012
    Location
    Florida
    Posts
    22
    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.

  8. #8
    Join Date
    Jul 2012
    Location
    Florida
    Posts
    22
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles