Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Hyperlinks on Background Image CSS

Posted on 2013-01-20
11
Medium Priority
?
382 Views
Last Modified: 2013-01-20
I have been fighting with this for a few hours but cannot find a combination that works. Excuse my newb CSS code please, learning.

I have a web page with an image as a background sized 1920 X 920. I need to have the image stay centered horizontal and vertical no matter the resolution. This code is below, seems to work OK but it does not centre vertically.
body {
	line-height: 1;
	color: black;
	background: white;
	background: url(../img/tdb/locker-60.jpg) fixed center center no-repeat;	
	background-position: top;
	background-repeat: repeat-x;
	background-color: #e8e3D0;
	font-family: Georgia, serif;
}

Open in new window

I now have three links that need to placed at specific positions on the image, I can do that with divs and margins (although I think that's wrong). The big issue is that when the user resizes the window the links move.
.content-landing-Build 
{
    float: left;
   	width: 330px;	
	height: 163px;
	margin: 295px 5px 15px 320px;/*top, right, bottom, left*/
	 background-color:black;
    color:white;

}

Open in new window

<div class="content-landing-Build">
                        Build Drill 
                    </div>

Open in new window


Is there a way to add href's to the image and keep them in the exact position at all times?

Code or example tutorials would be great from a blank slate as I am learning as I go.

I would like to include IE8 unfortunately.

Cheers
0
Comment
Question by:Winston Smith
  • 6
  • 3
  • 2
11 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38798924
Sorry, you have conflicting requirements.  If you center the background image vertically, everything else will always move when the window gets resized because the content is going to be positioned relative to the top of the window not the center.  

The only way to get everything to stay put is to horizontally center both the background and the content and align them vertically to the top of the window so that you have a strip down the middle of the image and page that stay stuck together.
0
 

Author Comment

by:Winston Smith
ID: 38798927
Ok, I can live with this. I am unsure how to code it though.
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1200 total points
ID: 38798945
Here is a template file that you can use for testing.  Note that if you can put your background image in the #wrapper div aligned 'center top' (instead of the 'body'), it will stay put relative to the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS Positioning Puzzle</title>

<style type="text/css" >
body {margin:0;}
div {
	border: 3px rgb(135,135,135) solid;
	padding:5px;
	margin-bottom:10px;
}

h1 {
	text-align:center;
}

#wrapper {
	width:1002px;
	margin:0px auto;
	border:0px;
	padding:0px;
	background-color: #f7f7f7;
}

#leftcol {
	width:496px;
	float:left;
	padding:0px;
	border:0px;
	margin:0px;
}

#rightcol {
	width:496px;
	float:right;
	padding:0px;
	border:0px;
	margin:0px;
}

#comments{
	width:150px;
	margin-right:10px;
	float:left;
}
  
#faq{
	width:300px;
	float:right;
}
  

  
#footer{
	clear:both;
}
</style>
</head>

<body>

<div id="wrapper">
	<div id="header">
		<h1>Header</h1>
	</div>

	<div id="leftcol">
		<div id="intro">
			<h1>Intro</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
		</div>
		
		<div id="comments">
			<h1>Comments</h1>
<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero </p>		</div>
		
		<div id="faq">
			<h1>FAQ</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus</p>
		</div>
		
		</div>	

	<div id="rightcol">
		<div id="vote-form">
			<h1>Vote-Form</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			
		</div>
	</div>

	<div id="footer">
		<h1>Footer</h1>
	</div>
</div>

</body>
</html>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Winston Smith
ID: 38799479
OK, that seems to be part of what I need. I added my image to the wrapper class
#wrapper {
	width:1920px;
	height:920px;
	margin:0px auto;
	border:0px;
	padding:0px;
	background: url(../img/tdb/locker-60.jpg) center top no-repeat;
	/*background-color: #f7f7f7;*/
}

Open in new window

And now moving the size of the screen keeps all the divs you created in place, PERFECT!!

But how do I place the divs over the area of the image I want? And how would I make the div area a link? I can make the text a link but don't know how to make the entire div area so the user has an area to click.

Sorry for the multiple of questions, just a little lost in the "relative, float, margin" positioning world
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38799485
If the content is text then the positioning can still get messed up by user font settings.  Trying to position content to align with a background is a fool's game.  There are just too many ways for it to get messed up including cross-browser and cross-version issues.  

You might be able to keep it in the general location, but if pixel precision is necessary; not going to happen except for the specific setup you are using to develop with.  

Cd&
0
 

Author Comment

by:Winston Smith
ID: 38799487
I can add the following to the class to place the div where I wish
	#comments{
	 	width: 330px;	
	height: 163px;
	margin: 295px 5px 15px 320px;/*top, right, bottom, left*/
	 background-color:black;
    color:white;
}

Open in new window

But it moves all the other divs around of course
0
 

Author Comment

by:Winston Smith
ID: 38799490
The content is an image, no text. I simply need an area that is clickable, no text. Should I be looking to do this another way perhaps?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 800 total points
ID: 38799530
If the links are images, then you could use a graphics program to place them on the the main image and use it as an image map .  Not the most modern technique, but nothing will move around if the whole thing is one image.

Cd&
0
 

Author Comment

by:Winston Smith
ID: 38799869
You know, I thought of that but since I had not even heard it mentioned in a decade it seemed perhaps dead to me. Its only for one page and one purpose so maybe an old dinosaur will work in this case. Thanks!
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38799921
I have a customer that uses image maps all the time because he's pretty good with Photoshop (which will generate that for you) and not so good with HTML page layout.
0
 

Author Comment

by:Winston Smith
ID: 38799927
I am playing with CSS imagemapping. Looks like it, combined with your @DaveBaldwin's template, will be the answer. Thanks for all the help !!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question