Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Overall Layout Issue

    Hey all,

    I've got some basic self-learned experience when it comes to coding in CSS and HTML. I'm currently running a Wordpress blog (www.freshbornmarket.com), and the CSS edits i'm trying to make are more complicated than anything i've messed around with before.

    What I'm trying to do is have that black navigation bar hang over each side (see bottom image). By lengthening it, i can make it float over one side at a time, but not both. The bar is contained by a content div with 20px padding on each side.

    Any idea how I could achieve this look? Sorry about the large images.


    CURRENT:



    DESIRED RESULT:
    Last edited by fbm88; 11-06-2010 at 10:35 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    There's a few ways of doing this. Perhaps:

    Code:
    #masthead{
    position:relative;
    padding-bottom:38px}
    
    #access {
    -moz-box-shadow:3px 2px 0 #D9D9D9;
    background:none repeat scroll 0 0 #000000;
    bottom:0;
    display:block;
    left:-40px;
    position:absolute;
    width:1020px;
    }
    So here we're using absolute positioning which is the easiest way to move your navigation outside of the normal wrapper width.

  • Users who have thanked SB65 for this post:

    fbm88 (11-06-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow, that was easy. Thanks a ton for the fast help. I'll be sticking around here to do what i can!


  •  

    Posting Permissions

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