Recent Posts5201
Announce Your Software/Service/Product / Re: Announcing my new website (superboyac).
« Last post by superboyac on July 25, 2008, 02:14 PM »I posted this somewhere else, but you guys may be more helpful. I'm learning css for the first time, and this is a problem I can seem to solve. For those that know css, feel free to offer advice!
Here is my site:
http://aram.dcmembers.com/
I'm modifying the existing css theme to copy as much as possible the following webpage:
http://libremagazine.com/
Now, see those navigation links in white at the top? I'm having trouble doing two things:
1) I'm trying to get exactly one pixel border around each navigation box. But by adding a border around each one, the border in between will be 2 pixels because it adds the border from the two adjacent sides. So I tried using border-left, border-right, border, but I can't figure out how to get just one pixel in between. Also, the reason I used border-right and border-left instead of border is so the white empty space next to the links will line up exactly. I was (am still) having a hard time having the one pixel border lining up. By adding a pixel to the overall navigation bar and then another pixel to those link blocks, would throw off the lines by one pixel. Here is the code:
2) The other thing I can't figure out is how to make that top part (the main navigation and header image area) to span the entire window instead of the width of the rest of the page. I really like that look. I want to do the same to the bottom of the webpage also.
Here is my site:
http://aram.dcmembers.com/
I'm modifying the existing css theme to copy as much as possible the following webpage:
http://libremagazine.com/
Now, see those navigation links in white at the top? I'm having trouble doing two things:
1) I'm trying to get exactly one pixel border around each navigation box. But by adding a border around each one, the border in between will be 2 pixels because it adds the border from the two adjacent sides. So I tried using border-left, border-right, border, but I can't figure out how to get just one pixel in between. Also, the reason I used border-right and border-left instead of border is so the white empty space next to the links will line up exactly. I was (am still) having a hard time having the one pixel border lining up. By adding a pixel to the overall navigation bar and then another pixel to those link blocks, would throw off the lines by one pixel. Here is the code:
Code: CSS [Select]
- /* Main and sub-navigation */
- #navigation, #sub-navigation { float: left; text-transform: none; letter-spacing: .03em; text-align: left; }
- #navigation { width: 942px; font-size: 1em; background: #FFFFFF; border: 0px solid #DEDBD1; /*url(images/nav-right-dark.gif) no-repeat right top;*/ }
- #sub-navigation { width: 940px; font-size: .8em; background: #FFFFFF; border: 1px solid #DEDBD1; border-bottom: none; }
- #navigation.nav-search { width: 740px; }
- #nav { float: left; padding: 0 0 0 0px; background: #FFFFFF /*url(images/nav-left-dark.gif) no-repeat left top;*/ }
- /* List items */
- #nav li, #sub-nav li { float: left; border-left: 1px solid #DEDBD1; border-right: 1px solid #DEDBD1; }
- #nav li li, #sub-nav li li { float: left; width: 150px; background: #FFFFFF; border: 1px solid #DEDBD1; }
2) The other thing I can't figure out is how to make that top part (the main navigation and header image area) to span the entire window instead of the width of the rest of the page. I really like that look. I want to do the same to the bottom of the webpage also.
Still very informative! 
