beginner css issue

[mikedev]

Hello, I’m new to css&html (3 days) and having an issue with creating a simple top, vertical menu bar with some style.

Here is what I have so far

–html–

link1


link1


link1


link1

–css–

#top-nav

{

list-style: none;

width: 100%;

margin: 0px;

padding: 1px;

background-color: black;

}



#top-nav li

{

display:inline;

}



#top-nav a.first

{

display:block;

float:left;

width: 60px;

height: 25px;

margin-left: 1px;

padding-left: 15px;

background-color: black;

font-family: Arial;

font-size: 18px;

text-transform: uppercase;

text-decoratoin: none;

color: fuchsia;

line-height: 25px;

}

---

without float: = http://i52.tinypic.com/2dh7ghu.png

with float: = http://i53.tinypic.com/2rfg9ox.png

So there is an issue with the float command. I’m trying to keep everything together, with a vertical menu. But when I enter float, the links seem to separate from the top area. I’m trying to keep them together because I want the menu bar to take the entire width of the browser as it expands/decreases. Perhaps there is another way to still do that? If I don’t use the float command then the links stay horizontal. Perhaps there is a better way to be doing/stylzing the top menu bar of the site?

Thank You!

[mikedev]

— html —

link1


link1


link1


link1

[mikedev]

so it seems the issue the more I look at it, is once I do the float the border/background in the top-nav id is not matching the height of the text/link li area. perhaps there is a command so that it will always match that area?

[mikedev]

fiqured it out. By adding height command in the dev-nav area (matching px in the li css) this created a background matching the same size as the link area.

[jreinsel]

You should setup your page with

tags This way you can format the page so you can have a sidebar.

You should read up on style layouts and

tags.

For the beginner this can be confusing so find a good book. One I recommend is “CSS The Missing Manual”

[chrisburton]

@jreinsel Why does this person need a sidebar?

[jreinsel]

Since he wants a vertical menu it seemed appropriate. Love to hear your idea too.

[chrisburton]

Technically we don’t know what the page layout consists of and a sidebar might not be needed. I usually like to see an image of what the person is trying to accomplish or at least a detailed explanation.

[mikedev]

Hey guys, this should help out

trying to create: http://i53.tinypic.com/28cj155.jpg

what it looks like now: http://i56.tinypic.com/2pqsta8.png

here is my current css

—css—

#top-nav
{
list-style: none;
width: 100%;
margin: 1px;
height: 30px;
padding: 1px;
background-color: black;
}

#top-nav li
{
display:inline;
}

#top-nav a.first
{
display:block;
width: 80px;
height: 30px;
float: right;
margin-right: 22px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 1px;
padding-right: 1px;
background-color: black;
border-left:1px solid white;
font-family: Arial;
font-size: 18px;
text-transform: uppercase;
text-decoratoin: none;
color: lime;
line-height: 25px;
}

The goal is to have a logo on the left hand side, with main menu on the right side (floating?). First goal is to establish links and then putting in images with hover effects.

If you look at my image, one issue is that my top menu items are not spaced well between each other. So I’m guessing I must setup a separate class for each link, and match them up accordingly by margin/padding based on the number of characters in each link?

[mikedev]

I’m not sure if those top menus are even graphics. I’m aware that css3 allows for rounded edges with webkit.. so perhaps ultimately I will be able to get the desired style with just ccs3, to create rounded button links in the top menu.

[mikedev]

update:

I was able to start to create rounded buttons by implementing some css3. css3 looks great :)

#top-nav
{
list-style: none;
width: 100%;
margin: 1px;
height: 80px;
padding: 1px;
background-color: black;
}

#top-nav li
{
display:inline;
}

#top-nav a.first
{
display:block;
width: 80px;
height: 10px;
float: right;
margin-right: 22px;
margin-left: 1px;
margin-bottom: 1px;
margin-top: 1px;
padding-right: 1px;
background-color: black;
border-left:1px solid white;
font-family: Arial;
font-size: 18px;
text-transform: uppercase;
text-decoratoin: none;
color: lime;
line-height: 25px;
border:3px solid #999;
padding:1em;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-opera-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
}

here is my current progress: http://i56.tinypic.com/6hnlg3.png

remaining issues:

1. not sure best way to attach an image to the header, correctly.
2. not sure how to make the buttons better aligned together. Text of button is not centered in button area.
3. If I change the name of one of the menu links, it expands a lot bigger then the button itself. Is there a way to have those buttons/menu items dynamic so depending on the size of the text, the button will grow vertically to match the amount of characters?

thanks

[chrisburton]

You’re learning. Throw this in there

#top-nav li {

display:inline;

line-height: 80px;

}

After we can help you distinguish what is wrong while helping you tidy up your css and a few other things.

[chrisburton]

Here is a quick mockup: http://jsfiddle.net/5gWmA

[mikedev]

Christopher,

Here is an update implementing most of your help: http://jsfiddle.net/dunham100/nzxbp/4/

I had a few questions.

1. The header with background: logo is a new technique for me.. it appears a form of html5 to put a image in place of text. It appears to be good for seo? Is there any advantages or tips for all my projects to incorporate that vrs setting up a div for example, with the logo, alt tags, ect. For example:

“”

“”

2. Is there a way to prevent the menu bar from collapsing when the browser width is shrunk? currently when I shrink the browser the entire menu collapses. I’d like it to stop past a certain point and not break apart.

Many Thanks :)

[mikedev]

[Author]

Posts