SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to get a liquid layout to work

    I am having trouble getting my liquid layout to fit the page without breaking.

    (Link found at bottom of post) What I have is a menu, which works fine, fits no problem but I have a large news layer with 4 smaller news sections inside which I want to span across the whole of the larger layer, without breaking it of course.

    The Code is as follows (I know its a bit messy, I just want to get it all working first before I fix anything)

    HTML:
    Code:
    <body>
    	<div class="main">
    
    <!--Banner Section-->
    
    		<div class="TopImage_all">
    			<div class="TopImage_left"></div>
    			<div class="TopImage_logo"></div>
    			<div class="TopImage_right"></div>
    			<div class="TopImage_image"></div>
    		</div>
    		
    <!--End of Banner Section
    	Beginning of Welcome Bar
    	Section-->
    		
    		<div class="welcome_bar_all">
    			<div class="welcome_bar_left"></div>
    			<div class="welcome_bar_right"></div>
    		</div>
    		
    <!--End of Welcome Bar Section
    	Declare Main Content Area-->
    	
    		<div class="main_content">
    		
    <!--End of Declare Main Content Area,
    	Beginning of Menu section-->
    	
    			<div class="main_menu_all">
    				<div class="main_menu_top_all">
    					<div class="main_menu_top_left"></div>
    						<div class="main_menu_top_textimg_left"></div>
    						<div class="main_menu_top_textimg_repeat">
    							<h1 class="menu">Menu</h1>
    						</div>
    						<div class="main_menu_top_textimg_right"></div>
    					<div class="main_menu_top_right"></div>
    				</div>
    				<div class="main_menu_content_bg">
    				
    				
    					
    					<!--Main Menu Text-->
    					<ul class="menu">
    					<li class="menuGrey">Home</li>
    					<li class="menuBlue">News</li>
    					<li class="menuGrey">Forums</li>
    					<li class="menuBlue">Spotlight</li>
    					<li class="menuGrey">Servers</li>
    					<li class="menuBlue">Competitions</li>
    					<li class="menuGrey">Newsletter</li>
    					<li class="menuBlue">Calender</li>
    					<li class="menuGrey">Contact</li>
    					<li class="menuBlue">Clans</li>
    					</ul>
    					<!--End Main Menu Text-->
    					
    				</div>
    
    <!--End of Main Menu Content
    	Beginning Main Menu Bottom-->
    	
    			<div class="main_menu_bottom_all">
    				<div class="main_menu_bottom_left"></div>
    				<div class="main_menu_bottom_right"></div>
    			</div>	
    			
    <!--End of Main Menu Bottom-->				
    		
    		</div>
    <!--End of Main Menu
    	Beginning of Game News-->
    
    <!--Begin Gaming News Section-->
    
    			<div class="gameNews_all">
    
    <!--Begin Top Section Gaming News-->
    
    			<div class="gameNews_top_all">
    				<div class="gameNews_top_left"></div>
    				<div class="gameNews_top_textimg_left"></div>
    				<div class="gameNews_top_textimg_repeat">
    					<h1 class="menu">Gaming News</h1>
    				</div>
    				<div class="gameNews_top_textimg_right"></div>
    				<div class="gameNews_top_right"></div>
    			</div>
    
    <!--End of Top Section
    	Beginning Content Area-->
    
    			<div class="gameNews_content_bg">
    				
    				<ul class="gameContent">
    					<li class="gameGrey"></li>
    					<li class="gameWhite"></li>
    					<li class="gameGrey"></li>
    					<li class="gameWhite"></li>			
    				</ul>
    
    			</div> <!--Gaming Content Area Div-->
    			
    			</div> <!--Gaming News Close Div-->
    		
    		</div> <!--Main Content Close Div-->
    	
    	</div> <!--Wrapper Close Div-->
    </body>
    CSS:
    Code:
    /* Main Div Layer */
    .main {
    	width: 100%;
    	height: 100%;
    }
    /* Banner Layers, All Banner Layers */
    .TopImage_all {
    	width: 100%;
    	height: 283px;
    	float: left;
    	background-image: url(images/banner_repeat.jpg);
    	background-repeat: repeat-x;
    }
    .TopImage_left {
    	width: 18px;
    	height: 283px;
    	background-image: url(images/banner_left_end.gif);
    	float: left;
    	background-repeat: no-repeat;
    	background-color: #FFFFFF;
    }
    .TopImage_logo {
    	width: 275px;
    	height: 158px;
    	float: left;
    	background-image: url(images/banner_logo.jpg);
    	margin-top: 68px;
    	margin-left: 2%;
    }
    .TopImage_image {
    	width: 537px;
    	height: 283px;
    	float: right;
    	background-image: url(images/banner_image.jpg);
    }
    .TopImage_right {
    	width: 18px;
    	height: 283px;
    	background-image: url(images/banner_right_end.gif);
    	float: right;
    	background-repeat: no-repeat;
    	background-color: #FFFFFF;
    }
    /*End of Banner Layers*/
    
    /*Welcome Bar*/
    .welcome_bar_all {
    	width: 100%;
    	height: 40px;
    	float: left;
    	margin-top: 10px;
    	background-image: url(images/wb_newsletter_repeat.gif);
    	background-repeat: repeat-x;
    }
    .welcome_bar_left {
    	width: 10px;
    	height: 40px;
    	background-image: url(images/wb_newsletter_left_end.gif);
    	float: left;
    	background-color: #FFFFFF;
    }
    .welcome_bar_right {
    	width: 10px;
    	height: 40px;
    	background-image: url(images/wb_newsletter_right_end.gif);
    	float: right;
    	background-color: #FFFFFF;
    }
    /*End of Welcome Bar*/
    
    /*Main Content*/
    .main_content {
    	width: 100%;
    	height: 100%;
    }
    /*Main menu*/
    .main_menu_all {
    	width: 17%;
    	height: 100%;
    	float: left;
    	margin-top: 10px;
    }
    /*Main menu top section*/
    .main_menu_top_all {
    	width: 100%;
    	height: 23px;
    	background-image: url(images/contentbox_top_repeat.jpg);
    	background-repeat: repeat-x;
    }
    .main_menu_top_left {
    	width: 8px;
    	height: 23px;
    	float: left;
    	background-image: url(images/contentbox_top_left_end.gif);
    	background-color: #FFFFFF;
    }
    .main_menu_top_right {
    	width: 8px;
    	height: 23px;
    	float: right;
    	background-image: url(images/contentbox_top_right_end.gif);
    	background-color: #FFFFFF;
    }
    .main_menu_top_textimg_left {
    	width: 19px;
    	height: 23px;
    	float: left;
    	background-image: url(images/contentbox_top_midtext_left.jpg);
    	margin-left: 5px;
    }
    .main_menu_top_textimg_repeat {
    	width: 65px;
    	height: 23px;
    	float:left;
    	background-image: url(images/contentbox_top_midtext_repeat.jpg);
    	background-repeat: repeat-x;
    }
    	.main_menu_top_textimg_repeat h1.menu {
    	font-family: Tahoma;
    	font-size: 12px;
    	color: #FFFFFF;
    	display: inline;
    	margin-left: 15px;
    }
    .main_menu_top_textimg_right {
    	width: 19px;
    	height: 23px;
    	float: left;
    	background-image: url(images/contentbox_top_midtext_right.jpg);
    }
    /*End of Main Menu top section*/
    
    /*Main Menu Content Area*/
    .main_menu_content_bg {
    	width: 98%;
    	height: 100%;
    	background-image: url(images/content_grad.jpg);
    	background-color: #cccccc;
    	background-repeat: repeat-x;
    	margin-left: 1px;
    	border-right-width: 1px;
    	border-left-width: 1px;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #000000;
    	border-left-color: #000000;
    }
    
    /*Main Menu Text, Spacer and Bottom Item Text*/
    .main_menu_content_bg ul.menu {
    	display: inline;
    	margin: 0px;
    	padding: 0px;
    }
    .main_menu_content_bg li.menuGrey, li.menuBlue {
    	font-family: Tahoma;
    	font-size: 12px;
    	color: #006699;
    	font-weight: bold;
    	list-style-position: inside;
    	text-indent: 27px;
    	margin: 0px;
    	padding-top: 5px;
    	padding-right: 0px;
    	padding-bottom: 5px;
    	padding-left: 0px;
    	border-bottom-width: 1px;
    	border-bottom-style: dashed;
    	border-bottom-color: #000000;
    	background-color: #FFFFFF;
    }
    .main_menu_content_bg li.menuBlue {
    	background-color: #CCCCCC;
    	color: #006699;
    }
    
    
    /*Begining of Main Menu bottom section*/
    .main_menu_bottom_all {
    	width: 100%;
    	height: 23px;
    	background-image: url(images/contentbox_bottom_repeat.jpg);
    	background-repeat: repeat-x;
    }
    .main_menu_bottom_left {
    	width: 43px;
    	height: 24px;
    	float: left;
    	background-image: url(images/contentbox_bottom_left_end.gif);
    	background-color: #FFFFFF;
    }
    .main_menu_bottom_right {
    	width: 8px;
    	height: 23px;
    	float: right;
    	background-image: url(images/contentbox_bottom_right_end.gif);
    	background-color: #FFFFFF;
    }
    /*End of Main Menu Bottom Section,
      End of Main Menu
      Beginning Gaming News Area*/
    .gameNews_all {
    	width: 80%;
    	height: 100%;
    	float: right;
    	margin-top: 10px;
    	margin-left: 2%;
    }
    /*Gaming News top section*/
    .gameNews_top_all {
    	width: 100%;
    	height: 23px;
    	background-image: url(images/contentbox_top_repeat.jpg);
    	background-repeat: repeat-x;
    }
    .gameNews_top_left {
    	width: 8px;
    	height: 23px;
    	float: left;
    	background-image: url(images/contentbox_top_left_end.gif);
    	background-color: #FFFFFF;
    }
    .gameNews_top_right {
    	width: 8px;
    	height: 23px;
    	float: right;
    	background-image: url(images/contentbox_top_right_end.gif);
    	background-color: #FFFFFF;
    }
    .gameNews_top_textimg_left {
    	width: 19px;
    	height: 23px;
    	float: left;
    	background-image: url(images/contentbox_top_midtext_left.jpg);
    	margin-left: 5px;
    }
    .gameNews_top_textimg_repeat {
    	width: 250px;
    	height: 23px;
    	float:left;
    	background-image: url(images/contentbox_top_midtext_repeat.jpg);
    	background-repeat: repeat-x;
    }
    	.gameNews_top_textimg_repeat h1.menu {
    	font-family: Tahoma;
    	font-size: 12px;
    	color: #FFFFFF;
    	display: inline;
    	margin-left: 15px;
    }
    .gameNews_top_textimg_right {
    	width: 19px;
    	height: 23px;
    	float: left;
    	background-image: url(images/contentbox_top_midtext_right.jpg);
    }
    /*End of Gaming News top section*/
    
    /*Main Gaming News Content Area*/
    .gameNews_content_bg {
    	width: 98%;
    	height: 100%;
    	background-color: #cccccc;
    	border-right-width: 1px;
    	border-left-width: 1px;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #000000;
    	border-left-color: #000000;
    	display: inline;
    }
    
    /*Gaming News Text, Spacer and Bottom Item Text*/
    .gameNews_content_bg ul.gameContent {
    	display: inline;
    	width: 100%;
    }
    .gameNews_content_bg li.gameGrey, li.gameWhite {
    	font-family: Tahoma;
    	font-size: 12px;
    	color: #006699;
    	font-weight: bold;
    	background-color: #FFFFFF;
    	border-right-width: 1px;
    	border-right-style: dashed;
    	border-right-color: #000000;
    	height: 250px;
    	width: 25%;
    	clear: left;
    }
    .gameNews_content_bg li.gameWhite {
    	background-color: #FFFFFF;
    	color: #006699;
    	float: left;
    	clear: right;
    }
    .gameNews_content_bg li.gameGrey {
    	background-color: #CCCCCC;
    	color: #006699;
    	float: left;
    	clear: right;
    }
    /*End Gaming News Text
      And Gaming News Content Area*/
    
    /*Begining of Game News bottom section*/
    .gameNews_bottom_all {
    	width: 250px;
    	height: 23px;
    	background-image: url(images/contentbox_bottom_repeat.jpg);
    	background-repeat: repeat-x;
    }
    .gameNews_bottom_left {
    	width: 43px;
    	height: 24px;
    	float: left;
    	background-image: url(images/contentbox_bottom_left_end.gif);
    	background-color: #FFFFFF;
    }
    .gameNews_bottom_right {
    	width: 8px;
    	height: 23px;
    	float: right;
    	background-image: url(images/contentbox_bottom_right_end.gif);
    	background-color: #FFFFFF;
    }
    The link to the page is - Bluedip

  2. #2
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, in fear of my post slipping to the next page I thought I would ask again if anyone has a solution.

    I've been working on it since I posted a few days ago and have gotten no closer to a solution. If anyone has any ideas I would appreciate it greatly. Thank you.


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
  •