PDA

View Full Version : Horizontal Lines



jshumate
Mar 7th, 2012, 01:26 AM
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/

sean3838
Mar 7th, 2012, 01:54 AM
Try putting:


/* ====================== 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 }

sean3838
Mar 7th, 2012, 02:26 AM
Actually you might have to do more than that, try this:

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


/* ====================== 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:


/* ====================== 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)


/* ====================== START CONTENT ====================== */
#content { width:558px; margin:-25px 0 15px 0; margin-top: -200px; z-index: ?; float:left }
#content h2 { text-align:left }
/* ====================== END CONTENT ====================== */

jshumate
Mar 7th, 2012, 02:38 AM
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. :(

sean3838
Mar 7th, 2012, 02:46 AM
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

jshumate
Mar 7th, 2012, 02:48 AM
Lol, that explains it. I didn't realize I had to delete the blue.... the slow down and READ issue.

jshumate
Mar 7th, 2012, 03:14 AM
Any idea how to move the arrows left/right to align them to the menu text, as it is now?

Somewhere in here?


/*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;}

sean3838
Mar 7th, 2012, 03:21 AM
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.

jshumate
Mar 7th, 2012, 04:03 AM
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?

sean3838
Mar 7th, 2012, 04:34 AM
Ya weird here try adding this should do the trick. Changes are in red


/* ====================== 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 }

jshumate
Mar 22nd, 2012, 03:15 AM
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?

jshumate
Mar 22nd, 2012, 03:58 AM
Where do I put that code?

jshumate
Mar 22nd, 2012, 11:11 PM
Still looking for help.

Rob1n
Mar 23rd, 2012, 06:43 PM
hey sean3838 how could you post this, i mean you have included code in your post. i want to learn this.

teedoff
Mar 23rd, 2012, 06:58 PM
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:


#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:


#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.

jshumate
Mar 25th, 2012, 07:06 PM
I don't want grey borders, I want my lined rules turned from black into grey... above and below the navi.

Sammy12
Mar 25th, 2012, 08:30 PM
One line 90 of style.css:



#nav { position:relative; z-index:1000; top:190px; height:25px;
border-top: 1px solid grey; border-bottom: 1px solid grey; }


change to:



#nav { position:relative; z-index:1000; top:190px; height:25px;
border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }


if you want it lighter --> go up to #ddd;, if you want it darker --> go down to #bbb;

teedoff
Mar 25th, 2012, 10:27 PM
I don't want grey borders, I want my lined rules turned from black into grey... above and below the navi.

Those lines ARE borders. My previous post gives you the code to change those lines to a lighter gray color,


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;
}

just as Sammy also said.

jshumate
Mar 26th, 2012, 05:25 PM
Thanks, that works. I got confused from asking for HR's before, no one said it was a border to correct me.