PDA

View Full Version : lateral centering

cmw000
01-10-2006, 10:09 AM
I'm trying to make it so that all my divs stay centered properly when the window 's width is resized. Even though they're all set to relative, two of them appear to be fixed in space and do not move when the window is resized. Any help would be appreciated.:thumbsup:

<html><head>

<title>Alliance Border Patrol</title>
<link rel="stylesheet" type="text/css" href="index.css" media="screen">

<script type="text/javascript">
//<![CDATA[
function doStuff(el) {

var links=document.getElementsByTagName("a");
for(i=0;i<links.length;i++) {
if(links[i].className=="white") {
links[i].style.color="#cccccc";
}
}
el.style.color="#ffcc66";
}
//]]>
</script>

</head><body style="background:#000">

<script type="text/javascript">
<!--

function show_me(id){

document.getElementById("box2").innerHTML=document.getElementById(id).innerHTML

}

//-->
</script>

<div id="top">
<a href="index.html"><img src="img/your_mom.gif" alt="Alliance Border Patrol"></a>
</div>

<div id="left" class="data">

<br>
<a class="white" href="news.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">NEWS&nbsp&nbsp&nbsp&nbsp</a>
<br><br><br><br>
<a class="white" href="info.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">INFO&nbsp&nbsp&nbsp&nbsp</a>
<br><br><br><br>
<a class="white" href="rules.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">RULES&nbsp&nbsp&nbsp&nbsp</a>
<br><br><br><br>
<a class="white" href="roster.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">ROSTER&nbsp&nbsp&nbsp&nbsp</a>
<br><br><br><br>
<a class="white" href="gbank.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">GBANK&nbsp&nbsp&nbsp&nbsp</a>
<br><br><br><br>
<a class="white" href="pics.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">PICS&nbsp&nbsp&nbsp&nbsp&nbsp</a>

</div>

<div id="right">

<iframe class="mframes" src="news.html" name="theframe" scrolling="auto" frameborder="0" marginwidth="15px" marginheight="0px" allowtransparency="true"></iframe>

</div>

<div id="bottom">

</div>


</body></html>



body{ text-align:center; position:relative; background-color: transparent; }

*{ text-decoration:none; margin:0; padding:0; }

img { border:0; }

#top { position:relative; top: 30px; }

#left { position:relative; font:small-caps 900 12px arial; float:left; text-align:right; top:80px; left:150px; }

#right { position: relative; background-image: url(img/border.gif); background-repeat:no-repeat; height: 500px; width:600px; top:40px; left: 250px; }

iframe { position: relative; top:35px; left:-31px; scrolling:auto; width:536px; height: 430px; //left:0px;}

.data { color: #cccccc; text-align:left; font:small-caps 900 18px arial;}

.data a:link { color:#cccccc; }

.data a:visited { color:#cccccc; }

.ext { color: #cccccc; text-align:left; font:small-caps 900 18px arial; }

.ext a:link { color:#ffcc66; }

.ext a:visited { color:#ffcc66; }

.names { color:#ffcc66; }
Bill Posters
01-10-2006, 10:28 AM
Place everything in a 'container' div…

css:
body {
text-align: center; /* the wrong way, for IE */
}

#container {
width: ***;
margin: 0 auto; /* the right way */
text-align: left; /* reset the correct text alignment */
}
_Aerospace_Eng_
01-10-2006, 10:37 AM
Here is an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Alliance Border Patrol</title>
<style type="text/css">
*{ text-decoration:none; margin:0; padding:0; }

body{ text-align:center; position:relative; background-color: #000; }

img { border:0; }

#container { width:780px; margin:auto; }

#top { margin-top: 30px; }

#left { font:small-caps 900 12px arial; text-align:right; margin-top:80px; margin-right:600px;}

* html #left { margin-right:0; }

#left ul { margin:0; padding:0; list-style:none; }

#left ul li { margin:25px 0 0 0; }

#right { font:small-caps 900 12px arial; float:right; background-image: url(img/border.gif); background-repeat:no-repeat; height: 500px; width:600px; text-align:center; }

* html #right { margin-left:-3px; }

iframe {width:536px; height: 430px;}

.data { color: #cccccc; text-align:left; font:small-caps 900 18px arial;}

.data a:link { color:#cccccc; }

.data a:visited { color:#cccccc; }

.ext { color: #cccccc; text-align:left; font:small-caps 900 18px arial; }

.ext a:link { color:#ffcc66; }

.ext a:visited { color:#ffcc66; }

.names { color:#ffcc66; }
</style>

<script type="text/javascript">
//<![CDATA[
function doStuff(el) {

var links=document.getElementsByTagName("a");
for(i=0;i<links.length;i++) {
if(links[i].className=="white") {
links[i].style.color="#cccccc";
}
}
el.style.color="#ffcc66";
}
function show_me(id){

document.getElementById("box2").innerHTML=document.getElementById(id).innerHTML

}
//]]>
</script>

</head>

<body>
<div id="container">
<div id="top"><a href="index.html"><img src="img/your_mom.gif" alt="Alliance Border Patrol" /></a></div>
<div id="right">
<iframe src="news.html" name="theframe" scrolling="auto" frameborder="0" class="mframes" id="theframe" allowtransparency="true"></iframe>
</div>
<div id="left" class="data">
<ul>
<li><a class="white" href="news.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">NEWS&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a class="white" href="info.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">INFO&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a class="white" href="rules.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">RULES&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a class="white" href="roster.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">ROSTER&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a class="white" href="gbank.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">GBANK&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a class="white" href="pics.html" target="theframe" onclick="doStuff(this)" onfocus="this.blur()">PICS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
</ul>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
There was no need for all of that relative positioning.
Bill Posters
01-10-2006, 10:49 AM
Didn't notice it before…

<a … onfocus="this.blur();">
Bad idea in terms of accessibility. Keyboard users alight (focus) on links before they activate them. With that script in place, their attempts to alight on a link will be repelled, meaning they'll never have the chance to activate (use) the link.

You may be better off tagging it onto the onclick event.
That way, keyboard users, who predominantly trigger onkeyup, onkeydown and onkeypress events rather than onclick*, won't have the usability of the links hampered.
(* subject to confirmation)

Something to bear in mind.
cmw000
01-11-2006, 02:16 AM
Thanks to both of you. And I did need the relative positioning because when I plugged in your code, it screwed up the position of everything and I don't know any other way to move things.

And thanks for the tip about the script. That's an issue I hadn't even thought of.