Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Oct 2005
    Location
    macon, ga
    Posts
    17
    Member #
    11609
    Hey All,

    I've got a few problems I'm hoping some of the gurus around here can help me with. I've got a page using tables for the layout, and I'm trying to replicate that page using CSS. The problems I'm having are that some of the columns don't show up (the gray left- and right-hand sides) and all the columns don't extend to the bottom of the page. I think the main issue is why I'm having problems getting the main (center) content to have a gray background and the content elements within it to have a black background...

    I've got a live version of the "table" page I'm trying to replicate here: http://www.luciddesignstudio.net/home.shtml

    Here is the html for the new layout:
    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" />
    <title>Lucid Home</title>
    
    <link rel="stylesheet" type="text/css"
    href="style2.css" />
    
    </head>
    
    
    
    <!--Beginning of page layout -->
    <body bgcolor="#000000">
    
    <center>
    
    <div id="container">
    
    <div id="header"><!--#include file="header.htm"--></div>
        
    <div id="content">
        
        <div class="col1"></div>
        
    	<div class="col2">
        
        	<div id="introimg"><img src="images/cot_intro.gif" alt="Introduction"></div>
        
       		<div id="intro"><text><p>
    		Welcome!&nbsp;
    		<br>
    		<br>
    		Lucid Design Studio provides high-end 3D animation for video, television, and the web. We specialize in developing content for the architectural and engineering 							fields using the latest technology to give you highly creative and sophisticated solutions to maximize the impact of your design.
    		</p>
    		<p>
    		Whether you are familiar with 3D digital content creation or you are new to 3D animation, Lucid Design Studio will help you from beginning to end, making sure our animation matches your design.
    		</p></text></div>
            
        	<div id="newsimg"><img src="images/cot_news.gif" alt="Community News"></div>
        
        	<!--- Start of Creative-3D News Clip --->
    		<!--- Valid Filenames are news1.js to news10.js --->
        	<div id="news"><text><script language = "JavaScript" src="http://www.creative-3d.net/newsfeeds/news3.js"></script></text></div>
        
        	<div id="newsftrimg"><img src="images/intro_shadow.gif"></div>
        
        </div>
        
        <div class="col3">
        
    		<div id="projimg"><img src="images/cot_lastproj.gif" alt="Recent Projects"></div>
        
        	<div id="proj1"><texthdr>Project 1</texthdr></div>
        
        	<div id="proj2"><texthdr>Project 2</texthdr></div>
        
    	</div>
        
        <div class="col4"></div>
        
    </div>
        
        <div id="footer"><!--#include file="footer.htm"--></div>
        
    </div>
    
    </center>
    </body>
    </html>
    And here is the CSS I have so far:
    Code:
    body {
    	margin:0;
    	padding:0;
    	}
    
    #container {
    	background-color:#333333;
        margin-left: auto;
        margin-right: auto;
    	width:733px;
    	}
    
    #container #header {
    	background-color:#000000;
    	width:733px;
    	text-align:center;
    	font:24px Verdana, Arial, Helvetica, sans-serif;
    	}
    
    #container #content {
    	font:12px Verdana, Arial, Helvetica, sans-serif;
    	text-align:center;
    	width:733px;
    	}
    
    #content .col1 {
    	float:left;
    	background-color:#333333;
    	width: 11px;
    	height:100%;
    	}
    
    #content .col2 {
    	float:left;
    	width:300px;
    	background-color: #000000;
    	height:400px;
    	}
    
    #content .col3 {
    	float:left;
    	width:400px;
    	margin-left:11px;
    	background-color: #000000;
    	}
    
    #content .col4 {
    	float:left;
    	background-color:#333333;
    	width: 11px;
    	}
    
    text {
    	background-color:#000000;
    	color: #FFFFFF;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-align: left;
    	padding: 5px 5px 5px 5px;
    	}
    	
    texthdr {
    	background-color:#000000;
    	color: #FFFFFF;
    	font:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	text-align: justify;
    	font-weight: bold;
    	}
    	
    a:link { 
    	color: #FFFFFF;
    	}
    a:visited { 
    	color: #333333;
    	}
    a:hover { 
    	color: #CCCCCC;
    	text-decoration: none;
    	}
    a:active { 
    	color: #333333;
    	}
    
    div.introimg {
    	background-color: #333333;
    	}
    	
    div.intro {
    	background-color: #000000;
    	padding: 10px 10px 10px 10px;
    	overflow:hidden;
    	border: 5px;
    	text-align: left;
    	min-height:100px;
    	}
    	
    div.newsimg {
    	background-color: #333333;
    	}
    	
    div.news {
    	padding: 10px 10px 10px 10px;
    	background-color: #000000;
    	overflow:hidden;
    	min-height:200px;
    	text-align: left;	
    	}
    	
    * html news {
      height: 100px;
      }
    	
    div.newsftrimg {
    	margin-top:15px;
    	}
    	
    div.projimg {
    	background-color: #000000;
    	}
    	
    proj1 {
    	background-color: #000000;
    	}
    	
    proj2 {
    	background-color: #000000;
    	}
    	
    #container #footer {
    	clear:both;
    	background-color:#000000;
    	width:733px;
    	font:12px Arial, Helvetica, sans-serif;
    	text-align:center;
    	vertical-align: bottom;
    	}
    I hope someone can get me on the right track. I'm no expert in CSS by any means, but I'm trying!

    Thanks for any help you can give!

  2.  

  3. #2
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I didn't have time to sort out your column problem, and I'm sorry as I know it was the problem you wanted fixed, but I'll look at that later.

    There was, however some other things I found when playing around with your new code.

    The use of <center> is not not valid html and does not go with any doc type. How you should do it is to wrap your site in a div, and center the div on the page, like so:
    HTML
    Code:
    <div id="wrapper">
    site content goes here
    </div>
    CSS
    Code:
    div#wrapper
    {
    width: 800px; /* change this width to suit your needs */
    margin: 0 auto;
    padding: 0 auto;
    }
    Another thing I found was the use of <body bgcolor="#000000">.Again, like <center>, this shouldn't be done. Instead, in your CSS, in the body styling, put this:
    Code:
    body
    {
    background: #000000;
    }
    Notice the use of a lot of CSS in styling. Try to use it as much as possible.


    Also, I noticed that lots of your text was black on black background - so I couldn't read it. I changed that, as you'll see in the below amended code. Also, lots of your elements had stuff like id's, but in the css you refered to them as having classnames, so therefore they weren't getting styling. I only fixed a few, so there could be more.

    So below I've pasted in the amended code with the above changes I've said, so see how that works, however there could be more for you to do, I've just started you off, and as I said, I'll keep working on the column problem.

    [btw, i'd consider running your site through the xhtml and css validator ad w3.org, just to make sure - it doesn't hurt]

    Hope I was a help!

    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" />
    <title>Lucid Home</title>
    
    <link rel="stylesheet" type="text/css"
    href="style2.css" />
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        background: #000000;
        }
    
    div#wrapper
    {
    width: 733px;
    margin: 0 auto;
    padding: 0 auto;
    }
    
    #container {
        background-color:#333333;
        margin-left: auto;
        margin-right: auto;
        width:733px;
        }
    
    #container #header {
        background-color:#000000;
        width:733px;
        text-align:center;
        font:24px Verdana, Arial, Helvetica, sans-serif;
        }
    
    #container #content {
        font:12px Verdana, Arial, Helvetica, sans-serif;
        text-align:center;
        width:733px;
        }
    
    #content .col1 {
        float:left;
        background-color:#333333;
        width: 11px;
        height:100%;
        }
    
    #content .col2 {
        float:left;
        width:300px;
        background-color: #000000;
        height:400px;
        }
    
    #content .col3 {
        float:left;
        width:400px;
        margin-left:11px;
        background-color: #000000;
        }
    
    #content .col4 {
        float:left;
        background-color:#333333;
        width: 11px;
        }
    
    text {
        background-color:#000000;
        color: #FFFFFF;
        font:Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        text-align: left;
        padding: 5px 5px 5px 5px;
        }
        
    texthdr {
        background-color:#000000;
        color: #FFFFFF;
        font:Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        text-align: justify;
        font-weight: bold;
        }
        
    a:link { 
        color: #FFFFFF;
        }
    a:visited { 
        color: #333333;
        }
    a:hover { 
        color: #CCCCCC;
        text-decoration: none;
        }
    a:active { 
        color: #333333;
        }
    
    div.introimg {
        background-color: #333333;
        }
        
    div#intro {
        background-color: #000000;
        padding: 10px 10px 10px 10px;
        overflow:hidden;
        border: 5px;
        text-align: left;
        min-height:100px;
        color: #ffffff;
        }
        
        
    div.newsimg {
        background-color: #333333;
        }
        
    div.news {
        padding: 10px 10px 10px 10px;
        background-color: #000000;
        overflow:hidden;
        min-height:200px;
        text-align: left;    
        }
        
    * html news {
      height: 100px;
      }
        
    div.newsftrimg {
        margin-top:15px;
        }
        
    div.projimg {
        background-color: #000000;
        }
        
    div#proj1 {
        background-color: #000000;
        color: #ffffff;
        }
        
    #proj2 {
        background-color: #000000;
        color: #ffffff;
        }
        
    #container #footer {
        clear:both;
        background-color:#000000;
        width:733px;
        font:12px Arial, Helvetica, sans-serif;
        text-align:center;
        vertical-align: bottom;
        }
    </style>
    </head>
    
    
    
    <!--Beginning of page layout -->
    <body>
    
    <div id="wrapper">
    
    <div id="container">
    
    <div id="header"><!--#include file="header.htm"--></div>
        
    <div id="content">
        
        <div class="col1"></div>
        
        <div class="col2">
        
            <div id="introimg"><img src="images/cot_intro.gif" alt="Introduction"></div>
        
               <div id="intro"><text><p>
            Welcome!&nbsp;
            <br>
            <br>
            Lucid Design Studio provides high-end 3D animation for video, 
            television, and the web. We specialize in developing content for the 
            architectural and engineering fields using the latest technology to give 
            you highly creative and sophisticated solutions to maximize the impact 
            of your design.
            </p>
            <p>
            Whether you are familiar with 3D digital content creation or you are new 
            to 3D animation, Lucid Design Studio will help you from beginning to 
            end, making sure our animation matches your design.
            </p></text></div>
            
            <div id="newsimg"><img src="images/cot_news.gif" alt="Community News"></div>
        
            <!--- Start of Creative-3D News Clip --->
            <!--- Valid Filenames are news1.js to news10.js --->
            <div id="news"><text><script language = "JavaScript" src="http://www.creative-3d.net/newsfeeds/news3.js"></script></text></div>
        
            <div id="newsftrimg"><img src="images/intro_shadow.gif"></div>
        
        </div>
        
        <div class="col3">
        
            <div id="projimg"><img src="images/cot_lastproj.gif" alt="Recent Projects"></div>
        
            <div id="proj1"><texthdr>Project 1</texthdr></div>
        
            <div id="proj2"><texthdr>Project 2</texthdr></div>
        
        </div>
        
        <div class="col4"></div>
        
    </div>
        
        <div id="footer"><!--#include file="footer.htm"--></div>
        
    </div>
    
    </div>
    </body>
    </html>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:11 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com