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 2 of 2
  1. #1
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Hello all,

    This is another question pertaining to my website- the World Review Group.

    The side windows I have brilliantly made into 3 slices and pieced together with CSS (stupid) is now displaying the end hanging off to the right side as I am putting in extra markup with the 2nd form for collecting e-mail addresses. When I am finding the right positioning for this 2nd form when it will be displayed in the center after the user originally enters their e-mail, the right window's end is chopped off the side. I tried the width of the container div, but that didn't seem to help. Maybe it has to do with the #rightside div. I also tried re-arranging the markup, but even if the form is outside the main container div, I'm still not getting that #rightsideend div back into its rightful spot.

    Here is a screenshot of what I'm seeing.

    I'll highlight the areas of code which may be causing the issue.

    The current markup:
    HTML Code:
     <div id="leftside">
        <div id="leftsideend">&nbsp;</div>
        <div id="leftsidebody">
          <h2 class="sideWindowHeaderText">Most Popular</h2>
          <ul class="sideWindowLinks">
            <li><a href="food/peapod1.html">Peapod</a></li>
            <li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
            <li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
          </ul>
        </div>
        <div id="leftsidestart">&nbsp;</div>
      </div><!-- end leftside div -->
      <div id="rightside"><!-- begin rightside div -->
        <div id="rightsidestart">&nbsp;</div>
        <div id="rightsidebody">
          <h2 class="sideWindowHeaderText">Not Recommended</h2>
          <ul class="sideWindowLinks">
            <li><a href="#">Anthony Morrison&apos;s Big Profits Secret</a></li>
            <li><a href="#">Mobile Mass Media</a></li>
            <li><a href="#">Prorexin</a></li>
          </ul>
          <form id="emailbox" name="form1" method="post" action="?">
            <div>
              <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)" maxlength="60"/>
              <input type="submit" value="Join" onclick="seeWhatHappened()" />
            </div>
          </form>
          [B]<div id="rightsideend">&nbsp;</div>[/B]
          </div><!-- end side windows -->
    </div><!-- end container -->
    <div id="confirmform">
                <form name="form2" id="submissionform" method="post" action="?">
                <label for="confirmemail">Confirm your e-mail:<span>*</span></label>          
                <input type="text" name="confirmemail" class="fixedwidth" value="" maxlength="60"/><br />
                <label for="name">Enter your name:<span>*</span></label>
                <input type="text" name="name" class="fixedwidth" value="" maxlength="60" /><br />
                <label for="age">Select your age range:</label>
                <select name="age" class="fixedwidth">
                   <option selected="selected">18&ndash;35</option>
                   <option>36&ndash;55</option>
                   <option>55+</option>
                   <option>17 or younger</option>
                </select><br />
                <label for="country">Select your country:<span>*</span></label>
                <select name="country" class="fixedwidth">
                    <option selected="selected">Select</option>
                    <option>United States</option>
                    <option>United Kingdom</option>
                    <option>Canada</option>
                    <option>Australia</option>
                    <option>Russia</option>
                    <option>Brazil</option>
                    <option>Somewhere else</option>
                </select><br />
                <input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkEmail()"/>
                <input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
                </form>
          </div>
          <div id="successorfailure">
          
          </div>
    Current styles:
    Code:
    @charset "utf-8";
    /* Home Page CSS Document */
    body{
        background:url(bg2.jpg);
        background-position:top center;
        background-color:#999;
        margin:0 auto;
        overflow:hidden;
        font-family:Times "Times New Roman", Times, serif;
    }
    
    #container{
        height:1000px;
        width:1360px;
        overflow:visible;
        margin:0 auto;
        position:relative;
        z-index:7;
        background:url("homepagebgwinter.gif") repeat scroll 0% 200px transparent;
    }
    
    #leftside{
        position:absolute;
        top:405px;
        left:98px;
        width:auto;
    }
        #leftsidestart{
            float:left;
            background:url("sidewindowstart.gif");
            width:27px;
            height:250px;
            margin:0;
        }
        #leftsidebody{
            margin:0 auto;
            float:left;
            background:url("sidewindowbody.gif") repeat-x;
            width:240px;
            height:250px;
        }
        #leftsideend{
            float:left;
            background:url("sidewindowend.gif");
            width:16px;
            height:250px;
            margin:0;
        }
        
    #middle{
        width:626px;
        margin:0 auto;
    }
    #rightside{
        width:auto;
        position:absolute;
        top:405px;
        left:980px;
    }
        #rightsidestart{
            background:url("sidewindowstartright.gif");
            float:left;
            width:27px;
            height:250px;
        }
        #rightsidebody{
            background:url("sidewindowbodyright.gif") repeat-x;
            float:left;
            margin:0 auto;
            width:247px;
            height:250px;
            position:relative;
        }
        #rightsideend{
            background:url("sidewindowendright.gif");
            float:right;
            width:15px;
            height:250px;
        }
    
    h1{
        height:206px;
        width:626px;
        position:relative;
        padding:0;
        margin:0;
        text-align:center;
    }
    /* mac hide */
    h1{overflow:hidden;}
    /* end hide */
    h1 span{
        background:url("header.jpg");
        position:absolute;
        left:0;
        top:0;
        display:block;
        height:206px;
        width:626px;
    }
    
    #body{
        background-image:url(body.jpg);
        width:626px;
        text-align: center;
        margin:0 auto;
    }
    
    #footer{
        background-image:url(footer.jpg);
        width:626px;
        height:30px;
        text-align: center;
        margin:0 auto;
        padding:0;
    }
    
    #welcomestatement{
        display:block;
        background-color:#FF9;
        text-align:left;
        padding:3px 20px;
        border-bottom:2px inset #F8CB87;
        margin:auto;
        width:400px;
        position:relative;
        top:10px;
        /*for IE*/
        filter:alpha(opacity=50);
        /*standard CSS3*/
        opacity:0.5;
    }
    p#welcomestatement{
        /*for IE*/
        filter:alpha(opacity=100);
        /*standard CSS3*/
        opacity:1;
        font-weight:bold;
    }
    
    .sideWindowHeaderText{
        font-size:18px;
        color:#000;
        font-weight:bold;
        width:200px;
        padding:1px 0 0 5px;
        /*text shadow*/
        text-shadow:0px 0px 6px #009, 2px 0px 12px #066;
    }
    
    #copytagatbottom{
        font-size:12px;
        text-align:center;
        color:#000;
        display:block;
        background-color:#FFF;
        width:200px;
        margin:0 auto;
        padding:2px;
        padding-bottom:4px;
        border:1px dashed #6B6B6B;
    }
    
    #emailbox{
        background:url("emailbox.gif") no-repeat scroll 50% 0 transparent;
        height:200px;
        width:156px;
        margin:0 0 0 8px;
        position:absolute;
        top:96%;
    }
    #go{width:80px; margin-top:165px; margin-left:12px;}
    
    #confirmform{
        background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
        width:360px;
        height:200px;
        position:absolute;
        right:492px;
        top:520px;
    }
    #submissionform{
        padding:60px 10px 0 10px;
        text-align:left;
        z-index:999;
    }
    .fixedwidth{width:150px; float:right;}
    #submissionform span{color:red;}
    
    .formsubmitbutton{margin-left:50px; margin-top:10px;}
    
    .sideWindowLinks li{
        list-style:disc;
        padding:3px 3px 3px 0;
        width:auto;
    }
    .sideWindowLinks li a{
        font-size:14px;
        font-weight:bold;
        color:#069;
    }
    .sideWindowLinks a:hover, .sideWindowLinks a:focus, .sideWindowLinks a:active{color:#09C; text-decoration:none;}
    
    body{
        overflow:auto;
    }

  2.  

  3. #2
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Well, I figured it out. There were a few divs out of place, that's all.

    There was also a font-family declaration which had 'Times "Times New Roman"' in there. Weird typo.

    The bottom also contained
    Code:
    body{
    overflow:auto;
    }
    That's a little strange. I removed it.


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 10:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com