vertical links

grabenair · March 8, 2011

I made a ul for my vertical links and when I click on them a outline of the box appears around them. I can not get rid of it. This is my first try at vertical links using this method. Here is my code.

/*colors used

background #fff-white

banner #0033ff-blue

content #E9E9E9-light gray

h1,h2 #03F- light blue

*/

body {

background-color:#FFF;

margin: 0px;

padding: 0px;

background-attachment: fixed;

}

#banner {

margin: 0px;

padding: 0px;

height: 120px;

background-repeat: no-repeat;

background-color: #0033FF;

background-position: center center;

}

#wrapper {

width: 960px;

margin-top: 50px;

margin-right: auto;

margin-left: auto;

}

#content {

background-color: #E9E9E9;

text-align: left;

width: 550px;

margin-left: 215px;

border: thick double #666;

padding-top: 5px;

padding-right: 5px;

padding-bottom: 10px;

padding-left: 15px;

}

#leftSidebsr {

float: left;

width: 160px;

margin: 0px;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 5px;

}

#rightSidebar {

width: 127px;

float: right;

}

.h1 {

font-family: Verdana, Geneva, sans-serif;

font-size: 1.3em;

color: #03F;

text-align: center;

text-transform: capitalize;

}

.h2 {

font-family: Verdana, Geneva, sans-serif;

text-align: center;

color: #03F;

font-size: 1em;

text-transform: capitalize;

}

ul {

list-style-type: none;

padding: 0px;

float: left;

margin: 0px;

}

li {

list-style-type: none;

background-position: left top;

margin: 0px;

padding: 0px;

}

ul li a {

color: #FFF;

background-repeat: no-repeat;

background-position: left bottom;

height: 25px;

display: block;

width: 145px;

text-align: center;

font-family: Arial, Helvetica, sans-serif;

text-transform: capitalize;

font-size: 1.3em;

text-decoration: none;

padding: 0px;

margin-bottom: .10em;

}

ul li a:hover {

background-repeat: no-repeat;

background-position: right bottom;

}

/*ul li a:active {

color: #000;

}*/

I commented out the ul li a:active because the black shows up. With white it is not as noticeable but you can still see it. I made my links rounded this also helps it disappear. What you see when you click on the link is a dished box. Do not know if this will help but this is the rest of the code from a page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<head>

</head>

<body>

<div id="rightSidebar"><a href=

"http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=grabenair-">

<img src=

"http://tracking.hostgator.com/img/WordPress_Hosting/125x125-animated.gif"

border="0" ></a></div>

<ul>

<li><a href="contact_me.htm"class="rounded">contact me</a></li>

<li><a href="roll_overs.htm"class="rounded">roll overs</a></li>

<li><a href="css_styles.htm"class="rounded">css styles</a></li>

<li><a href="links.htm"class="rounded">links</a></li>

</ul>

</div>

<div class="rounded" id="content"><p>Last updated: march 8th, 20011</p><p> </p>

<h1 class="h1">Introduction</h1>

<p>Hello, my name is Robert Bonner, I am a web designer. I am now

studying to become a developer. I will be honest and tell you that

I have been web designing only about 18 months . I went to college

to get my degree in networking, I took a class in web designing for

a filler class, I found that I liked it better. When I was supposed

to be studying for my networking classes I would be writing code

for a fictious web site trying to make it work. I finely decided to

quit networking and spend my time on web designing.</p>

<p>On a friends advice I started this reference site as a please to

put code blocks and how to stuff, for a personal reference. That

way as I learned more and more I would find it useful, as I would

find that I will be using code over.</p>

<h1 class="h1">Why I built this site</h1>

<p>This web site is not meant to be a tutorial, it is a place for

me to have files that I have done web designing, basically an on

line file cabinet. It is solely a place for me to look up code

blocks and any other information that I might use in my web site

building. I built this site organized in a manner that I can

remember where I put it.This way I can do less research and more

web site building. With this in my work flow my site building has

speeded up considerably. When I started I could have used a site

like this. I would also suggest that you build yourself a site for

your stuff, you will find it handy.</p>

<p>As this is not a tutorial per say, I do not include basic things

like how to copy and past or how to set up your ftp. I just have

simple instructions on how to. If you are a beginner you might get

lost in some of the things that I put in this site, simply because

I might leave a step or two out. But not to worry I will be glad to

help you out if I can. Feel free to contact me, I check my email

very often, I will get back to you on the same day that you email

me.</p>

<p>I use DreamWeaver CS4 as a text editor, but there are plenty of

free ones out there, I am going to suggest Komodo Edit. A lot if

not most of the things I put in here is working with the Dream

Weaver interface, although I will always put the code along with

the how to.</p>

<p>Well as you can tell I am not a writer so I am going to stop

now.</p>

</div>

</body>

</html>

Andrea · March 8, 2011

If you can upload your page, that would be best - I've put the code here so we can see: http://www.aandbwebdesign.com/KSforum/graben.html - but as you can tell, I don't have the images you're working with (hence the aqua and yellow just so we can see something).

I've unhidden the a:active, and it shows the font changing color as you click, which is exactly what it's supposed to do. But at this moment, I'm not seeing the problem you describe. Maybe it's connected to the background images that I don't have.

In addition, just browsing through your html code, I notice the following:

Stick with strict doctype wherever possible and make sure things validate - the cleaner your code, the better.

You have this

<link href=",css/mainCss.css" rel="stylesheet" type="text/css">

That comma before css/mainCSS.css doesn't belong.

Even so the spelling of 'LeftSidebsr' matches how you write it in your CSS, that 'bSr' is likely to give you a headache at some point when you have forgotten that you spelled the word 'bar' with and 'S' in the middle.

There's never any point in this:

<p> </p>

p tags are for paragraphs. If you need space, add margin or padding.

I don't see the point of giving your H1 a class of h1 - you can style h tags just by their name. And if for some reason you will have a differently styled h1 tag, and you're using the class for that reason, then it's better to give your class a name that actually means/describes something.

Use a spellcheck for your content. And what your spellcheck won't tell you - 'place' to put code, not 'please'.

And to your CSS:

When something is zero, you need no unit of measure - zero is zero anything - so margin: 0; is sufficient.

Look into using Shortcuts - http://www.csstutorial.net/2010/02/css-shortcuts/ - just makes for leaner, cleaner code.

And sorry I couldn't help with your issue, but with what I have, I'm not seeing it.

grabenair · March 8, 2011

the web site is http://www.freewebdesigningreference.com Thank you Andra

Andrea · March 8, 2011

I tried in IE 7 and 8, FX, Chrome, Opera, and Safari and didn't see any black outlines.

grabenair · March 8, 2011

I am sorry I am not being clear enough. It is only when you click on the link. For Andrea I changed the links and did not put any borders to make it easier to see. But now the box is white it changes color with my text color.

grabenair · March 9, 2011

I guess I am not paying close enough attention, I noticed that this site has the dashed outline when you click on a link. So I went surfing the the internet and found it on a lot of sites. I am guessing it has something to do with using pixy rollovers. I am not sure but this is where I found it on the sites that I looked at. Thank you all who tried to figure out what I was trying to fix.

Edited March 9, 2011 by grabenair

Sign In

vertical links

Recommended Posts

grabenair

Andrea

grabenair

Andrea

grabenair

grabenair

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support