SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div and Vertical-Align

    All,

    Hopefully this question has been dealt with - I've found a couple of resources but there's a lot of hack in them. My problem:

    In trying to spread the gospel of table-less layout, I've run across a problem with a form I've been tasked to design. There are three content boxes in the main part of the form. Two are on the left, stacked on top of one another. The third is on the right.

    The first request is to center the right-hand content box. I'm having troubles with that as the div tag doesn't support the vertical-align property.

    The second may be even harder. The left-hand boxes are optional, in that either one or both may show. If only one left-hand box is visible, we want that box to be centered and line up with the right-hand box.

    I believe I can use absolute height on the content boxes as they aren't likely to change, but we do resize the form (it's in a popup, so less than screen width).

    The text in the attached HTML/CSS (I apologize for bad form and will gladly accept correction on the CSS) should explain what I need when it's viewed. Hope I haven't been too obtuse in the explanations.

    Thanks much.

    Jim Stanley
    NTI/Blackboard
    =========
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/css/Tracker2007.css">
    <style type="text/css">
    .institutionHeader {
    width:95%;
    vertical-align:middle;
    text-align:left;
    background-color:#cce7ff;
    font-size:11px;
    font-family:verdana,arial;
    margin:0 auto;
    }

    .tdPanel {
    border: solid 1px #6699cc;
    background-color:#ffffcc;
    }

    .title {
    font-weight:bold;
    text-align:center;
    background-color:#ffffff;
    width:100%;
    padding-top:5px;
    padding-bottom:5px;
    }

    blockquote {
    text-align:left;
    background:#ffffcc;
    border:solid 2px #666666;
    padding:10px;
    margin:0px 20px 5px 20px;
    font-weight:normal;
    }

    label {
    float: left;
    width: 42%;
    font-weight: bold;
    text-align: right;
    padding-right:5px;
    margin-top:5px;
    margin-bottom:5px;
    font-family:verdana;
    font-size:10px;
    color: #333333;
    }

    input {
    clear:right;
    margin-top:5px;
    margin-bottom:5px;
    width:150px;
    }

    </style>
    </head>
    <body style="display:table;width:100%">
    <div class="institutionHeader" style="height:35px;">
    <p style="padding-left:5px;padding-top:10px;">
    <b>Test (Should Probably Be an H1 Style)</b>
    </p>
    </div>
    <div class="institutionHeader" style="vertical-align:middle">

    <blockquote>Instructional Text goes here</blockquote>
    <p style="text-align:left;margin-left:20px;padding-top:15px;font-weight:bold;margin-bottom:5px;">Heading (should also probably be an H1 style)</p>
    <form>
    <div id="districtInfo" style="margin-left:20px;width:40%;float:left">
    <div id="connectEDInfo" class="tdPanel" style="margin-bottom:10px;">
    <p class="title">Either This Content Shows...</p>

    <label for="fBlorgNum"># of Blorgs/label>
    <input id="fBlorgNum" name="fBlorgNum" type="text" /><br />
    <label for="fPfaffNum"># of Pfaffs/label>
    <input id="fPfaffNum" name="fPfaffNum" type="text" /><br />
    <label for="perBlorgFeeED">Per Blorg Fee/label>
    <input id="perBlorgFeeED" name="perBlorgFeeED" type="text" disabled/><br />
    <label for="annualFeeED">Annual Support Fee/label>

    <input id="annualFeeED" name="annualFeeED" type="text" disabled /><br />
    <label for="districtTotal">Total/label>
    <input id="districtTotal" type="text" disabled />
    </div>
    <div id="teacherInfo" class="tdPanel" style="margin-bottom:10px;">
    <p class="title">Or This Content, Or Both</p>
    <label for="fBlorgNumTI"># of Snegs/label>

    <input id="fBlorgNumTI" name="fBlorgNumTI" type="text" /><br />
    <label for="fPfaffNumTI"># of Pfaffs/label>
    <input id="fPfaffNumTI" name="fPfaffNumTI" type="text" /><br />
    <label for="perBlorgFeeTI">Per Sneg Fee/label>
    <input id="perBlorgFeeTI" name="perBlorgFeeTI" type="text" disabled/><br />
    <label for="annualFeeTI">Annual Support Fee/label>
    <input id="annualFeeTI" name="annualFeeTI" type="text" disabled /><br />
    <label for="teacherTotal">Total/label>
    <input id="teacherTotal" name="teacherTotal" type="text" disabled />
    </div>
    </div>
    <div style="margin-right:20px;width:40%;float:right;display:table-cell;vertical-align:middle">
    <div id="contractInfo" class="tdPanel">
    <p class="title">This Content Needs To Be Centered In Its DIV</p>
    <p>And if there's only one box on the left, it needs to be even with this box.</p>
    </div>

    </div>
    <div style="width:100%;text-align:center;clear:both;padding-top:15px;padding-bottom:10px;">
    <input type="submit" name="btnSubmit" value="Create" id="btnSubmit" />
    </div>
    </form>
    </div>
    </body>
    </html>

    =========

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a LOT of HTML errors in there. Hang on, I'll see if I can clean this up. The CSS I'll use may not be what you want, but it should be a good starting point nonetheless.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's the HTML.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>Jim Stanley's Corrected &amp; Updated CSS Based Form</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta http-equiv="Content-Style-Type" content="text/css">
    		<meta http-equiv="imagetoolbar" content="no">
    		<meta name="description" content="A brief description of the current page goes here.">
    		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
    		<link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen,projection">
    	</head>
    	<body>
    		<div id="header">
    			<img src="#" width="200" height="80" alt="(Web Site Title) Logo" title="">
    		</div>
    		<ul id="menu">
    			<li><a href="#">Menu Link</a></li>
    			<li><a href="#">Menu Link</a></li>
    			<li><a href="#">Menu Link</a></li>
    			<li><a href="#">Menu Link</a></li>
    			<li><a href="#">Menu Link</a></li>
    			<li><a href="#">Menu Link</a></li>
    		</ul>
    		<div id="content">
    			<div class="wrapper">
    				<h1>Web Page Title</h1>
    				<div id="instructions">
    					<p>
    						Instructions go here...
    					</p>
    					<p>
    						Instructions go here...
    					</p>
    				</div>
    				<form action="#" id="form-name" method="post">
    					<div class="fieldset">
    						<fieldset>
    							<legend><span>Either This Content Shows...</span></legend>
    							<label for="fBlorgNum"># of Blorgs</label><br>
    							<input id="fBlorgNum" name="fBlorgNum" size="25" type="text"><br>
    							<label for="fPfaffNum"># of Plaffs</label><br>
    							<input id="fPfaffNum" name="fPfaffNum" size="25" type="text"><br>
    							<label for="perBlorgFeeED">Per Blorg Fee</label><br>
    							<input disabled id="perBlorgFeeED" name="perBlorgFeeED" size="25" type="text"><br>
    							<label for="annualFeeED">Annual Support Fee</label><br>
    							<input disabled id="annualFeeED" name="annualFeeED" size="25" type="text"><br>
    							<label for="districtTotal">Total</label><br>
    							<input disabled id="districtTotal" name="districtTotal" size="25" type="text">
    						</fieldset>
    					</div>
    					<div class="fieldset">
    						<fieldset>
    							<legend><span>Or This Content, Or Both</span></legend>
    							<label for="fBlorgNumTI"># of Blorgs</label><br>
    							<input id="fBlorgNumTI" name="fBlorgNumTI" size="25" type="text"><br>
    							<label for="fPfaffNumTI"># of Plaffs</label><br>
    							<input id="fPfaffNumTI" name="fPfaffNumTI" size="25" type="text"><br>
    							<label for="perBlorgFeeTI">Per Blorg Fee</label><br>
    							<input disabled id="perBlorgFeeTI" name="perBlorgFeeTI" size="25" type="text"><br>
    							<label for="annualFeeTI">Annual Support Fee</label><br>
    							<input disabled id="annualFeeTI" name="annualFeeTI" size="25" type="text"><br>
    							<label for="teacherTotal">Total</label><br>
    							<input disabled id="teacherTotal" name="teacherTotal" size="25" type="text">
    						</fieldset>
    					</div>
    					<div id="contact-info">
    						<p class="title">This Content Needs To Be Centered In Its DIV</p>
    						<p>And if there's only one box on the left, it needs to be even with this box.</p>
    					</div>
    					<div class="controls">
    						<input class="submit" type="submit" value="Create">
    					</div>
    				</form>
    			</div>
    		</div>
    		<!-- if you want a non-menu sidebar, it would go here -->
    		<div id="footer">
    			<em>Copyright &copy; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
    		</div>
    	</body>
    </html>

    I don't quite understand what you mean by the display conditions. What do you mean by having parts of the form visible or hidden? Will this form be powered by a back-end script? (If so, it might be a good idea to feed a class to the "fieldset" classes just to target different CSS to them depending on which HTML is generated.) Oh, also note that this has been placed inside a "sample" Web page just to show your friends how it can sit inside a site template as well (yes, I'm giving you some ammunition).

    If you want to know why I used a DIV with a fieldset class and a span inside the legend, read The Legends of Style by John "Tyssen" Faulds.

    If you can clarify what you mean by the content's display, I'll be better able to get you the stylesheet for this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •