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

css division

sir,
I tried the example in css divisions, but didn't get the page displayed properly, so what might be the problem? how to rectify it?
Asked by Thangam Nayagi | Jan 18, 2011 |  Reply now
Replies (2)
View thangam nayagi 's Profile
sir, Here we go...the code i copied from the example in css divisions

<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{
float:left;
width:300px;
padding-left:15px;
padding-top:15px;}

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


#username{
margin-right:20px;
}

#midpart{
float:left;
width:680px;
}

#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:100px;"></div>

<div class="style1" id="login3"> Password</div>
<div id="login4"><input name="" type="text" / style="width:100px;"></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 />
Jan 19, 2011
View teacher siliconindia 's Profile
Hi
Can you paste same code here, let me check.

Regards
Jan 19, 2011