Styling my links

Get Started
1

Hi,
I’m working on a portfolio website for my art and still trying to get the basics down.
Firstly, I’m trying to get my list of links positioned differently-would like them spaced along the top of the page, left to right, instead of in a column on the left side. This is frustrating because I’m sure its simple but I can’t get it to work.
Also, I can’t get the color of the links to change. I added a color code to my CSS, checked it to make sure it’s correct, but the the only thing that changed color was the bullets next to the links. I got rid of the bullets but the links still don’t change color.
Ok, one last thing…I have for example a link called ‘paintings’. How would I design it so when one clicked on paintings two more tabs dropped below it saying ‘landscape’ and ‘still-life’. I liked this idea because then I wouldn’t need to have an extra page to display those links.

ok, i appreciate any suggestions, i know i’ve got a mouthfull here. thanks

-Josh

2

Hi Josh, It is probably not as complicated as you think, but without seeing what you have so far It’s kind of difficult to to help you with what you want.

So adding a link to your side would be a good idea

3

i haven’t gotten web hosting for it yet, but I’m working on it so I’ll post a link soon

4

Did you check for spelling mistakes? Sometimes the most simple things are the hardest to be seen.

5

Fair enough :slight_smile: Maybe you could post your CSS and HTML and comment where thing are wrong.

6

I’ll do you one better. The pages are so simple I’ll just recreate it right here. Here’s what it currently looks like:
<
JOSH BISHOP

        home
        paintings
        drawings
        bio
        contact

and here’s what I want:

JOSH BISHOP
      
          home     paintings     drawings     bio     contact

and this is the markup I currently have:

<div id=“navigation”>
<ul>
<li><a href=“homepage.html”>home</a></li>
<li><a href=“paintings.html”>paintings</a></li>
<li><a href=“drawings.html”>drawings</a></li>
<li><a href=“bio.html”>bio</a></li>
<li><a href=“contact.html”>contact</a></li>
</ul>

I know it’s simple I just don’t know how to type it or what rule I need in my CSS.

Also I wanted to create links within the links. As the cursor hovers over a link, two more drop below…?..something to that effect.
EX: (link 1)paintings -(2)lanscape
-(2)still life

   or something like it

thanks for all the help! :stuck_out_tongue:

7

This is as simple as a horizontal list of links gets, courtesy of Russ Weakley:

http://css.maxdesign.com.au/listamatic/horizontal01.htm

Take a look and see how it works, and go from there. This CSS rule is the key:

display: inline;