CSS harjutuste näide
Allikas: Lambda
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link href="test.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="page">
<div id="menyy">
<div>Esimene sissekanne
<div id="eugen">Eugen oli siin.</div>
</div>
<div>Teine sissekanne
<div>Teine abitekst on siin.</div>
</div>
<!-- button test -->
<a href="#" class="button">Nuputekst</a>
<a href="#" class="imgbut" title="Edasi"><span>Edasi</span> </a>
</div>
<div id="sisu">
<div id="tabs"><ul>
<li><a href="#">Artikkel</a></li>
<li class="selected"><a href="#">Redigeeri</a></li>
<li><a href="#">Ajalugu</a></li>
</ul></div>
<h1>Pealkiri</h1>
<p>
See on avalõik, milles on artikli ülevaade.</p>
<p>
<ul>
<li>Karu</li>
<li>Karu</li>
<li>Karu</li>
</ul>
</p>
<p>
<span>Lorem <a href="http://lambda.ee/%22>ipsum dolor sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="float-hack"> </div>
<div>
</body>
CSS:
/*
* {
cursor: wait !important;
}
*/
div {
display: block;
/*border: 1px dotted #777;*/
}
#page {
min-width: 400px;
max-width: 800px;
margin: 5px auto;
}
/*
.initsiaal {
float: left;
font-size: 3em;
}*/
.veateade {
color: red;
}
.oluline {
font-weight: bold;
}
.float-hack {
clear: both;
}
#menyy {
float: left;
width: 200px;
background: #ddd;
/*border: 2px solid red;*/
padding: 5px;
margin: 5px;
}
#sisu {
margin-left: 224px;
margin-top: 50px;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 5px;
cursor: default;
}
#eugen {
position: absolute;
top: 200px;
left: 40px;
/*text-align: center;*/
background: cyan;
padding: 10px;
}
#menyy div {
font-weight: bold;
}
#menyy div:hover {
background: yellow;
}
#menyy div div {
display: none;
position: absolute;
top: 200px;
left: 40px;
background: cyan;
padding: 10px;
}
#menyy div:hover div {
display: block;
}
@media print {
html, body {
display: block;
}
#menyy { display: none; }
#sisu {
display: block;
width: 100%;
margin: 0;
}
a[href]:after {
content: " (" attr(href) ") ";
}
}
@media handheld {
/* moblaseadistused siia */
}
/*
div > a {
text-decoration: none;
color: #f0f;
}
*/
p ul li:first-child {
font-weight: bold;
}
h1 + p {
font-weight: bold;
}
.button {
text-decoration: none;
color: black;
background: #ddd;
display: block;
padding: 10px 20px;
border: 2px outset #aaa;
border-radius: 5px; /* ei tööta igal pool */
}
.button:active {
border: 2px inset #aaa;
}
.button:hover {
background: #eee;
}
.imgbut {
display: block;
width: 43px;
height: 44px;
margin: 5px;
background-image: url('sprite.gif');
background-position: -91px 0px;
}
.imgbut[title=Edasi]:hover {
background-position: -91px -45px;
}
.imgbut span {
display: none;
}
/* tabid */
#tabs {
}
#tabs ul {
position: relative;
top: -37px;
margin: 0px;
padding: 0px;
}
#tabs ul li {
/* float: left; või display: inline-block; */
display: inline-block;
list-style-type: none;
border: 1px solid black;
}
#tabs ul li a {
display: block;
padding: 5px 15px;
background: white;
color: black;
text-decoration: none;
}
#tabs li.selected {
position: relative;
top: 1px;
border-bottom: none;
font-weight: bold;
}
See lehekülg aitab ainet Kasutajaliidesed.
