Dynadot — .com Registration $8.99

Any one can help me fix this css coding please?

Spaceship Spaceship
Watch
P

prince20

New Member
★ 15 ★
Impact
0
Hi Friends i made this web Template using photoshop cs3 and i just started coding it pure css . Am a novice at css and i eneded up some thing like this (Please see the Live demo page) I also added the entire css along with the Html.Also added all the sliced images and html fles.please some one help me fix the css problems please.Thanks in advance.

Regards
Raja

This is the actual template i made using photoshop.

6nqiy8.jpg



This is the Live Demo page:

Code: 
http://rajaportfolio.freehostia.com/mafic/new.htm


This is the css :
Code: 
#logo{
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	height: 71px;
	width: 900px;
}
#navbar{
	font-family: Tahoma, Arial;
	background-image: url(images/navbar.png);
	background-repeat: no-repeat;
	height: 39px;
	width: 900px;
	font-size: 14px;
	color: #838383;
	text-decoration: none;
	padding: 0px;
	text-align: left;
	margin: 0px;
}
#header{
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	height: 151px;
	width: 900px;
}
#maincontent{
	width: 900px;
	background-color: #FFFFFF;
}
#footer{
	background-image: url(images/footer.png);
	background-repeat: no-repeat;
	height: 41px;
	width: 900px;
}
#wrapper{
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#shadow{
	background-image: url(images/mainshadow.png);
	float: left;
	height: 74px;
	width: 618px;
}
#reach{
	background-image: url(images/reach.png);
	background-repeat: no-repeat;
	float: left;
	height: 139px;
	width: 282px;
}
#middlecontent{
	height: 275px;
	width: 900px;
}
#leftbox{
	height: 275px;
	width: 302px;
	float: left;
}
#mddlebox{
	height: 275px;
	width: 297px;
	float: left;
}
#rightbox{
	float: left;
	height: 275px;
	width: 301px;
}
html,body{
	background-position: 0px 0px;
	background-image: url(images/background.png);
	background-repeat: repeat;
}
.clearthis{
	clear: both;
}
#maincontentleft{
	float: left;
	width: 618px;
}
#maincontentright{
	width: 282px;
	float: left;
}
#box1header{
	background-image: url(images/box1header.png);
	height: 50px;
	width: 302px;
	background-repeat: no-repeat;
}
#box1image{
	background-image: url(images/box1image.png);
	background-repeat: no-repeat;
	height: 89px;
	width: 302px;
}
#box1left{
	background-image: url(images/box1left.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 36px;
	float: left;
}
#box1right{
	background-image: url(images/box1right.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 30px;
	float: left;
}
#box1main{
	background-image: url(images/box1main.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 236px;
	float: left;
}
#box1bottom{
	background-image: url(images/box1footer.png);
	background-repeat: no-repeat;
	height: 32px;
	width: 302px;
	float: left;
}
#box2header{
	background-image: url(images/box2header.png);
	background-repeat: no-repeat;
	height: 50px;
	width: 297px;
}
#box2image{
	background-image: url(images/box2image.png);
	background-repeat: no-repeat;
	height: 89px;
	width: 297px;
}
#box2left{
	background-image: url(images/box2left.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 28px;
	float: left;
}
#box2right{
	background-image: url(images/box2right.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 31px;
	float: left;
}
#box2main{
	background-image: url(images/box2main.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 238px;
	float: left;
}
#box2bottom{
	background-image: url(images/box2footer.png);
	background-repeat: no-repeat;
	height: 32px;
	width: 297px;
	clear: left;
}
#box3header{
	background-image: url(images/box3header.png);
	background-repeat: no-repeat;
	height: 50px;
	width: 301px;
}
#box3image{
	background-image: url(images/box3image.png);
	background-repeat: no-repeat;
	height: 89px;
	width: 301px;
}
#box3main{
	background-image: url(images/box3main.png);
	background-repeat: no-repeat;
	height: 72px;
	width: 244px;
	float: left;
}
#box3lftres{
	background-image: url(images/box3leftresidue.png);
	background-repeat: no-repeat;
	height: 32px;
	width: 67px;
	float: left;
}
#box3rhtres{
	background-image: url(images/box3rhtresidue.png);
	background-repeat: no-repeat;
	height: 32px;
	width: 51px;
	float: left;
}
#box3sign{
	float: left;
	height: 32px;
	width: 126px;
}
#box3bottom{
	background-image: url(images/box3footer.png);
	background-repeat: no-repeat;
	clear: right;
	height: 32px;
	width: 301px;
}
#box3lft{
	background-image: url(images/box3left.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 22px;
	float: left;
}
#box3rht{
	background-image: url(images/box3right.png);
	background-repeat: no-repeat;
	height: 104px;
	width: 35px;
	float: left;
}
#navbar a:link {
	font-family: Tahoma, Arial;
	font-size: 14px;
	color: #838383;
	text-decoration: none;
}
#navbar a:visited {
	font-family: Tahoma, Arial;
	font-size: 14px;
	color: #666666;
	text-decoration: none;
}
#navbar a:hover {
	font-family: Tahoma, Arial;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: underline;
}
a:active {
	font-family: Tahoma, Arial;
	font-size: 14px;
	color: #FF9900;
	text-decoration: none;
}
.navbartext{
	font-family: Tahoma, Arial;
	font-size: 14px;
	color: #838383;
	text-align: left;
	vertical-align: middle;
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.boxheadertext{
	font-family: Tahoma, Arial;
	font-size: 15px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	text-decoration: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.boxtext{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}
#lnks{
	background-image: url(images/side.jpg);
	background-repeat: repeat-y;
	width: 282px;
	float: left;
}
#maincontent1{
	background-color: #FFFFFF;
	width: 618px;
	float: left;
	height: 400px;
}
.lnkstext{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	padding-left: 5px;
}
.big_txt {
	font-family: Georgia, Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #933d18;
	padding-bottom:5px;
}
.small_txt{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.footertext{
	font-family: Tahoma, Arial;
	font-size: 12px;
	color: #838383;
	padding-top: 5px;
	padding-left: 8px;
	margin: 0px;
}
.footertext a:link {
	font-family: Tahoma, Arial;
	font-size: 12px;
	color: #838383;
	text-decoration: none;
}
.footertext a:visited {
	font-family: Tahoma, Arial;
	font-size: 12px;
	color: #838383;
	text-decoration: none;
	font-weight: bold;
}
.footertext a:hover {
	font-family: Tahoma, Arial;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
}
.footertext a:active {
	font-family: Tahoma, Arial;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}

This is the HTML :

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

<body>
<div id="wrapper">

  <div id="logo"></div>
  <div id="navbar">
	<div align="center" class="navbartext"><a href="#">Home </a>        <a href="#">Button1</a>        <a href="#">Button2</a>        <a href="#">Button3</a>        <a href="#">Button4</a>         <a href="#">Button5</a>            <a href="#">Button6</a> </div>
  </div>
  <div id="header"></div> 
											   
	  <div id="middlecontent">
		<div id="leftbox"> 
			 <div class="boxheadertext" id="box1header">Yout Text</div>
			 <div id="box1image"></div>
			 <div id="box1left"></div>
			 <div class="boxtext" id="box1main">Add some text here.. Add some Text Here.Add some Text here.Add some Text here.</div>
		  <div id="box1right"></div>
			 <div id="box1bottom"></div>
						 
		</div>
									   
						  
						   
		   <div id="mddlebox">
			 <div class="boxheadertext" id="box2header">Your Text</div>
			 <div id="box2image"></div>
			 <div id="box2left"></div>
			 <div id="box2main"><span class="boxtext">Add some text here.. Add some Text Here.Add some Text here.Add some Text here.</span></div>
			 <div id="box2right"></div>
			 <div id="box2bottom"></div>
		 
		   
		</div>
			 
		   <div id="rightbox">
			 <div class="boxheadertext" id="box3header">Your Text</div>
			 <div id="box3image"></div>
			 <div id="box3lft"></div>
			 <div id="box3main"><span class="boxtext">Add some text here.. Add some Text Here.Add some Text here.Add some Text here.</span></div> 
			 <div id="box3rht"></div>						 
			 <div id="box3lftres"></div>
			 <div id="box3sign"><img src="images/signupbtn.png" alt="Sign Up Now!!" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="12,7,118,27" href="#sign up" />
</map></div>
			 <div id="box3rhtres"></div>
			 <div id="box3bottom"></div>
		</div>
										
		   
  </div>
										 
										  
										
	  <div id="maincontent">
	  
		<div id="maincontentleft">	  
			<div id="shadow"></div> 
			 <div class="big_txt" id="maincontent1">Add a Big Text here</div>				   
		</div>   
		<div id="maincontentright">  
			<div id="reach"></div> </div>
			<div id="lnks"><table width="282" border="0">
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link1</td>
  </tr>
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link2</td>
  </tr>
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link3</td>
  </tr>
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link4</td>
  </tr>
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link5</td>
  </tr>
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link6</td>
  </tr>
  <tr>
	<td width="23" height="23"><img src="images/dot.jpg" width="23" height="23" /></td>
	<td class="lnkstext">Link7</td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
  <tr>
	<td width="23" height="23"> </td>
	<td> </td>
  </tr>
</table>
</div>
	  
  </div>   
																   
										<div class="clearthis"></div> 
										
	  <div class="footertext" id="footer"><a href="#">Home</a>      <a href="#">Pacjages</a>      <a href="#">Pricing</a>      <a href="#">Advertisers</a>      <a href="#">Free SEO</a>    <a href="#">Tools</a>      <a href="#">Resellers</a>      <a href="#">Publishers</a>      <a href="#">FAQ</a> </div>
  
</div>		  
</body>
</html>

This is the sliced Images and the Html Files :

Code: 
http://www.mediafire.com/?ndptlut2mzf
 
Reply
0
0 Like
0 Thanks
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable DomainsUnstoppable Domains
Sort by date Sort by points
In all honesty I wouldn't know where to start with this design, it seems you've sliced into CSS straight from photoshop which is really not reccomended as it overcomplicates the design SO much!

My advice is to code the CSS and HTML by hand, use images only when you need to, for example on the side of the center boxes youve got one image thats white for the most part with a thin orange line to create the border. Instead of an image use the margin property and create a thin 1px orange border.

You'll probably dislike me now for not helping fix the design but it'll be quicker to start again from scratch, using images only if you have to, Good luck with the design, its pretty nice! :)
 
Reply
0
0 Like
0 Thanks
•••
well first thing, get firefox and and firebug. it's magical with onthefly css/html editing.

first step would be to padding-top to box1header etc so that the text gets moved down.

then to fix the whitespace that you get underneath, you should use position and make it relative and make the top be like -10 or whatever so it lines up again.

also, the part on the right is messed up because you probably didnt set the whole thing to the right width.

basically, use firebug, add/edit some css properties, and see which gets you th eresults you want.

it's how all the masters do it XD
 
Reply
0
0 Like
0 Thanks
•••
well, it seems you're doing this for a client, so I'd suggest you to tell him/her you'll make it with tables at least until you learn CSS. The way it is right now, you have to start from 0. If you still feel like doing it, you just need 8-10 divs for that design at most, not 1 million like you have right now which makes it almost impossible to fix. OR use ImageReady output code AS IS and only replace backgrounds and try not to mess around with it if it isn't ABSOLUTELY needed. just use 3 general divs (header, the 3 columns and main content) and then use the same CLASS for the columns and 2 columns for the main content and you'll be close. Very basic, but it will work.

btw, remember to do some reading proof before you deliver a design. and that badge with characters upside-down is a no-no.

ah, just noticed that in fact you're using tables and mixing it with divs. not sure what you're trying to achieve, but you'd work either tables either tableless.

plus, your css style sheet is big and complex for such an extremely simple page. Repeat elements as much as you can, reuse the same classes, define elements with some logic otherwise you'll need to work these giant stylesheets for each and every page. And where it says .bigtext that should be a h2 tag. you know, the beauty of CSS is also the SE advantages it has, if you want to design on pure CSS get used to work always with semantic CSS
 
Reply
0
0 Like
0 Thanks
•••
I don't understand your question, what do you feel is problem with this page as it look fine and also code is good enough, where do you wish to have change
 
Reply
0
0 Like
0 Thanks
•••
your live demo site is offline :o
 
Reply
0
0 Like
0 Thanks
•••
Log in or sign up to reply here.

  1. TrainCoin.org

    • Show Price

  2. rndcapital.com

    • Make Offer

  3. Unfamiliar.ai

    • Make Offer

  4. MagicTruffleOil.com

    • Make Offer

  5. DatingChain.com

    • Show Price

  6. UPUSD.com

    • Show Price

  7. DataScrapingAi.com

    • Make Offer

  8. Quantumzoetic.com

    • Buy Now
    • $2,599

  9. jewelerbrooklyn.com

    • Make Offer

  10. PsychicHealingCenter.com

    • Make Offer

Similar threads

PoorDoggie
White "bar" at the side of table.
1 reply
611 views
Rudy
Rudy
edmarriner
Little bit of css help needed
3 replies
1K views
hairat angaiz
H
Breakpoint
[Resolved] Left Menu Not Working in IE (I'm a noob(
2 replies
813 views
Breakpoint
Breakpoint
D
Various CSS problems
1 reply
1K views
LeetPCUser
LeetPCUser
M
Freak Firefox glitch? HTML/CSS help?
2 replies
1K views
pixelbypixel
pixelbypixel

We're social

Escrow.com

New posts ➔

Spaceship

Auction activity ➔

Unstoppable Domains

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest ➔

CryptoExchange.com

Hot this week ➔

Domain Recover

Community favorite ➔

Trustap

Hot this month ➔

DomainEasy — Zero Commission

Blog favorites

DomDB

  1. TrainCoin.org

    • Show Price

  2. rndcapital.com

    • Make Offer

  3. Unfamiliar.ai

    • Make Offer

  4. MagicTruffleOil.com

    • Make Offer

  5. DatingChain.com

    • Show Price

  6. UPUSD.com

    • Show Price

  7. DataScrapingAi.com

    • Make Offer

  8. Quantumzoetic.com

    • Buy Now
    • $2,599

  9. jewelerbrooklyn.com

    • Make Offer

  10. PsychicHealingCenter.com

    • Make Offer
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back