eek! help me please - Webmaster Forum - Web Design, Programming and SEO forums

05-21-2006, 07:43 PM

mnkey_rbbr

Status: Member
Join date: Apr 2006
Location: New Plymouth, New Zealand
Expertise:
Software:

Posts: 415

iTrader: 1 / 100%

mnkey_rbbr is on a distinguished road

eek! help me please

okay first of all ignore the layout entirely i made this totally for coding practice... also the slicing wa svery quick and lazy lol...

Also its pink cause those were the colors in my pallete...

www.freewebs.com/worktest/

heres my source code:

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>Portfolio</title>
   <link rel="stylesheet" type="text/css"
   href="style2.css" />
   </head>

 <body>
   <!--CONTAINER-->
   <div id="container">

 
   <!--BANNER PART-->
   <div id="banner">
     <img  src="images/index_01.jpg" width="600" height="154" alt="Banner" />
   </div>
   <!--END OF BANNER PART-->
   
   
   <!--NAVIGATION PART-->
   <div id="nav">
   <ul>
     <li id="home"><a href="index2.html" >Home</a></li>
     <li id="aboutme"><a href="about_me.html" >About Me</a></li>
     <li id="mywork"><a href="my_work.html" >My Work</a></li>
     <li id="contactme"><a href="contact_me.html" >Contact Me</a></li>
   </ul>
   
   </div>
   <!--END OF NAVIGATION PART-->
   
   
   <!--CONTENT PART-->
   <div id="content">
    <div id="contenttop">
     <img  src="images/index_08.jpg" width="600" height="13" alt="content" />
	</div>
	<div id="newswelcome">
	 <div id="news">
	  <img  src="images/index_09.jpg" width="175" height="20" alt="News" />
	 </div>
	 <div id="welcome">
	  <img  src="images/index_10.jpg" width="425" height="20" alt="Welcome" />
	 </div>
	</div>
	<div id="newscontentarea">
	</div>
	<div id="welcomecontentarea">
	</div>
	<div id ="newestworkarea">
	 <div id="newestwork">
	  <img  src="images/index_13.jpg" width="424" height="23" alt="Newest Work" />
	 </div>
	 <div id="Newestworkcontentarea">
	 </div>
    </div>
   
   
   </div>
   <!--END OF CONTENT PART-->
  
   </div>   
 </body>
</html>

and heres my css:

Code:

/*CSS Document*/

body {
	margin-left: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #ffe0ee;
}

#container{
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#banner{
	width: 600px;
	height: 154px;
}

#nav{
    width: 600px;
	height: 37px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#nav ul{
    display: inline;
	list-style-type: none;
}
li{
    display: inline;
	width: 150px;
	height: 37px;
}

#home a{
    background: url(images/index_03.jpg);
    height: 37px;
	line-height: 3em;
    float: left;
    width: 150px;
    display: block;
    text-decoration: none;
    text-align: center;
	color: #FFFFFF;
} 
 

#aboutme a{
    background: url(images/index_04.jpg);
    height: 37px;
	line-height: 3em;
    float: left;
    width: 150px;
	display: block;
    text-decoration: none;
    text-align: center;
	color: #FFFFFF;
} 

#mywork a{
    background: url(images/index_05.jpg);
    height: 37px;
	line-height: 3em;
    float: left;
    width: 150px;
    display: block;
    text-decoration: none;
    text-align: center;
    color: #FFFFFF;
} 

#contactme a{
    background: url(images/index_06.jpg);
    height: 37px;
	line-height: 3em;
    float: left;
    width: 150px;
    display: block;
    text-decoration: none;
    text-align: center;
	color: #FFFFFF;
} 

#content{
    width: 600px;
	height: 350px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

#contenttop{
    width: 600px;
	height: 13;	
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

#newswelcome{
    width: 600px;
	height: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

#news{
    width: 175px;
	height: 20px;
	float: left;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

#welcome{
    width: 425px;
	height: 20px;
	float: right;	
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

#newscontentarea{
    float: left;
    background-image: url(images/index_11.jpg);
    width: 176px;
	height: 317px;
}

#welcomecontentarea{
    float: right;
	background-image: url(images/index_12.jpg);
	width: 424px;
	height: 137px;
}

#newestworkarea{
    width: 424px;
	height: 160px;
	float: right;
}

#newestwork{
    width: 424px;
	height: 23px;
	float: right;
}

#Newestworkcontentarea{
    background-image: url(images/index_14.jpg);
	width: 424px;
	height: 137px;
	float: right;
}

Question no 1

in IE why are there gaps in the content area and how can i fix these?

Question no 2

in FF theres a gap in the bottom right corner how can i push the image down so it fills this space...?

thanks for your help.

05-21-2006, 08:05 PM

Andrew R

Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:

Posts: 5,200

iTrader: 17 / 95%

Andrew R is on a distinguished road

First off, I wouldn't use images for the background. You can accomplish the same effect without using them.

05-21-2006, 08:22 PM

aLx

Status: Senior Member
Join date: Jan 2006
Location: USA
Expertise:
Software:

Posts: 922

iTrader: 13 / 100%

aLx is on a distinguished road

Put everything in a main div and set a bg color should work

05-22-2006, 04:12 AM

mnkey_rbbr

Status: Member
Join date: Apr 2006
Location: New Plymouth, New Zealand
Expertise:
Software:

Posts: 415

iTrader: 1 / 100%

mnkey_rbbr is on a distinguished road

as i said its not the layout im worried about im practicing for when i code an actual layout... as in i will be using images that arent just plain color...