[SOLVED] CSS Alignment Issue

butsags · October 24, 2009

Hey guys , so here's the problem,

My main content in the page shows up but then theres extraneous scrolling to the right that has no content filled with the background color.

its weird. heres a screenshot:

and heres my css:

body {
margin: 0;
padding: 0;
background: #521f07;
font-family: sans-serif;
font-size: 12px;
color: #000000;
}
.bgclouds{
    background: #521f07 url(images/clouds.png) repeat-x left top;
}
/*Background Content*/

           .top { 
              background-image: url('images/top.png'); 
              background-repeat: no-repeat; 
              background-position: top center; 
           }

           .wrapper { 
              border:0; 
		  width:1000px;
		  padding-left:185px;
		  padding-right:185px;
		  background-repeat: repeat-y; 
		  background-position:top center;
           }


           .footer{
              background-image: url('images/footer.png'); 
              background-repeat: no-repeat; 
              background-position: bottom center; 
              padding: 0px 0px 0px 0px; 
           }
/*End Background Content*/
.header { 
   position: relative; 
   padding-top: 75px; 
   left: 180px;
   
}

.header img{
   border:0;
}

a{
text-decoration: none;
color: #4486C7;
}

a:hover {
text-decoration: none;
color: #3399FF;
}

#logo_banner { 
    position: absolute; 
top: 60px; 
right: 10px; 
margin: 0px; 

}



        .topmenu {
            position: relative;
            height: 30px;
            padding: 0px;
            margin: 4px 0;
            overflow: hidden;
        }
                .topmenu li {
                    float: left;
                    list-style: none;
                }

			#border{
			    border-right: 1px solid #484848;
			}
                    .topmenu li.back {
                        background: url("images/lava.png") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .topmenu li.back .left {
                            background: url("images/lava.png") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .topmenu li a {
                        font: bold 12px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .topmenu li a:hover{
						color:#0033FF;
                        }

					.topmenu li a:active{
                           top:8px;
                        }

					.topmenu li a:focus {
                           top:8px;
                        }



#date { 
   position: absolute; 
   top: 48px; 
   margin: 0px; 
   color:#FFFFFF; 
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #FF0000;
}

h1 {
font-size: 2em;
font-family: Arial;
}

h2 {
font-size: 2.4em;
}

h3 {
font-size: 1.6em;
}

.post {
margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
height: 38px;
border-bottom: 1px solid #E2E2E2;
margin-bottom: 10px;
padding: 12px 0 0 0px;
letter-spacing: -.5px;
color: #000000;
}

.post .title a {
color: #32639A;
border: none;
}

.post .meta {
margin-bottom: 30px;
padding: 5px 0px 15px 0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

.post .meta .date {
float: left;
}

.post .meta .posted {
float: right;
}

.post .meta a {
}

.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 20px;
text-align: justify;
}

i know for a fact that its something with the .wrapper section because if i change the width of the wrapper to say 800px , most of the brown will go away but the wrapper image is 1000px wide , along with the .top and .footer images.

idk ive been trying at it for a while now

heres the makeup of the html body:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="squaredancing Square Dancing Paul Ingis PI Squared π2 - PI Squared" />
<meta name="description" content="PI Squared - Square Dance Calling. So why PI Squared? Well, my name is Paul Ingis. PI would be my initials. The squared is for..." />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>π2 - PI Squared</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return true;
                }
            });
        });
</script>
</head>
<body>
<div class="bgclouds">
  <table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
  <td>
    <div class="top">
	<div class="footer">
           <!-- header -->
           <div class="header">
             <!-- logo -->
                 <a href="index.php" name="top">
			 <img src="images/logo.png" />
                 </a>
			 <img src="images/squarelogo.png" style="padding-left:180px;" />
                     <div id="logo_banner">
				  
				 </div>
             <!-- /logo -->
             <!-- date -->
                 <p class="smallfont" id="date">
<script language="JavaScript" type="text/javascript">
var days = new Array(;
days[1] = "Sunday";
days[2] = "Monday";
days[3] = "Tuesday";
days[4] = "Wednesday";
days[5] = "Thursday";
days[6] = "Friday";
days[7] = "Saturday";
var months = new Array(13);
months[1] = "January";
months[2] = "February";
months[3] = "March";
months[4] = "April";
months[5] = "May";
months[6] = "June";
months[7] = "July";
months[8] = "August";
months[9] = "September";
months[10] = "October";
months[11] = "November";
months[12] = "December";
var dateObj = new Date(document.lastModified)
var wday = days[dateObj.getDay() + 1]
var lmonth = months[dateObj.getMonth() + 1]
var date = dateObj.getDate()
var fyear =+ dateObj.getFullYear()
document.write(wday + ", " + date + " " + lmonth + " " + fyear)
</script>
                 </p>
             <!-- /date -->

           </div>
             <!-- navigation -->
<table height="30px" border="0" width="745px" align="left" cellpadding="0" cellspacing="0" align="center" style=" padding-left:175px;">
<td>
      <ul class="topmenu" id="1">
        <li><a href="index.php" class="current"><font color="#0033FF">Home</font></a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="events.php">Events</a></li>
	<li><a href="videos.php">Videos</a></li>
	<li><a href="links.php">Links</a></li>
	<li><a href="contact.php">Contact</a></li>
      </ul>
</td>
</table>
<!-- /navigation -->

<!-- content table -->
<!-- open content container -->

<table class="wrapper" cellpadding="0" cellspacing="0" background="images/wrapper.png" >
  <tr>
     <td> 
	<div>
	<div class="post">
			<h2 class="title"><a>Square Dance Calling</a></h2>
			<p class="meta"><span class="date">October 18, 2009</span><span class="posted">Posted by <a>Paul Ingis</a></span></p>
			<div style="clear: both;"> </div>
			<div class="entry">
				<p><b><big><a>So why PI Squared?</a></big></b>  Well, my name is Paul Ingis.  <i>PI</i> would be my initials.  The "squared" is for Square Dancing.  It’s that simple.  I figured that out in third grade and have been waiting quite some time to use it.  I finally found a way to do it.</p>
				<p>Square dancing is a relatively newly discovered activity for me.  I love the way the rest of the world just melts away when I’m dancing.</p>
				<p>I took up calling because I wanted to be able to offer a class to Home Schooled families.  I’m a Home School dad myself and felt like this would be something I had to offer to the Home School Sub-culture of which I’m a part. </p>
				<p>Little did I know that I would enjoy the calling so much that I would also want to call to clubs and private parties.  Even though I’m a relatively new caller, I’ve had many opportunities to work with both experienced and inexperienced dancers.  The feedback has been very positive and encouraging, so I figure, what the heck, I’m going to keep trucking along.</p>
				<p>If you are interested in having me call a dance or party, please drop me a line either via e-mail or phone.<br>Please visit our <a href="contact.php">Contact</a> page for more information.</p>
			</div>
		</div>
        </div>
  </td>
   </tr>
</table>
<!--footer-->
       <div>
          <div style="padding-left:202.5px; padding-top:90px;">
	          Paul Ingis
	          <br>
	          201-664-1105
	          <br>
	          <a href="mailto:squaredancing@ingis.com">Email Me</a>
          </div>
          <div align="center" style="padding-top:35px;">
         	  <font color="green">
         		Copyright © 2009 <a href="http://ingis.com/squaredancing">Paul Ingis</a>. All rights reserved.
         		<br>
         		Layout & Design by <a href="http://ingis.com/squeaky-squash/info.php">Chris Ingis</a>.</p>
         	  </font>
         	 </div>
           </div>
         </div>
        <!--/footer-->
  </td>
</tr>
  </table>
</div>
</div>
</body>
</html>

butsags · October 24, 2009

also on different pcs with different resolutions, there will be space at the bottom and etc.

butsags · October 25, 2009

hahahahaha adding

overflow-x: hidden;

into the body css fixed it. lmao

Sign In

[SOLVED] CSS Alignment Issue

Recommended Posts

butsags

Link to comment

Share on other sites

butsags

Link to comment

Share on other sites

butsags

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information