1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Problem?

Discussion in 'HTML, Graphics & Programming' started by unknowndomain, 6 Feb 2006.

  1. unknowndomain

    Mobster

    Joined: 18 Apr 2004

    Posts: 2,613

    Location: Herne Hill, London

    Hey I have to design a website for a college assignment and I have setup div tags to load in the corners to make them curved but suddenley they have stopped working and I dont know why please could you all have a look...

    HTML
    Code:
    <!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">
    <head>
    <title>Lifestyle - Advice and information about Gardening, Parenting, Food, DIY and Fashion</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    
    <div>
    
    	<div class="header">
    		<div class="logo"><a href="index.htm"><img src="images/logo.png" alt="LOGO: Lifestyle (Green)" /></a></div>
    		<div class="date"><p class="date">Sunday, 5th February 2006</p></div>
    	</div>
    	
    	<div class="banner">
    		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="680" height="170">
    			<param name="movie" value="images/header.swf" /> 
    			<param name="quality" value="high" />
    			<param name="bgcolor" value="#FFFFFF" />
    			<!--[if !IE]> <-->
    		<object data="images/header.swf" width="680" height="170" type="application/x-shockwave-flash">
    			<param name="quality" value="high" />
    			<param name="bgcolor" value="#FFFFFF" />
    			<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
    			FAIL (Your browser is not compatable with flash).
    		</object>
    			<!--> <![endif]-->
    		</object>
    	</div>
    	
    	<div class="leftpanel">
    		
    		<div>
    			<div class="tlc"></div>
    			<div class="tmf"></div>
    			<div class="trc"></div>
    		</div>
    		
    		<div class="cmc">
    			<h1>Explore</h1>
    			<div class="explore"><a href="/garden"><img src="images/lifestyle_logo_garden_grey.png" alt="LOGO: Lifestyle Garden" /></a></div>
    			<div class="explore"><a href="/food"><img src="images/lifestyle_logo_food_grey.png" alt="LOGO: Lifestyle Food" /></a></div>
    			<div class="explore"><a href="/fashion"><img src="images/lifestyle_logo_fashion_grey.png" alt="LOGO: Lifestyle Fashion" /></a></div>
    			<div class="explore"><a href="/homes"><img src="images/lifestyle_logo_homes_grey.png" alt="LOGO: Lifestyle Homes" /></a></div>
    			<div class="explore"><a href="/parent"><img src="images/lifestyle_logo_parent_grey.png" alt="LOGO: Lifestyle Parent" /></a></div>
    			<div class="explore"><a href="/talk"><img src="images/lifestyle_logo_talk_grey.png" alt="LOGO: Lifestyle Talk" /></a></div>
    		</div>
    		
    		<div>
    			<div class="blc"></div>
    			<div class="bmf"></div>
    			<div class="brc"></div>
    		</div>
    		
    	</div>
    	
    	<div class="centerpanel">
    	
    		<div>
    			<div class="tlc"></div>
    			<div class="tmf"></div>
    			<div class="trc"></div>
    		</div>
    		
    		<div class="cmc">
    		
    			<h1>Headline</h1>
    			<h2>Lorem ipsum elit</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque eget est. Integer ultricies placerat massa. Sed condimentum tellus nec tellus.</p>
    			<p><a href="article.htm">Read More</a></p>
    			
    			<h1>Headline</h1>
    			<h2>Lorem ipsum elit</h2>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque eget est. Integer ultricies placerat massa. Sed condimentum tellus nec tellus.</p>
    			<p><a href="article.htm">Read More</a></p>
    			
    		</div>
    		
    		<div>
    			<div class="blc"></div>
    			<div class="bmf"></div>
    			<div class="brc"></div>
    		</div>
    		
    	</div>
    	
    	<div class="rightpanel">
    	
    		<div>
    			<div class="tlc"></div>
    			<div class="tmf"></div>
    			<div class="trc"></div>
    		</div>
    		
    		<div class="cmc">
    			<h1>Search</h1>
    			<fieldset>
    				<form action="index.htm" method="get">
    					<p>
    						<input name="search" type="text" size="13" />
    						<input type="submit" value="Search" />
    					</p>
    				</form>
    			</fieldset>
    			
    			<h1>Talk!</h1>
    			<ul>
    				<li>
    				<a href="thread.htm">Thread Title 1#</a></li>
    				<li><a href="thread.htm">Thread Title 2#</a></li>
    				<li><a href="thread.htm">Thread Title 3#</a></li>
    				<li><a href="thread.htm">Thread Title 4#</a></li>
    				<li><a href="thread.htm">Thread Title 5#</a></li>
    		 	</ul>
    		</div>
    		
    		<div>
    			<div class="blc"></div>
    			<div class="bmf"></div>
    			<div class="brc"></div>
    		</div>
    		
    	</div>
    
    </div>
    
    </body>
    </html>
    CSS
    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    }
    div.header {
    	position: relative;
    	left: 0px;
    	top: 0px;
    	height: 50px;
    	width: 700px;
    }
    div.logo {
    	width: 119px;
    	position: relative;
    	left: 10px;
    	top: 10px;
    }
    img {
    	border: 0px none;
    }
    div.date {
    	position: absolute;
    	top: 10px;
    	right: 10px;
    	text-align: right;
    	font-size: 10px;
    	width: 200px;
    }
    div.leftpanel {
    	position: absolute;
    	width: 220px;
    	left: 10px;
    	top: 230px;
    	background-color: #f0f0f0;
    }
    
    div.centerpanel {
    	position: absolute;
    	width: 220px;
    	left: 240px;
    	top: 230px;
    	background-color: #f0f0f0;
    }
    
    div.rightpanel {
    	position: absolute;
    	width: 220px;
    	top: 230px;
    	left: 470px;
    	background-color: #f0f0f0;
    }
    div.tlc {
    	background-attachment: scroll;
    	background-image: url(../images/tlc.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    	position: absolute;
    	height: 20px;
    	width: 20px;
    	left: 0px;
    	top: 0px;
    }
    div.trc {
    	background-attachment: scroll;
    	background-image: url(../images/trc.png);
    	background-repeat: no-repeat;
    	background-position: right top;
    	position: absolute;
    	height: 20px;
    	width: 20px;
    	top: 0px;
    	right: 0px;
    }
    h1 {
    	margin: 0px;
    	padding: 0px;
    	font-size: 18px;
    	font-weight: bold;
    }
    h2 {
    	font-size: 14px;
    	margin: 0px;
    	padding: 0px 0px 10px;
    	font-style: italic;
    	font-weight: normal;
    }
    p {
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px 0px 10px;
    }
    div.cmc {
    	padding: 20px;
    }
    div.blc {
    	background-attachment: scroll;
    	background-image: url(../images/blc.png);
    	background-repeat: no-repeat;
    	background-position: left bottom;
    	position: absolute;
    	height: 20px;
    	width: 20px;
    	left: 0px;
    	bottom: 0px;
    }
    div.brc {
    	background-attachment: scroll;
    	background-image: url(../images/brc.png);
    	background-repeat: no-repeat;
    	background-position: right bottom;
    	position: absolute;
    	height: 20px;
    	width: 20px;
    	right: 0px;
    	bottom: 0px;
    }
    div.banner {
    	position: absolute;
    	width: 680px;
    	left: 10px;
    	top: 50px;
    	height: 170px;
    }
    div.explore {
    	padding-top: 10px;
    }
    form {
    	margin: 0px;
    	padding: 0px;
    }
    fieldset {
    	margin: 0px;
    	padding: 0px 0px 10px;
    	border: 0px none;
    }
    input {
    	border: 1px dotted #000000;
    }
    a:link {
    	font-style: italic;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    a:visited {
    	font-style: italic;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    a:hover {
    	font-style: italic;
    	font-weight: normal;
    	color: #cccccc;
    	text-decoration: none;
    }
    a:active {
    	font-style: italic;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    p.date {
    	padding-top: 10px;
    	padding-right: 0px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    	margin: 0px;
    }
    ul {
    	padding-left: 20px;
    }
    li {
    	margin: 0px;
    	padding: 0px;
    }