SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Overunner's Avatar
    Join Date
    Mar 2004
    Location
    Sweden
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning Trouble

    Hello all CSS gurus

    I have a positioning problem which needs to be solved. 1.gif shows the current state of the page. As you can see, it's messy. 2.gif is how I want the page to look like (mostly, but you get the idea).

    Here is the relevant CSS-code for the page:
    Code:
    body {
      margin: 20px;
      padding: 0;
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 11px;
      text-align: center;
    }
    
    /* Header */
    
    h1 {
      margin: 0 10px 15px 10px;
      padding: 0;
      font-size: 22px;
    }
    
    h2 {
      margin: 10px 10px 5px 10px;
      padding: 0;
      font-size: 14px;
      text-align: left;
    }
    
    /* Text */
    
    p {
      margin: 0 10px 15px 10px;
      padding: 0;
      line-height: 1.3em;
      text-align: left;
    }
    
    input {
      border: 1px solid black;
      background-color: #FFFFFF;
      font-size: 12px;
    }
    
    select {
      border: 1px solid black;
      font-size: 12px;
    }
    
    label {
      font-weight: bold;
      padding-bottom: 1000px;
    }
    
    /* IDs */
    
    #container {
      margin: 0 auto 0 auto;
      width: 602px;
      border: 1px solid #000000;
      background-color: #EFEFEF;
      padding: 10px 0 0 0;
    }
    
    #progress {
      margin: 2px auto 2px auto;
      padding: 0;
      background-color: #DEE8F7;
      border-top: 1px solid #000000;
      border-bottom: 1px solid #000000;
    }
    
    #progress ul {
      margin: 5px 0 5px 0;
      padding: 0;
      list-style: none;
      text-align: center;
    }
    
    #progress ul li {
      display: inline;
      padding: 0 0 0 23px;
    }
    
    #progress ul li#first {
      padding: 0;
    }
    
    #form {
      margin: 10px;
      padding: 0;
      float: left;
      text-align: left;
    }
    
    #form #topic {
      width: 160px;
      height: auto;
      float: left;
    }
    
    #form #field {
      display: inline;
    }
    
    #buttonHolderRight {
      margin: 10px;
      padding: 0;
      float: right;
    }
    
    #buttonHolderLeft {
      margin: 10px;
      padding: 0;
      float: left;
    }
    
    #copyright {
      clear: both;
      border-top: 1px solid #000000;
      background-color: #DEE8F7;
      padding: 5px;
    }
    
    #copyright p {
      margin: 0 0 0 0;
      text-align: right;
      height: 15px;
    }
    And the page itself:
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <LINK href="Style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
      <div id="container">
        <h1>Bla Bla Bla</h1>
          <div id="progress">
            <ul>
              <li id="first">Welcome</li>
              <li><b>Database Setup</b></li>
              <li>Installation</li>
              <li>Configuration</li>
            </ul>
          </div>
    
      <div>
        <h2>Database Setup</h2>
          <p>Please fill out the form below in order to proceed with the
             installation.</p>
    
          <div id="form">
            <div id="topic">
              <label>Database:</label><br />
              <label>Database Name:</label><br />
              <label>Username:</label><br />
              <label>Password:</label><br />
            </div>
            <div id="field">
              <select name="database">
                <option value="-" selected>-- Select --</option>
                <option value="MySQL">MySQL</option>
              </select><br />
              <input type="textfield" name="dbname"><br />
              <input type="textfield" name="dbuser"><br />
              <input type="password" name="dbpass"><br />
            </div>
          </div>
    
          <div id="buttonHolderLeft">
            <input type="button" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'] . '?' . 'page=1';?>'" value="Back">
          </div>
          <div id="buttonHolderRight">
            <input type="button" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'] . '?' . 'page=3';?>'" value="Next">
          </div>
      </div>
    
        <div id="copyright">
          <p>Copyright  2004 Ownage Associations</p>
          <p>All rights reserved. Terms, Conditions and privacy information.</p>
        </div>
      </div>
    </body>
    </html>
    I've tried almost everything, but I dunno what I do wrong. A little help would be appreciated
    Attached Images Attached Images
    • File Type: gif 1.gif (14.1 KB, 12 views)
    • File Type: gif 2.gif (14.1 KB, 9 views)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    This looks a little better in ie6 and firefox.
    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    margin: 20px;
    padding: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    }
    /* Header */
    h1 {
    margin: 0 10px 15px 10px;
    padding: 0;
    font-size: 22px;
    }
    h2 {
    margin: 10px 10px 5px 10px;
    padding: 0;
    font-size: 14px;
    text-align: left;
    }
    /* Text */
    p {
    margin: 0 10px 15px 10px;
    padding: 0;
    line-height: 1.3em;
    text-align: left;
    }
    input {
    border: 1px solid black;
    background-color: #FFFFFF;
    font-size: 12px;
    }
    select {
    border: 1px solid black;
    font-size: 12px;
    }
    label {
    font-weight: bold;
    }
    /* IDs */
    #container {
    margin: 0 auto 0 auto;
    width: 602px;
    border: 1px solid #000000;
    background-color: #EFEFEF;
    padding: 10px 0 0 0;
    }
    #progress {
    margin: 2px auto 2px auto;
    padding: 0;
    background-color: #DEE8F7;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    }
    #progress ul {
    margin: 5px 0 5px 0;
    padding: 0;
    list-style: none;
    text-align: center;
    }
    #progress ul li {
    display: inline;
    padding: 0 0 0 23px;
    }
    #progress ul li#first {
    padding: 0;
    }
    #form {
    margin:10px 0 10px 10px;
    padding: 0;
    text-align: left;
    width:290px;
    }
    #form label {
    width: 160px;
    height: 22px;
    float: left;
    }
    #form input ,#form select {
    float: right;
    }
    #buttonHolderRight {
    margin: 10px;
    padding: 0 5px;
    float: right;
    }
    #buttonHolderLeft {
    margin: 10px;
    padding: 0 5px;
    float: left;
    }
    #copyright {
    clear: both;
    border-top: 1px solid #000000;
    background-color: #DEE8F7;
    padding: 5px;
    }
    #copyright p {
    margin: 0 0 0 0;
    text-align: right;
    height: 15px;
    }
    .clear {clear:both}
    .clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    #dbase {text-align:left}
    </style>
    </head>
    <body>
    <div id="container"> 
    <h1>Bla Bla Bla</h1>
    <div id="progress"> 
    <ul>
    <li id="first">Welcome</li>
    <li><b>Database Setup</b></li>
    <li>Installation</li>
    <li>Configuration</li>
    </ul>
    </div>
    <div id="dbase"> 
    <h2>Database Setup</h2>
    <p>Please fill out the form below in order to proceed with the installation.</p>
    <div id="form"> 
    <label>Database:</label>
    <select name="database">
    <option value="-" selected="selected">-- Select --</option>
    <option value="MySQL" >MySQL</option>
    </select>
    <div class="clearer"></div>
    <label>Database Name:</label>
    <input type="text" name="dbname" />
    <div class="clearer"></div>
    <label>Username:</label>
    <input type="text" name="dbuser" />
    <div class="clearer"></div>
    <label>Password:</label>
    <input name="dbpass" type="password" value="" />
    <div class="clearer"></div>
    </div>
    <div class="clear"> 
    <input id="buttonHolderLeft" type="button" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'] . '?' . 'page=1';?>'" value="Back" />
    <input id="buttonHolderRight" type="button" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'] . '?' . 'page=3';?>'" value="Next" />
    </div>
    </div>
    <div id="copyright"> 
    <p>Copyright  2004 Ownage Associations</p>
    <p>All rights reserved. Terms, Conditions and privacy information.</p>
    </div>
    </div>
    </body>
    </html>
    Opera misplaces the select button a bit so you may have to hack it if you want it perfect.

    Hope it helps anyway.

    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
  •