Using Positions and Floating in CSS

HTML Code:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>working with layout</title>
<link href="csslayout.css" rel="stylesheet">
</head>

<body>

<header>
<img src="logo.png">
<h1>Jeevan IT Computer Education</h1>
<ul>
<li>About Us</li>
<li>SignIn</li>
<li>Register</li>
</ul>
</header>
<!-- header section close -->


<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Career</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>


<section></section>
<article></article>


<aside>
<h3>Using List</h3>
<hr>
<ul>
<li>Videos</li>
<li>Audios</li>
<li>Games</li>
<li>Results</li>
<li>Time Tables</li>
<li>Videos</li>
<li>Audios</li>
<li>Games</li>
<li>Results</li>
<li>Time Tables</li>
<li>Videos</li>
<li>Audios</li>
<li>Games</li>
<li>Results</li>
<li>Time Tables</li>
<li>More...</li>
</ul>
</aside>


<footer>
copyright@2017 www.jeevanit.com
</footer>


</body>

</html>


CSS Code: 

*{
border:0px;
padding:0px;
margin:0px;
}
body {
width:78%;
margin-left:auto;
margin-right:auto;
}
header {
width:100%;
height:70px;
background:#CCC;
position:relative;
}
header img {
width:60px;
position:absolute;
left:30px;
top:5px;
}
header h1 {
position:absolute;
left:100px;
top:25px;
font-size:16px;
font-family:"verdana";
}
header ul {
position:absolute;
right:50px;
top:25px;
}

header ul li {
float:left;
margin-right:50px;
list-style:none;
text-decoration:underline;
}

nav {
width:100%;
height:50px;
background:#666;
}
nav ul li {
float:left;
line-height:50px;
list-style:none;
padding:0px 50px;
color:#fff;
}
nav ul li:hover {
background:#F90;
}


section {
width:100%;
height:300px;
background:#FCF;
}
article {
width:80%;
height:600px;
background:#969;
float:left;
}

aside {
width:20%;
height:600px;
background:#C63;
float:right;
}
aside h3 {
text-align:center;
background:#06F;
line-height:30px;
}
aside ul  {

line-height:30px;
}
aside ul li {
border-bottom:1px #fff dotted;
list-style:none;
text-align:center;
}
aside ul li:hover {
background:#F66;
}

footer {
width:100%;
height:60px;
background:#0C9;
clear:both;
text-align:center;
line-height:60px;
}

Comments

Post a Comment

Popular posts from this blog

Child Development and Pedagogy - MCQ-02

  1. బాలల అభివృద్ధి (Child Development) బాలల అభివృద్ధిలో 'సంవృద్ధి' అంటే ఏమిటి? A) శారీరక పెరుగుదల B) మానసిక పరిణామం C) సామాజిక మరియు భావోద్వేగ అభివృద్ధి D) పైవన్నీ Answer : D) పైవన్నీ పియాజే సిద్ధాంతం ప్రకారం, పిల్లలు జ్ఞానాన్ని ఎలా నిర్మించుకుంటారు? A) వారి అనుభవాల ద్వారా B) పుస్తకాల ద్వారా మాత్రమే C) ఇతరుల సూచనల ద్వారా D) టీవీ చూస్తూ Answer : A) వారి అనుభవాల ద్వారా ఎరిక్ ఎరిక్సన్ సిద్ధాంతం ప్రకారం, పిల్లలు 3-6 ఏళ్లలో ఏ సామాజిక సంక్షోభాన్ని ఎదుర్కొంటారు? A) ట్రస్ట్ vs. మిస్ట్రస్ట్ B) ఇనిషియేటివ్ vs. గిల్ట్ C) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ D) ఆటోనమీ vs. షేమ్ Answer : B) ఇనిషియేటివ్ vs. గిల్ట్ వాట్సన్ మరియు బాండురా అనే శాస్త్రవేత్తల సిద్ధాంతం ఏ అంశంపై దృష్టి సారిస్తుంది? A) శారీరక అభివృద్ధి B) సామాజిక అభివృద్ధి C) అభ్యాసం ద్వారా జ్ఞాన నిర్మాణం D) ఆబ్జర్వేషనల్ లెర్నింగ్ (పరిశీలన ద్వారా అభ్యాసం) Answer : D) ఆబ్జర్వేషనల్ లెర్నింగ్ 2. అభ్యాసాన్ని అర్థం చేసుకోవడం (Understanding Learning) విగోట్స్కీ యొక్క "జోన్ ఆఫ్ ప్రోక్సిమల్ డెవలప్‌మెంట్" (ZPD) అంటే ఏమిటి? A) పిల్లలు స్వతం...
Read more

Child Development and Pedagogy - MCQ

జీన్ పియాజే సిద్ధాంతంలో, పిల్లలు జ్ఞాన వికాసం దశల్లో కనీస వయస్సు ఎంత? A) 2 సంవత్సరాలు B) 7 సంవత్సరాలు C) 0 సంవత్సరాలు D) 12 సంవత్సరాలు Answer : C) 0 సంవత్సరాలు కోహల్బర్గ్ నైతిక అభివృద్ధి సిద్ధాంతంలో, ఏ దశలో పిల్లలు చట్టం మరియు నిబంధనల ఆధారంగా నైతికతను అర్థం చేసుకుంటారు? A) ప్రీ-కన్వెన్షనల్ B) కన్వెన్షనల్ C) పోస్ట్-కన్వెన్షనల్ D) సెన్సరీమోటార్ Answer : B) కన్వెన్షనల్ చామ్స్కీ భాషా అభివృద్ధి సిద్ధాంతం ప్రకారం, పిల్లలు భాష నేర్చుకోవడానికి సహజంగా ఉన్న పరికరం ఏది? A) లాంగ్వేజ్ డెవలప్‌మెంట్ పథకం B) యూనివర్సల్ గ్రామర్ C) లాంగ్వేజ్ ఆక్విజిషన్ డివైస్ (LAD) D) ఫార్మల్ ఆపరేషనల్ Answer : C) లాంగ్వేజ్ ఆక్విజిషన్ డివైస్ (LAD) ఎరిక్ ఎరిక్సన్ సిద్ధాంతంలో, పిల్లలు 12-18 సంవత్సరాల మధ్య ఏ సామాజిక సంక్షోభాన్ని ఎదుర్కొంటారు? A) ట్రస్ట్ vs. మిస్ట్రస్ట్ B) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ C) ఇండస్ట్రీ vs. ఇన్ఫీరియారిటీ D) ఆటోనమీ vs. షేమ్ Answer : B) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ కార్ల్ రజర్స్ సిద్ధాంతం ప్రకారం, వ్యక్తులు పూర్తి స్థాయి వ్యక్తిత్వ అభివృద్ధి పొందడానికి అవసరమైన ప్రధాన అంశం ఏది? A) శిక్ష B) నిష్కపట సా...
Read more

Historical Evolution of Education in India and Acts and Rights in Indian Education

 Here are **10 Multiple Choice Questions (MCQs)** on the **Historical Evolution of Education in India** and **10 MCQs** on the **Acts and Rights in Indian Education**, all in **Telugu**: --- ### I. భారతదేశంలో విద్యా అభివృద్ధి చరిత్ర (Historical Evolution of Education in India) 1. ప్రాచీన కాలంలో *గురుకులం* విద్యా వ్యవస్థలో విద్యార్థులు ఎక్కడ నివసించేవారు?      - a) ప్రైవేట్ పాఠశాలలో      - b) వారి ఇళ్ళలో      - c) గురువుల దగ్గర      - d) వంశీయుల పాఠశాలలో      - **Answer**: c) గురువుల దగ్గర   2. బౌద్ధమతం ద్వారా ఏ ఏ ప్రాచీన విశ్వవిద్యాలయాలు ప్రసిద్ధి చెందాయి?      - a) ఢిల్లీ, ఆగ్రా      - b) హైదరాబాదు, బెంగళూరు      - c) తక్షశిలా, నాలందా      - d) మద్రాస్, ముంబాయి      - **Answer**: c) తక్షశిలా, నాలందా   3. మధ్యయుగంలో ఈస్లామిక్ విద్యా విధానంలో ప్రధానంగా ఏ భాషలు నేర్పబ...
Read more