| Autor | Zpráva | ||
|---|---|---|---|
| Pavel Straka Profil |
Dobré odpoledne, rád bych požádal o radu někoho, kdo má s podobnou problematikou zkušenosti.
Chtěl bych vytvořit layout, kde v horní části stránky bude červený vodorovný pruh po celé šířce obrazovky. Přes něj bude umístěn blok o dané šířce, obsahující všechny prvky. Vytvořil jsem takovýto provizorní návrh. Bojoval jsem s tím, aby se celá věc správně zobrazila v Internet Exploreru, takže se omlouvám, že všechny CSS vlastnosti jsou definované přímo pomocí atributu style, a tím pádem to není dvakrát přehledné. Takto to funguje tak, jak jsem chtěl. Můj dotaz ale směřuje spíše k tomu, jestli je kód "správně" napsaný, jestli by se nedal napsat nějak lépe, jestli nemůže v souvislosti s tímto nastat nějaký problém. Děkuji za ochotu pomoci. Kód: <div style="background-image:url('vzhled/lista2.png'); width:100%; height:80px; position:absolute; top:130px;"></div>
<div style="position:relative; width:1200px; margin-left:auto; margin-right:auto;">
<div style="background-image:url('vzhled/dite2.png'); width:179px; height:183px; position:absolute; left:100px; top:10px;"></div>
<div style="background-image:url('vzhled/listicka.png'); width:1000px; height:12px; position:absolute; left:100px; top:198px;"></div>
<div style="background-color:white; width:1000px; min-height:500px; height:500px auto; position:absolute; left:100px; top:210px;">text...</div>
</div>Odkaz: http://inzerce.pavelstraka.com/ |
||
| panther Profil |
#2 · Zasláno: 23. 7. 2012, 16:05:45
Pavel Straka:
„jestli je kód "správně" napsaný, jestli by se nedal napsat nějak lépe“ samozrejme, temer vzdy jde napsat lepe :) Ale je tu dost pro me nepochopitelnych veci: - 1. div nepotrebujes. Soucasne pozadi definovane u body dej k html a ten cerveny pruh dej k body
- dale pak uplne zbytecne pozicujes, kdyz veskere pozicovani vyhazes, nic by se stat nemelo - obal je dost siroky (1200px, idealne by mel byt 960-980), navic z nej vyuzivas jen 1000px (to je nestastna sirka, pri 1024 budu muset asi scrollovat, kvuli par pizelum) |
||
| Pavel Straka Profil |
#3 · Zasláno: 23. 7. 2012, 16:14:14
Rozumím.
1. Jak to myslíš, že první div nepotřebuju? Jak mohu dát ten červený pruh k body? Jak pak určím, že má ten pruh být 130px od vrchu stránky? 2. Když zručím pozicování, jak určím, že obrázek mimina bude přesahovat pruh přesně tak, jak teď chci? 3. Ano, to máš pravdu, to upravím. |
||
| Trejpa Profil |
#4 · Zasláno: 23. 7. 2012, 16:17:04
Pavel Straka:
Zbytečné pozicování, zbytečné bloky jen s obrázky. Jde to úplně jednoduše. |
||
| Pavel Straka Profil |
#5 · Zasláno: 23. 7. 2012, 16:23:19
Máte pravdu, myslel jsem, že řešení, které jsem použil je elegantnější, než kdybych použil u body obrázek pozadí s červeným pruhem i s šedivým přechodem. Ale teď vidím, že není.
Děkuju mockrát. |
||
| panther Profil |
#6 · Zasláno: 23. 7. 2012, 16:28:14
Pavel Straka, Pavel Straka:
„Ale teď vidím, že není.“ zalezi na tom, jestli se cerveny prh muze menit nebo to nehrozi. Pokud by treba podstranky mely obsahovat barevne varianty pruhu, pak by bylo dobre ho nechat zvlast. „Jak pak určím, že má ten pruh být 130px od vrchu stránky?“ background-position „2. Když zručím pozicování, jak určím, že obrázek mimina bude přesahovat pruh přesně tak, jak teď chci?“ zaporny margin, nebo pozicovani. Ale ostatni pozicovani zrusit. Opet - pokud to je dekoracni obrazek, pak na pozadi, jak uvedl Trejpa, pokud je to obrazek (treba logo), pak img.
|
||
| Pavel Straka Profil |
#7 · Zasláno: 23. 7. 2012, 16:34:47
panther: Ano, tomu rozumím. Děkuju za upřesnění.
|
||
| Pavel Straka Profil |
#8 · Zasláno: 23. 7. 2012, 17:51:32 · Upravil/a: Pavel Straka
Mohli byste mi, prosím, ještě poradit nejlepší způsob, jestliže chci, jak do červeného pruhu, tak nad něj, umístit nějaký text?
Děkuji Vám. Připravit si <div> který bude těsně nad červeným pruhem, pak <div>, který bude, co se týče výšky, kopírovat červený pruh a končit těsně nad tím bílým obloučkem? A obrázek mimina umístit pomocí pozicování? Mimino bude použito jako odkaz - tedy jako obrázek img. |
||
| panther Profil |
#9 · Zasláno: 23. 7. 2012, 18:32:01
Pavel Straka:
obecně se takhle baví strašně těžko. Záleží, o jaký text se jedná, pak se dá vybrat optimální řešení. V obecné rovnině je strašně moc možností. |
||
| Pavel Straka Profil |
#10 · Zasláno: 23. 7. 2012, 18:33:14
Spíše než text to budou formuláře HTML. Nahoře pro přihlášení + nějaké odkazy pod ním. A v červeném pruhu bude formulář pro rychlé vyhledávání.
|
||
| Pavel Straka Profil |
#11 · Zasláno: 23. 7. 2012, 20:04:43
Rozdělil jsem stránku na divy, tak jak jsem popisoval v minulém příspěvku a mimino pozicuji vzhledem k tomu hlavnímu bloku. Přijde mi jako nejlepší řešení.
|
||
| Trejpa Profil |
#12 · Zasláno: 24. 7. 2012, 00:05:02
Pavel Straka:
„Rozdělil jsem stránku na divy, tak jak jsem popisoval v minulém příspěvku a mimino pozicuji vzhledem k tomu hlavnímu bloku.“ Rozdělil jsem si stránku na významové bloky. Určím si jejich velikosti a vzájemné pozice a nechám je za sebou plynout, pokud mají být vedle sebe, tak je nechám plavat. Nemám vůbec důvod použít pozicování, leda že bych z nějakého důvodu potřeboval překrývat obsahové prvky. |
||
| Pavel Straka Profil |
A pokud bych chtěl ten obrázek mimina použít jako odkaz, tedy samostatně, ne jako pozadí divu? Pak neznám jiné řešení než použít pozicování a rád se přiučím. Děkuji.
|
||
| margin Profil * |
#14 · Zasláno: 24. 7. 2012, 00:29:02
Posun záporným marginem.
|
||
| Trejpa Profil |
#15 · Zasláno: 24. 7. 2012, 00:40:02
margin:
To asi tentokrát ne. Pavel Straka: „Pak neznám jiné řešení než použít pozicování a rád se přiučím.“ Přiuč se. |
||
| Pavel Straka Profil |
#16 · Zasláno: 24. 7. 2012, 00:42:13
Ani jedno z těch řešení mě nenapadlo a přitom je to tak jednoduché. Děkuju Vám oběma za pomoc a rady ještě jednou.
|
||
|
Časová prodleva: 6 let
|
|||