[Torroes_prime]

okay, I've done this before but for some reason I just can't figure out how to do it this time (Translation, my brain needs a reset kick. any volunteers?). I'm setting an image as a link, and it gets border. I don't want it to have border. I've tried Margin: 0; border-width: 0; and Border: 0; in the css file. I know this is a simple thing and I'm feeling really clunky for not remembering how to do this. Someone help me please....

[no2pencil]

HTML:

<a href=""><img src="image.jpg" border=0></a>

CSS:

border-style: none;

** Renamed title to be more descriptive **

[Torroes_prime]

hmmmm, okay. Maybe I borked this more then I thought cause even using border=0 or border-style: none; the image still has border.

Here's the code from the page with the image:

<div id="read_more_button-crusher"> <a class="links1" href="Start-2.htm" >
<img src="Images/readmore-button.png"/>
</a>
</div>

and here's the segment from my css file for that class:

.links1
{	
margin:0;
border-style: none;
}

what did I bork here?

[no2pencil]

With the css that you have use this in your html :

<img class="links1" src="Images/readmore-button.png"/>

It isn't the href that you want to specify the class for, it's the image.

[Torroes_prime]

no2pencil, on 8 Aug, 2009 - 06:29 PM, said:

With the css that you have use this in your html :

<img class="links1" src="Images/readmore-button.png"/>

It isn't the href that you want to specify the class for, it's the image.

yeah, really simple. I knew it was something simple. Thanks for the reset kick, no2pencil. Gotta love how sometimes ya can't see the trees for the forest.

[no2pencil]

Glad to see that you got it working.

At least you know you were in the right direction

[J0K3R]

Torroes_prime. I put this following in my css:

img {
border:0px;
}

I have NEVER come across a place where I actually wanted the border to I just turn it off for all images by default.

[Quin]

Jok3r is right.

img { border:0; }

.link-img { border:0; }

<img class="link-img" src="URL" />

Works fine for me.

[Torroes_prime]

thanks for the info guys. My web site coding skills are currently the result of 5 tutorials covering basic (And I DO mean basic) HTML coding up to explaining the fundamental concepts of CSS and utter boredom as 8 of the 9 classes I had planned to take this summer got canceled due to lack of enrollment. IN theory, my Web design 1 class will be starting in a couple weeks (if this class gets canceled on me agian anyone living on the east coast will probably be hearing about something akin to a nuclear blast occurring.)

Though I seem to have encountered a new annoyance.
Outriders Members

If you look at the page, you'll see the black footer div with the various logos in it. That is supposed to be the bottom of the page. Now, I said that is supposed to be the bottom, not be at the bottom.

here's an example of what I mean:
Welcome to the Outriders


So I guess my question is what's giving me all that extra space at the bottom of the page?


Here's a link to the CSS file for convenience:
Outriders CSS file

[J0K3R]

HI..

In your CSS file. Change the following:

From:

#Toon-image
{
	position:relative;
	top:-675px;
	left:400px;
}

To:

#Toon-image
{
	position:relative;
	margin-top:-675px;
	left:400px;
}

This post has been edited by J0K3R: 09 August 2009 - 11:10 PM

[noorahmad]

img {
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

add this code in your css file

[noorahmad]

and if you are applying only on this image then use this code

#read_more_button-crusher .links1 img {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

[Quin]

What I can say is that it is the Toon-image layer.
Just get rid of it - I don't even see the reason in having it (it takes ages to load).
Try removing any of the fat (set padding to 0 and margins as well, unless you are using them).
Also, avoid positioning - it is tricky to get exact results if in-experienced.

I really am trying to help - its just that its hard to understand what you are doing (the coding is hard to read).

img { padding:0; margin:0; border:0 }

... cutting the fat


also, you can use an image for lists with CSS.

li { background: url('URL') no-repeat }

you will have to add the left padding to suit - perhaps margin will do

This post has been edited by Quin: 10 August 2009 - 10:40 AM

[Torroes_prime]

Quin, on 10 Aug, 2009 - 09:35 AM, said:

What I can say is that it is the Toon-image layer.
Just get rid of it - I don't even see the reason in having it (it takes ages to load).

hmmmm that's odd. I've checked it on a 36.6 dial up modem and it loads just fine. The Random image loader is java based so that might have something to do with it but I couldn't even guess as to what. But to answer the question about what it's there for, I have it there to hold the Random image and allow me to possition it has I need it.

Quote

Try removing any of the fat (set padding to 0 and margins as well, unless you are using them).
Also, avoid positioning - it is tricky to get exact results if in-experienced.

well, the only way to become experienced is to experiment, right? What other option is there for layering?

Quote

I really am trying to help - its just that its hard to understand what you are doing (the coding is hard to read).

How so? I thought I had the CSS file pretty well formatted to make it easier to read.

Quote

also, you can use an image for lists with CSS.

li { background: url('URL') no-repeat }

you will have to add the left padding to suit - perhaps margin will do

okay..... I don't have a clue what that is in reference to.....

[Quin]

I was saying you can edit the list with CSS, so you do not use span class. You can remove the list-style with CSS, and replace it with an image (as a background image).

There are two types of layout that I see fit; busy and clean.
(I've just named them now).
Busy layouts would have lots of content, clean would have a simple design.
Busy layouts would benefit more from being tabular based (using tables) and clean using div layering.

For div layering (that's what I am calling it) what I find beneficial is using main layers then nesting other layers in them (usually only a few layers in each layer, and only going so far down).

<body>
<div id="container">
   <div id="header">
      <div id="navigation">main navigation</div>
   </div>

   <div id="content">
      <div id="menu">this would just be a floating side menu</div>

      PAGE CONTENT

   </div>
</div>

<div id="footer"></div>
</body>

With this example, I can set the container to be centre aligned with margin:0 auto; in its styling, and it would be displayed in the centre of the screen, despite resolution. I would also use float:right; to make the menu layer float to the top right of the content area.
As for the footer, I can imagine that to be exactly like yours.

#footer {
   position: absolute;
   bottom: 0;
   background: #000;
   width: 100%;
   height: 50px;
   text-align: center;
   padding: 0;
   margin: 0;
}

Finally, as to your CSS. It seems very busy.
You seem to have many different styles, which I didn't even read to see if they were similar. I usually find a way to have my HTML short and simple, referring all styling to the stylesheet (with it all being there). Also, to reduce my CSS so it covers every aspect so that I do not get any surprises (even when styling the headers - I set the paddings and margins, font sizes, colours; the same with links). With the links, for example, if I have anything different, I change the one thing.

a:link { color:blue; text-decoration:none; }
a:hover { color:blue; text-decoration:line-through; }

a:link { color:blue; text-decoration:none; }
a:hover { text-decoration:line-through; }

Hope that helps



EDIT: I've just thought of something. Perhaps the problem lies with position:relative. Try changing it to absolute. I think it is causing that space afterwards to normal go there, but you are forcing the content up, leaving the area empty (put waiting).

This post has been edited by Quin: 10 August 2009 - 02:18 PM