Layout Problem

All Forums >> [Web Development] >> Cascading Style Sheets

Message

CoasterDan -> Layout Problem (3/15/2008 19:42:45)
Hi, I am very new to CSS and coding it. Although, in an effort to get to know CSS, I am redoing my site, www.Thrill-Pics.com, and making it completely in CSS. I found a template i wanted from a website and used it for my new design. The site looked great until I tried to use a SSI to include a section of my page. After I included the page, there was a problem with the site's layout and now, one box (the SSI) is above the main content box when it really should be next to it. I have tried everything I know to try to fix this, even though [knowing my luck] it will probably be something very easy to fix, and nothing is helping. Please respond with a possible way to solve this if you know how to. The URL is www.Thrill-Pics.com/index2.shtml. Thanks!

Tailslide -> RE: Layout Problem (3/16/2008 4:12:51)

Normal SSIs (not frontpage stuff) should just have the code you want included - not all the other stuff that you have in a normal page. It should just be this:

<!--left1 start -->
<div id="left1">
<p class="pic1"></p>
<p class="boxTxt1"><span>4.10.08</span><b>Thrill-Pics gets it's new look and 
feel.  This is new design is more flexiable and user-friendly.  It 
also includes new forums.</b></p>

<br class="spacer" />
</div>
<!--left1 end -->
<!--left2 start -->
<div id="left2">
<p class="pic2"></p>
<p class="boxTxt2"><span>TurpisIntegerac</span><b>Duis iaculis lobortis leo</b>,venenatis 
dignissim. Nam massa lorem, suscipit nonummy,</p>
<br class="spacer" />
</div>
<!--left2 end -->
<!--left3 start -->
<div id="left3">
<p class="pic3"></p>
<p class="boxTxt3"><span>Volutpat ullamco</span><b>Phasellus dapibus odio eu</b>,ipsum 
ac turpis. Integer ac libero eu orci pharetra eges</p>

<!--left3 end -->
<br class="spacer" />
</div>

You've got basically a whole page included in there with the doctype, document head html tags etc etc. Remove absolutely everything apart from the code that you want to appear on the host page.

CoasterDan -> RE: Layout Problem (3/16/2008 12:29:53)
I have tried your idea, and I still am having the problem. I have gotten rid of all tags and it still looks the same. Also, when I got rid of the <HEAD> tag, I deleted the stylesheet link. This made my page have no CSS styling at all. Is this supposed to be like this? Please help. Thanks!

Tailslide -> RE: Layout Problem (3/16/2008 12:48:51)

I'm assuming here that you're using normal SSIs not frontpage?

Then you should have nothing in the include except what is in the code I have in my post. The link to the stylesheet is in the normal page head - you don't need it in the include. The included code will read the stylesheet and everything else from the normal page. It's like putting a load of fruit in a basket and then carrying them with that basket.

Can you post the full code from the page with the include call (i.e. before it's uploaded) and the code from the include itself.

Example:

I usually use PHP includes but here's an example of a basic include page I've used for something:

The normal page:

<!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" lang="en" xml:lang="en">
<head>
<title>whatever</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="" />
<meta name="Keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" media="screen"  href="css/basic.css" />
<script type="text/javascript" src="scripts/fsmenu.js"></script>
<link rel="shortcut icon" href="favicon.ico" /> 
 </head>
<body>

<!--#include virtual="/includes/header.txt"-->

<h2>Gallery</h2>

<p>Click on the photographs below to see larger versions.</p>

  (etc etc.... )

</body>
</html>

The include page itself:

 <div id="container">
   
      <h1>Main Heading here</h1>

                <div id="mainbox">

                <ul class="menulist" id="listMenuRoot">
                  <li><a href="index.shtml">Home</a></li>
                  <li><a href="about.shtml">About Us</a></li>
                  <li><a href="gallery.shtml">Gallery</a></li>
                  <li><a href="domestic.shtml">Domestic</a></li>
                  <li><a href="commercial.shtml">Commercial</a></li>
                 <li><a href="contact.shtml">Contact Us</a></li>
             </ul>

Nothing else at all in header.txt

CoasterDan -> RE: Layout Problem (3/16/2008 15:23:27)

My code for the page I am including the content to, is:

<!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=iso-8859-1" />
<title>Thrill-Pics.com | The Ultimate Theme Park Experience!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/rsspausescroller.js">
//credit notice here 
</script>
</head>
<body>
<!--header start -->
<div id="header">
<ul>
<li><a href="#" class="hover">Home</a></li>
<li><a href="#">Park Index</a></li>
<li><a href="#">Park Photos</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Thrill-Quest</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Site Staff</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<a href="index2.shtml"><img src="/images/logo.gif" alt="jet 30" width="249" height="72" border="0" class="logo" /></a>
<h1>make a huge difference in 1000 da</h1>
<p> </p>
<img src="/images/top_icon.gif" alt="jet 30 says" width="174" height="80" class="icon" />
<p class="topText">Upcoming Additions: 
<font size="2" color="#FF9C3A">Coverage from Six Flags Great Adventure and many 
west coast theme  parks such as Knott's and Disneyland. </font> </p>
<a href="#" class="readMore"></a>
</div>
<!--header end -->
<!--body start -->
<div id="body">
<!--#include virtual="sidebar.html" -->
<!--right panel start -->
<div id="right">
<p class="rightTop"></p>
<h2>Welcome To Thrill-Pics!</h2>
<p class="rightTxt1">Thrill-Pics.com is a website that is focused on everything 
theme park-related.  Thrill-Pics, more commonly known as 'T-P', promises 
you that you would get the best out of your visit to the site and be educated 
about parks all over the globe.  We provide you with the ultimate theme 
park experience!  <font size="2">Enjoy the site and be sure to check out 
our photo galleries complete with <b>over 1500 photos</b>!  </font>
<font face="Verdana" size="2">We also have an extensive park index where you can 
find information and what others have to say about select theme parks.  Also, 
try out Thrill-Quest, the interactive roller coaster poll  where you can submit 
and vote for coasters all around the world!  Even though most of the theme parks 
are closed, we will try our best to keep the site updates with many pictures!  
We have many aerial photos already up and a few ground-based images coming 
soon!  Anyway, over the winter and into the early spring of this new year, we 
would be constantly updating the site with many improvements and modifications 
to help bring you the ultimate theme park experience!  Thanks for visiting and 
we hope you enjoy every aspect of the site!</font></p>
<p>
<br class="spacer" />
</div>
<!--right panel end -->
<br class="spacer" />
</div>
<!--body end -->
<!--bodyBottom start -->
<div id="bodyBottom">
<!--news start -->
<div id="news">
<h2>Latest News</h2>
<h3>On 23rd May 2007</h3>
<p><span>euismod justo, eu pharetra elit arcu sit amet</span>quam. um ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam adipiscing</p>
<p><span>euismod justo, eu pharetra elit arcu sit amet</span>Donec nec urna, praesent risus phasellustincidunt eu volutpat</p>
<br class="spacer" />
</div>
<!--news end -->
<!--services start -->
<div id="service">
<h2>New Services Overview</h2>
<h3>Finantial Services</h3>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="#">Fusce bibendum ultricies lorem.</a></li>
<li><a href="#">Nulla facilisis odio vitae neque.</a></li>
<li><a href="#">Etiam sit amet purus a eros viverra adipiscing.</a></li>
<li><a href="#">Nunc dignissim eleifend turpis</a></li>
</ul>
<br class="spacer" />
</div>
<!--services end -->
<!--member start -->
<!--member end -->
<div id="member">
  <h2>Member Login</h2>
  <form action="#" method="post" name="member_log_in" id="member_log_in">
    <label>Name:</label>
    <input type="text" name="name" class="txtBox" />
    <label>Password:</label>
    <input type="password" name="name2" class="txtBox" />
	<a href="#">Not A Member?</a>
	<input type="submit" name="go" value="" class="go" />
    <br class="spacer" />
  </form>
  <br class="spacer" />
</div>
<br class="spacer" />
</div>
<!--bodyBottom end -->
<!--footer start -->
<div id="footer">
<ul>
	<li><a href="#">Home</a>|</li>
	<li><a href="#">Park Index</a>|</li>
	<li><a href="#">Park Photos</a>|</li>
	<li><a href="#">News</a>|</li>
	<li><a href="#">Videos</a>|</li>
	<li><a href="#">Forums</a>|</li>
	<li><a href="#">Thrill-Quest</a>|</li>
    <li><a href="#">About Us</a>|</li>
    <li><a href="#">Site Staff</a>|</li>
	<li><a href="#">Contact</a></li>
  </ul>
   <p class="copyright">©2007-2008 Thrill-Pics.com. All rights reserved.  
	All site content is property of Thrill-Pics.com unless otherwise noted.</p>
   <a href="#" class="subscribe">Subscribe</a>
   <a href="http://validator.w3.org/check?uri=referer" target="_blank" class="xht"></a>
	<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="cs"></a>
	<a href="index.html"><img src="/images/bottom_logo.gif" alt="Jet 30" title="Jet 30" width="84" height="26" border="0" /></a>
	<p class="design">Designed By : <a href="http://www.templateworld.com">Template World</a></p></div>
<!--footer end -->
</body>
</html>

and the include page's code is:

<!--left1 start -->
<div id="left1">
<p class="pic1"></p>
<p class="boxTxt1"><span>4.10.08</span><b>Thrill-Pics gets it's new look and 
feel.  This is new design is more flexiable and user-friendly.  It 
also includes new forums.</b></p>

<br class="spacer" />
</div>
<!--left1 end -->
<!--left2 start -->
<div id="left2">
<p class="pic2"></p>
<p class="boxTxt2"><span>TurpisIntegerac</span><b>Duis iaculis lobortis leo</b>,venenatis 
dignissim. Nam massa lorem, suscipit nonummy,</p>
<br class="spacer" />
</div>
<!--left2 end -->
<!--left3 start -->
<div id="left3">
<p class="pic3"></p>
<p class="boxTxt3"><span>Volutpat ullamco</span><b>Phasellus dapibus odio eu</b>,ipsum 
ac turpis. Integer ac libero eu orci pharetra eges</p>

<!--left3 end -->
<br class="spacer" />
</div>

.

Once again, the page I am trying to include the content on to is www.Thrill-Pics.com/index2.shtml and the include page is www.Thrill-Pics.com/sidebar.html

Tailslide -> RE: Layout Problem (3/16/2008 15:53:16)
Excellent - we've got rid of those extra unecessary bits in the include! There's two ways of fixing this. 1. Stick a div around the 3 left hand boxes and float that left (giving it the width required - you can remove the width off the inner ones if you like). 2. Put the right hand div before all the left hand ones in the code. Both work for me locally. I'd probably do number one though as if you've got lots of floated divs I find it easier to have them sitting within a div and then position that. Just less likely to get away from you!

CoasterDan -> RE: Layout Problem (3/16/2008 16:40:39)
Im sorry, but could you possiblyshow me the code with the div around the three boxes? I am unsure how to code it directly.

Tailslide -> RE: Layout Problem (3/16/2008 17:04:24)

Sure

Put this in your include file:

<div id="left">
<div id="left1">
<p class="pic1"></p>
<p class="boxTxt1"><span>4.10.08</span><b>Thrill-Pics gets it's new look and
feel.  This is new design is more flexiable and user-friendly.  It
also includes new forums.</b></p>

<br class="spacer" />
</div>
<!--left1 end -->
<!--left2 start -->
<div id="left2">
<p class="pic2"></p>
<p class="boxTxt2"><span>TurpisIntegerac</span><b>Duis iaculis lobortis leo</b>,venenatis
dignissim. Nam massa lorem, suscipit nonummy,</p>

<br class="spacer" />
</div>
<!--left2 end -->
<!--left3 start -->
<div id="left3">
<p class="pic3"></p>
<p class="boxTxt3"><span>Volutpat ullamco</span><b>Phasellus dapibus odio eu</b>,ipsum
ac turpis. Integer ac libero eu orci pharetra eges</p>

<!--left3 end -->
<br class="spacer" />
</div>
</div>  <!-- end left-->

all I've done is wrapped the lot in a div called left - which interestingly already has a rule in the stylesheet so was probably removed from the actual page itself in error at some point.

CoasterDan -> RE: Layout Problem (3/16/2008 17:17:46)
Thank you so much! Its all fixed and the way i want it! Once again, thanks! [:D]

Tailslide -> RE: Layout Problem (3/16/2008 17:42:06)
No problem glad to have helped. [:)]

Page: [1]

9.399414E-02