Autor Zpráva
Michal82
Profil
Přeji krásný podvečer,
omlouvám se za mojí neznalost...nejsem nějaký profík v tvorbě webových stránek (spíše programuji v C mřížka ) :o)
Takže pro můj pokus jsem si zatím zvolil zkušební verzi programu Dreamweaver - nevím jestli to byla dobrá volba ale zkouším...
Tak a teď k problému:
než abych to sáhodlouze popisoval, tak jsem raději udělal příklad na stránce www.JavurekMichal.cz když měním šířku obrazovky podívejte se jak se posouvá obrázek

Tady je kod:

<!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" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>pokus</title>
<style type="text/css">
body {
    margin: 0; 
    padding: 0; 
    text-align: center;
    }
    
#stranka {
    width: 800px;
    margin: 10px auto 0 auto;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    }
    
h1 {margin: 20px 0;}
/* ]]> */
#logo {
    position:absolute;
    left:166px;
    top:18px;
    width:167px;
    height:53px;
    z-index:1;
    background-image: url(obrazky/logo.png);
    display: block;
}
#apDiv1 {
    position:absolute;
    left:203px;
    top:18px;
    width:128px;
    height:63px;
    z-index:1;
    background-image: url(obrazky/uvod_tlac.png);
}
</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="stranka">
    <h1>text, bla bla bla bla bla text</h1>
</div>

</body>
</html>


...no a já bych si moc přál kdyby se obrázek posouval správně :o) mam tušení v čem může být problém ale nemohu najít řešení, bohužel... sedím nad tím už od včerejška... :o(
Děkuji za jakoukoliv radu...
Michal...
Davex
Profil
Michal82:
když měním šířku obrazovky podívejte se jak se posouvá obrázek
Nevím co dělám špatně, ale mně se obrázek neposouvá, protože má absolutní pozici.
Michal82
Profil
aha... o copak by tam mělo býti aby to fungovalo? já nemohu najít nějaké řešení... :o(
Someone
Profil
Nepoužívej absolutní pozicování.
Michal82
Profil
#logo {
    position:relative;
    left:166px;
    top:18px;
    width:167px;
    height:53px;
    z-index:1;
    background-image: url(obrazky/logo.png);
    display: block;

kód jsem změnil takto ale problém to neřešilo... :o(
Someone
Profil
Jinak: Nepoužívej absolutní pozicování.
Michal82
Profil
...no tak z toho jsem blázen...
margin
Profil *
Michal82:
Možnosti jsou, pokud zavrhneme tabulky, dvě.
Nepoužívat pozicování, ale obtékání, tedy CSS float a clear.

Druhá možnost je používat pozicování, ale to je pro většinu na pochopení ještě složitější, než používat obtékání. Koukni na CSS pozicování » Vnořené pozice
panther
Profil
margin:
Možnosti jsou, pokud zavrhneme tabulky, dvě.
na co tabulky proboha v tomto případě?

Michal82:
<h1><span></span>TEXT</h1>
CSS
h1 {margin: 0; padding: 20px 0; position: relative;}
h1 span {display: block; width: 128px; height: 63px; position: absolute; top: 7px; left: 30px; background: url('obrazek');}

Takto to pro tebe bude asi nejjednodušší.

Druhá možnost, pokud by byl zelený obrázek velký tak, jak potřebuješ (tedy 128x63px a ne 82x121px), bylo by to ještě přehlednější:
<h1>TEXT</h1>
CSS
h1 {margin: 0; padding: 20px 0; position: relative; background: #fff url('obrazek') 30px 7px no-repeat;}

Případně třetí možnost, abych byl úplný:
<div id=stranka>
    <img src="obrazek">
    <h1>text</h1>
</div>

#stranka {width: 800px; margin: 10px auto 0; border: 1px solid #000; overflow: hidden;} 
img, h1 {float: left;}
img {margin: 7px 30px 0; display: inline}
h1 {padding: 20px 0; margin: 0;}
Michal82
Profil
...ach ju...asi jsem opravdu hloupý...nějak to nemohu dát dohromady... :o) mno...ještě popřemýšlím....jen nechci, proboha, skončit u tabulek... :o)))
margin
Profil *
panther:
na co tabulky proboha v tomto případě?
Ty jsem zmínil jen pro úplnost. Teď mi došlo, že jsem je raději neměl zmiňovat a napsat, že CSS nabízí floatování a pozicování.

Michal82:
asi jsem opravdu hloupý...nějak to nemohu dát dohromady...
Chybí ti zkušenosti, málokdo je tak geniální aby to dal rychle dohromady bez předchozích zkušeností. Popřemýšlej, zkoušej a pokud nebudeš vědět, jak dál, tak ukaž, k čemu si dospěl a určitě ti někdo poradí.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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