Irve – 8. märts 2012, kell 12:54

2012-03-08T12:54:44Z

←Vanem redaktsioon		Redaktsioon: 8. märts 2012, kell 14:54
1. rida:		1. rida:
	~~See lehekülg aitab ainet [[Kasutajaliidesed]].~~

	HTML:		HTML:

202. rida:		200. rida:
	font-weight: bold;		font-weight: bold;
	}		}


			See lehekülg aitab ainet [[Kasutajaliidesed]].

Irve – 8. märts 2012, kell 12:54

2012-03-08T12:54:33Z

←Vanem redaktsioon		Redaktsioon: 8. märts 2012, kell 14:54
1. rida:		1. rida:
			See lehekülg aitab ainet [[Kasutajaliidesed]].

	HTML:		HTML:

Irve – 8. märts 2012, kell 12:54

2012-03-08T12:54:01Z

Uus lehekülg

HTML:

<!DOCTYPE html><br/> <html><br/> <head><br/> <title>CSS Layout</title><br/> <link href="test.css" type="text/css" rel="stylesheet"><br/> </head><br/> <body><br/> <div id="page"><br/> <div id="menyy"><br/> <div>Esimene sissekanne<br/> <div id="eugen">Eugen oli siin.</div><br/> </div><br/> <div>Teine sissekanne<br/> <div>Teine abitekst on siin.</div><br/> </div><br/> <br/> <br/> <a href="#" class="button">Nuputekst</a><br/> <a href="#" class="imgbut" title="Edasi"><span>Edasi</span> </a><br/> <br/> </div><br/> <br/> <div id="sisu"><br/> <div id="tabs"><ul><br/> <li><a href="#">Artikkel</a></li><br/> <li class="selected"><a href="#">Redigeeri</a></li><br/> <li><a href="#">Ajalugu</a></li><br/> </ul></div><br/> <br/> <h1>Pealkiri</h1><br/> <p><br/> See on avalõik, milles on artikli ülevaade.</p><br/> <p><br/> <ul><br/> <li>Karu</li><br/> <li>Karu</li><br/> <li>Karu</li><br/> </ul><br/> </p><br/> <p><br/> <span>Lorem <a href="http://lambda.ee/">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><br/> <br/> <br/> </div> <br/> <div class="float-hack"> </div><br/> <div><br/> </body><br/>

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;
}

CSS harjutuste näide - Redigeerimiste ajalugu

Irve – 8. märts 2012, kell 12:54

Irve – 8. märts 2012, kell 12:54

Irve – 8. märts 2012, kell 12:54