INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Staying Within the Rules

Staying Within the Rules

(OP)
I have a rectangular, landscape div which has a background image.
I require whole div to be a link, so I have made it a block element.
The div has a full width background image, the left half is a graphic and the right half is plain.
I want a paragraph of justified text to appear in the right hand half.
I can't set the padding of the div as it repeats the background image.
I have floated a div to the right and while this works it breaks all the rules.
The question is, how do I do it?


Keith
www.studiosoft.co.uk

RE: Staying Within the Rules


Make the anchor element display as a block element with 100% height and width and set it as the last item in the parent div flow.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Staying Within the Rules

(OP)
Sorry Chris, not sure what you mean by that.

Keith
www.studiosoft.co.uk

RE: Staying Within the Rules

(OP)
I have tried a few different methods but if I don't enclose the content within the anchor, the centre of the div does not link.

Keith
www.studiosoft.co.uk

RE: Staying Within the Rules

(OP)
Sorry Chris, I didn't explain what I wanted very well.
This is one of the links I have on the page, it works but cannot validate with having an embedded div in the anchor tag.

Link

Keith
www.studiosoft.co.uk

RE: Staying Within the Rules

validation is only a spelling and grammar check and the only reason is doesn't validate is that a inline level element is not supposed to contain block level elements.


If you really want it to 'validate' the quickest and simplest way is use the onclick event of the parent div to fire a location.href change.

looking at your page briefly the problem looks to be related to trying to having the background image change assigned to the anchor rather than switching background images on the parent div :hover state

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Staying Within the Rules

Hi

Quote (Chris)

the only reason is doesn't validate is that a inline level element is not supposed to contain block level elements.
Correct. For HTML 4.01. In HTML 5 is valid to have block elements inside a ( not inside any inline element, just a ). But for that Keith should add a HTML 5 DOCTYPE.

Feherke.
feherke.ga

RE: Staying Within the Rules

Good point Feherke, never though about HTML5 DTD, and of course another choice is to not bother with the spell check and just be okay with the fact that it works as expected.


I have always put 'validation' low in the list of priorities, working correctly is far more useful. especially when the W3c can't even spell colour properly. :)

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Staying Within the Rules

As Feherke pointed out in HTML 5, a div inside an <a> tag is perfectly valid. Also using Validation ensures that it will look and work the same across compliant browsers. Validation is not just there for kicks. Its important, as it makes sure the reason it does not work is not related to the way you are laying out your HTML. Bur rather the way the browser interprets it. If its correctly validated it means you are not at fault.

Its bad practice to ignore it.


This works and validates correctly with an HTML 5 doctype. It is missing the encoding meta tag though.

CODE

<!DOCTYPE html>
<html>
<head><title>test2</title>
<style type="text/css">
div.landscape
{
	width:600px;
	height:300px;
	background-image:url("townkiller.jpg");
	background-repeat:no-repeat;
}

div.landscape a
{
	display:block;
	overflow:hidden;
	height:100%;
}

div.landscape div.paragraph
{
	width:330px;
	height:230px;
	float:right;
	margin:10px;
	text-align:justify;
	padding:10px;
}



</style>
</head>
<body>
<div class="landscape">
	<a href="#link">
		<div class="paragraph">
			<div class="feattext">
				<p>
					On Saturday 18th July 1964 a severe flood hit a large area of Lancashire and resulted in severe damage to property.
				</p>
				<p>
					This article features a series of newspaper articles telling the story of the flood and it's aftermath.
				</p>
			</div>
		</div>
	</a>
</div>

</body>
</html> 

With that said, as an extra suggestion, if you are going to have an image be part of the content, it should be part of the content, and not the background. Unless you have a pressing reason to make the image there part of the background image, it would be much easier to manage if it were an actual image tag. It would also make it easier to have the text on the right side, if there is something there in the left actually taking up the space.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Staying Within the Rules

Quote:

Also using Validation ensures that it will look and work the same across compliant browsers.
But is does not "ensure" that it will, never has and probably never will do, validation might give a slightly better chance of that happening, but it by no means "ensures" or "guarantee" that it will. It is possible to write code that 'validates', yet STILL does not 'work' in all browsers and devices.

Validation being proof of "good coding" is somewhat of a fallacy, it just means that you have got the spelling correct of the things that it can check.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Staying Within the Rules

Nothing is 100% certain. But at least code that validates is more likely to work than code that does not.

I'd like to see this code that validates, but does not "work". It might not do what you want it to, but it does what its specifications says it does.

Also having good semantics means you are using the proper elements for the proper purposes.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Staying Within the Rules

(OP)
I have experienced quite a few pages which display differently depending on which browser a visitor is using, despite the code validating.
I could have simply used an image and put all the text on there and made it validate that way but I want to exploit the SEO rule of getting as much relevant content on the page as possible. I also find it easier to roll over the background image to change the whole panel width.

Keith
www.studiosoft.co.uk

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close