...

View Full Version : Vertically align label for a message box....



Samuel235
04-18-2011, 08:53 PM
Hey guys, as you can see from the images attached (what i have and what i need) you can get the idea of what the problem is.

I need the label for the message box to be inline at the top and not the bottom....

I'll post all the page of html and css for you too look at, im sure you will only need the css for the div of that area.... Thanks in advance, sam.



HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Portraits - BigLampPhotography.co.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Big Lamp Photography" />
<meta name="keywords" content="Big Lamp Photography" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="2 days" />

<!-- LOAD MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="Navcontainer">
<div id="Nav">
<ul>
<li><a href="index.html"><img src="images/navhome.png" alt=""/></a></li>
<li><a href="portraits.html"><img src="images/navportraits.png" alt=""/></a></li>
<li><a href="gallery.html"><img src="images/navgallery.png" alt=""/></a></li>
<li><a href="crazy.html"><img src="images/navcrazy.png" alt=""/></a></li>
<li><a href="#"><img src="images/navcontactus.png" alt=""/></a></li>
<li><a href="sales.html"><img src="images/navsales.png" alt=""/></a></li>
</ul>
</div><!-- end of #Nav -->
</div><!-- end of #Navcontainer -->
<div class="spacer15"></div><!-- 15px Spacer -->
<div id="Pagetitle">
<img src="images/pagetitlecontact.png" alt=""/>
</div><!-- end of #Pagetitle -->
<div class="spacer15"></div><!-- 15px Spacer -->
<div id="Pagecontainer">
<div id="Page">
<div id="Contactform">
<form method="post" action="contact.php"> Email: <input name="email" type="text"><br> Message: <textarea name="message" rows="1" cols="40"></textarea><br> <input type="submit"> </form>
</div>
</div><!-- end of #Page -->
</div><!-- end of #Pagecontainer -->
</body>

</html>



CSS

* {
margin:0;
padding:0;
}

img {
border:none;
}

body {
}

ul{
list-style-type:none;
font-size: 0px;
}

/***** GOOGLE *****/

#Google {
Display:none;
}

/***** NAVBAR STYLES *****/

#Navcontainer{
background-image: url("images/navbg.png");
background-repeat: repeat-x;
height: 69px;
text-align:center;
vertical-align: middle;
overflow:auto
}

#Nav {
width: 902px;
margin: 27px auto 0;
text-align: center;
}

#Nav ul {
list-style-type: none;
}

#Nav li {
display:inline;
margin-right: 40px;
}


/***** CONTENT STYLES *****/

#Pagecontainer {
text-align:center;

}

#Page{
background-color:#000980;
width: 902px;
margin: 0 auto;
}

#Page img {
border: 1px solid white;
}

#Pagetitle {
text-align: center;
}

#Bottomborder {
margin-top: 30px;
border-bottom: 2px solid #000980;
}

#Contactform {
width:500px;
border: 1px solid red;
margin: 0 auto;
vertical-align: top;
}

.Hometext {
color: #000980;
width: 888px;
margin: 6px auto 0;
text-align: center;
padding-top: 30px;
background-color: white;
font-size: 18pt;
font-family: candara;
}

.spacer15 {
height: 15px;
}

.spacer60 {
height: 60px;
}

.Imagecontainerone {
padding: 6px 0 0 0;
}

.Imagecontainerone .Leftlist {
Width: 442px;
float: left;
margin: 0 3px 0 6px;
}

.Imagecontainerone .Leftlist li{
margin: 0 0 6px 0;
}

.Imagecontainerone .Rightlist {
Width: 442px;
float: right;
margin: 0 6px 0 3px;
}

.Imagecontainertwo {
margin: 6px 0 0 0;
}

.Imagecontainertwo .Leftlist {
Width: 442px;
float: left;
margin: 0 3px 0 6px;
}

.Imagecontainertwo .Rightlist {
Width: 442px;
float: right;
margin: 0 6px 0 3px;
}

.Imagecontainertwo .Rightlist li{
margin: 0 0 6px 0;
}

.Landscapeimage {
margin: 0 6px 0 6px;
}

.Clear {
clear:both;
}

/***** FADESLIDESHOW STYLES *****/

.spacer7 {
height: 7px;
}

#fadeshow1 {
width: 888px;
height:305px;
text-align: center;
margin: 0 auto;
}

#fadeshowbg {
background-color:#000980;
width: 903px;
min-height: 319px;
margin: 20px auto 0;
}

bullant
04-19-2011, 03:16 AM
One option:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Portraits - BigLampPhotography.co.uk</title>
<style type="text/css">
#txtAreaCont {
position: relative;
height: 100px;
width: 450px;
}
#txtAreaCont span {
position: absolute;
top: 0px;
left: 0px;
}
#txtAreaCont textarea {
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="Contactform">
<form method="post" action="contact.php">
<div>Email: <input name="email" type="text" /></div>
<div id="txtAreaCont"><span>Message:</span> <textarea name="message" rows="5" cols="40"></textarea></div>
<input type="submit" />
</form>
</div>
</body>
</html>Also a couple of minor points.

1) You specify a xhtml doctype so your input and br tags have to end with /> for them to be valid xhtml.

2) You are using empty divs with heights set for them in the css as spacers. Imo these divs are unnecessary and perhaps consider using margin or padding to create space around elements.

abduraooft
04-19-2011, 10:43 AM
I'd do it like

fieldset ul, fieldset ul li{
list-style:none;
}
fieldset{
text-align:center;
}
label{
vertical-align:top;
}

<form method="post" action="contact.php">
<fieldset>
<legend>Contact us</legend>
<ul>
<li><label for="email">Email:</label> <input name="email" id="email" type="text"></li>
<li><label for="message">Message:<label> <textarea name="message" id="message" rows="1" cols="40"></textarea>
</li>
<li><input type="submit"> </li>
</ul>
</fieldset>
</form>
, to make the form accessible (http://www.alistapart.com/articles/prettyaccessibleforms).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum