Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertically align label for a message box....

    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
    Code:
    <!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
    Code:
    * {
     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;
    }
    Attached Thumbnails Attached Thumbnails Vertically align label for a message box....-whatihave.jpg   Vertically align label for a message box....-whatineed.jpg  

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option:
    Code:
    <!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.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    I'd do it like
    Code:
    fieldset ul, fieldset ul li{
    list-style:none;
    }
    fieldset{
    text-align:center;
    }
    label{
    vertical-align:top;
    }
    Code:
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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