Issues aligning my navebar with my wordpress template

Discussion in 'HTML & Website Design' started by cameronbrown, Dec 28, 2010.

  1. #1
    Hi guys,

    I am new here, and new to webdesign. I have recently finished building a photography site for myself with a wordpress blog attached, but I am having difficulty aligning my site's navbar with my worpress page.

    It would be awesome if anybody could take a look and give me a tip

    cheers

    www.cameronbrown.ca
     
    cameronbrown, Dec 28, 2010 IP
  2. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you change the width of the .navbar { } from 1000px to 911px then I guess it will align with the rest of the blog contents.

    Actually if you have this :

    .navbar {
    background-color: #fff;
    color: #000;
    font-size: 10px;
    line-height: normal;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 911px;
    }

    then you would not need to put empty paragraphs to have spacing on top & bottom of the navigation.
     
    developerpanda, Dec 28, 2010 IP
  3. cameronbrown

    cameronbrown Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I've tried that to no avail


    The navbar is 1000px in all my other pages
     
    cameronbrown, Dec 28, 2010 IP
  4. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    developerpanda, Dec 28, 2010 IP
  5. cameronbrown

    cameronbrown Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yea, I've tried that css file, and the modification you suggest actually makes it worse
     
    cameronbrown, Dec 28, 2010 IP
  6. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You might want to check on your above insulting statement mate. Because I see now you have implemented some of my CSS suggestions [margin:0 auto and overflow:hidden] except the change in width.And it does look better.

    Now you may or may not want to reduce the width of the navbar to 911px to match the width of the blog's width but thats upto you.

    But in any case try not to offend or downplay years of experience & skills of those who try to provide free help at their own time. Good luck seeking help with THAT attitude.
     
    developerpanda, Dec 28, 2010 IP
  7. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #7
    If that happens that because of your poor skills/ knowledge.

    Well, I checked yesterday and today, however I don't see container block has been increased as suggested by "developerpanda". As you increase the container block, there would be a gap between content and sidebar, so you'll need to increase the content block as well. You might have to do some other alterations as well to fix some other issues obviously those issues are because of poor markup and css.
     
    Last edited: Dec 28, 2010
    radiant_luv, Dec 28, 2010 IP
  8. cameronbrown

    cameronbrown Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Wow...

    Guys I was in no way trying to be insulting at all. Maybe tone gets a little lost in translation when it is converted to text.
    Basically what happened when I tried your suggestion was that it threw the nav buttons so out of alignment that I didn't want to leave them that way, so I changed it back. I'm sorry if I came across as insulting, but that was not my intention at all. I have now set both the navbar and container widths to 911 and it seems to be back to where i started (but without the empty paragraphs spacing at the top thanks to panda)

    I'll be the first to admit I don't know what I'm doing.

    I tried adding in "display: block;" but that didn't seem to make any difference. Maybe I am not implementing it properly


    Thanks for the help guys
     
    Last edited: Dec 29, 2010
    cameronbrown, Dec 29, 2010 IP
  9. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Really glad you clarified this Cameron, we're even now :)

    PS: Now if you reduce the width of the navbar from 1000px to 911px it could look like this http://d.pr/aRGY
     
    developerpanda, Dec 29, 2010 IP
  10. cameronbrown

    cameronbrown Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Hi Panda, cheers

    I already did and I don't think I am seeing any change. changing the widths to 911 seems to make the left>right shift more pronounced
     
    cameronbrown, Dec 29, 2010 IP
  11. cameronbrown

    cameronbrown Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I'm still having trouble with this spacing issue. Does anybody have any ideas?
    Cheers
     
    cameronbrown, Jan 19, 2011 IP
  12. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #12
    What seems to be the issue Cameron, could you describe in a bit detail?
     
    developerpanda, Jan 19, 2011 IP