Forum : css div
Brief description  about Online courses   join in Online courses
View Thangam  Nayagi 's Profile

css div

sir, can you please help me rectify my doubt in css div example, i have pasted the code already in my previous query

thanks
Asked by Thangam Nayagi | Jan 20, 2011 |  Reply now
Replies (2)
View thangam nayagi 's Profile
thanks sir, now it worked fine
Jan 24, 2011
View teacher siliconindia 's Profile
Hi

<html>
<head>
<title>My site name</title>
<style type="text/css">
<!--

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#fullcover {
width:900px;
margin-left:auto;
margin-right:auto;
background-color: #F2F2F2;
border:1px solid #CCCCCC;
}
#toppart{
background-color: #F5F5F5;
height:60px;
padding-top:5px;
padding-right:10px;
padding-left:10px;}

#logo{

width:300px;
padding-left:15px;
padding-top:15px;}

#leftpart{
float:left;
width:200px;}


#username{
margin-right:20px;
}

#midpart{
width:660px; margin-left:215px;
}

#rightpart{
width:270px;
margin-left:600px;
}

.style1 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

#leftpart{
background-color: #FDE07B;
padding:10px;
}

#midpart{
background-color:#FDE07B;
}

#rightpart{
background-color:#DBFBF8;
}

#homebutton{
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
width:190px;
margin-bottom:5px;
}

#homebutton ul{
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #000000;
width:200px;
margin-bottom:5px;
}

#homebutton ul li{
list-style-type:none;
width:200px;
display:block;
width:140px;
height:40px;
font-size:15px;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #000000;
margin-bottom:5px;
}

#homebutton ul li a{
list-style-type:none;
display:block;
width:140px;
height:40px;
font-size:15px;
background-color: #FFCC00;
font-family: Arial, Helvetica, sans-serif;
width:200px;
margin:0px;
padding:0px;
color: #000000;
padding-top:10px;
text-decoration:none;
margin-bottom:5px;
}

#homebutton ul li a:hover{
list-style-type:none;
display:block;
width:200px;
height:40px;
font-size:15px;
background-color: #29b7cd;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
text-align:center;
padding:0px;
color: #000000;
padding-top:10px;
text-decoration:none;
margin-bottom:5px;
}

#homebutton ul li #active{
list-style-type:none;
width:200px;
display:block;
height:40px;
font-size:15px;
background-color: #29b7cd;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
padding:0px; color: #000000;
padding-top:10px;
text-decoration:none;
margin-bottom:5px;
}
#siloiconindia{
padding-left:20px;
padding:20px;
padding-bottom:10px;
}

a:link {
color: #990000;
text-decoration:none;
}

a:visited {
color:#990000;
text-decoration: none;
}

a:hover {
color: #006600;
text-decoration: none;
}

a:active {
text-decoration: none;
}

.style3 {
color: #000000;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}

.style5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.style8 {
color: #000000
}

#contectabout{
padding:20px;
line-height:18px;
}


#bottompart{
background-color: #666666;
height:12px;
padding-top:5px;
padding-right:10px;
padding-left:10px;
clear:left;}

#youadhere2{
background-color: #999999;
height:200px;
margin-top:50px;
padding:20px;
}

#gap{
border-bottom:1px dashed #000000;
margin-bottom:10px;
margin-top:10px;
}

#whatwedo{
margin-bottom:30px;
}

.style9 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #990000;
font-weight: bold;
}

#advertise{
margin-top:10px;
margin-bottom:25px;
}

#advertise3{
float:left;
width:300px;
margin-right:20px;
}

#loginmian{
border:1px solid #999999;
padding:5px;
padding-top:20px;
padding-bottom:10px;
margin-top:40px;
}
#login1{
float:left;
width:70px;
margin-bottom:10px;
}

#login3{
float:left;
width:70px;
margin-bottom:10px;
}

#login2{
margin-bottom:10px;
}

#login4{
margin-bottom:10px;
}

#submitthis{
margin-left:75px;
}

#search1{
float:left;
width:60px;
padding-top:3px;
}

#search2{
float:left;
width:90px;
}

#saarch3{
float:left;
width:120px;
}

#searchcover{
padding:10px;
background-color: #FFCC00;
width:340px;
margin-left:320px;
height:30px;
}


#search4{
float:left;
}

.button{
background-color:#3b5998;
border-bottom-color:#0e1f5b;
border-right-color:#0e1f5b;
border-left-color:#d9dfea;
border-top-color:#d9dfea;
border-style:solid;
border-width:thin;
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
padding:2px;
}
-->

</style>


</head>

<body>

<div id="fullcover">

<div id="toppart">
<div class="style9" id="logo">Your logo here</div>
</div>




<div id="leftpart">
<!--button cover-->
<div id="homebutton">
<ul>
<li class="style1" style="margin-bottom:15px;">
<a href="#" class="style5" id="active">About us </a></li>

<li class="style1" style="margin-bottom:15px;">
<a href="#" class="style5">Services </a></li>

<li class="style1" style="margin-bottom:15px;">
<a href="#" class="style5">Contact us </a></li>


</ul>

</div>

<!--button cover close-->

<!--login box strat-->

<div id="loginmian">


<div class="style1" id="login1">User name</div>
<div id="login2"><input name="" type="text" / style="width:90px;"></div>

<div class="style1" id="login3"> Password</div>
<div id="login4"><input name="" type="text" / style="width:90px;"></div>

<div id="submitthis"><input type="button" class="button" value="Submit" /></div>

</div>


<!--login box close-->


<!--ads star-->

<div id="youadhere">
<div class="style3" id="youadhere2"> Your ads you can show here</div>
</div>
<!--ads close-->


</div>

<div id="midpart">

<div id="searchcover">

<div class="style5" id="search1">Search</div>
<div id="search2"> <select>
<option>Members</option>
<option>Jobs</option>
<option>Blogs</option>
</select></div>
<div id="saarch3"> <input name="" style="width:120px;" type="text" / ></div>
<div id="search4"> <input type="button" class="button" value="Search" /></div>


</div>
<div class="style3" id="siloiconindia"> About SiliconIndia </div>

<div id="contectabout">

<span class="style5">Accelerate your career</span><br />
<span class="style1">We know that career growth have different perspective for different people. For some it means reading up on the latest developments in their industry, for some it means changing jobs, and for others it means connecting with industry experts. We believe that you accelerate your career through:</span><br />
<br />

<span class="style5"><br />
<span class="style8">Knowledge, advice, and job referrals</span></span><br />
<span class="style1">So, wherever you fit, SillconIndia has you covered. We have over 2 Million members, and we see more than 50,000 new members added every week ­- that´s 50,000 new personalities, new skills, and new connections ­- each week. SiliconIndia is India´s largest community of professionals and there´s a LOT of collective knowledge that can help accelerate our careers.</span>
<br />
<br />
<br />
<div id="gap"></div>
<div class="style3" id="whatwedo"> What we do</div>
<span class="style5">Career</span><br />
<span class="style1"> SiliconIndia is not just knowledge or a networking site, but a venue for career growth. We have jobs, but we are not a job site ­- we are a launch pad for the next big thing. We give you a venue to connect the people you know - your friends ­- to great companies ­- so your friends can accelerate their careers too.
You can simply refer your friends to great jobs and explain to the hiring manager why your friends are a great fit.
Helping connect a friend with a job is good for your friend of course, but also good karma for you ­- you´re a best friend to people.
Click here to see "Featured jobs"<br />
<br />
<br />
</span>
<span class="style5">Communities</span> <span class="style1"><br />
SiliconIndia Communities works like your personal website. Some of the popular activities members use it to promote upcoming events and connect with event attendees, Share blogs on an important issues and causes and inspire others to take action, Reconnect with your old batch-mates, ex-colleagues, business associates, Talk with world travelers and discover unexpected must-visit destinations, Make friends with common interests etc.</span><br />



</div>

</div>

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


Please check this code. hope this will solve your problem.

Jan 24, 2011