| Autor | Zpráva | ||
|---|---|---|---|
| Jose Profil * |
#1 · Zasláno: 4. 3. 2011, 16:38:22
Ahoj,
potrebuji pomoct s rozvrzenim layoutu webu - nejde mi tam prisadit paticku na (za) plovouci sloupce. Zaklad je EM dvousloupcovy layout z knizky Petra Stanicka - CSS hotova reseni. Layout se zvetsuje (zmensuje) podle nastaveni pisma (pomerovych jednotek em), je pozicovan na stredni horni cast stranky a tudiz neni roztazen pres celou stranku. Krasne to chodi i ve starsich verzich IE (7, 6, 5.5). V XHTML dokumentu je nasleduji poradi id: hlavicka, obsah, paticka, navigace. (podle Stanicka - vyhodne pro ctecky webu podobne zarizeni). V CSS jsou ty dva sloupce (menu a obsah) plovouci (float-left a right). Hlavicku se mi podarilo na ne nasadit, ale ta paticka mi furt nekde lita...- zkousel jsem pouzit i cistice (clean). Vite nekdo co s tím? Predem dik. |
||
| Plaváček Profil |
#2 · Zasláno: 4. 3. 2011, 16:47:16 · Upravil/a: Plaváček
Jose:
Dodej "živou" ukázku. Čistič musí fungovat (případně postačí nadřazenému bloku, v němž jsou umístěny plovoucí prvky, nastavit vlastnost overflow:hidden.) O který konkrétní příklad v knize jde? (je pravděpodobné, že jsem ho dělal já :) |
||
| Jose Profil * |
#3 · Zasláno: 4. 3. 2011, 17:00:48
Kod ted bohuzel nemam u sebe.
Priklad je tusim Kapitola 4 priklad 13 em model. |
||
| Plaváček Profil |
#4 · Zasláno: 4. 3. 2011, 17:02:37 · Upravil/a: Plaváček
Jose:
„Priklad je tusim Kapitola 4 priklad 13 em model.“ Dobře, ale v příkladu mi vše funguje, jak má. Pokud to nešlape tobě, pak možná něco děláš špatně. Tak či onak, bez konkrétní ukázky ti nikdo neporadí. |
||
| Jose Profil * |
#5 · Zasláno: 4. 3. 2011, 17:14:37
Ano priklad z knihy funguje nadherne, ale jsou to jen ty dva sloupce (float left a float right). Ale nadari se mi na ne (za)-tj. dolu prisadit novy blok s patickou (hlavika mi sla hned). Neni problem s poradim toku divu s id v xhtml dokumentu? - napadlo me prehodit navigaci s patickou a dva bloky (ted uz jsou za sebou) - menu a obsah obalit jeste jednim divem s dalsim id a paticku pozicovat k nemu - je to schudne reseni?
|
||
| Trejpa Profil |
#6 · Zasláno: 4. 3. 2011, 17:33:42
Jose:
Patička s clearem musí být uvnitř bloku obalujícího plovoucí prvky. <div id=vse style=width:46ex> <div id=hlavicka></div> <menu style="width:15ex;float:left"></menu> <div id=obsah style="width:40ex;float:left"></div> <div id=paticka style=clear:left></div> </div> |
||
| Jose Profil * |
To: Trejpa
Paticku a ostatni prvky jsem mel uvnitr jednoho bloku (divu). Myslel jsem to tak, ze ty dva plovouci sloupce obalim jeste jednim blokem (divem). Ale nebylo to dobre reseni. Hral jsem si ruznym pozicovanim a vysledem funguje tak jak ma, viz zdrojak nize. Krome em modelu, jsem jeste pouzil jeden priklad z vyse uvedene knizky-co je hned na zacatku-test03.Chodi to korekte v Opere 9,10,11, IE 5.5,6,7,8, FF3, Chrome, Safari. Pro zajimavost by me zajimalo sofistikovanejsi reseni zalozene na em modelu- jestli existuje. (hlavne nereste rozmery okna-ty jde lehce upravit...) Jinak vsem zucastnenym dekuju za ochotu. <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="cs" xml:lang="cs" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8" />
<title>Test 03</title>
<style type="text/css" media="screen">
body {
margin:0; padding:0;
text-align: center; font: 93.75%/1.3 sans-serif;
background: white;
}
#stranka {
position:relative; top:1em; left:0;
/* margin:0; padding:0; */
margin: 0em auto;
width: 32em;
text-align: left;
background: silver;
}
#zahlavi {
/* position:absolute; top:0; left:0; */
margin:0; padding:0;
width: 32em; height: 5em;
background: yellow;
}
#zahlavi p {
margin: 0; padding: 1em;
font-weight: bold;
}
#navigace {
float: left;
position: absolute; top: 5em; left: 0em;
/* margin: 0 10em 0 0; padding: 0; */
width: 11em; height: 20em;
overflow: auto;
background: orange; font-size: 100%; /* margin: 1em; */
}
#navigace p {
margin: 0; padding: 1em;
font-size: smaller;
}
#obsah {
float: right;
margin: 0 0 0 11em; /*padding:4em 1em 0 10em; */
width: 20em; height: 30em;
overflow: auto;
background: green; font-size: 100%; /* font-size:86.667%; margin: 1.2em; */
}
#obsah h1 {
font-size: 150%;
margin: 0 0 0.5em 0;
}
#paticka {
/* position: absolute; bottom: 0; left: 0; z-index: 10; */
margin: 0; padding: 0;
background: blue; color: white;
text-align: center;
width: 32em; height: 3em;
}
#paticka p {
margin: 0; padding: 1em;
font-size: smaller;
font-weight: bold;
}
.hidden { display: none }
.cleaner {
clear: both;
overflow: hidden;
height: 1px;
margin-top: -1px;
}
.cleaner hr {
display: none;
}
</style>
</head>
<body>
<div id="stranka">
<div id="zahlavi">
<p>Záhlaví, titul, autor atd.<span class="hidden"> - <a href="#navigace">Přeskočit na navigaci</a></span></p>
</div>
<hr class="hidden" />
<div id="obsah">
<h1>Název, nadpis</h1>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
<p>Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky. Hlavní sdělení stránky.</p>
</div>
<div class="cleaner">
<hr>
</div>
<hr class="hidden" />
<h4 class="hidden"><a name="copyright">Copyright:</a></h4>
<div id="paticka">
<p>Doplňující informace, copyright atd.</p>
</div>
<hr class="hidden" />
<h4 class="hidden"><a name="navigace">Navigace:</a></h4>
<div id="navigace">
<p>Navigace, menu atd.</p><p>Navigace, menu atd.</p><p>Navigace, menu atd.</p>
<p>Navigace, menu atd.</p><p>Navigace, menu atd.</p><p>Navigace, menu atd.</p>
</div>
</div>
</body>
</html>Moderátor Davex: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na  ).Moderátor Davex: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
|
||
|
Časová prodleva: 13 let
|
|||
0