CSS Help
- Started
- Last post
- 16 Responses
- D_Dot
I'm trying to redo my portfolio, and I'm not great with coding. I'm trying to make my navigation buttons look and act the way I have them in my comp here:
Site Here:
http://www.dropdown.ca/new_portf…but i can't seem to get the background color to extend to the page edge and keep the space between bars. Is there a simple way to archive the look I'm going for? The easiest thing to do would be to leave it as is, but I would never let it go. Any help at all please.
- flavorful0
I am looking at it. I do not think you are going to be able to the LI tags though.
- D_Dot0
Do you think it would be easier to just forget the list and switch to a paragraph method like the contact info?
- Jaline0
maybe just use divs
- D_Dot0
So a div for each button? that sounds like it might work. Thanks I'll try it.
- Jaline0
I'm working on it too.
- Jaline0
or do this:
ul.nav li a {padding-left: 100px;}
just add the padding (change the value to whatever) in there and move your nav all the way to left, so left:0px;
- Jaline0
hmm...then the right side doesn't line up.
- Jaline0
add text-align:right; to the ul.nav tag
- D_Dot0
Thanks Jaline! I changed it to your last suggestion and it looks closer. I'll mess about with it and see if I can add some padding to the right as well
Thanks again.
- flavorful0
A real ghetto way to add to Jaline's actual way would be to add t he following non-breaking spaces:
Concepts (5)
Branding (6)
Photography (0)
Various (8)... haha.
- D_Dot0
I have no problem resorting to ghetto tactics. thanks!
- Jaline0
yeah, it's difficult to do without making the text align to the right (which is a look you may not like).
this is the closest I got to:
ul.nav {
float: left;
clear: left;
width: 335px;
height: 18px;
line-height: 24px;
list-style-type: none;
padding:0px;
margin: 0px; text-align:right;
}ul.nav li a {padding-left: 250px;
position: relative;
font-weight: bold; left:-35px;
border-bottom: 0px;
background-color: #cc0033;}
- D_Dot0
Thanks so much for all the help guys! I managed to get it with a mix of Jaline's advice and flavorful's ghetto fix.
- Jaline0
you're welcome. I tried to do it with divs but it's messing up the rest of the page. anyway, you seem happy with what you have.
- brandon_phillip0
This may help.
- brandon_phillip0
looks good, did you validate it?
http://jigsaw.w3.org/css-validat…