| Autor | Zpráva | ||
|---|---|---|---|
| Michal82 Profil |
#1 · Zasláno: 26. 2. 2012, 17:22:06
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 |
#2 · Zasláno: 26. 2. 2012, 17:31:52
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 |
#3 · Zasláno: 26. 2. 2012, 17:52:37
aha... o copak by tam mělo býti aby to fungovalo? já nemohu najít nějaké řešení... :o(
|
||
| Someone Profil |
#4 · Zasláno: 26. 2. 2012, 18:01:00
Nepoužívej absolutní pozicování.
|
||
| Michal82 Profil |
#5 · Zasláno: 26. 2. 2012, 18:10:14
#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 |
#6 · Zasláno: 26. 2. 2012, 18:16:04
Jinak: Nepoužívej
|
||
| Michal82 Profil |
#7 · Zasláno: 26. 2. 2012, 18:23:38
...no tak z toho jsem blázen...
|
||
| margin Profil * |
#8 · Zasláno: 26. 2. 2012, 19:05:06
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> 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> 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 |
#10 · Zasláno: 26. 2. 2012, 20:27:43
...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 * |
#11 · Zasláno: 26. 2. 2012, 20:42:53
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í. |
||
|
Časová prodleva: 12 let
|
|||
0