Autor Zpráva
burinek
Profil
Ahoj, rád bych se zeptal ohledně rozvržení stránky. Mám ho udělaný jako hlavičku, pod ní horizont. menu, pod ním 2 sloupcový obsah pomocí float a pod tímto obsahem patka a celý je to "zabalený" do obalovacího divu, kterým je to vycentrovaný na střed stránky pomocí width a margin-left, -right.

U toho floatovanýho obsahu do leva se mi ale stává, že se mi ten plaváček přilne k levému okraji monitoru a ne k tomu obalovému divu. Nevím přesně, jak nastavit vlastnosti clear? a jestli vůbec něco nastavovat, tak, aby to bylo dobře. Děkuju za radu

#obal {margin-left: auto; margin-right: auto; width: 800px; height: auto; }
#hlavicka {width: 800px; height: 150px; position: relative; top: 0px; left: 0px; }
#menu {width: 800px; height: 30px; }
#obsahlevy {width: 150px; height: auto; float: left; ?????? clear: ?????? }
#obsahpravy {width: 650px; height: auto; float: left; ??????? clear: ??????}
#paticka {width: 800px; height: 50px; clear: ????}
vertigo4
Profil
burinek
clear nastavíš jen u patičky... ne u obsahu floatovaných
burinek
Profil
a clear left nebo both?
Měsíček
Profil
u patičky clear:both;
vertigo4
Profil
Měsíček
proč both? on nemá nikde float: right

burinek
stačí klidně clear: left;
burinek
Profil
To mám, ale pořád je v tom nějaký zádrhel... Pro názornost sem si u toho obalového divu udělal border: 10px a tim obalem je obalena POUZE hlavička a menu. Levý floatovaný obsah je nalepený přímo na menu, překrývajíc border a pravý floatovaný obsah je pod borderem na svém místě, kde by měl být. Dole je patička úplně mimo - nevycentrovaná, nalepená na levý kraj viewportu.
vertigo4
Profil
burinek
ukaž zdrojak... jinak nechápu proč máš hlavičku pozicovanou
Měsíček
Profil
proč both? on nemá nikde float: right

Protože tak se prvek až pod "všemi" plovoucími prvky, kdežto u tvého left, bude čekat na všechny leváčky.
burinek
Profil
Kvůli zanořené pozici - potřeboval sem tam do hlavičky dostat absolutně pozicovaný obrázkový odkazy. A vzhledem k tomu, že sem měl stránku centrovanou pomocí margin-left, -right: auto, tak se mi to pozicovalo vůči viewportu. Tohle mi tu na foru poradili.
vertigo4
Profil
Měsíček
no a tak když tam nemá praváčky :D tak proč by měl dávat both? nechápu...
Měsíček
Profil
Prvek, který má clear:left čeká na obtékané elementy přiražené doleva, praváček je mu ukradenej.
burinek
Profil
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>VYSOČINKA - band</title>
<meta name="Description" content="" />
<meta name="Keywords" content="
<meta name="Author" content="" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="stylopis.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>

<div id="obal">

<div id="hlavicka">
<h4 id="header"><a href="index.htm"><span>hlavička</span></a></h4>
</div>

<div id="menu">
<ul>
<li class="hlavni"><h3><a href="+">HISTORIE</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="+">SOUČASNOST</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="CD1.htm">DISKOGRAFIE</a></h3>
<ul class="sub">
<li><a href="CD1.htm" title="Vysočinka - Na přání">CD Na přání</a></li>
<li><a href="CD2.htm" title="Vysočinka - Pět let">CD Pět let</a></li>
<li><a href="CD3.htm" title="Vysočinka - Máničko moje">CD Máničko moje</a></li>
<li><a href="CD4.htm" title="Vysočinka - Rodné Jiřice">CD Rodné Jiřice</a></li>
<li><a href="CD5.htm" title="Vysočinka - Demo snímek">CD Demo snímek</a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="+">FOTOGALERIE</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="diskuze.htm">DISKUZE</a></h3>
</li>

<li class="hlavni"><h3><a href="+">NABÍDKA</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="+">KONTAKTY</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="+">VYSTOUPENÍ</a></h3>
</li>
</ul>

</div>

<div id="obsahlevy">


</div>



</div>


<div id="obsahpravy">

<h2>Diskografie - CD Na přání</h2>
<h4 id="cd1"><span>CD Na přání</span></h4>
<h4 id="objednat"><a href=""><span>Ton studio Rajchman</span></a></h4>

<table class="table1" summary="Vysočinka - Na přání">
<tr class="neviditelny">
<td>0.</td>
<td>To byla kočka</td>
<td>lidová</td>
<td>3:44</td>
<td></td>
</tr>

<tr>
<td class="cislo">1.</td>
<td class="pisen">To byla kočka</td>
<td>lidová, úpr. V. Béreš</td>
<td>3:03</td>
<td></td>
</tr>

<tr>
<td class="cislo">2.</td>
<td class="pisen">Sedlák na louce seče</td>
<td>lidová, úpr. T. Vodrážka</td>
<td>2:44</td>
<td rowspan="3" id="prehrat"><a href="cert.mp3"><span>přehrát</span></a></td>
</tr>

<tr class="cerveny">
<td class="cislo">3.</td>
<td class="pisen">Čert aby vzal hospodskýho</td>
<td>lidová, úpr. A. Pecha</td>
<td>3:15</td>
<td></td>
</tr>

<tr>
<td class="cislo">4.</td>
<td class="pisen">Vysočina</td>
<td>V. Dvořák</td>
<td>2:57</td>
<td></td>
</tr>

<tr>
<td class="cislo">5.</td>
<td class="pisen">Už z hor zní zvon</td>
<td>traditional, úpr. M. Bezstarosta, T. Vodrážka</td>
<td>2:42</td>
<td></td>
</tr>

<tr>
<td class="cislo">6.</td>
<td class="pisen">Ku Praze uhání vlak</td>
<td>traditional, úpr. T. Vodrážka</td>
<td>2:28</td>
<td></td>
</tr>

<tr>
<td class="cislo">7.</td>
<td class="pisen">Ručičky, nebojte se</td>
<td>traditional, úpr. T. Vodrážka</td>
<td>3:25</td>
<td rowspan="3" id="prehrat"><a href="devcica.mp3"><span>přehrát</span></a></td>
</tr>

<tr class="cerveny">
<td class="cislo">8.</td>
<td class="pisen">Děvčica z Moravy</td>
<td>V. Maňas ml., S. Pěnčík</td>
<td>3:06</td>
<td></td>
</tr>

<tr>
<td class="cislo">9.</td>
<td class="pisen">Třešňové květy</td>
<td>traditional, úpr. R. Hruška</td>
<td>3:11</td>
<td></td>
</tr>

<tr>
<td class="cislo">10.</td>
<td class="pisen">Dvě srdéčka</td>
<td>V. Krutílek</td>
<td>2:32</td>
<td></td>
</tr>

<tr>
<td class="cislo">11.</td>
<td class="pisen">Břeclavská kasárna</td>
<td>lidová, úpr. T. Vodrážka</td>
<td>3:42</td>
<td></td>
</tr>

<tr>
<td class="cislo">12.</td>
<td class="pisen">Bílé konvalinky</td>
<td>A. Soukup, úpr. T. Vodrážka</td>
<td>3:29</td>
<td></td>
</tr>

<tr>
<td class="cislo">13.</td>
<td class="pisen">Kominíček</td>
<td>lidová, úpr. T. Vodrážka</td>
<td>3:24</td>
<td></td>
</tr>

<tr>
<td class="cislo">14.</td>
<td class="pisen">Míšova humorná směs</td>
<td>V. Bláha, K. Hašler, lidové, úpr. M. Bezstarosta </td>
<td>6:00</td>
<td></td>
</tr>
</table>

<br></br>

<table class="table2" summary="Hrají a zpívají">
<tr>
<td class="tucny">Zpívají:</td>
<td>Dana Bezstarostová</td>
<td>1, 2, 4-6, 8, 10, 12-14</td>
</tr>

<tr>
<td></td>
<td>Petra Papoušková</td>
<td>1, 6, 13</td>
</tr>

<tr>
<td></td>
<td>Lubomír Pudil</td>
<td>2, 3, 8, 10, 12, 14</td>
</tr>

<tr>
<td></td>
<td>Michal Bezstarosta</td>
<td>7, 10, 13, 14</td>
</tr>

<tr class="neviditelny">
<td></td>
<td>Michal Bezstarosta</td>
<td>Michal Bezstarosta</td>
</tr>

<tr>
<td class="tucny">Hrají:</td>
<td>Tomáš Vodrážka</td>
<td>baskřídlovk
vertigo4
Profil
Měsíček
je mu ukradenej... s tím souhlasím... --> proč mít both, když není float:right???
burinek
Profil
sorry, je to moc dlouhý, měl sem z toho vybrat jen to podstatný
vertigo4
Profil
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>VYSOČINKA - band</title>
<meta name="Description" content="" />
<meta name="Keywords" content="
<meta name="Author" content="" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="stylopis.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>

<div id="obal">

<div id="hlavicka">
<h4 id="header"><a href="index.htm"><span>hlavička</span></a></h4>
</div>

<div id="menu">
<ul>
<li class="hlavni"><h3><a href="+">HISTORIE</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="+">SOUČASNOST</a></h3>
<ul class="sub">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
</li>

<li class="hlavni"><h3><a href="CD1.htm">DISKOGRAFIE</a></h3>
<ul class="sub">
<li><a href="CD1.htm" title="Vysočinka - Na přání">CD Na přání</a></li>
<li><a href="CD2.htm" title="Vysočinka - Pět let">CD Pět let</a></li>
<li><a href="CD3.htm" title="Vysočinka - Máničko moje">CD Máničko moje</a></li>
<li><a href="CD4.htm" title="Vysočinka - Rodné Jiřice">CD Rodné Jiřice</a></li>
<li><a href="CD5.htm" title="Vysočinka - Demo snímek">CD Demo snímek</a></li>
</ul>
</li>
....
</div>

<div id="obsahlevy">


</div>



</div>
-- toto má být na konci


<div id="obsahpravy">

<h2>Diskografie - CD Na přání</h2>
....
<td>Tomáš Vodrážka</td>
<td>baskřídlovk
burinek
Profil
Díky moc, už sem si toho taky všimnul. Díky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: