Autor Zpráva
Rodgers23
Profil
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
A co height nezadat?
Rodgers23
Profil
To jsem zkousel taky a nic
xROAL
Profil
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
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
    <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}&nbsp;{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{
    position:relative;
    width: 800px;
    min-height: 440px;
    color: #3D70A3;
    text-align: justify;
    position: relative;
    top:20px;
    margin: 0 auto;
    background: white;
}

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
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
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
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 *
Kcko:
Třeba marginem.

Navíc Trejpa psal o layoutu, ty píšeš o posunech, které Trejpa zmiňuje (např. akordy).
Kcko
Profil
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
Kcko:
Určitě se dá řešit nadpis webu jednoduše a bez pozicování: ukázka
Kcko
Profil
Trejpa:
;) ale i ikonky vpravo musí být vystředěny.
Trejpa
Profil
Kcko:
ale i ikonky vpravo musí být vystředěny
Svisle? A v čem je problém?
Kcko
Profil
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
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
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
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
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á ...)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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