SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Gap Between the Sections + the Header Image is Blocked

    I am wondering why the body section is at the top of the screen, and why is the bottom slice of the image I sliced with Fireworks still there even though there is no code remaining of the spacer gif's and the slices. I just want to start by displaying the page correctly.

    Then there are gaps between the lower header section and the body section, as well as a break between the body and footer. ????

    The Whole HTML File Right now:
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="You can find product reviews here for renowned internet products. This is an unbiased site that exposes bad products and promotes the good ones." />
    <meta name="Keywords" content="keyword1, keyword2,..." />
    <meta name="rating" content="General" />
    <meta name="revisit-after" content="14 days" />
    <meta name="ROBOTS" content="All" />
    <link href="style/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <link href="style/ie.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
    <title>Atlanta Review Group&trade;</title>
    </head>
    <body>
    <div id="header" align="center">
    <div id="lowerheader" align="center">
    	<div id="blueshadow">
          <b><u>Home Page</u></b>
        </div>
        <p id="redshadow">Hello, and welcome to Atlanta Review Group where we write about cool products circulating on the internet. We also work to expose the scams out there. This is some temporary text.</p>
      <!-- "Please Select a Page from Below" -->
        <!--[if !IE]> -->
        <div style="margin-top:1em;">
      <object type="application/x-shockwave-flash" data="pleaseselectapage.swf" width="300" height="30">
    <!-- <![endif]-->
    <!--[if IE]>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="30">
        <param name="movie" value="pleaseselectapage.swf" />
    <!--><!-- http://Validifier.com -->
      </object>
    <!-- <![endif]--></div>
    </div>
    <div id="body" align="center">
        <!-- begin Personal navigation menu -->
    <ul id="pMenu">
    	<li><a href="http://www.atlantareviewgroup.com/health.php">health</a>
        		<div>
            		<h2>weight loss</h2>
                   		  <h3>fitness</h3>
                          		<ul>
                           		  <li><a href="#">under construction</a></li>
                                </ul>
                          <h3>dieting</h3>
                          		<ul>
                           		  <li><a href="#">under construction</a></li>
                                </ul>
       
                	<h2>skin care</h2>
                       <ul>
                   		  <li><a href="#">under construction</a></li>
            	       </ul>
    			</div>
        </li>    
    	<li><a href="http://www.atlantareviewgroup.com/insurance.php">insurance</a>
       		  <div>
                	<h2>property insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>auto insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>health insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>annuities</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
           	   			</ul>
               </div>
       	   </li>
    
    	<li><a href="http://www.atlantareviewgroup.com/general.php">general</a>
       		  <div>
            		<h2>electronics</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>style &amp; fashion</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>food/dining</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>cars/auto</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
           				</ul>
                </div>
       	    </li>
    
    	<li><a href="http://www.atlantareviewgroup.com/dating.php">dating</a>
        		<div>
                <ul>
            		<li><a href="#">RealMatureSingles</a></li>
                	<li><a href="#">SeniorPeopleMeet</a></li>
            	</ul>
                </div>
        	</li>
    	
    	<li><a href="http://www.atlantareviewgroup.com/education.php">education</a>
        		<div>
                <ul>
            		<li><a href="#">under construction</a></li>
            	</ul>
                </div>
        	</li>                    	
    </ul>
    	<!-- end Personal navigation menu-->
    </div>
    <div id="footer" align="center">
        <!--[if !IE]> -->
      <object type="application/x-shockwave-flash" data="thanksforvisiting.swf" width="380" height="68">
    <!-- <![endif]-->
    <!--[if IE]>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="380" height="68">
        <param name="movie" value="thanksforvisiting.swf" />
    <!--><!-- http://Validifier.com -->
      </object>
    <!-- <![endif]-->
    </div>
    <div class="blackshadow">&copy;AtlantaReviewGroup.com</div>
    <div class="blackshadow">Updated June 30, 2011</div>
    </body>
    </html>
    The Whole CSS File:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{
    	background-image: url(bg.jpg);
    	background-position:top center;
    	background-color:#FFF;
    	background-repeat: no-repeat;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    }
    
    #header{
    	background-image:url(header.jpg);
    	background-repeat:no-repeat;
    	width:635px;
    	height:126px;
    	text-align: center;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 24px;
    }
    
    #loveheader{
    	background-repeat:no-repeat;
    	width:635px;
    	height:126px;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    }
    
    #lowerheader{
    	background-image:url(lowerheader.jpg);
    	width:783px;
    	height:100px;
    }
    
    #body{
    	background-image:url(body.jpg);
    	width:783px;
    	text-align: center;
    }
    
    #body2{
    	background-image:url(body.jpg);
    	width:783px;
    	text-align: center;
    }
    
    #footer{
    	background-image:url(footer.jpg);
    	width:783px;
    	height:82px;
    	text-align: center;
    }
    
    #redshadow{
    	color:#CCC;
    	font-size:16px;
    	font-family:Verdana, Geneva, sans-serif;
    	text-shadow: 0px 0px 2px #900, 0px -7px 30px #966, 0px -14px 60px;
    }
    
    #blueshadow{
    	font-size:24px;
    	font-family:Verdana, Geneva, sans-serif;
    	color:#FFF;
    	text-align:center;
    	vertical-align:bottom;
    	text-shadow:0 0 4px #09F, 0 -5px 15px #009;
    	margin:0;
    	padding-top:.8em;
    }
    
    #redshadow{
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:16px;
    	color:#003;
    	text-shadow:0 0 2px #F60, 0 -3px 10px #900;
    }
    
    div.whitebox{
    	color:#000;
    	text-shadow:1px 1px 1px #000;
    	display:block;
    	background:#FFF;
    	border:6% inset #CCC;
    	width:70%;
    	height:auto;
    	padding:2%;
    	/*for IE*/
    	filter:alpha(opacity=50);
    	/*standard CSS3*/
    	opacity:0.5;
    }
    
    #realmaturesingles{
    	text-decoration:none;
    	font-family:Impact;
    	font-size:3em;
    	color:#CF0;
    	right:-6%;
    	top:-1em;
    }
    
    #seniorpeoplemeet{
    	text-decoration:none;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:3em;
    	color:#FF0;
    	right:-39%;
    	top:-.2em;
    }
    
    .blackshadow{
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    	text-shadow:0px 2px 2px #000;
    	text-align:center;
    	color:#000;
    }
    
    body,td,th {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    }
    
    #lowerheader tr td #redshadow b {
    	font-size: 16px;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    A link! A link! My Kingdom for a link!

    Hard to tell, but the first thing I see is that everything is contained inside the header div, which has a height set on it:

    Code:
    #header {
      background-image: url("header.jpg");
      background-repeat: no-repeat;
      font-family: Verdana,Geneva,sans-serif;
      font-size: 24px;
      height: 126px;
      text-align: center;
      width: 635px;
    }
    So your whole page has to fit inside that height of 126px, which I'm sure is not what you want.

    Did you forget to close the header div?

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, I figured out that I didn't close the <div> tag for the header, but the site still won't align to the center. For some reason, the <div align="center"> won't align to the center. I just made a new thread about the general layout being off despite finishing my first Sitepoint book- Design Your Own Website the Right Way Using HTML & CSS, 2nd Edition, by Ian Lloyd.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Don't use align="center". It's way out of date.

    Instead, give the div a width and use

    Code:
    margin: 0 auto;
    The auto bit centers the div in the browser window. The 0 is for top and bottom margins, so you may want to change that.


Tags for this Thread

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
  •