Div tag as link problem with written code

Below is an example code that some gave me to make an entire div as a link. You can change the size of the linking area by simply changing the height and width of the div. The problem that I am having is duplicating the same effect in a simple wusiwug program that I am writing. I am supply all the information for the div using styles, but I don’t get the same effect. I am trying to understand why. If someone would be kind enough to look at the code below and then look at the generated code on my website, I would appreciate it. There may be more than one error so please look closely. The page can be found at treecare.tv/INTROPAGE.html
www.treecare.tv/INTROPAGE.html


I was not sure how to put a link on this site. Sorry, I will learn.

Texas Pete


<html>
<head>
	<title>DIV Link</title>

	<style type="text/css">
	.link-container {
		border: 1px solid;
		width: 25%;
		height: 40px;
	}

	.link-container a {
		display: block;
		background: #c8c8c8;
		height: 100%;
		text-align: center;
	}

	.link-container a:hover {
		background: #f8f8f8;
	}

	</style>

</head>
<body>

	<div class="link-container">
		<a href="http://www.stackoverflow.com">Stack Overflow</a>
	</div>

	<div class="link-container">
		<a href="http://www.stackoverflow.com">Stack Overflow</a>
	</div>

</body> </html>


The problem with using a WYSIWYG is that you lose control over your code. That is, any code provided to you will probably NOT be able to be reproduced using the GUI of the WYSIWYG ( yes, another reason why WYSIWYG suck).

The best way is to abundant he GUI and code directly in the HTML/TEXT EDITOR part of your WYSIYG.

as far as links are concerned, it is best to consider this as an issue of block and inline elements.

DIV, P , LI , etc are BLOCK elements and GENERALLY speaking A tags are INLINE elements. The trick is , when you have to , to make an A tag LOOK and behave like a block element.

  • IF YOU are coding HTML5 ( that is if your doctype is : <!DOCTYPE html>) then CAN wrap your anchor the block element ( in your case the DIV). I should point out that tho HTML5 allows this, my concern would be accidentally nesting anchors.

The other way to handle this is to use the display CSS property to make the theA tag behave like a block.

this is what is being done here:

	.link-container a {
		display: block;
 	}

at this point the A acts as if it were a DIV itself and you can add padding, width, height, etc.

Additional note:Even with display:block,


	.link-container a {
 		height: 100%;
 	}

Will only work if the container has a a height declared ( think “100% of what?”) As a parent elements height is determined by its content by default, in many case it’s also irrelevant to declare a height, for example:

<div><a href=&#8216;#&#8217;>x</a></div> 

Since the link is the only thing in the DIV the div will be as tall as you make the A.

Hope that helps.

Hi TexasPete,
Problem is also, that everything has a {position: absolute} and nothing is flexible.
I wonder what WYSIWYG-editor you have used: it has produced invalid, outdated and abominable code.

We can see:

  • The doctype is <!DOCTYPE html> (=html5), but then in the <html> tag no xmlns=“…” attribute can be used.
  • There is a <meta http-equiv=“content-type” content=“text/html;charset=utf-8” />, which is good, but it is on line 117 of the code, and has to be just in the beginning.
  • There is a <meta http-equiv=“content-type” content=“text/css” />, but that is not true! The content of the page is written in html - this <meta> has to be removed (the content-type is already formulated as html, see previous item, and a document cannot have 2 content-types!).
  • There is a whole list of classes for the font-sizes. It seems a kind of translation of the pt units that MS-Word is using. Some classes have a decimal point in the class-name, which is forbidden (invalid). - It is handy to make classes for font-sizes only when you need them! :slight_smile:
  • The <center> tag is deprecated since 1999, and in html5 even obsolete (forbidden: future browser-versions can drop the support). Instead of that: you can center a page by giving the #wrapper a certain width plus a {margin-left: auto;} and a {margin-right: auto;}.
  • Some css-properties are not needed, for they have the given value as default. For instance: a <p> and a <div> have always a {display: block;} character as default. That can be omitted in the css. Only if you want it different, the display-property has to be set.
  • To give a <div> inside the #wrapper a width in px in order to fill the whole width: is not needed. It will be automatically 100%.
    And if the div> has a border, then the border will be also inside the #wrapper. That saves the time for counting the pixels. :wink:
  • Absolute positioning is extremely dangerous! If only the smallest thing inside a absolute positioned element is changing, the element can shrink or overlap other elements without having control…
  • The same for fixed heights of elements. As soon as you get more content, it doesn’t fit anymore. For testing purposes, you better can give some arbitrary filling to the elements, then you can see what they do.
  • Helpful can be, to give all elements different colors, background-colors and/or borders.
  • The best is to build a page from top to bottom. With the absolute positioned elements it doesn’t seem to matter where you place the elements in the html-code, but that is treacherous. If you convert them to relative positioned elements, the whole layout can collapse!
  • O, don’t mix styles in the <head> if the page with inline styles in the html: you don’t see what you are doing; with all css in the <head> (for a test page) it is clear what is going on if you make a change.

This and other tips you can find for instance in the “[U]Golden Rules of CSS[/U]” (and in good articles and books).

=======
Now back to your opening question! :wink:

You can change the size of the linking area by simply changing the height and width of the div.

Yes, it can be done by a wrapping <div> with a width and height, and then a {display:block} for the <a> link.

  • But often it’s far more easy to give the link itself a width and/or height, and then a {display:block}.
  • Also possible: give the links a padding around to give them a larger click area (the border will be outside the padding).
  • With the margin of the link the distance to the following link can be given: when there is more text in a link, everything will be pushed aside automatically. :slight_smile:

To compensate my grunting from above, I have a:

I guess to study a bit css will be your future. :slight_smile:

[font=calibri]Ugh … sorry, but that kind of “glass panel link” overlaying the content is horrible and is likely to go wrong for too many people, or when you change the content, or for a whole host of other reasons.

As dresden_phoenix says, if your one single link makes up the entire contents of the <div> then setting a {display:block;} will work a treat, or if you are using HTML5 then you can just put the <a> around the <div> and you’re home and dry.

If you aren’t using HTML5 and you want to make a whole <div> into a clickable link, where that <div> could include more than just one <a> element, the easiest way is to use Javascript. You should still include a regular <a> on the most prominent part of the content, as a fall-back to ensure that the link is accessible to everyone, and then you just put:
<div onClick="window.open( '/page.htm','_top' ); return false;">
with the appropriate URL, obviously, and lo and behold, the whole <div> is clickable. You might also want to apply some styling on div:hover to make it clear that it’s linkified.[/font]

Thank you all. I will play with this a bit. My Little wysiwig is not meant for everyone. It of course can’t be all things to all people. Learning HTML 5 is quite a bit different than 4.01 transitional or xhtml.
Texas Pete