October 16th, 2009, 07:19 PM
|
|
Contributing User
|
|
Join Date: Aug 2009
Posts: 42
Time spent in forums: 15 h 58 m 33 sec
Reputation Power: 2
|
|
|
CSS - DIV Positioning Problem
I have a page (sample code included below) that I would like to set up something like IMG is a centered mage which is what I want. The next line is left adjusted and I want it to always be centered. The other complication is that the boxes B1, B2, and B3 can be hidden. So when any one or all of B1, B2, B3 are hidden I still want the Title to be centered. Is this possile??
I have been trying to get this working for most of the day; any help would be greatly appreciated.
There are a lot of things going on with this page so please bear with me. If you copy the code into a file it should work in your browser just fine (I have tested it with IE7 and Firefox):
Code:
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<style>
body { font-family: Arial; text-align: left; font-size: small; }
.big_red { text-align: left; font-size: 12pt; font-weight: bold; font-family: Arial; color: red; }
.box_title_red { text-align: center; font-size: 12pt; font-weight: bold; color: red; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: red; }
.box_title_black { text-align: center; font-size: 12pt; font-weight: bold; font-family: Arial; color: black; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: black; }
.strong { text-align: left; font-size: 12pt; font-weight: bold; }
.subtitle { text-decoration: underline; margin-top: 10; font-weight: bold; font-style: italic; font-size: 16pt; }
.title { text-decoration: underline; margin-top: 10; font-weight: bold; font-style: italic; font-size: 20pt; }
.cont_data_source { position: relative; float: left; border: 2px solid black; padding: 10px; text-align: left; width: 150px; }
.cont_data_type { position: relative; float: left; left: 10px; border: 2px solid red; padding: 10px; text-align: left; width: 170px; }
.cont_img_box { position: relative; border: none; width: 100%; }
.cont_title_box { position: relative; float: left; left: 20px; margin-bottom: 20pt; }
.cont_title_img { align: center; margin-bottom: 12pt; }
.cont_warn { position: relative; float: left; left: 30px; border: 2px solid red; padding: 10px; text-align: center; width: 130px; }
</style>
<script language="javascript">
function setRadio() {
if (!document.botForm.r1.checked && !document.botForm.r2.checked) document.botForm.r2.checked = true;
if (!document.botForm.r7.checked && !document.botForm.r8.checked) document.botForm.r8.checked = true;
getStyle(".cont_data_type", "block");
getStyle(".cont_data_source", "block");
getStyle(".cont_warn", "block");
}
function getStyle (ruleName, newDisplay) {
var i;
var j;
var m;
var ss;
for (i=0; i<document.styleSheets.length; i++) {
ss = document.styleSheets[i];
j = 0;
m = false;
do {
if (ss.cssRules)
m = ss.cssRules[j];
else
m = ss.rules[j];
if (m)
if (m.selectorText==ruleName)
m.style.display = newDisplay;
j++;
} while (m);
}
}
</script>
</HEAD>
<body onload="setRadio();">
<form name="topForm" method="post">
<div style="align: center; text-align: center; position: relative">
<div class="cont_img_box">
<img src="images/myimage.jpg" class="cont_title_img">
</div>
<div class="cont_data_source">
<div class="box_title_black">Select DB</div>
<span class="strong">
<input type="radio" name="dataSource" value="xrfPS" ID=r3 checked>Primary Site<br>
<input type="radio" name="dataSource" value="xrfBS" ID=r4>Backup Site
</span>
</div>
<div class="cont_data_type">
<div class="box_title_red">Select Data</div>
<span class="big_red">
<input type="radio" name="dataType" value="xrfCD" onclick="getStyle('.cont_warn', 'none');" id=r5>Current Data<br>
<input type="radio" name="dataType" value="xrfOD" onclick="getStyle('.cont_warn', 'block');" id=r6 checked>Obsolete Data
</span>
</div>
<div class="cont_title_box">
<div class="title">Search for Matching Records</div>
<div class="subtitle">(by record title)</div>
</div>
<div class="cont_warn">
<div class="box_title_red">Warning</div>
<span class="big_red">This Data<br>Is Obsolete!</span>
</div>
</div>
</div>
<div style="clear: both;">
<hr>
<h4>Data Controls Go Here</h4>
<hr>
<h4>Data Table Goes Here</h4>
<hr>
</div>
</form>
<form name="botForm">
<b>Select Data: </b>
<input type="radio" onclick="getStyle('.cont_warn', 'none'); getStyle('.cont_data_type', 'none');" value="false" name="a" id="r1">Hide
<input type="radio" onclick="document.topForm.r5.checked=true;getStyle('.cont_d ata_type', 'block');" value="true" name="a" id="r2">Show
<p><b>Select DB: </b>
<input type="radio" onclick="getStyle('.cont_data_source', 'none');" value="false" name="a" id=r7>Hide
<input type="radio" onclick="getStyle('.cont_data_source', 'block');" value="true" name="a" id=r8>Show
</form>
<p align="left"><font size="1"><b>[$Id: bytitle.asp 1.3 2009-09-16 14:01:51-07 medelman Exp medelman $]</b></font></p>
</body>
</html>
</HTML>
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
