PDA

View Full Version : DIV's with variable margin!

torvald_helmer
03-03-2006, 09:32 AM
Hi!

I have a problem. I want to have div-elements with variable margins.

I have thougth of something like this. The margins is calculated
based on the user screen width, with this javascript:


<SCRIPT language="JavaScript">
var screenWidth = screen.width;
var newMargin = (screenWitth/2)-400;
</SCRIPT>


400 comes from my div's with a max width of 800.

How do I put the variable: newMargin into my css?
Is it possible?


#top {
background-image:url(bilder/560x80.png);
height: 80px;
width: 560px;
position: absolute;
top: 10px;
left: 130px;
margin-left: INSERT HERE px;
}


mvh

Torvald Helmer
welshsteve
03-03-2006, 09:44 AM
CSS is used for styling layout, text etc, you cannot insert javascript variables into CSS as far as I am aware.
_Aerospace_Eng_
03-03-2006, 09:59 AM
You would need to do something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#top {
background-image:url(bilder/560x80.png);
height: 80px;
width: 560px;
position: absolute;
top: 10px;
left: 130px;
}
</style>
<script type="text/javascript">
function setMargin()
{
var newMargin = (screen.width / 2) - 400;
document.getElementById('top').style.marginLeft = newMargin + 'px';
}
window.onload = setMargin;
</script>
</head>

<body>
<div id="top"></div>
</body>
</html>
But this seems like you are trying to overcomplicate things. Are you just trying to center the banner in all resolutions? If so then there is a better way, look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#top {
background-image:url(bilder/560x80.png);
height: 80px;
width: 560px;
margin:10px auto 0 auto;
}
</style>
</head>

<body>
<div id="top"></div>
</body>
</html>
torvald_helmer
03-03-2006, 10:18 AM
Yes Im trying to center the div's at all time, I have used margin: 0 auto;
that is fine If I hav just one div at each line, but when there is more than one
next to eachother horizontally, that won't do.

I have 3 divs at the top, then 1, the 3, then 1 and the 3 at the bottom.

Now I will try the first code you wrote... let's hope it works :)
torvald_helmer
03-03-2006, 10:23 AM
That worked nicely. Thank you som much!!!

One more thing, is was quite silly of me, but i really don't
want to know the screenwidht but instead the browserwindows widht.

Do you know that?
_Aerospace_Eng_
03-03-2006, 11:12 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#top {
//background-image:url(bilder/560x80.png);
background:#F00;
height: 80px;
width: 560px;
position: absolute;
top: 10px;
left: 130px;
}
</style>
<script type="text/javascript">
function setMargin()
{
var newMargin = (f_clientWidth() / 2) - 400;
document.getElementById('top').style.marginLeft = newMargin + 'px';
}
function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
window.onload = setMargin;
</script>
</head>

<body>
<div id="top"></div>
</body>
</html>
It is width not widht.