20 replies [Last post]
mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

Any help that anyone can give me here would be great cos this is driving my crazy.

ok ill explain as best i can:

can the size of the a.XX link property be changed? basically i want to create a rollover in css where the normal link displays a 101 x 141 gif and when the cursor rolls over it it changes for another gif of the same size. all i can get at the moment is a narro rectangle showing only a small protion of my image.

and then to complicate things further i want text over this - is this possible?

is this clear enough? ask for further details if you need them!!

thanks in advance for your help

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 10 years 31 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

[SOLVED]css link problems

Welcome Laughing out loud

Yes, I believe it is possible, but need to see your code to help you determine what you need to do.

- r

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

ok thanks do you want me just to post it up here?

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 10 years 31 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

[SOLVED]css link problems

Yes, post it here using the 'code' button or post a link to your site and css.

- r

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

ok bear in mind ive only been doing this for 2 days

or here is my css:



#masthead{
position: relative;
width: 100%;
min-width: 640px;
height: 141px;
color: #cccccc;
padding: 0px;
margin: 0px;

}



#btnholder{
	position: absolute;
	top: 6px;
	height: 141px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.btnlink, a.btnlink:visited{
  	font-size: small;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
	background-image:url(../images/btn.gif);
	width:101px;
	height: 141px;
}

a.btnlink:hover{
  	background-image:url(../images/btnover.gif);
	text-decoration: none;
	height: 141px;
}

and this is the html

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="temp.css" type="text/css" />


</head>
<body >

<div id="masthead">
 
  
  
  
    <div id="btnholder">
	
	 <a href="#" class="btnlink" ><img src="images/holder.gif" border="0" /></a>
	 
	 <a href="#" class="btnlink " ><img src="images/holder.gif" border="0" /></a>
	 
	 <a href="#"  class="btnlink" ><img src="images/holder.gif" border="0" /></a>
	 
	 <a href="#"  class="btnlink" ><img src="images/holder.gif" border="0" /></a>
	 
	 <a href="#"  class="btnlink" ><img src="images/holder.gif" border="0" /></a>
	 
	 <a href="#"  class="btnlink" ><img src="images/holder.gif" border="0" /></a>
	 
	 <a href="#"  class="btnlink" ><img src="images/holder.gif" border="0" /></a>	
	 
	  </div>
	  
	   </div>
   


  
</body>
</html>


thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[SOLVED]css link problems

You need to apply display:block to your anchor tags to get them to recognise height & width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

that seems to have worked but now all of the buttons are displayed virtically instead of horizontally - any ideas

also will it be possible to display text over these ie - the button labels

thanks for your help

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[SOLVED]css link problems

You'll need to float your links left (or right). If you replace holder.gif with text, then yes, the text will appear over your background image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

wow ive been trying to sort this out all night thanks a lot mate thats been a real life saver.

theres just a few more quick questions (sorry if this is taking the piss but i just want to get this done and go to bed) -

firstly: presumable i can apple css to the text over the buttons and position them and style them however i want

secondly there when i do the rollover there appears to be white lines running through the buttons that i think are the div box outlines - any ideas how i can get rid of those

and lastly what would be the best was to space out the buttons so they are separated and dont appear as one long block

thanks again

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[SOLVED]css link problems

1. Yes.
2. I think I'd probably need to see a page to give you an answer on that one.
3. You could add left or right margins to your links.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

Laughing out loud

im pretty sure they are the div lines becasue when i view the design in dreamweaver the lines are in the same place - but dont worry i'll try and sort it out

ok i think thats about it. doubtless ill be back in the next few days with some other newbie questions and annoy everyone else who knows what they are doing

thanks a lot Tyssen you've been a great help - youve stopped me throwing my machine out the window anyway!!

laters

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

[SOLVED]css link problems

mashman wrote:
when i view the design in dreamweaver

Oh my. No wonder. Dreamweaver. That's like expecting Microsoft to make a route system for cars that doesn't take you via Reading on your way from Birmingham to Glasgow (or from anywhere to anywhere). DW will make your code somewhat messy.

Trevor

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

i dont use dw to code the css, ive been keeping that separate because the css interface is a bit ropey

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

[SOLVED]css link problems

Just to clarify about the list items displaying below each other.

Usually, a <ul< and it's proceeding <li>s are block elements. Block elements, like paragraphs and headers, are displayed in big blocks, and any content after them is displayed underneath them, usually after a margin.

There are two ways to make list items display in a line - display:inline or float: left.

Display:inline changes them so instead of being on a separate line, they display on the same line (much in the same way a <span> tag doesn't break the text.

However, only block elements can have width and height.

Therefore, the best way to have them on one line is to float them left - however, then you have to clear them Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[SOLVED]css link problems

thepineapplehead wrote:
Just to clarify about the list items displaying below each other.

And just to clarify your clarification: I don't think mashman's links are actually in a list (check the HTML posted above), although they probably should be.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

[SOLVED]css link problems

Lists do make them easier to style, but it's not a necessity. In fact, the W3C say nav links don't belong in uls Shock . I still do it though Cool . I think it was Loraine who pointed out that from an accessiblitly point of view it doesn't matter if they're in a list becuase a text reader will point out the link number.

I did want to point out the syntax error though. There should be no / in the opening <a> tag.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

[SOLVED]css link problems

wolfcry911 wrote:
In fact, the W3C say nav links don't belong in uls

But,

URL's ARE allowed inside DL's (they must be inside the DD).

Trevor

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[SOLVED]css link problems

wolfcry911 wrote:
Lists do make them easier to style, but it's not a necessity. In fact, the W3C say nav links don't belong in uls Shock . I still do it though.

Don't most people? I haven't come across too many sites that don't use <ul>s for their links. I was thinking about this last night actually about how the list is so commonly used but you have to remove the bullet and float the items left (I know Stu Nicholls advocates using a dl instead, but it's still a similar process). Is it ever likely do you think that a new tag would be created for navbars? I mean, navigation is a very specific part of a website and at the moment there is no tag that describes its meaning exactly.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

[SOLVED]css link problems

Yes, there is said to be a new nav list tag, <nl> coming. But who knows when that will be. And you're right, most (CSS, standards compliant) people do use unordered lists, or lists anyway. I was just bringing up another view.

mashman
Offline
Regular
Last seen: 12 years 39 weeks ago
Joined: 2005-10-12
Posts: 30
Points: 0

[SOLVED]css link problems

so is it just good coding practice to put nav links in an unordered list?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[SOLVED]css link problems

mashman wrote:
so is it just good coding practice to put nav links in an unordered list?

It is quite a common way of presenting lists of navigation items.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference