Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Expanding Side Bars Problem

    Hey guys,
    Having an issue with my site here.

    For some reason, I cannot get my side bars to expand downward with the content on my page. They just don't show. If I add content (like text or something) to the side bar's div, it will show up for however much content is in there (but I don't want to do that). I am pretty sure my div structure is correct, I just think I need to clear out some floats somewhere or something (which I have tried in several locations).

    It is suppose to look like this screenshot of the design:
    http://imagenerd.com/uploads/mainEKAS.jpg

    Here is my page where you can view the source:
    http://starcraftzone.com/index2.php


    Any help is greatly appreciated!

    Thanks,
    Kyle

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hello,

    I can't help you with the code, I am not competent. But I thought that you might like to know what I see.

    IE7 - The picture comes up on the left (no sidebars) and fills the screen (with sidebars) when clicked.
    Another click returns it to the first state.

    Firefox - Behaves the same.

    Opera - The whole screen comes up, completely filled, clicking makes no difference.

    effpeetee
    Last edited by effpeetee; 05-21-2007 at 08:05 AM. Reason: extra info added

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You need to put the sidebar images in a div that is expanding with your content. The way you have it now, nothing makes .side-left or .side-right expand.

    Like this:
    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=iso-8859-1"><title>StarCraft 2 Forums and Information Hub - StarCraftZone.com</title>
    
    <style type="text/css">
    /* StarCraftZone.com CSS Document */
    
    /* Globals */
    body {
    	background-color: #000000;
    	background-image: url(/images/background.gif);
    	background-position: top;
    	background-repeat: repeat-x;
    	color: #CCCCCC;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 0;
    	padding: 0;
    }
    
    img {
    	border: 0;
    }
    
    a {
    	color: #0078ff;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #3f99ff;
    	text-decoration: underline;
    }
    
    h4 {
    	color: #ffc600;
    	font-size: 18px;
    	margin: 0;
    	padding: 0;
    	font-weight: normal;
    }
    
    h5 {
    	font-size: 12px;
    	font-weight: bold;
    	margin: 5px 0 5px 0;
    }
    
    /* Other */
    #container {
    	margin: 0 auto;
    	width: 822px;
    	background: #000000 url(http://starcraftzone.com/images/side-bar-left.gif) repeat-y left;
    }
    #nested_container {
    	width: 822px;
    	background: url(http://starcraftzone.com/images/side-bar-right.gif) repeat-y right;
    }
    
    .container-inside {
    	width: 800px;
    	margin: 0 auto;
    	background-color: #000000;
    	background-image: url(/images/grid.gif);
    	background-position: left;
    	background-repeat: repeat-y;
    
    }
    
    .clear {
    	font-size: 0;
    	height: 0;
    	clear: both;
    }
    
    /* Header */
    .banner {
    	background-image: url(/images/banner.gif);
    	background-position: center;
    	background-repeat: no-repeat;
    	height: 221px;
    }
    
    .nav {
    	text-align: center;
    	padding-top: 170px;
    }
    	
    	.nav a {
    		margin: 0 10px 0 10px;
    	}
    
    /* Content */
    .content {
    }
    
    .content-left {
    	width: 225px;
    	float: left;
    	padding: 0 5px 0 10px;
    	margin-top: 15px;
    }
    
    .content-right {
    	width: 544px;
    	float: left;
    	border-left: 1px solid #242424;
    	padding: 0 5px 0 10px;
    	margin-top: 15px;
    	background-image: url(/images/wraith.gif);
    	background-position: top right;
    	background-repeat: no-repeat;
    }
    
    /* Footer */
    .footer {
    	text-align: center;
    	padding-top: 20px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="nested_container">	<div class="container-inside">
    		<img src="index2_files/caution-bar-top.gif" alt=""><br>
    		<div class="banner">
    			<div class="nav">
    				<a href="http://starcraftzone.com/index.php">Home</a> <b>·</b>
    				<a href="http://starcraftzone.com/forums/">Forums</a> <b>·</b>
    				<a href="http://starcraftzone.com/fanart/">Fan Art</a> <b>·</b>
    				<a href="http://starcraftzone.com/staff/">Staff</a>
    			</div>
    		</div>
    				<div class="content">
    			<div class="content-left">
    				<h4>Nav</h4>
    			</div>
    			<div class="content-right">
    				<h4>StarCraft 2 Announced</h4>
    				<h5>SEOUL, South Korea – May 19, 2007</h5>
    				<p>Blizzard
    Entertainment® today unveiled StarCraft® II, the sequel to its
    award-winning real-time strategy game StarCraft, at the 2007 Blizzard
    Worldwide Invitational event in Seoul, South Korea. The announcement
    took place inside the Olympic Gymnastics Arena, in front of thousands
    of attendees, who received a presentation that included a StarCraft II
    cinematic trailer and a gameplay demonstration by the development team.</p>
    				<p>Designed
    to be the ultimate competitive real-time strategy game, StarCraft II
    will feature the return of the Protoss, Terran, and Zerg races,
    overhauled and re-imagined with Blizzard's signature approach to game
    balance. Each race will be further distinguished from the others, with
    several new units and new gameplay mechanics, as well as new abilities
    for some of the classic StarCraft units that will be making a
    reappearance in the game. StarCraft II will also feature a custom
    3D-graphics engine with realistic physics and the ability to render
    several large, highly detailed units and massive armies on-screen
    simultaneously.</p>
    				<p>"With StarCraft II, we'll be able to do
    everything we wanted to do with the original StarCraft and more,"
    stated Mike Morhaime, president and cofounder of Blizzard
    Entertainment. "We recognize that expectations are high following the
    long-running popularity of the original game, but we plan to meet those
    expectations and deliver an engaging, action-packed, competitive
    experience that StarCraft players and strategy gamers worldwide will
    enjoy."</p>
    				<p>StarCraft II will include a unique single-player
    campaign, as well as fast-paced online play through an upgraded version
    of Blizzard's renowned online gaming service, Battle.net®. In addition,
    the game will come with a powerful, full-featured map editor that will
    put the same tools used by Blizzard's designers into the hands of
    players.</p>
    				<p>Blizzard is developing StarCraft II for
    simultaneous release on the Windows® and Macintosh® PC platforms.
    Further information about the game, including details on the
    single-player, multiplayer, and map-editor features, as well as system
    requirements, pricing, and availability, will be announced in the
    months ahead. To learn more about StarCraft II, please visit the
    official website at <a href="http://starcraft2.com/" target="_blank">www.starcraft2.com</a></p>
    			</div>
    		</div>
    		<div class="clear"></div>
    
    		<div class="footer">
    			© Copyright 2007, <a href="http://starcraftzone.com/">StarCraftZone.com</a> - All Rights Reserved<br>
    			<a href="http://kylespearrin.com/">A Kyle Spearrin Production</a>
    			<img src="index2_files/caution-bar-bottom.gif" alt="" style="padding-top: 10px;">
    		</div>
    	</div>
    <!--closes nested_container--></div>
    <!--closes container--></div></body></html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much, yet again! I see what the problem is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •