View Full Version : Problem with img border


strawberry22
10-26-2004, 02:51 AM
Argh, I'm doing something wrong with my img section of my style sheet! I can't figure out how to get dashed borders around all of the images.

Here's my SS:

body {
background:#EFEDD4;
color:#000000;
margin:0px 0px 0px 0px;

}

a:link {
text-decoration: none;
font-size:11px;
color:#818181;
}

a:visited {
text-decoration: none;
font-size:11px;
color:#110F4C;
}

a:hover {
text-decoration: none;
font-size:11px;
color:#000000;
border-bottom:1px solid #000000;
}
a {
text-decoration: none
}

#name {
position:absolute;
top:205px;
left:0px;
width:275px;
border-top:1px solid #000000;
}

.name {
padding:4px;
color:#424242;
font-size:30px;
}

#top {
position:absolute;
top:0px;
left:0px;

}


#log {
position:absolute;
top:20px;
left:320px;
width:435px;
padding:5px;
margin:1px 5px 2px 5px;
padding:5px;
font:10px verdana, arial, helvetica, sans-serif;
background:#FBFBF3;
border:1px solid #424242;


}

#img {
border-style: dashed;
border-color: #818181;
border-width: 1px;
}

.date {
font:10px verdana, arial, helvetica, sans-serif;
font-weight:normal;
margin:10px 5px 10px 5px;
color:#124C6B;
text-align:center;
padding:3px;
border-bottom:1px solid #424242;
}


.title {
font:13px verdana, arial, helvetica, sans-serif;
font-weight:bold;
color:#124C6B;
text-align:center;
margin:10px 0px 10px 0px;
padding:8px;
}

#side {
position:absolute;
top:250px;
left:10px;
width:250px;
font:10px verdana, arial, helvetica, sans-serif;


}

.sideheader {
font:10px verdana, arial, helvetica, sans-serif;
font-weight:normal;
color:#124C6B;
text-align:center;
padding:3px;
background:#FBFBF3;
border:1px solid #424242;
}

.inside {
margin:10px 0px 10px 0px;
padding:5px;
font:10px verdana, arial, helvetica, sans-serif;
}

#img {
border-style: dashed;
border-color: #818181;
border-width: 2px;
}


And you can view the entre source here:
http://heifernomore.blogspot.com

Monkey Bizzle
10-26-2004, 03:44 AM
# represents what is called an id. you have to add "id=img" to the image tag of whatever image that you want to have the effect. if you want to apply it to all images, then get rid of the # in front and it will apply to everything using the <img> tag. also, you have it in there twice.

you have this:

#img
{border-style: dashed;
border-color: #818181;
border-width: 1px;}

and this:

#img
{border-style: dashed;
border-color: #818181;
border-width: 2px;}

choose which one you want, and delete the other.

strawberry22
10-26-2004, 05:17 AM
Thanks so much! My CSS skills are pretty limited so I was unsure what '#' and '.' meant on my linkware blog layout.

Thanks again!!

Monkey Bizzle
10-26-2004, 06:27 AM
well, like i said # is an id. you use it for something that would be used only once. like a menu or something. the . is for class and that is for things that would be used more than once. like let's use your images for an example. if you wanted only some of your images to have a border then you could make .img in your css with the correct attributes. then in your page, you would specify that class for every image that you wanted to have a border. it's sort of like making your own tags for your page!