Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Beginner CSS nav bar query

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 18, 2011 at 10:21 am #31683
    tjgriffiths1
    Participant

    Hi All!

    After such an amazing reply from my first few queries as a beginner, I am back with some more questions (apologies for being such a n00b)

    Ok, so i have been learning HTML/CSS for about a week now, and am putting together a simple web page to get to grips with some of the ideas, and i am starting to look at Navigation bars using CSS.

    I have got to grips with the basic ideas, however my problem is isolating part of the code so i can apply certain attributes to that individual area.

    here is the code to help demonstrate.

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    TJ Griffiths

    TJ Griffiths

    And then to my stylesheet:

    body
    {

    background-color:#8ca4ff;
    background-image: url('images/header.jpg');
    background-repeat:repeat-x;
    background-position:left top;
    }

    ul
    {
    list-style-type: none;
    margin:0;
    padding:0;
    }

    a
    {
    font-family: arial, verdana, sans-serif;
    font-weight:bold;
    }

    a:link {text-decoration:none;}
    a:visited {color:#0000ff; text-decoration:none;}
    a:hover {text-decoration:underline;}
    a:active {colour:#0000ff; text-decoration:none;}

    h1
    {
    font-family: arial, verdana, sans-serif;
    text-align:center;
    }

    h2
    {font-family: arial, verdana, sans-serif;}

    p
    {font-family: arial, verdana, sans-serif;}

    What i am looking to do is isolate the Unordered list and the links inside so i can apply CSS to those elements only! I hope you understand what i mean. I will be here for a while so if i have not made myself clear, please ask.

    Would really appreciate all your help with this guys.

    Many Thanks,

    TJ

    February 18, 2011 at 10:52 am #59523
    chrisburton
    Participant

    Not sure exactly what you mean as you are doing it correctly. However you need to target the list items individually.

    li {
    
float: left;
    
}

    You obviously need more CSS code than that for your list items but now you understand what I mean, I hope.

    February 18, 2011 at 10:53 am #59509
    soap
    Participant

    You can use classes or id’s or not.


    
#mylist li a {
    
border:1px solid #000;
    
}

    Is an example that would give the links that were the children of an li that were the children of the list with id of “mylist” a 1 pixel black border.

    http://htmldog.com/guides/cssintermediate/classid/

    Go through that site and learn away.

    February 18, 2011 at 11:05 am #59510
    chrisburton
    Participant

    @soap ^ good source :)

    February 18, 2011 at 11:14 am #59512
    tjgriffiths1
    Participant

    Ok. classes & id’s are something i haven’t come across yet. So i will look at the link. Thank you soap.


    @Chris    , thank you for you input. Again, I will have to look into “floating”.

    I have been playing around, and to get around using the external stylesheet, i have put the style code within the head section, and that has worked.

    HOWEVER, I am still not sure how to isolate those attributes so they do not apply to the rest of the links on the page.

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    TJ Griffiths

    TJ Griffiths

    Welcome to tjgriffiths.com. In this page you can explore some examples of the work i have been doing over the past couple of years. If you have any queries at all, please feel free to contact me on the address below.

    Never Stop Dreaming.

    And this link is still affected by the style sheet in the head section!

    GOOGLE

    If you launch that into a browser, you should hopefully understand what i mean.

    Something i know nothing about but have seen alot in code. Can i use a DIV element to seperate this, and if so, how?

    Thank you very much guys.

    February 18, 2011 at 12:05 pm #59443
    chrisburton
    Participant

    Actually if you want the navigation to be horizontal it would be something like..


    
li {
    
float: left;
    
display: inline;
    
margin: 0 5px;
    
}
    

    
li a {
    
color: #000;
    
font: bold 15px "Trebuchet MS";
    
}
    

    
li a:hover {
    
color: #62272a;
    
font: bold 15px "Trebuchet MS";
    
border-bottom: #000 solid 2px;
    
}

    It all depends on what you want the navigation to look like

    February 18, 2011 at 12:05 pm #59444
    soap
    Participant
    a:link,a:visited
    
{
    
font-weight:bold;
    
color:blue;
    
background-color:grey;
    
text-align:center;
    
padding:6px;
    
text-decoration:none;
    
text-transform:uppercase;
    
}
    
a:hover,a:active
    
{
    
background-color:#7A991A;
    
}

    just selecting a (or a:link, a:visited, etc) will apply to every anchor tag on your page.

    To be more specific do what I said:


    
#navbar li a {
    
your styles here
    
}

    In plain english it’s just saying:
    Take the unordered list with the id of “navbar”
    Find every “a” tag which is nested within an “li” tag and apply these styles to it

    February 18, 2011 at 12:07 pm #59445
    soap
    Participant

    @ChristopherBurton hehe, ;)

    As for FLOATS, check this out. I think it’s a pretty good explanation.

    February 18, 2011 at 12:10 pm #59446
    soap
    Participant

    February 18, 2011 at 12:25 pm #59449
    chrisburton
    Participant

    @soap is right. If you want to target an unordered list, its list items and its anchor tags, do what he said. Targeting classes and ID’s is to insure that if you have other unordered lists, they don’t get applied to them. I was merely showing an example of a horizontal menu and basically rambling.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.