10 replies to this topic

[l3lueMage]

I was wondering 3 things.
1. How do I make the text align vertically center in a div.
2. How do I make the whole div a link, so when they put the mouse anywhere over it...it shows that its a link?
3. How do I get the border to work? XD

the vertical-align doesnt work...and the border doesnt work with this CSS code:

#home
{
	margin-top:94px;
	background-color:#8dbcde;
	border-color:#345e88;
	border-width: 1px;
	width: 139px;
	height: 20px;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	font-family: Tahoma;
	font-size: 12px;
	color:White;
	font-weight:bold;
}

[Matthew.]

lmao, OK.

Firstly i assume you want a text centered block (div) as a link right?...

modify this: (i cba to work it to your code haha).

a: link, 
a: hover, 
a:visited {
	  
	  display: block;
	  text-align: center;
	  border: 1px #000 solid;
}

and so on
You dont need a div to create block links but if it is a entire DIV you want (as in a large area) then u can just wrap a hyperlink around it for a simple answear.

(oh btw, the code above would turn [u]all[/b] links into a block link so u may wanna add a class )

[l3lueMage]

eh?

I dont get it o_O
How would I make it so on hover the whole div background changes? o.o;

[Matthew.]

You dont turn divs into hyperlinks, you either use styled lists or blocked hyperlinks

To get a hyperlink to change bg colour when hover'ed you would use this:

a:hover {
	  background-color: #(colour);
}

for a div....*shockingly*

.divclass:hover {
	  background-colour: #(color);
}

Quote

2. How do I make the whole div a link, so when they put the mouse anywhere over it...it shows that its a link?

You dont use div's as links as explained above

[AnDy89]

.Matt, on May 22 2006, 08:12 PM, said:

You dont turn divs into hyperlinks, you either use styled lists or blocked hyperlinks

To get a hyperlink to change bg colour when hover'ed you would use this:

a:hover {
	  background-color: #(colour);
}

for a div....*shockingly*

.divclass:hover {
	  background-colour: #(color);
}

Quote

2. How do I make the whole div a link, so when they put the mouse anywhere over it...it shows that its a link?

You dont use div's as links as explained above

Some people like to code for IE...

For your border (didn't define the border style, I also changed your margin, IE doesn;t like margin-top):

#home
{
	margin: 94px 0 0 0;
	background-color: #8dbcde;
	border-color: #345e88;
	border-width: 1px;
border-style: solid;
	width: 139px;
	height: 20px;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	font-family: Tahoma;
	font-size: 12px;
	color: white;
	font-weight:bold;
}

For vertically aligned text you need to get a balance between the top padding and height.

I'm not sure what #home is, whether it only has links inside it, whether it is like a container or what.

But if it only has links make your HTML
<div id="home"><a href="http://www.skinsforwp.com/" title="WordPress Themes">WordPress Themes</a>

then your CSS

#home a {
dispay: block;
height: 1px;
width: 1px;
}

Obivously give realistic width/height values.

Good luck

[coolaid]

vertical-align doesn't exist, using padding will result in very bad differences in ie and firefox. if you want a single line of text to be aligned vertically into the center of a div, you'll need to use line-height, and make line-height the same as the div height.

selector{
  height: 10px;
  line-height: 10px;
}

and like andy said up there, block is needed to make a link the size of a div, because you cant give inline elements heights or widths and some other properties.


heres what you're looking for (assuming #home is not the link id, and assuming #home is the tag holding the link)

#home{
	margin: 94px 0 0 0;
	border: 1px solid #345e88;
	width: 139px;
	height: 20px;
	text-align: center;
	font: 12px Tahoma;
	color: white;
	font-weight: bold;
}

#home a:link,
#home a:visited,
#home a:active{
  display: block;
  width: 139px
  height: 20px;
  background-color: #8dbcde;
}

#home a:hover{
  background-color:#000;
}

Edited by coolaid, 22 May 2006 - 10:00 PM.

[Matthew.]

Since i have never come into a situation where i have needed to put :hover on a div i wouldn't know if it works in IE6. However i am running IE7 and a quick test proves it does work.

l3lueMage you should also know that instead of using seperate attributes like "border-width" and "border-color" you can put into one:

border: (width) (color) (style);

As with nearly all other CSS

Edited by .Matt, 22 May 2006 - 05:33 PM.

[rc69]

Just for everybodies info, #2 has already been asked/answered.
http://www.pixel2lif...showtopic=20224

Personally, i would try to avoid making div's into links just to avoid cross browser problems. I would just make a special class for the given link and style it as needed.

[Jem]

.Matt, on May 22 2006, 11:15 PM, said:

border: (width) (color) (style);

Actually, it's border: (width) (style) (color);

[Matthew.]

Achually i think you'll find it works whichever way

However if were being standards picky then yes its that way round.

[Jem]

.Matt, on May 24 2006, 12:58 PM, said:

However if were being standards picky then yes its that way round.

I am always standards picky.