PDA

View Full Version : CSS Help please



zoe20
Jul 8th, 2009, 05:11 PM
hi am new to css adn am trying to make a web site layout. I designed it in photoshop and sliced it and started to make the web site page. I wanted to add a logo, a small nav bar and a Image based search form. I attached the original pic of my layout and i also added the live demo of the page also added the css and the html.

This is the original image :
http://img189.imageshack.us/img189/4502/mock.jpg

This is the Live demo page :
Click Here

Heres the css :


body {
background: url(../images/bg.png) repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
color: #000;
}
#wrapper{
margin: 0px auto;
width: 1024px;
}
#header{
background: url(../images/top%20header.png) no-repeat;
height: 120px;
width: 1024px;
}
#logo{
background: no-repeat;
width: 478px;
height: 109px;
margin-top: 8px;
margin-left: 4px;
float: left;
}
#topnav{
float: right;
margin-top: 7px;
margin-right: 7px;
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;

}
#topnav a:link {
font-size: 11px;
text-decoration: none;
color: #000000;
}
#topnav a:hover {
font-size: 11px;
text-decoration: underline;
color:#06F
}

#navigation{
background: url(../images/navbar.png) no-repeat;
height: 40px;
width: 1024px;
}
#search{
padding: 0px;
float: right;
height: 22px;
margin-top: 65px;
}
.search{
width: 160px;
color: #FFF;
height: 22px;
margin: 0px;
padding: 0px;
background: url(../images/search.png);
}
.search-button{
background: url(../images/go.png) no-repeat;
padding: 0px;
height: 22px;
width: 31px;
float: right;
margin: 0px;
}
#mainheader{
background: url(../images/main%20header.jpg) no-repeat;
height: 297px;
width: 1024px;
}
#footer{
}



Heres 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>~~Home-Testing~~</title>
<link href="css/zoe.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/ynmc logo.png" width="478" height="109" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="4,3,137,105" href="#" />

</map></div>
<div id="topnav"><a href="admissions.htm">Admissions </a>| <a href="hallery.htm">Photo Gallery</a> | <a href="guestbook.htm">Guest Book</a> | <a href="feedback.htm">Contact Us</a></div>
<div id="search"><input name="search" class="search" type="text">
<input name="search-button" class="search-button" value="Search" src="images/go.png" type="image" />
</div>


</div>
<div id="navigation"></div>
<div id="mainheader"></div>







</div>
</body>
</html>

kyllle
Jul 8th, 2009, 05:38 PM
Hey, whats your problem?

SB65
Jul 8th, 2009, 05:42 PM
Doesn't look too bad...

To move the search form underneath the top menu add clear:right to #search.

Then add float:left to .search so the box and button are on the same line. There will be a few other ways of doing this, this looks an easy one...

You might then want to mess about with the margins on #search

abduraooft
Jul 8th, 2009, 05:47 PM
Try

#search {/*zoe.css (line 47)*/
clear:right;
float:right;
padding:0;
}
.search {/*zoe.css (line 53)*/
background:transparent url(../images/search.png) repeat scroll 0;
color:#FFFFFF;
float:left;
height:22px;
margin:0;
padding:0;
width:160px;
}
.search-button {/*zoe.css (line 61)*/
background:transparent url(../images/go.png) no-repeat scroll 0;
float:left;
height:22px;
margin:0;
padding:0;
width:31px;
}

zoe20
Jul 9th, 2009, 08:14 AM
pk when am trying to add a main content box its giving me trouble and its keep going to the footer. see the screen shot please. Heres the screen shot.

http://img150.imageshack.us/img150/1728/482886554.png



Here's the Live Demo:

Click Here For Live Demo

Here's the css:


body {
background: url(../images/bg.png) repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper{
margin: 0px auto;
width: 1024px;
background: #FFFFFF;
}
#header{
background: url(../images/top%20header.png) no-repeat;
height: 120px;
width: 1024px;
}
#logo{
background: no-repeat;
width: 478px;
height: 109px;
margin-top: 8px;
margin-left: 4px;
float: left;
}
#topnav{
float: right;
margin-top: 7px;
margin-right: 7px;
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;

}
#topnav a:link {
font-size: 11px;
text-decoration: none;
color: #000000;
}
#topnav a:hover {
font-size: 11px;
text-decoration: underline;
color:#06F
}

#navigation
{
width: 1024px;
margin: 0px auto 0;
background: url(../images/navbar1.png) repeat-x;
height: 40px;
padding: 0;
}
#navigation UL
{
margin: 0;
padding: 0;
background: no-repeat;
height: 40px;
float: left;
}
#navigation UL LI
{
list-style-type: none;
float: left;
position: relative;
border-left: 1px solid #FF9900;
}
#navigation UL LI A
{
padding: 8px 15px 10px;
height: 22px;
display: block;
color: #000000;
text-decoration: none;
font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
";
}
#navigation UL LI A:hover
{
background: url(../images/hover.png) repeat-x left top;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
text-decoration: none;
}
#navigation UL LI UL
{
position: absolute;
top: 40px;
left: -1px;
width: 220px;
visibility: hidden;
padding: 0;
margin: 0;
height: auto;
border-bottom: 1px solid #474646;
}
#navigation UL LI:hover UL
{
visibility: visible;
color: #FFFFFF;
}
#navigation UL LI UL LI
{
float: none;
position: static;
border: 1px solid #474646;
border-bottom: 0;
background: url(../images/sublibg.png);
}

#search{
clear:right;
float:right;
padding:0;
margin-top: 35px;
margin-right: 7px;

}
.search{
background:transparent url(../images/search.png) repeat scroll 0;
color:#08333c;
float:left;
height:22px;
margin:0;
padding:0;
width:160px;
font: 10px Verdana, Arial, Helvetica, sans-serif;

}
.search-button{
background:transparent url(../images/go.png) no-repeat scroll 0;
float:left;
height:22px;
margin:0;
padding:0;
width:31px;

}
#mainheader{
background: url(../images/main%20header.jpg) no-repeat;
height: 297px;
width: 1024px;
}
#sidebox{
width: 211px;
margin-left: 7px;
}
#navsheader{
background: url(../images/head.png) no-repeat;
height: 50px;
width: 211px;
}
#navsmain{
background: #FFFFFF url(../images/body.png) repeat-y;
width: 211px;
height: 251px;
padding: 15px 0px 0px 5px;
margin: 0px;
}
#navsmainfooter{
background: url(../images/foot.png) no-repeat;
height: 21px;
width: 211px;
margin-bottom: 10px;
}
#navsmain ul{
list-style: none;
margin: 0px 0px 0px 15px;
padding: 0px;
}
#navsmain ul li{
margin: 5px 0px 5px 5px;
}
#navsmain ul li a{
background: url(../images/sidebar%20nav.png) no-repeat left top;
font: bold normal 11px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
display: block;
height: 25px;
padding-top: 4px;
padding-right: 0px;
padding-left: 25px;
}
#navsmain ul li a:hover {
background: url(../images/side%20navbar%20hover.png) no-repeat;
color: #FFFFFF;
}
.headertext{
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding-top: 10px;
padding-left: 8px;

}
#latest{
background: url(../images/head.png) no-repeat;
height: 50px;
width: 211px;
}
#latestmain{
background: url(../images/body.png) repeat-y;
width: 211px;
height: 125px;
}
#latestfooter{
background: url(../images/foot.png) no-repeat;
height: 21px;
width: 211px;
margin-bottom: 10px;
}
#shout{
background: url(../images/head.png) no-repeat;
height: 50px;
width: 211px;
}
#shoutmain{
background: url(../images/body.png) repeat-y;
width: 211px;
height: 225px;
}
#shoutfooter{
background: url(../images/foot.png) no-repeat;
height: 21px;
width: 211px;
margin-bottom: 10px;
}
#maincontent{
width: 800px;
margin-right: 7px;
background: #FFFFCC;
float: right;

}
#footer{
}



Here's the Mark up


<!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>~~Home-Testing~~</title>
<link href="css/zoe.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/ynmc logo.png" width="478" height="109" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="4,3,137,105" href="#" />
</map></div>
<div id="topnav"><a href="admissions.htm">Admissions </a>| <a href="hallery.htm">Photo Gallery</a> | <a href="guestbook.htm">Guest Book</a> | <a href="feedback.htm">Contact Us</a></div>
<div id="search"><input name="search" type="text" class="search" value="Search This site...">
<input name="search-button" class="search-button" value="Search" src="images/go.png" type="image" />
</div>

</div>
<div id="navigation"><ul>
<li><a href="staff.htm" title="">Staff</a></li>
<li><a href="courses.htm" title="">Courses</a>
<ul>
<li><a href="people.htm" title="">People</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
</ul>
</li>
<li><a href="depts.htm" title="">Departments</a></li>
<li><a href="exam.htm" title="">Exam Cell</a>
<ul>
<li><a href="people.htm" title="">People</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
</ul>
</li>
<li><a href="prizes.htm" title="">Prizes & Scholorships </a></li>
<li><a href="whatWeDo.htm" title="">Student Amenities</a>
<ul>
<li><a href="people.htm" title="">People</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
<li><a href="employeeChallenges.htm" title="">Employee Challenges</a></li>
</ul>
</li>
<li><a href="index.htm" title="">Career Development</a></li>
<li><a href="whatWeDo.htm" title="">Support Services</a></li>
<li><a href="whatWeDo.htm" title="">Distanace Education</a></li>
</ul>
</div>
<div id="mainheader"></div>
<div id="sidebox">
<div id="navsheader">
<div class="headertext">Navbar</div>
</div>
<div id="navsmain"><ul>
<li><a href="">Home</a></li>
<li><a href="">History</a></li>
<li><a href="">Campus</a></li>
<li><a href="">Library</a></li>
<li><a href="">Management</a></li>
<li><a href="">Principal Desk</a></li>
<li><a href="">Compliments</a></li>


</ul></div>
<div id="navsmainfooter"></div>
<div id="latest">
<div class="headertext">Latest News</div>
</div>
<div id="latestmain"></div>
<div id="latestfooter"></div>
<div id="shout">
<div class="headertext">Shout Box</div>
</div>
<div id="shoutmain"></div>
<div id="shoutfooter"></div>



</div>


<div id="maincontent">some content here some content here some content here
some content here some content here some content heresome content here some content here some content here
some content here some content here some content here
</div>





</div>
</body>
</html>

zoe20
Jul 9th, 2009, 03:13 PM
May be its clear option again??

VIPStephan
Jul 9th, 2009, 03:38 PM
Well, one important thing is you didn’t float your sidebar at all. Then if you float it the main content is still too wide to go up. Narrowing it to 790px did the trick for me. Then lastly the disappearing content background can be made reappear by applying overflow: auto; to the wrapper.

Oh and don’t use “click here” as link text! (http://www.google.com/search?q=click+here+as+link+text)

zoe20
Jul 9th, 2009, 06:05 PM
ok i changed it and now i lost the background white color. Here's the sliced images am enclosing. Please some one help me.
Live Demo:

Click here to see the Live demo (http://hook4adesign.com/index.htm)

Here's the sliced images:

Zoe.rar

This is my basic layout:
http://i31.tinypic.com/eslllull.jpg

VIPStephan
Jul 9th, 2009, 06:08 PM
Please read my previous post again, specifically where I told you to make the background reappear by applying overflow: auto; to the wrapper.

abduraooft
Jul 9th, 2009, 06:12 PM
#wrapper {/*zoe.css (line 6)*/
background:#FFFFFF none repeat scroll 0;
margin:0 auto;
overflow:auto;
width:1024px;
}
#maincontent {/*zoe.css (line 226)*/
background:#FFFFFF none repeat scroll 0;
margin-left:230px;
}

zoe20
Jul 13th, 2009, 06:53 PM
how to give link to a image button? am in total confusion. When am giving href to it its behaving weird. plz help me.

Heres the Live Demo:

Click here for Live Demo (http://hook4adesign.com/finall/index.htm)

Heres the CSS:

#subscription{
background: url(../images/subscription.png) no-repeat;
height: 45px;
width: 632px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
}
#plan-1{
background: url(../images/plan1.png) no-repeat;
height: 283px;
width: 213px;
float: left;
margin-left: 53px;
margin-top: 10px;
text-align: center;
}
#plan-2{
background: url(../images/plan2.png) no-repeat;
height: 283px;
width: 213px;
float: left;
margin-left: 5px;
margin-top: 10px;
text-align: center;
}
#plan-3{
background: url(../images/plan3.png) no-repeat;
float: left;
height: 283px;
width: 213px;
margin-top: 10px;
margin-left: 5px;
text-align: center;
}
.plantext{
font: 28px Tahoma;
color: #DA440F;
margin-top: 120px;
}
.apply{
height: 24px;
width: 75px;
margin-left: 100px;
margin-top: 50px;
background: url(../images/apply%20button.png);
}

VIPStephan
Jul 14th, 2009, 12:07 AM
Are you talking about this: <div class="apply"></div>? If it’s supposed to be a button/link why are you using a division then (an empty division, to make it even worse)? Just change the div to an anchor and make that anchor display: block. Also, please write some text into that anchor for accessibility (i. e. write “apply now”) and then use text-indent: -999em to hide that text and show the image instead, for example.

zoe20
Jul 14th, 2009, 06:11 PM
ok i changed according to ur suggestion.But i see a small border around it and its lost the exact place where i want that button. plz see i applied it to the 1s button.

This is the Live Demo

Live Demo (http://hook4adesign.com/finall/index.htm)

abduraooft
Jul 14th, 2009, 06:16 PM
Are you talking about the outline? If so you may set outline:none to them, but I don't recommend it due to accessibility issues. ( or you may set some alternate styles, see http://css-tricks.com/removing-the-dotted-outline/)

VIPStephan
Jul 14th, 2009, 06:31 PM
ok i changed according to ur suggestion.But i see a small border around it and its lost the exact place where i want that button. plz see i applied it to the 1s button.

This is the Live Demo

Live Demo (http://hook4adesign.com/finall/index.htm)

Well, the reason is because you didn’t quite follow my directions. The anchor doesn’t have the class “apply”. I just meant you should change <div class="apply">…</div> to <a class="apply" href="…">apply now</a>
And then in the CSS you’d add:


.apply {


display: block;
text-indent: -999em;
}


However, the way you did it with putting an image inside the anchors works just as well. You only need to remove the border from the images with a img {border: none;}

zoe20
Jul 14th, 2009, 06:56 PM
Well, the reason is because you didn’t quite follow my directions. The anchor doesn’t have the class “apply”. I just meant you should change <div class="apply">…</div> to <a class="apply" href="…">apply now</a>
And then in the CSS you’d add:


.apply {


display: block;
text-indent: -999em;
}




It worked awesome i used ur method. Tks.But am still confused this text-indent: -999em; why it should be used ????
Heres the demo.

Live demo (http://hook4adesign.com/finall/index.htm)

VIPStephan
Jul 14th, 2009, 07:04 PM
But am still confused this text-indent: -999em; why it should be used ????

Well, just leave it away and look what happens.