Hi

What I am trying to do at the moment with my blog style website is creating several different hyperlink style difference in font size and style.

Basically I am not sure how on earth I can use link/active/hover etc into same class name like to style the link - a.headermenu:link etc then you have different hyperlink style a.contentmenu:link etc for seperate navigation.

However I notice that people do use Nav ul li in their navigation but I am stickign to basic menu structure without having all the drop down etc in order to keep it simple in design.

The issue is that despite the class name - it is not working correctly as you can see in screenshot.

I am student atm and currently I am looking at best technique or method to pull this off from your input if possible.

I know I am not convincing but the issue is trying to get tag working correct as I design - even margin isnt working to raise the link into middle or padding even, it

2 answers

danwellman 5600
0
points

Probably the reason why margin isn't pushing the link up is because by default links are inline elements - try changing the link to display:block and then margins should have an effect. You will also need to float the links left in order to get them to stack up horizontally.

Also, if you display some code snippets or a link to a test page people will be able to look at your code and suggest more :)

Answered almost 8 years ago by danwellman
0
points

A.headermenu {

                    font-family: 'Century Gothic', Arial, sans-serif;
                    font-size: 24px;
                    display: inline;
                    margin-bottom: 10px;
                    padding: 4px 2px;
                    text-decoration: none;
                    }

A.headermenu:link {

                    font-family: 'Century Gothic', Arial, sans-serif;
                    display:inline;
                    margin: 5px;
                    padding: 4px 2px;
                    color: #e4e4e4;
                    }

A.headermenu:visited {

                    font-family: 'Century Gothic', Arial, sans-serif;
                    display:inline;
                    margin: 5px;
                    padding: 4px 2px;
                    color: #e4e4e4;
                    }

A.headermenu:active {

                    font-family: 'Century Gothic', Arial, sans-serif;
                    display:inline;
                    margin: 5px;
                    padding: 4px 2px;
                    color: #e4e4e4;
                    border-bottom: 3px solid #e4e4e4;
                    }

A.headermenu:hover {

                    font-family: 'Century Gothic', Arial, sans-serif;
                    display:inline;
                    margin: 5px;
                    padding: 4px 2px;
                    color: #e4e4e4;
                    border-bottom: 3px solid #e4e4e4;
                    }
Answered almost 8 years ago by chris keeley