Autor Zpráva
Nevedomost
Profil *
Dobrý Deň,
Zase si neviem rady, s jednou vecou, tak som zavítal sem. Hľadal som ako na to, no niČ som nenašiel.
Mám tu , Stránku všetko, ide v pohode, len si neviem nastaviť ten div, s obsahom, aby bol taký veľký ako má byť a keď dám viac textu, aby sa to nerozbilo celé, teraz to tak ide, len neviem nastaviť background color, napríklad, tomu divu.... Skúšal som viacero možností no skôr sa mi to skazilo, ako pomohlo.
Ďakujem, za pomoc.
Miloš
Profil
Myslels něco takového?

Obsahuje jeden obrázek a následující kód:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>blabla</title>
<!-- OPRAVA - TADY BYL PŘILINKOVANÝ NEEXISTUJÍCÍ STYL; ŘÁDEK BYL SMAZÁN -->
<style type="text/css">
  body, h1, h2, p, li, menu, address {margin: 0; padding: 0;}
  body {font: 100%/1.4 'DejaVu Sans', Verdana, Sans-serif; color: white; background-color: black;}
  #obal, h1 {border: 3px groove red; background: url(pozadi.png) repeat-y 0px 0px;}
  h1 {background-color: green; text-align: center; background-image: none;}
  #obal {color: black; background-color: #cecece;
    margin: 15px auto; max-width: 60em; min-width: 400px; position: relative;}
  #menu {width: 230px; position: absolute; left: 5px; padding-left: 15px;}
  menu {list-style-type: none;}
  #obsah {margin-left: 260px; padding-right: 20px;}
  address {font-size: .8em; text-align: center; background-color: yellow;
	  border: 1px red dashed; height: 1.5em; position: relative; top: 2.5em; font-style: normal;}
  p {text-indent: 2em;}
  h2+p {text-indent: 0;}
  p+h2 {margin-top: 1em;}
  a {color: navy; padding: 1px 2px;}
  menu a {display: block; width: 180px; background-color: #bbbb12; margin-bottom: 3px;}
  a:hover {background-color: black; color: #cacaca;}
</style>

<div id="obal">
<h1>&lt;h1&gt;Nadpis&lt;/h1&gt;</h1>

<div id="menu">
  <h2>Jídelní lísteček</h2>
  <menu>
    <li><a href="#">jedna</a>
    <li><a href="#">dvě</a> 
    <li><a href="#">freddy</a>    
    <li><a href="">jde</a> 
  </menu>
</div>

<div id="obsah">
<h2>Pilovoun de rejmalič ření? Hubilón:</h2>
<p>Šlan očučka doj stupole, kaj retufajka seronila mo rutyčok. Koukyrel bal jotefu, cot remilohal
   se rýtežník. Byj gerutik se dofilá, ře títolíš me rouban. Tubrajn se dopilá retý, cou telomijón
   e rypohylt. By jónet re komoun: „<a href="#"><em>Maholi he Rebojak</em></a> to ustap lůme ruží?
<p>Bu telona sedma iholen, ke retukajs le kýká nabýruč. Bybouta rehymále se šípelí, čé terojíva
   feldyham sen herybol. Hybra le dumijas, manýř tre Líbeň? Dundrasem klužáre ve rágonů gertiláně?
   Mulobal au <a href="#"><em>Berihal de Brhoďul</em></a>. Kuklejmety čeřtomá, bermakejty nehrabíž
   e ču, tetrevilo u koudí seruň belihandas.

<h2>Ušemý za hudí</h2>
<p>Bučelíza mudí: „Bubylo pydrof treholin, kumilej tretujanůs šeřoldaš.
   Úmanení?“ Ku temolhu fefečutka plekujen.
</div>

<address>©opyleft <strong>Rybojed Kouketeropios</strong>,
   <a href="mailto:rybojed@koukoteropios.blb">rybojed@koukoteropios.blb</a></address>
</div>
Nevedomost
Profil *
Presne, skusim to urobit, dik
Miloš
Profil
Ještě bych doplnil: odzkoušeno v Opeře 9.64, Firefoxu 3.5.2, Chrome 2.0.172.43 a Exploreru 8 (včetně kompatibilního zobrazení neboli režimu IE7).
Akorát v IE 6 je to natažené do šířky, bo jsem byl líný to doladit (chybí width, IE6 neumí max-width).
Nevedomost
Profil *
Ja to proste neviem urobiť, prosím o pomoc.
Viz: prvá
[url=http"//www.deathinsmoke.xf.cz/problem/kontakt.html]drihá[/url]
Pozrite, keď dám text, čierna plocha sa rozširuje, div, a keď dám text preč div sa zmänší...
Nevedomost
Profil *
druhá
Miloš
Profil
A v čem je problém?
Pokud si prostuduješ můj kód, zjistíš že:

1) celá stránka (od nadpisu po patičku) je obalená divem (<div id="obsah">). Tento div má nastavenou minimální a maximální šířku (ale pokud chceš stránku, nemusíš šířku zadávat; taková stránka se ale blbě čte).
Tento div má nastaveno position: relative. Ne proto, aby se pohyboval, ale proto, že vytvoří souřadnice pro absolutně pozicované prvky v něm zanořené (zde to bude menu)

2) Nadpis zde tvoří jen <h1>, ale pokud bys chtěl čarovat s klikacím logem, s obrázkovým pozadím a podobně, asi bys ten nadpis ještě uzavřel do samostatného divu.

3) Menu jsem obalil divem (<div id="menu">), protože obsahuje jak samotné menu, tak jeho nadpis.
Tento div je pozicovaný absolutně: position: absolute; left: 5px; – to znamená, že je 5px vlevo od kraje nadřazeného divu (souřednice počítá od divu #obal proto, že – jak už jsem výše napsal – je #obal relativně pozicovaný.

4) Blok s obsahem (<div id="obsah">) má nastavený levý margin tak, aby se nepřekrýval s pozicovaným menu (#menu má šířku 230px + 15px kevý padding, #obsah má margin-left s hodnotou 260px).

5 Barva levého sloupce je tvořena výše odkazovaným obrázkem – je to nudle, která má barvu pozadí #menu a barvu pozadí #obsahu. Tento obrázek repetuje svisle: background: url(pozadi.png) repeat-y 0px 0px;
Teď koukám, že jsem ho omylem zapsal jak pro #obal, tak pro #h1 a divil jsem se proč jsem pro h1 musel tuto hodnotu upravovat. Správně tedy zápis background: url(pozadi.png) repeat-y 0px 0px; patří na řádek 12, zatímco z řádku 9 (h1) lze vypustit background-image: none;.

6) No a pak už zbývá jen patička.


Tedy oprava CSS:
body, h1, h2, p, li, menu, address {margin: 0; padding: 0;}
body {font: 100%/1.4 'DejaVu Sans', Verdana, Sans-serif; color: white; background-color: black;}
#obal, h1 {border: 3px groove red;}
h1 {background-color: green; text-align: center;}
#obal {color: black; background-color: #cecece; background: url(pozadi.png) repeat-y 0px 0px;
    margin: 15px auto; max-width: 60em; min-width: 400px; position: relative;}
#menu {width: 230px; position: absolute; left: 5px; padding-left: 15px;}
menu {list-style-type: none;}
#obsah {margin-left: 260px; padding-right: 20px;}
address {font-size: .8em; text-align: center; background-color: yellow;
  border: 1px red dashed; height: 1.5em; position: relative; top: 2.5em; font-style: normal;}
p {text-indent: 2em;}
h2+p {text-indent: 0;}
p+h2 {margin-top: 1em;}
a {color: navy; padding: 1px 2px;}
menu a {display: block; width: 180px; background-color: #bbbb12; margin-bottom: 3px;}
a:hover {background-color: black; color: #cacaca;}
Nevedomost
Profil *
Áno ďakujem, niečo som urobil, vyzerá to podľa mojich plánov, prosím vás povedzte mi, či, sa vám to nerozhádzalo prosím.
Stránka
Miloš
Profil
V Opeře se to rozpadá – černý blok s textem se zobrazí až pod menu.
Ve Firefoxu je v základní velikosti rámeček menu natažený pod patičku. Se zmenšováním se rámeček menu neúměrně zmenšuje, se zvětšováním se patička stěhuje nahoru.
V Exploreru 8 je hlavní blok moc dlouhý a přesahuje hluboko přes patičku, která je na šířku zkrácená. V kompatibilním zobrazení (jako IE7) totéž. V IE6 totéž.

Pro takový návrh, kdy má menu tvořit souvislý sloupec, zásadně nepoužívám float, nýbrž pozicování (viz příklad výše).
Pozadí sloupce dělám jako obrázek hlavnímu obalujícímu divu – jinak se to ani nedá dělat – nastavovat menu výšku je pitomost.
Obtékání by se mohlo hodit leda tehdy, když by mynu tvořilo jen kousek horního sloupce a hlavní text zpočátku obtéká, ale pak se zapasuje pod menu.

Krom toho máš v CSS chybějící jednotky:
div.menu{width:150; heith:50; — krom toho heith neexistuje – height
p.obsah{width:1258;
ale to už je jenom detail.

To je ten můj kód opravdu tak nesrozumitelný, že se ho nesnažíš pochopit?
nevedomost
Profil *
No, vieš, nechcem ostať pri tomto webe.. Takže toto čo mám ten web, možem zahodiť ano?
Miloš
Profil
Tak, jak to máš, to opravdu není použitelné.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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