SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can I make it look better? Alignement advice needed.

    Hi

    I have a few problems getting the above text aligned.

    I'm sorry I had to post the whole code as I couldn't spot where the problem was coming from....

    Here is the code:
    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></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* *************** html and body *************** */
    
    html, body {
     margin: 0;
     padding: 0;
     }
    
    body { 
     background: #fff;
     color: #000; 
     margin: 10px;
     line-height: 17px; 
     font-size: 11px; 
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align: center;/* center for ie5*/
     }
     
    
    /* *************** layout *************** */ 
    
    #container {
     background: #fff;
     position: relative;
     /*margin: 0px auto;*/
     padding: 1%;
     width: 96%;
     border: 2px dashed #e0e0e0;
     text-align:left; /*re-set text*/
    }
    
    * html #container {width: 96%;}
    
    
    #pageHeader {
    min-height:30px;/* all compliant browsers (not ie - ie just ignores it)*/
    height:auto;/*all compliant browsers (inc IE) */
    margin: 0px;
    border-bottom: 2px solid #e0e0e0;
    padding-top:15px;
    }
    
    * html #pageHeader {height:30px}/* only ie gets this and it overrides the height:auto and so must follow that style in the css and not be placed before it */
    
    #hozSeparation {
     background: #e0e0e0;
    } 
    
    #mainContent {
     height: 400px;
     min-height:400px;
     border: none;
    } 
    
    body>#container #mainContent {height:auto}
    #leftCol {
     height: 400px;
     min-height:400px;
     border-right: 20px solid #e0e0e0;
     float:left;
     width:140px;
     margin-right:-2px;
    }
    
    body>#container #mainContent {height:auto}
    #content {
     height: 400px;
     min-height:400px;
     margin-left:2px;
    }
    
    
    body>#container {height:auto}
    #footer {
     height: 30px;
     background: #fff;
     border-top: 2px solid #e0e0e0;
    }
    
    
    
    /* *************** paragraphs *************** */ 
     
     
    p {
     margin: 4px;
    }
    
    .pBold {
     font-weight: bold;
    }
    
    /* *************** links *************** */ 
    
    
    a:link {color: #3e5c92; text-decoration: underline}
    a:visited {color: #3e5c92; text-decoration: underline}
    a:hover {color: #b7b7b7; text-decoration: underline}
    a:active {color: #b7b7b7; text-decoration: underline}
    
    
    /* *************** text size *************** */ 
    
    
    h6 {
     font-size: 90%;
     font-weight: bold;
     color: #3e5c92;
     border-bottom: 2px dashed #b7b7b7;
     width: 140px;
     margin-left:5px;
     padding:left:5px;
    }
    
    
    /* *************** forms *************** */ 
    
    
    form p {
    width: 298px;
    clear: both;
    }
    
    form p label {
    display: inline;
    float: left;
    width: 100px;
    text-align: left;
    margin: 0 10px 0 0;
    padding: 0;
    }
    
    form p input, form p textarea, form p select {
    margin: 0;
    }
    
    /* *************** misc *************** */ 
    
    .alignRight {
    text-align: left;
    }
    
    .alignRightFloating {
    float: left;
    text-align: left;
    }
    </style>
    </head>
    <body>
    
    
    
    <h6>Details: </h6> 
    <div>
    
    <div class="alignRightFloating">
    
    <p>
    Last Name: 
    </p>
    
    <p>
    First Name: 
    </p>
    
    <p>
    Society: 
    </p>
    
    <p>
    Function: 
    </p>
    
    <p>
    Address: 
    </p>
    
    <p>
    Postal Code: 
    </p>
    
    <p>
    City: 
    </p>
    
    <p>
    Email: 
    </p>
    
    <p>
    Phone: 
    </p>
    
    <p>
    Fax: 
    </p>
    
    <p>
    Date of submission: 
    </p>
    
    </div>
    				
    				
    <div class="alignRight">
    
    <p>
    sdf</p>
    
    <p>
    sdf</p>
    
    <p>
    sdf</p>
    
    <p>
    sdf</p>
    
    <p>
    sdf</p>
    
    <p>
    sdf</p>
    
    <p>
    sdfsdf</p>
    
    <p>
    sdf</p>
    
    <p>
    sdf</p>
    
    <p>
    <em>none</em></p>
    
    <p>
    1st January 1970</p>
    
    </div>
    
    </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Alex,

    I think its just the default margin on the p tag.

    Try this:
    Code:
    p {margin-top:0}
    Paul

  3. #3
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    thank you very much it worked like a charm!

    Now I am trying to add a form to it. My problem is that I have defined a fixed width to all the forms of my page. By loading the page you will obviously notice what is the problem...
    How could I handle this? Can define specific values for specific forms in my CSS stylesheet?
    Thanks in advance for your help

    relevant part of the CSS stylesheet is the 'form' part.

    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></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* *************** html and body *************** */
    
    html, body {
     margin: 0;
     padding: 0;
     }
    
    body { 
     background: #fff;
     color: #000; 
     margin: 10px;
     line-height: 17px; 
     font-size: 11px; 
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align: center;/* center for ie5*/
     }
     
    
    /* *************** layout *************** */ 
    
    #container {
     background: #fff;
     position: relative;
     /*margin: 0px auto;*/
     padding: 1%;
     width: 96%;
     border: 2px dashed #e0e0e0;
     text-align:left; /*re-set text*/
    }
    
    * html #container {width: 96%;}
    
    
    #pageHeader {
    min-height:30px;/* all compliant browsers (not ie - ie just ignores it)*/
    height:auto;/*all compliant browsers (inc IE) */
    margin: 0px;
    border-bottom: 2px solid #e0e0e0;
    padding-top:15px;
    }
    
    * html #pageHeader {height:30px}/* only ie gets this and it overrides the height:auto and so must follow that style in the css and not be placed before it */
    
    #hozSeparation {
     background: #e0e0e0;
    } 
    
    #mainContent {
     height: 400px;
     min-height:400px;
     border: none;
    } 
    
    body>#container #mainContent {height:auto}
    #leftCol {
     height: 400px;
     min-height:400px;
     border-right: 20px solid #e0e0e0;
     float:left;
     width:140px;
     margin-right:-2px;
    }
    
    body>#container #mainContent {height:auto}
    #content {
     height: 400px;
     min-height:400px;
     margin-left:2px;
    }
    
    
    body>#container {height:auto}
    #footer {
     height: 30px;
     background: #fff;
     border-top: 2px solid #e0e0e0;
    }
    
    
    
    /* *************** paragraphs *************** */ 
     
     
    p {
    margin-top:0;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
    }
    
    .pBold {
     font-weight: bold;
    }
    
    /* *************** links *************** */ 
    
    
    a:link {color: #3e5c92; text-decoration: underline}
    a:visited {color: #3e5c92; text-decoration: underline}
    a:hover {color: #b7b7b7; text-decoration: underline}
    a:active {color: #b7b7b7; text-decoration: underline}
    
    
    /* *************** text size *************** */ 
    
    
    h6 {
     font-size: 90%;
     font-weight: bold;
     color: #3e5c92;
     border-bottom: 2px dashed #b7b7b7;
     width: 140px;
     margin-left:5px;
     padding:left:5px;
    }
    
    
    /* *************** forms *************** */ 
    
    
    form p {
    width: 298px;
    clear: both;
    }
    
    form p label {
    display: inline;
    float: left;
    width: 100px;
    text-align: left;
    margin: 0 10px 0 0;
    padding: 0;
    }
    
    form p input, form p textarea, form p select {
    margin: 0;
    }
    
    /* *************** misc *************** */ 
    
    .alignRight {
    text-align: left;
    }
    
    .alignRightFloating {
    float: left;
    text-align: left;
    }
    </style>
    </head>
    <body>
    
    
    
    <h6>Details: </h6> 
    				
    <form action="details.php" method="post">
    
    <div>
    
    <div class="alignRightFloating">
    
    <p>
    Last Name: 
    </p>
    
    <p>
    First Name: 
    </p>
    
    <p>
    Society: 
    </p>
    
    <p>
    Function: 
    </p>
    
    <p>
    Address: 
    </p>
    
    <p>
    Postal Code: 
    </p>
    
    <p>
    City: 
    </p>
    
    <p>
    Email: 
    </p>
    
    <p>
    Phone: 
    </p>
    
    <p>
    Fax: 
    </p>
    
    <p>
    Submitted the: 
    </p>
    
    </div>
    				
    
    	
    				
    <div class="alignRight">
    <input type="hidden" name="orderID" value="17" />
    <p>
    sdfsd <input type="hidden" name="lastname" value="sdfsd" />
    </p>
    
    <p>
    fsdfdsf<input type="hidden" name="firstname" value="fsdfdsf" />
    </p>
    
    <p>
    sdf<input type="hidden" name="society" value="sdf" />
    </p>
    
    <p>
    sdfsdf<input type="hidden" name="function" value="sdfsdf" />
    </p>
    
    <p>
    sdfsd<input type="hidden" name="address" value="sdfsd" />
    </p>
    
    <p>
    fsdfdsf<input type="hidden" name="postalcode" value="fsdfdsf" />
    </p>
    
    <p>
    sdf<input type="hidden" name="city" value="sdf" />
    </p>
    
    <p>
    sdfsdf<input type="hidden" name="email" value="sdfsdf" />
    </p>
    
    <p>
    sdf<input type="hidden" name="phone" value="sdf" />
    </p>
    
    <p>
    sdfsdf<input type="hidden" name="fax" value="sdfsdf" />
    </p>
    
    <p>
    25th September 2004<input type="hidden" name="postedDate" value="1096097284" />
    </p>
    
    
    
    </div>
    
    </div>
    
      <input type="submit" name="process"  value="Process"  title="Click this button to process the order" />
      <input type="submit" name="erase"  value="Erase"  title="click this button to erase the order" />
    </form>
    
    </body>
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Alex,

    I'm not quite sure what you are trying to do above

    You can assign a class or id to your form as you can with any other element so I'm not quite sure what you are asking. You don't seemed to have defined any properties for the form in the above code.

    You seemed to have taken out the float for the text on the left which is why they are lining up in one line.

    Paul


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
  •