image as a link, but with no border

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

41 Replies - 4394 Views - Last Post: 13 August 2009 - 09:49 AM

#1 Torroes_prime  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

image as a link, but with no border

Post icon  Posted 08 August 2009 - 06:36 PM

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....

Is This A Good Question/Topic? 0
  • +

Replies To: image as a link, but with no border

#2 no2pencil  Icon User is offline

  • Dic Head
  • member icon

Reputation: 5165
  • View blog
  • Posts: 26,840
  • Joined: 10-May 07

Re: image as a link, but with no border

Posted 08 August 2009 - 06:41 PM

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



CSS:
border-style: none;



** Renamed title to be more descriptive **
Was This Post Helpful? 0
  • +
  • -

#3 Torroes_prime  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

Re: image as a link, but with no border

Posted 08 August 2009 - 07:27 PM

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?
Was This Post Helpful? 0
  • +
  • -

#4 no2pencil  Icon User is offline

  • Dic Head
  • member icon

Reputation: 5165
  • View blog
  • Posts: 26,840
  • Joined: 10-May 07

Re: image as a link, but with no border

Posted 08 August 2009 - 07:29 PM

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.
Was This Post Helpful? 1
  • +
  • -

#5 Torroes_prime  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

Re: image as a link, but with no border

Posted 08 August 2009 - 07:32 PM

View Postno2pencil, 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.
Was This Post Helpful? 0
  • +
  • -

#6 no2pencil  Icon User is offline

  • Dic Head
  • member icon

Reputation: 5165
  • View blog
  • Posts: 26,840
  • Joined: 10-May 07

Re: image as a link, but with no border

Posted 08 August 2009 - 07:34 PM

Glad to see that you got it working.

At least you know you were in the right direction :)
Was This Post Helpful? 0
  • +
  • -

#7 J0K3R  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 13
  • View blog
  • Posts: 298
  • Joined: 19-December 08

Re: image as a link, but with no border

Posted 09 August 2009 - 10:19 AM

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.

:)
Was This Post Helpful? 0
  • +
  • -

#8 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: image as a link, but with no border

Posted 09 August 2009 - 12:20 PM

Jok3r is right.
img { border:0; }
.link-img { border:0; }
<img class="link-img" src="URL" />
Works fine for me.
Was This Post Helpful? 0
  • +
  • -

#9 Torroes_prime  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

Re: image as a link, but with no border

Posted 09 August 2009 - 05:15 PM

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
Was This Post Helpful? 0
  • +
  • -

#10 J0K3R  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 13
  • View blog
  • Posts: 298
  • Joined: 19-December 08

Re: image as a link, but with no border

Posted 09 August 2009 - 10:54 PM

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

Was This Post Helpful? 0
  • +
  • -

#11 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: image as a link, but with no border

Posted 10 August 2009 - 12:31 AM

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
Was This Post Helpful? 0
  • +
  • -

#12 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: image as a link, but with no border

Posted 10 August 2009 - 12:37 AM

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;
}

Was This Post Helpful? 0
  • +
  • -

#13 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: image as a link, but with no border

Posted 10 August 2009 - 10:35 AM

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

Was This Post Helpful? 0
  • +
  • -

#14 Torroes_prime  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 111
  • Joined: 07-June 09

Re: image as a link, but with no border

Posted 10 August 2009 - 12:42 PM

View PostQuin, 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.....
Was This Post Helpful? 0
  • +
  • -

#15 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: image as a link, but with no border

Posted 10 August 2009 - 02:10 PM

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; }



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

Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3