Autor | Zpráva | ||
---|---|---|---|
Rodgers23 Profil |
#1 · Zasláno: 19. 7. 2015, 12:45:48
Mam dotaz - mam div wrapper a v nem mam nekolik dalsich divu, ktere jsou v nem ruzne umistene a jednom z techto divu se mi nacita ruzne obsah z databaze. A potreboval bych, at se mi vyska wrapperu prizpusobuje podle nacitaneho obsahu. Zkousel jsem height: auto, ale to nefunguje
|
||
mimochodec Profil |
#2 · Zasláno: 19. 7. 2015, 12:47:44
A co height nezadat?
|
||
Rodgers23 Profil |
#3 · Zasláno: 19. 7. 2015, 13:02:02
To jsem zkousel taky a nic
|
||
xROAL Profil |
#4 · Zasláno: 19. 7. 2015, 13:15:15
Nepoužívaš pozicovanie alebo
float ?
To by mohlo spôsobovať, že sa wrapper neprispôsobuje výške automaticky. Prípadne pošli živú ukážku. |
||
mimochodec Profil |
#5 · Zasláno: 19. 7. 2015, 13:16:21
Tak je problém někde jinde. Dej odkaz na stránku, kde to nefunguje, nebo vyrob stejně nefunkční ukázku na http://kod.djpw.cz
|
||
Rodgers23 Profil |
#6 · Zasláno: 20. 7. 2015, 07:55:45
<div id="wrapper"> <h1>Fórum</h1> <p><font color="DarkBlue" size="4">Nějaký text bla bla</font></p> <br> <div id="forum"> <table cellpadding ="6" rules="rows"> <tr> <th>Téma</th><th>Autor</th><th>Vytvořeno</th><th>Příspěvků</th> </tr> <!-- START topics --> <tr> <td width="350px"><a href="publicgroup/{group_id}/view-topic/{ID}">{name}</a></td><td><a href="profile/view/{id}">{creator_name} {creator_surname}</a></td><td>{created_friendly}</td><td>{posts}</td> </tr> <!-- END topics --> </table> </div> </div> A tydy je css. Když mám top ve #forum na 0, tak to jde, ale když dám top 20px, tak se mi wrapper nepřizpůsobuje a forum mi přetéká. A je jasné , že určité bloky chci mít od sebe pěkně odsazené.. #forum{ position:relative; width: 800px; min-height: 440px; color: #3D70A3; text-align: justify; position: relative; top:20px; margin: 0 auto; background: white; } #forum table{ width:100%; line-height: 27px; } #forum table tr:hover { background-color:#E8E8E8; } #wrapper{ margin: auto; width:1100px; } |
||
Trejpa Profil |
Rodgers23:
Relativní pozicování je cesta do pekel. Začátečníci nedomýšlejí, co se stane. Jestli potřebuješ tabulku shora odsadit, použij k tomu určené metody, ne pozicování. Například horní margin na tabulce, spodní margin nebo padding na předchozím bloku, alternativně nějaký vložený blok mezi. #forum table { margin-top: 20px; } #forum{ Relativní pozicování se chová tak, jako by objekt byl na původním místě. Na nové místo je přemístěno jen jeho zobrazení a ve výchozím stavu překrývá to, nad čím je zobrazeno. Ten tvůj wrapper správně obaluje původní umístění tabulky. Takže chování je správné, ale užití nevhodné. |
||
Rodgers23 Profil |
#8 · Zasláno: 20. 7. 2015, 09:12:21
Tak jo díki, to jsem netušil. Takže to relativní pozicování můžu použít jen když budu mít nějaký objekt stále na tom samém místě nebo se raději tomu úplně vyhnout?
|
||
Trejpa Profil |
#9 · Zasláno: 20. 7. 2015, 09:52:04
Rodgers23:
Relativní pozicování není vhodné skoro na nic, k rozložení bloků na stránce se nehodí nikdy. Užitečné je (bez zadání posunu) k ukotvení souřadnic absolutního pozicování. Dále bych viděl užití například při svislém vystrčení nějakých značek z textu, třeba akordů. |
||
Kcko Profil |
#10 · Zasláno: 22. 7. 2015, 09:07:15
Trejpa:
„Relativní pozicování není vhodné skoro na nic, k rozložení bloků na stránce se nehodí nikdy.“ Není vhodné skoro na nic? Jak chceš řešit modelový příklad. HLAVICKA (text-align: center) =========== Logo zleva - floatované, text / claim, vystředěný, díky pravidlu v hlavičce [ikonky] / tlačítka / jazyky floatované doprava Logo má jinou výšku než text a ikonky vpravo. Relativní pozicovaní tady použivám kvůli optickému srovnání. PS. Není možné a ani nechci nastavovat nějakým obalujicím divům pevnou výšku, abych na ně pak mohl aplikovat vertical-align: middle. |
||
anonymníí Profil * |
#11 · Zasláno: 22. 7. 2015, 09:13:35
Kcko:
Třeba marginem. Navíc Trejpa psal o layoutu, ty píšeš o posunech, které Trejpa zmiňuje (např. akordy). |
||
Kcko Profil |
#12 · Zasláno: 22. 7. 2015, 09:24:28
anonymníí:
Trejpa psal že se to nehodí skoro na nic. Proto se tomu divím, samozřejmě na skládání layoutu to není vhodné, protože se něco posune a ta mezera tam bude pořád = prvek je vyjmut z toku dokumentu. Margin se nemusí hodit zcela vždy, na ten můj modelový příklad se mi jeví relativní pozicování lepší. Určitě se to dá lépe řešit flex layoutem; ale podpora je pořád špatná (s ohledem na nižší verze IE). |
||
Trejpa Profil |
#13 · Zasláno: 22. 7. 2015, 10:10:06
Kcko:
Určitě se dá řešit nadpis webu jednoduše a bez pozicování: ukázka |
||
Kcko Profil |
#14 · Zasláno: 22. 7. 2015, 10:54:14
Trejpa:
;) ale i ikonky vpravo musí být vystředěny. |
||
Trejpa Profil |
#15 · Zasláno: 22. 7. 2015, 11:31:41
|
||
Kcko Profil |
#16 · Zasláno: 22. 7. 2015, 13:23:40
Trejpa:
V tom nepružném padding-top. To jestli to posunu od oka nebo přesným výpočtem přes relativní top nebo paddingem, je uplně jedno, obojí je na levačku. |
||
Trejpa Profil |
#17 · Zasláno: 22. 7. 2015, 13:58:38
Kcko:
Ty jsi náročný. Jde to i bez paddingu. Jediným rozměrem je výška řádku, která odpovídá výšce obrázku, jehož velikost, předpokládám, znáš dopředu. |
||
Kcko Profil |
#18 · Zasláno: 22. 7. 2015, 14:16:22
Trejpa:
Nejsem, pouze grafické studio pro které musím dělat řeší každý pixel. Říkám tomu pixelhunting ;-) Výšku hlavičky mnohdy dopředu neznám, takže ani tenhle způsob není optimální. V tvém případě jde navíc hezky vidět zarovnání i kvůli obrázkovým placeholderům (25px), protože to jsou vybarvené čtverečky, já někdy dostanu ikony bez borderu, které jsou různě vysoké a proto jsem se vlastně připojil do vlákna, abych zjistil zda-li to půjde i jinak. Díky za ukázku, zatím zůstanu i relativních posunů. |
||
Chamurappi Profil |
#19 · Zasláno: 23. 7. 2015, 11:11:07
Reaguji na Kcka:
„Není vhodné skoro na nic?“ Ono tam to „skoro“ dává prostor pro zlomek protipříkladů. Ale většina použití, co jsem zatím viděl, byla spíš nevhodná a v důsledku problematická. „PS. Není možné a ani nechci nastavovat nějakým obalujicím divům pevnou výšku, abych na ně pak mohl aplikovat vertical-align: middle.“ A udělat z toho display: table také nejde? Nebo by to nepomohlo? Možná jsem přesně nepochopil zadání.
„Relativní pozicovaní tady použivám kvůli optickému srovnání.“ Jak tedy vypadá tvá verze kódu? To optické srovnání je posun o nějaký konkrétní počet pixelů nebo em ?
|
||
Kcko Profil |
#20 · Zasláno: 23. 7. 2015, 13:43:58
Chamurappi:
display: table se mi nehodí všude , viz problém v responsivu s obrázky ( a řešení jsem objevil pouze tohle http://rjwebdesign.cz/blog/CSS/20150212-responsivni-obrazky-v-tabulce) To optické srovnání je posun o nějaký konkrétní počet pixelů nebo em? Ano přesně tak, když si představíš obrázek vlevo (různě široký a vysoký, zpravidla představující logo), pak jsou veprostřed nějaké další prvky (textové claimy s různou velikostí fontu) a zpravidla další ikonky (floatované doprava, vetšinou hamburger menu, sociální ikony atd) které jsou také různě široké a vysoky a grafik to chce mít vertikálně vše srovnané (je to trošku máčo, dělá to všecko v indesignu a weby začal dělat až nedávno a podle toho to bohužel vypadá ...) |
||
Časová prodleva: 10 let
|
0