PDA

View Full Version : Div Tag problem.


PickleFace
04-14-2011, 05:02 PM
When I resize the browser then scroll across my div tag images move along. Last time I fixed this problem with "min-width:100px;" etc but now it won't work.

Hoping someone can figure out this problem :P

<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" >
<div id="designLayout" align="center">
<img src="echo_rain.jpg" alt="" />

<div class="button_facebook">
<form>
<input type="button" value="" class="button_fb" onclick="window.location.href='http://www.facebook.com/echorainofficial'">
</form>
</div>
<div class="button_twitter">
<form>
<input type="button" value="" class="button_tw" onclick="window.location.href='http://www.twitter.com/echorainuk'">
</form>
</div>
<div class="button_soundcloud">
<form>
<input type="button" value="" class="button_sc" onclick="window.location.href='http://www.soundcloud.com/echorainuk'">
</form>
</div>
<div class="button_youtube">
<form>
<input type="button" value="" class="button_ut" onclick="window.location.href='http://www.youtube.com/echorainuk'">
</form>
</div>
</div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */

body {
background-color:#000;
}

.button_facebook {
top:-135px;
left:-230px;
width:0px;
height:0px;
position:relative;
}

.button_fb {
background:url(facebook.png) ;
border:none;
width:80px;
height:80px;
}

.button_fb:hover {
border:none;
background:url(hover_fb.png);
width:80px;
height:80px;
}

.button_twitter {
top:-135px;
left:-115px;
width:0px;
height:0px;
position:relative;
}

.button_tw {
background:url(twitter.png) ;
border:none;
width:80px;
height:80px;
}

.button_tw:hover {
border:none;
background:url(hover_tw.png);
width:80px;
height:80px;
}

.button_soundcloud {
top:-133px;
left:0px;
width:0px;
height:0px;
position:relative;
}

.button_sc {
background:url(soundcloud.png);
border:none;
width:75px;
height:75px;
}

.button_sc:hover {
border:none;
background:url(hover_sc.png);
width:75px;
height:75px;
}

.button_youtube {
top:-138px;
left:115px;
width:0px;
height:0px;
position:relative;
}

.button_ut {
background:url(youtube.png);
border:none;
width:80px;
height:80px;
}

.button_ut:hover {
border:none;
background:url(hover_ut.png);
width:90px;
height:90px;
}


Cheers in advance.

johnMoss
04-15-2011, 05:14 AM
Can you redefine your problem? No one seems to understand what you're running into. A link to a host so we can see it?

PickleFace
04-16-2011, 12:06 AM
Heres the link, http://echorain.co.uk/

Sorry should of posted that in the first place.

johnMoss
04-16-2011, 01:56 AM
OK, You still are not identifying what your problem is... In opening the browser, it's obvious everything is way oversized. But is that your intent? Resizing the browser as you say, simply resizes the imagery correspondingly. No change. In moving the browser up & down, left & right, all remains the same. What is the discrepancy?