CODEWITHSUNDEEP
javascripthtmlcss
Ryflex
Ryflex

Reputation: 5779

Make a div offset based on middle of window width?

Basically, I have the code:

<div id="footer">
    <a href="http://site.com/" target="_blank"><img src="image here.jpg"></a>
    <div style="position:absolute;left:5px;top:0px;">
        text here
    </div>
</div>

CSS:

#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center;color:#ECECEC; }

It works lovely on one computer, then if I load it on another the text is offset even further to the left or right depending on monitor/resolution.

How can I set it so it's centered but hovered over/under the image to an offset just right of the image?

EDIT

Small Screen: http://i.imgur.com/El2k8jG.png Large Screen: http://i.imgur.com/0Nsskrz.png

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stuff here</title>
<style type="text/css">
#footer_container {border:0px solid #666; bottom:0; height:95px; left:0; position:fixed; width:100%; }
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center; }
#footer2 { line-height:165px; margin:0 auto; width:500px;height:100%; text-align:center;  }
</style>
</head>
<body>
<div id="container">
stuff here
</div>
<div id="footer_container">
    <div id="footer">
        <a href="http://site.com/" target="_blank"><img src="http://i.imgur.com/nx8pHGH.png"></a>
        <div style="position:absolute;left:500px;top:0px;">
            <i><font color=black>dasdasdasd dsad dasdasdas dsadsad <a href="http://site.com/" target="_blank">ssdasdasd</font></a>.</i>
        </div>
    </div>
    <div id="footer2">
        <div style="position:absolute;left:500px;top:0px;">
            <font color=black><b>dasdsa dasdasd dasdasdasd dasdsadsad .</b></font>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 1

Views: 371

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74078

You can use the image as a background-image instead. Then it's much easier to position the text

HTML

<div id="footer">
    <a href="http://site.com/" target="_blank">
        <div>text here</div>
    </a>
</div>

CSS

#footer {
    line-height:125px;
    margin:0 auto;
    width:500px;
    height:100px;
    text-align:center;
    color:#ECECEC;
    background-image: url(http://i.imgur.com/nx8pHGH.png);
    background-repeat: no-repeat;
}

See JSFiddle

Upvotes: 2

user2276428
user2276428

Reputation: 208

You need to set position: relative; on the footer if you want the text to be positioned absolute in relation to the footer.

DEMO

Or you can remove all the positioning and the enormous line-height

DEMO

Upvotes: 4

Related Questions