|
krteczek
Profil |
#1 · Zasláno: 16. 3. 2005, 14:50:14 · Upravil/a: krteczek
css gumový layout, pro ty co neví jak na to :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html >
<head>
<title>nazev stranky</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
<!--
body
{
background-color:#FF9933;
text-align:center; /* vycentruje obsažený div ( plocha )v internet exploreru */
font-family:sans-serif;
}
#plocha
{
width:92ex;
border:2px solid black;
margin: 2ex auto ; /* odsadí nahoře a dole o 2 vyšky malého písmene x ,
navíc vycentruje ( auto ) tento element na stred v ostatních
novějších prohlížečích */
background-color:#FF7722;
padding:1ex;
text-align:center /* vycentruje hlavicku a paticku v internet exploreru */
}
.hlavicka
{
margin:0ex;
height:10ex;
padding-top:2ex;
background-color:#FFaa33
}
.menu
{
float:left; /* umístí menu vlevo */
width:20ex; /* šířka menu v násobcích výšky malého x */
padding:1ex;
background-color:#FFaa33;
margin:1ex 0 /* odsadí nahoře a dole od ostatních prvků */
}
.menu a
{
display: block; /* zajistí výpis odkazů v menu pod sebe */
margin: 0.5ex 0ex;
width:19ex; /* takhle široké budou " tlačítka " */
text-decoration:none; /* odstranění podtržení odkazu */
border-top:1px solid #EDEDE8; /* tímto vytvoříme plastická, vystouplá tlačítka v menu - platí pro všechny čtyři řádky */
border-bottom:1px solid #BCBEB1;
border-right : 1px solid #BCBEB1;
border-left : 1px solid #EDEDE8;
}
.menu a:hover
{
background-color:#FF7722; /* zmena barvy pozadí pri najetí myší */
border-right : 1px solid #EDEDE8; /* vytvoření zamáčknutí tlačítka při najetí myší */
border-left : 1px solid #BCBEB1;
border-bottom:1px solid #EDEDE8;
border-top:1px solid #BCBEB1
}
.dokument
{
padding:1ex ;
background-color:#FFaa33;
float:right;
width:67ex;
margin:1ex 0;
}
.dokument p
{
text-align:justify
}
.paticka
{
clear:both;
text-align:center;
width:100%;
padding:0px;
background-color:#FFaa33
}
h1
{
text-align:center
}
-->
</style>
</head>
<body>
<div id="plocha"><!--tohle je vlastní tělo webu-->
<div class="hlavicka"><h1>nějaký nadpis</h1><!--tady přijde fotka školy,nebo logo nejlíp obojí-->
</div>
<div class="dokument">
<h2>tady bude nějaký obsah toho vebu</h2>
<p>
euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
</p>
</div>
<div class="menu">
<h3>nazev sekce</h3>
<a href="uvod.php" >Úvod</a>
<a href="ucitele.php">Učitelé</a>
<a href="historie.php">Historie</a>
<h3>nazev sekce</h3>
<a href="uspechy.php">Úspěchy naší školy</a>
<a href="zamereni.php">Zaměření školy</a>
<a href="historie.php">Historie</a>
<a href="login.php">Přihlásit</a>
</div>
<div class="paticka"><!-- je duležitá, drží po kupě celý layout -->
<p>vytvořil <a href="mailto:krteczek01@seznam.cz" title="napište webmistrovi">krteczek01@seznam.cz</a> </p>
</div>
</div>
</body>
</html>
http://krteczek.czweb.org/jpw/dvasl/ takhle to vypadá
krteczek
|
|
|
Martin
Profil |
#2 · Zasláno: 16. 3. 2005, 16:34:01
Co je na tom gumovýho? Vždyť to má pořád stejnou šířku.
|
|
|
_waft
Profil |
#3 · Zasláno: 16. 3. 2005, 22:28:40
2martin
tým gumovým asi myslí to, že veľkosti sú v ex-och
|
|
|
krteczek
Profil |
#4 · Zasláno: 17. 3. 2005, 02:34:56
ano to znamená ad si dáte zvětšít, nebo zmenšit velikost písma ( u mozilly ctrl+ / ctrl- ) tak ta stránka vypydá stále stejně ...
To je pro ty co mají stále strach, že kdyžsi někdo zmení velikost písma , že se jim rozpadne stránka. tenhle layout zůstává vzhledově stále stejný, jen se zvětšuje nebo zmenšuje podle požadavku toho kdo se na tu stránku kouká...
tento layout se nepřizpůsobuje velikosti okna, je postaven tak, aby se bezpečně zobrazil při 800x600 bez spodního posuvníku ( při standartní velikosti písma ).
krteczek
PS:jsem po šichtě, snad sem to popsal srozumitelně, kdyby byly dotazy, rád vysvetlím... popřípadě doplním
|
|
