Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Staying Within the Rules 2

Status
Not open for further replies.
audiopro

audiopro

Programmer
Apr 1, 2004
3,165
GB
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
 
Sort by date Sort by votes

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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Hi

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


Feherke.
feherke.ga
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Also using Validation ensures that it will look and work the same across compliant browsers.
Click to expand...
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
169
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
108
CoolBreeze007
CoolBreeze007
stephane.bouchard2
  • Locked
  • Question
How can you find the html version from source code. 2
Replies
6
Views
252
stephane.bouchard2
stephane.bouchard2
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
212
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top