Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member whippetkid's Avatar
    Join Date
    May 2010
    Location
    Scotland
    Posts
    123
    Member #
    22044
    Hi,

    having very little CSS experience I am having problems placing a div with transparency to containing the links I have created. I would prefer it to sit exactly on the page where I want it to be however I am currently having to place it way off to the left to align it where I want. I am aware this will probably have something to do with clear/float but I am unsure how to achieve this using those techniques, or as it is working on other pages I have created although not perfectly there may be some conflict in the CSS I can't locate. The only page it won't align on is where it has a form.

    I have attached a copy of the HTML, CSS and a screenshot.

    Many thanks


    ***ALIGN***

    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>
    <STYLE TYPE="text/css">
    </STYLE>
    </HEAD>
    <meta http-equiv="Content-Type" content="" />
    <title> Wow - Women of Worth</title>
    
    <link rel="stylesheet" type="text/css" href="../CSS/main.css"/>
    
    <head>
    </head>
    
    <div id="wrapper">
    
          <div id="header"><img src="../_Layout &amp; Images/Wow_contact.gif" width="740" height="591" /></div>
          </div id="wrapper">
    <div id="transparency"><ul>
    <ui><a href="aboutus.html">About us</a></ui>
    <ui><a href="signup.html">Sign up</a></ui>
    <ui><a href="contactus.html">Contact us</a></ui>
    </ul></div>
    </body>
    </html>

    ***NO ALIGN***

    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>
    <STYLE TYPE="text/css">
    </STYLE>
    </HEAD>
    <meta http-equiv="Content-Type" content="" />
    <title> Wow - Women of Worth</title>
    
    <link rel="stylesheet" type="text/css" href="../CSS/main.css"/>
    
    <head>
    </head>
    <STYLE TYPE="text/css">
    
    body {
        background-color:#FFF;
    }
    fieldset {
        border:1px dashed #CCC;
        padding:10px;
    }
    legend {
        font-family:Georgia, Verdana, sans-serif;
        font-size: 18;
        font-weight: bold;
        color: #5A205B;
    }
    label {
        width:150px;
        height:32px;
        margin-top:3px;
        margin-right:25px;
        padding-left: 25px;
        float:left;
        display: block;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 14;
        font-weight: normal;
        line-height: 1.1;
        color:#666;
    }
     
    </STYLE>
    
    <div id="wrapper">
    
          <div id="header"><img src="../_Layout &amp; Images/signup.gif" width="740" height="591" /></div>
          <div id="form"><form action="PHP/register_process.php" method="post" enctype="multipart/form-data" name="form" id="form">
    
        </style>
       
    </head>
    
    <body class="css">
       
      <form action="PHP/register_process.php" method="post" enctype="multipart/form-data" name="form" id="form">
    
        <fieldset>
          <legend>Personal Information</legend>
          <p>
            <label for="first_name">First Name:</label>
            <input type="text" name="first_name" id="first_name" tabindex="10" />
          </p>
          <p>
          </p>
            <label for="last_name">Last Name:</label>
            <input type="text" name="last_name" id="last_name" tabindex="20" />
          </p>
          <p>
          </p>
            <label for="wow_name">Wow Screename:</label>
            <input type="text" name="wow_name" id="wow_name" tabindex="30" />
          </p>
          <p>
          </p>
            <label for="email">E-mail:</label>
            <input type="text" name="email" id="email" tabindex="40" />
          </p>
          <p>
          </p>
            <label for="address">Address:</label>
            <input type="text" name="address" id="address" tabindex="50" />
          </p>
          <p>
          </p>
        </fieldset>
        <fieldset>
          <legend>About You</legend>
          <p>
            <label for="skills">Skills/Experience:</label>
            <div class="text_area">
            <textarea name="skills" id="skills" cols="70" rows="5" tabindex="60"></textarea>
          </p>
          <p>
          </p>
            <label for="interests">Interests:</label>
            <textarea name="interests" id="interests" cols="70" rows="5" tabindex="70"></textarea>
          </p>
          <p>
          </p>
            <label for="languages">Languages (spoken/Written):</label>
            <textarea name="languages" id="languages" cols="70" rows="5" tabindex="80"></textarea>
          </p>
          <p>
          </p>
            <label for="extra_things">Casual jobs you are willing to do (not requiring a qualification): </label>
            <textarea name="extra_things" id="extra_things" cols="70" rows="5" tabindex="90"></textarea>
          </p>
          <p>
          </p>
        </fieldset>
        <fieldset>
          <legend>Login Information</legend>
          <p>
            <label for="password">Password</label>
            <input type="password" name="password" id="password" tabindex="100" />
          </p>
          <p>
          </p>
            <label for="confirm_password">Confirm Password</label>
            <input type="password" name="confirm_password" id="confirm_password" tabindex="110" />
          </p>
          <p>
          </p>
        </fieldset>
        <fieldset>
          <legend>Invite a Friend</legend>
          <p>
            <label for="invite_a_friend">Friend/Colleagues e-mail</label>
            <input type="text" name="invite_a_friend" id="invite_a_friend" tabindex="120" />
         </p>
          <p>
          </p>
          </fieldset>
        <fieldset>
          <legend>Join Wow</legend>
          <p>
              <input type="submit" name="submit" id="submit" value="Join the Wow community" tabindex="1<h3></h3>0" />
              </p>
               <p>
               </p>
        </fieldset>
    </form>
    
    </div>
    </div id="wrapper">
    
    <div id="transparency"><ul>
    <ui><a href="aboutus.html">About us</a></ui>
    <ui><a href="signup.html">Sign up</a></ui>
    <ui><a href="contactus.html">Contact us</a></ui>
    <script language="javascript" type="text/JavaScript"">
    
    document.onkeypress = keyPress;
    var count = 1;
    function keyPress() {
    if (window.event.keyCode == 13)
    {
        event.returnValue=false;
        event.cancel = true;
    }
    }
    </script>
    </ul>
    </div></body>
    </html>


    ***CSS***


    Code:
    <style>
    
    li
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    ui
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width: px;
    font: Georgia, Verdana, sans-serif;
    font-size: 14px;
    color:#5A205A;
    background-color: none;
    text-align:center;
    padding: 20px;
    text-decoration:none;
    }
    a:hover,a:active
    {
    display:block;
    width: px;
    font:: Georgia, Verdana, sans-serif;
    font-size: 14px;
    color:#878787;
    background-color: none;
    text-align:center;
    padding: 20px;
    text-decoration:none;
    }
    
    body
    {
        colour: #EAE8F5;
        margin: 0 auto;
        padding: 0;
    
    }
    #shadow {
        background-color: #fff;
        width: 940px;
        margin-right: auto;
        margin-left: auto;
    
    }
    #wrapper {
        background-color: #fff;
        width: 850px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        text-align: left;
        position: relative;
        margin-left: auto;
    }
    #header {
        width: 850px;
        background-color: #fff;
        position: relative;
        margin-top: 150px;
        text-align: center;
    }
    #transparency {
        background-color: rgba(100,149,237, 0.0);
        width: 350px;
        height: 100;
        position: absolute;
        font-size: xx-large;
        text-align: right;
        top: 160px;
        left: 435px;
        color: #EAE8F5;
    }
    #maincontent {
        height: 300px;
        width: 850px;
        background-color: #EAE8F5;
        floadt: left;
        padding-top: 10px;
        font-size: xx-large;
    }
    
    </style>#footer {
        height: 200px;
        background-color: #F00;
    }
    #form {
        height: 600px;
        width: 850px;
    }
    Attached Images Attached Images

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    1. </div id="wrapper"> <--- take the slash out of here.
    2. In your CSS, you don't need the style tags at all.
    3. Your <ui> elements should be <li> elements.

    Fix those three things and see where you're at.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member whippetkid's Avatar
    Join Date
    May 2010
    Location
    Scotland
    Posts
    123
    Member #
    22044
    Thanks for your input, it's working now after a combination of help!

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    No probs. I figured those weren't the only issues, but I would have wanted to see what had happened after you solved them.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:06 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com