Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Any one can help me fix this css coding please?

raja
in Frontend

Featured Replies

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:

 

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

 

This is the css :

#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 :

 

<!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 Uploaded to Mediafire :

 

http://www.mediafire.com/?ndptlut2mzf

Well for starters why do you need the frameset? surely you only need one html page so just put you site in the body tag.

  • Author
Well for starters why do you need the frameset? surely you only need one html page so just put you site in the body tag.

 

 

i don used frames. i used co.nr to shorten my url.Ok i edited the post and now i post the actual url please see it now.

 

Regards

Raja

Your stylesheet seems unnessecarily long.

 

Get rid of the tables.

 

and please do not send private messages asking for help, it is annoying. People will help you in their own good time. I have my own pile of students to take care of, IRL.

 

If you pay, you can demand. If not, you must be more patient than your two posts suggests.

 

And do your research. I am not a sir.

You have not actually stated what your problem is.

 

Also, you have already been advised to remove the tables.

 

 

You need to be a bit more explicit about what help you need.

  • Author

i have already removed the tables and updated the live demo page. i have 3 problems. the text at the box is not centered.Please see the image-1. i added class to the big text at the main content.But its not taking efect as per my css . And the sign up button is displaced from its div please see the image 3.Am a novice in css

 

Image-1

 

f228fn.jpg

 

Image-2

 

24niih0.jpg

 

Image-3

 

68h7xy.jpg

Ok this is not the best solution however it works, in your boxheadertext, set line-height to 55px.

 

.boxheadertext{

font-family: Tahoma, Arial;

font-size: 15px;

color: #FFFFFF;

text-align: center;

vertical-align: middle;

margin: auto;

text-decoration: none;

padding:0;

line-height: 55px;

}

 

That solves problem number one. I'm working on the rest.

 

Edit:

I'm not sure what your problem is with your big_text not taking effect "as per your css". The css class big text does indeed control that block of text.

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.