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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Horizontal Lines

    Excuse all the simple questions, I'm new to CSS.

    How would I put a line above and below my menu?
    http://jennamichelephotography.com/blog/

    stylesheet:
    http://pastebin.com/cWxNJ5nB

    Like this:
    http://www.junelily.com/projects/sara-kate-events/

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Try putting:

    Code:
    /* ====================== START NAV ====================== */
    #nav { position:relative; z-index:1000; margin-left:320px; border-top: 1px solid rgb(211, 211, 211); border-bottom: 1px solid rgb(211, 211, 211); }
    #nav ul { margin:0; float:right; list-style:none; }
    #nav li { margin:0 0 0 27px; float:left; padding:175px 0; position:relative; }
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing:2px; position:relative; }
    #nav a:hover, #nav .current_page_item a { color:#a10404 }

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Actually you might have to do more than that, try this:

    For #nav do this: (get rid of whats in blue)

    Code:
    /* ====================== START NAV ====================== */
    #nav { position:relative; z-index:1000; top: 170px; height: 25px; border-top: 1px solid rgb (211, 211, 211); border-bottom: 1px solid rgb (211, 211, 211); margin-left:320px; }
    #nav ul { margin:0; float:right; list-style:none; }
    #nav li { margin:0 0 0 27px; float:left; padding:175px 0; position:relative; }
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing:2px; position:relative; }
    #nav a:hover, #nav .current_page_item a { color:#a10404 }
    For #nav ul do this:

    Code:
    /* ====================== START NAV ====================== */
    #nav { position:relative; z-index:1000; margin-left:320px; }
    #nav ul { margin:-170px 0pt 0pt; float:right; list-style:none; }
    #nav li { margin:0 0 0 27px; float:left; padding:175px 0; position:relative; }
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing:2px; position:relative; }
    #nav a:hover, #nav .current_page_item a { color:#a10404 }
    Finally for #content do this: (get rid of whats in blue)

    Code:
    /* ====================== START CONTENT ====================== */
    #content { width:558px; margin:-25px 0 15px 0; margin-top: -200px; z-index: ?; float:left }
    #content h2 { text-align:left }
    /* ====================== END CONTENT ====================== */
    Last edited by sean3838; 03-07-2012 at 01:30 AM.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    First code edit: It gives me one line that needs to be moved up.... which part of the code will move it up?

    Additional three lines: everythings just all boggled up.
    Last edited by jshumate; 03-07-2012 at 01:44 AM.

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    I was watching what you were putting in haha. You missed some things try it again it will work. Everything I marked red needs to be edited and if its blue delete it

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Lol, that explains it. I didn't realize I had to delete the blue.... the slow down and READ issue.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Any idea how to move the arrows left/right to align them to the menu text, as it is now?

    Somewhere in here?

    Code:
    /*indicators*/
    #nav a.sf-with-ul{ min-width:1px; padding-right: 15px; }
    #nav .sf-sub-indicator{position:absolute; display:block; width:10px; height:7px; text-indent:-999em; background: url('images/menu-arrow.png') bottom left; top: 0.25em; left: 110% !important;}
    #nav a:focus >.sf-sub-indicator, 
    #nav a:hover >.sf-sub-indicator, 
    #nav a:active >.sf-sub-indicator, 
    #nav li:hover >a >.sf-sub-indicator, 
    #nav li.sfHover >a >.sf-sub-indicator{background: url('images/menu-arrow.png') top left;}
    Last edited by jshumate; 03-07-2012 at 02:20 AM.

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Here just copy and paste all the code from the attached file into your css, leave it up once you do so I can see.
    Attached Files Attached Files

  • Users who have thanked sean3838 for this post:

    jshumate (03-07-2012)

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    Here just copy and paste all the code from the attached file into your css, leave it up once you do so I can see.

    I don't see any difference?

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Ya weird here try adding this should do the trick. Changes are in red

    Code:
    /* ====================== START NAV ====================== */
    #nav { position:relative; z-index:1000; top:170px; height:25px; border-top:1px solid grey; border-bottom:1px solid grey; }
    #nav ul { margin:-178px 0pt 0pt; float:right; list-style:none; }
    #nav li { margin:0 25px 0 0; float:left; padding:185px 0; position:relative; }
    #nav a { display:block; line-height:11px; color:#4f4e4e; text-decoration:none; letter-spacing:1.5px; position:relative; }
    #nav a:hover, #nav .current_page_item a { color:#a10404 }
    Last edited by sean3838; 03-07-2012 at 03:37 AM.

  • Users who have thanked sean3838 for this post:

    jshumate (03-22-2012)

  • #11
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi, I'm back. Added that code, looks good but please take a look again. How do I move the navi over so it is not touching the right side of the page? Also, can I make the lined rules grey?

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Where do I put that code?

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Still looking for help.

  • #14
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    hey sean3838 how could you post this, i mean you have included code in your post. i want to learn this.

  • #15
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by jshumate View Post
    Hi, I'm back. Added that code, looks good but please take a look again. How do I move the navi over so it is not touching the right side of the page? Also, can I make the lined rules grey?
    Where do you want it? You have it floated right currently. Remove the float from:

    Code:
    #nav ul {
        float: right;
        list-style: none outside none;
        margin: -178px 0 0;
    }
    then it moves to the left side. You could also adjust your left and right margins to bump the nav over.

    Your borders are grey, but to make them a lighter grey:

    Code:
    #nav {
        border-bottom: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        height: 25px;
        position: relative;
        top: 190px;
        z-index: 1000;
    }
    I made the changes in red.
    Teed


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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