Re: [css-d] Started over - new questions

Thu, 18 May 2006 15:56:09 -0700 

Hell Marc,

here's a quick'n'dirty fix. NEVER again go for tables - keep on CSS. 
Please accept that it might not be fail-save for all browsers (not 
tested) and that again you have to work it over. Hope that it can give 
you some hints - keep in mind that I'm still learning, too.

Get TopStyle <http://www.bradsoft.com/index.asp> and validate your CSS 
as well your XHTML often cause there were some in your slips of the pen 
in your code. You will learn a lot of TopStyle and its results while 
validating. You will see...

Don't use PNG for images, only GIFs or JPGs.

HTH

Niklas

First the CSS then the XHTML:

body {
        margin: 0;
        padding: 0;
        background-color: #346667;
}


/* main page elements */
#Container_Header {
        height: 117px;
}
#Container_Middle_Top {
        background-color: #CDFFCC;
        width: 943px;
        height: 40px;
        margin-left: 8px;
        font-size: 0.8em;
        letter-spacing: -0.05em;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        line-height: 1.0em;
        /* here the background-image with the rounded
        corners like Container_Middle_End */
}
#Container_Middle {
        background-color: #CDFFCC;
        width: 943px;
        margin-left: 8px;
}
#Container_Middle_End {
        background-color: #CDFFCC;
        width: 943px;
        height: 69px;
        margin-left: 8px;
        /* this image has a too large left margin,
        yout have to cut it on the left */
        background-image: url(images/Base_29.jpg);
        background-position: left top;
        background-repeat: no-repeat;
}
#Container_LeftNavColumn{
        width: 266px;
        margin-left: 10px;
        margin-top: 120px;
        float: left;
}
#Container_MainContent {
        background-color: #FFFFFF;
        width: 600px;
        margin-left: 300px;
}
#Container_MainContent_Footer {
        background-color: #FFFFFF;
        width: 600px;
        margin-left: 300px;
}


/* header elements */
#TreeLogo {
        position: absolute;
        top: 0px;
        left: 10px;
        margin-left: 24px;
        margin-right: 3px;
}
#MastheadTitle{
        margin-left: 260px;
        margin-bottom: 4px;
}
#NYSLitMap {
        margin-left: 33px;
        margin-right: -12px;
        margin-bottom: 4px;
}
#NYCLitMap {
        margin-bottom: 4px;
}



-------------------------------------------

<!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>Page Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 
/>
        <link href="Default.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="Container_Header">
        <img src="images/TreeLogo.png" width="245" height="254" alt="" 
id="TreeLogo" />
        <img src="images/MastheadTitle.png" width="397" height="109" alt="" 
id="MastheadTitle" />
        <img src="images/NYSLitMap.png" width="117" height="104" alt="" 
id="NYSLitMap" />
        <img src="images/NYCLitMap.png" width="115" height="109" alt="" 
id="NYCLitMap" />
</div>

<div id="Container_Middle_Top">
        <div style="margin-left: 300px;">HOME   &middot;  ABOUT THE NYS 
LITERARY TREE  &middot;  CONTACT US  &middot;  ABOUT THE MAPS  &middot; 
  SITE SEARCH</div>
</div>

<div id="Container_Middle">     
        <div id="Container_LeftNavColumn">
                <img src="images/LeftHairline.png" width="266" height="1" 
alt="" /><br />
                Navigation to go here.<br />
                Lorem ipsum dolor sit <br />
                Lorem ipsum dolor sit <br />
                Lorem ipsum dolor sit <br />
                Lorem ipsum dolor sit <br />
                Lorem ipsum dolor sit
        </div>
        <div id="Container_MainContent">
                Body content here<br />
                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 exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit 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 exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit 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 exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
        </div>
        <div id="Container_MainContent_Footer">
                Copyright &copy; 2006, nyslittree.org &middot; Website design 
by 
Genden Graphic Design LLC  &middot; Development & Hosting by Advantex LLC
        </div>
</div>

<div id="Container_Middle_End">
</div>

</body>
</html>



______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to