SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    West Lafayette, IN
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 Column Faux Layout Misaligned In CSS

    Greetings,

    I have been working on a template for a church in the Texas area and have it looking good in Firefox IE/Mac and Safari. Looking at the page in IE6, and the entire layout is pushed to the right about 20 or so pixels. This causes the page to be out of line with the background image and the right column to be pushed to the bottom of the page.

    Can someone please take a look at my code and offer me suggestions to make my page look good in the big browser? Thanks!

    http://www.carpeaqua.com/church/

    note: just realized i hit post in the wrong forum [darn tabbed browsing]. mods, please move to Browser Issues. sorry.
    Last edited by tikki; Sep 12, 2004 at 23:45.

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

    I'm surprised the above viewed in any browser as ir was compltetly broken in all of mine on the PC. IE, firefox and opera were completely mangled.

    I've sorted it out so it displays in those three browsers so now you have 95% coverage instead of 5% lol, but its probably messed up your browers if you say you had it working. Although I'm not sure how it could be because it didn't make a lot of sense.

    Anyway hope this helps
    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>Alpha Seventh-Day Adventist Church - Austin, TX</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="robots" content="all" />
    <meta name="rating" content="Safe For Kids" />
    <meta name="revisit-after" content="1 day" />
    <meta name="doc-class" content="Completed" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Alpha Seventh-Day Adventist Church - Austin, TX" />
    <meta name="copyright" content="Copyright (c) 2004 Alpha Seventh-Day Adventist Church - Austin, TX" />
    <style type="text/css">
    body {
     background: #ccc;
     color: #000;
     font: small Tahoma, Verdana, Arial, Helvetica, sans-serif;
     margin: 0px;
    }
    #container {
     width: 713px;
     border: #000 1px;
     margin: 0px auto 0px auto;
     border-top-style: none;
     border-bottom-style: none;
    }
    #header {
     background: url(http://www.carpeaqua.com/church/img/header.jpg) #fff no-repeat;
     height: 223px;
     width: 100%;
    }
    #header h1 {margin:0;padding:0}
    #header h1 span {
     display: none;
    }
    #headerlinks {
     background: #fff;
     text-align: right;
     padding-right: 45px;
     padding-bottom: 15px;
    }
    #headerlinks a:link, #headerlinks a:visited, #headerlinks a:active {
     color: #069;
     font-weight: bold;
     text-decoration: none;
     width: 100%;
     background: #fff;
     text-align: right;
    }
    #searchbars {
     width: 713px;
     text-align: right;
     right: 36px;
     position: relative;
     margin-left: 35px;
    }
    #searchbars form {
     display: inline;
    }
    #searchbars label {
     font-size: xx-small;
     text-transform: lowercase;
    }
    .searchname {
     font-size: xx-small;
     color: #069;
     position: relative;
     right: 317px;
     width: 100%;
     text-align: left;
    }
    /* Navbar */
    #navigation {
     width: 713px;
     background: url(http://www.carpeaqua.com/church/img/navbar.jpg) repeat-x;
     height: 32px;
     margin: 0px;
     padding: 0px;
    }
    ul#navbar  {
     list-style: none;
     margin:0;padding:0;
    }
    #navbar li {
     display:inline;
     margin: 0px;
     padding: 0px;
     list-style: none;
    }
    #navbar a {
     text-decoration: none;
     font-weight: bold;
     font-size: 11px;
     background: url(http://www.carpeaqua.com/church/img/navdivide.gif) no-repeat top right;
     color: #fff;
     float: left;
     letter-spacing: 1px;
     display: block;
     padding-right: 12px;
     padding-left: 12px;
     line-height: 32px;
    }
    #navigation #navbar-1 a {
     padding-left: 12px;
    }
    #navigation #navbar-6 a {
     background: none;
    }
    #content {
     background: url(http://www.carpeaqua.com/church/img/bg.jpg) repeat-y;
     width: 713px;
    }
    .ministrylinks {
     list-style: none;
    }
    .ministrylinks li {
     padding-bottom: 8px;
     margin-left: -33px;
    }
    .qlinks {
     list-style: none;
     text-align:left;
     margin-right: 10px;
     padding-left: 0px;
     margin-left: 0px;
    }
    .qlinks li {
     padding-bottom: 8px;
     position: relative;
     text-align: right;
     margin-right: 8px;
    }
    #maincontent {
     /* */
     float: left;  
     border-top: 1px solid #dcbda1;
     margin-right: 12px;
     margin-left: 12px;
     width: 350px;
     background: transparent;
     padding-right: 5px;
     padding-bottom: 10px;
     padding-left: 5px;
     border-right: 1px solid #dcbda1;
     border-left: 1px solid #dcbda1;
     position: relative;
     display: inline;
    }
    #ministries {
     width: 150px;
     float: left;
     background: transparent;
     margin-left: 12px;
     border-right: 1px solid #dcbda1;
     border-left: 1px solid #dcbda1;
     display:inline;
    }
    #quicklinks {
     width: 150px;
     background: transparent;
     margin-right: 10px;
     border-right: 1px solid #dcbda1;
     border-left: 1px solid #dcbda1;
     float:left;
     display:inline,/* ie fix*/
    }
    
    #divider {
     width: 713px;
     background: #F8E8D8;
    }
    
    .headline {
     background: #DCBDA1;
     color: #fff;
     font: bold 16px/26px Times New Roman, Times, serif;
     text-shadow: #333 2px 3px 3px;
     padding-left: 8px;
     margin-top: 0px;
    }
    #ministries a:link, #ministries a:active, #ministries a:visited {
     color: #2B5F6A;
     text-decoration: none;
    }
    #quicklinks a:link, #ministries a:active, #ministries a:visited {
     color: #2B5F6A;
     text-decoration: none;
    }
    .rule {
     border-bottom: 7px solid #dcbda1;
     width: 95%;
     margin-right: auto;
     margin-left: auto;
    }
    #content a:link, #content a:active, #content a:visited {
     color: #000;
     text-decoration: none;
    }
    img.calendar {
     padding-right: 15px;
    }
    #calendar {
     line-height: 13px;
    }
     
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="searchbars"> <span class="searchname">Name</span><br />
    	<form action="#" method="post">
    	  <label>Church directory search</label>
    	  <input type="text" name="directory" />
    	</form>
    	<form action="#" method="post">
    	  <label>Site search</label>
    	  <input type="text" name="sitesearch" />
    	</form>
      </div>
      <!-- end searchbar div -->
      <div id="header"> 
    	<h1><a href="#" title="Alpha Seventh-Day Adventist Church - Austin TX"><span>Alpha 
    	  Seventh-Day Adventist Church - Austin TX</span></a></h1>
      </div>
      <!-- end header div -->
      <div id="headerlinks"> <a href="#" title="Sermons">Sermons</a>&nbsp;&nbsp;&nbsp;&nbsp; 
    	<a href="#" title="Church Directions">Church Directions</a>&nbsp;&nbsp;&nbsp;&nbsp; 
    	<a href="#" title="Prayers">Prayers</a> </div>
      <div id="navigation"> 
    	<ul id="navbar">
    	  <li id="navbar-1"><a href="#" title="Who We Are">Who we are</a></li>
    	  <li id="navbar-2"><a href="#" title="What We Believe">What we believe</a></li>
    	  <li id="navbar-3"><a href="#" title="Our History">Our History</a></li>
    	  <li id="navbar-4"><a href="#" title="Sabbath School">Sabbath School</a></li>
    	  <li id="navbar-5"><a href="#" title="Publications">Publications</a></li>
    	  <li id="navbar-6"><a href="#" title="Contact Info">Contact Info</a></li>
    	</ul>
      </div>
      <div id="content"> 
    	<div id="divider">&nbsp;</div>
    	<div id="ministries"> 
    	  <p class="headline">Ministries</p>
    	  <ul class="ministrylinks">
    		<li><a href="#" title="Sabbath School">Sabbath School</a></li>
    		<li><a href="#" title="Adventist Youth Society">Adventist Youth Society</a></li>
    		<li><a href="#" title="Women's Minstries">Women's Ministries</a></li>
    		<li><a href="#" title="Men's Menistries">Men's Ministries</a></li>
    		<li><a href="#" title="Music">Music</a></li>
    		<li><a href="#" title="Health">Health</a></li>
    		<li><a href="#" title="Communications">Communications</a></li>
    		<li><a href="#" title="Church Services">Church Services</a></li>
    		<li><a href="#" title="Education">Education</a></li>
    		<li><a href="#" title="Family Life">Family Life</a></li>
    		<li><a href="#" title="Pathfinders">Pathfinders</a></li>
    	  </ul>
    	</div>
    	<div id="maincontent"> 
    	  <h2>Welcome!</h2>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    		Ut wisi enim ad minim veniam, quis nostrud xerci tation ullamcorper suscipit 
    		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    		dolor in</p>
    	  <div class="rule"></div>
    	  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    		<tr> 
    		  <td> <h4>Calendar // August</h4></td>
    		  <td rowspan="2"> <p><br />
    			  <br />
    			  <strong>Coming Events</strong><br />
    			  <a href="#" title="Unity Sabbath">Unity Sabbath</a><br />
    			  <a href="#" title="Sports Day">Youth Retreat</a><br />
    			  <a href="#" title="Womens Prayer Bunch">Womens Prayer Brunch</a><br />
    			  <a href="#" title="Communion">Communion</a><br />
    			  <br />
    			  <strong>Web Logs</strong><br />
    			  <a href="#" title="Pastor's Corner">Pastor's Corner</a><br />
    			  <a href="#" title="Youth Roll">Youth Roll</a><br />
    			  <a href="#" title="Pathfinder Pride">Pathfinder Pride</a><br />
    			</p></td>
    		</tr>
    		<tr> 
    		  <td> <img src="http://www.carpeaqua.com/church/img/cal.jpg" alt="Calendar" class="calendar" height="185" width="220" /> 
    		  </td>
    		</tr>
    	  </table>
    	  <div class="rule"></div>
    	  <h4>Adventist News</h4>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    		Ut wisi enim ad minim veniam, quis nostrud xerci tation ullamcorper suscipit 
    		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    		dolor in</p>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    		Ut wisi enim ad minim veniam, quis nostrud xerci tation ullamcorper suscipit 
    		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    		dolor in</p>
    	</div>
    	<div id="quicklinks"> 
    	  <p class="headline">Quick Links</p>
    	  <ul class="qlinks">
    		<li><a href="#" title="Pastors Corner">Pastors Corner</a></li>
    		<li><a href="#" title="Church Bulletin">Church Bulletin</a></li>
    		<li><a href="#" title="Prayer Request">Prayer Request</a></li>
    		<li><a href="#" title="Bible Gateway">Bible Gateway</a></li>
    		<li><a href="#" title="Sick and Shuts">Sick and Shuts</a></li>
    		<li><a href="#" title="Sermon Request">Sermon Request</a></li>
    		<li><a href="#" title="Calendar">Calendar</a></li>
    		<li><a href="#" title="Ellen G. White Estate">Ellen G. White Estate</a></li>
    		<li><a href="#" title="SDA World Church Site">SDA World Church Site</a></li>
    		<li><a href="#" title="Sabbath History">Sabbath History</a></li>
    		<li><a href="#" title="Bible Gateway">Bible Gateway</a></li>
    		<li><a href="#" title="Adventist Media">Adventist Media</a></li>
    		<li><a href="#" title="Tagnet">Tagnet</a></li>
    		<li><a href="#" title="Photo Galleries">Photo Galleries</a></li>
    		<li><a href="#" title="Austin Facts">Austin Facts</a></li>
    		<li><a href="#" title="ACN"><img src="http://www.carpeaqua.com/church/img/acn.jpg" alt="ACN" border="0" /></a></li>
    		<li><a href="#" title="It Is Written"><img src="http://www.carpeaqua.com/church/img/written.jpg" alt="It Is Written" border="0" /></a></li>
    		<li><a href="#" title="3ABN"><img src="http://www.carpeaqua.com/church/img/3abn.jpg" alt="3ABN" border="0" /></a></li>
    		<li><a href="#" title="BibleInfo"><img src="http://www.carpeaqua.com/church/img/binfo.jpg" alt="BibleInfo" border="0" /></a></li>
    	  </ul>
    	</div>
    	<div style="clear: both;">&#160;</div>
      </div>
    </div>
    <!-- end container div -->
    </body>
    </html>
    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    West Lafayette, IN
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. I was in the process of hacking the page to hell. :-)

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    West Lafayette, IN
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I implemented your changes and then added in some extra things. I removed the search above the header, added a shadow to the container, and put a background image on the body. Thanks for your help, and sorry to give you such a mess to hack at!


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
  •