NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: HTML a CSS - zaoblené rohy

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Adam Ježek
Tvůrce
Avatar
Adam Ježek:23.9.2014 18:30

Zdravim,
mám na stránkách jakýsi informační pruh, kde mám jednotlivé části rozdělené tak, že jsem je nastrkal do neviditelné tabulky (vim že by se takhle obsah webu řešit neměl). Jde mi o to, že něco je jentak na pozadí, ale nějaké věci jsou v buňce s texturou, aby byly odlišený od pozadí. Jde mi o to, že ta textura má ostré rohy a já bych chtěl, aby je měla nějak zaoblené. Jestli jsem se nevyjádřil dost jasně, tak mi jde o to, aby ten rámeček (viz foto ) s nefunkčním počitadlem měl rohy zaoblené jako ten rámeček vlevo (tam mam ale border a né tabulku)
Dík.

Editováno 23.9.2014 18:31
Odpovědět
23.9.2014 18:30
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Adam Ježek
Adam Ježek:23.9.2014 18:31

zapoměl jsem na obrázek, takže to vypadá takto

Nahoru Odpovědět
23.9.2014 18:31
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Snorlax
Tvůrce
Avatar
Snorlax:23.9.2014 18:53

V CSS je border-radius. Zkus použít ten :) A otázka, jak si to myslel s tou tabulkou?

Nahoru Odpovědět
23.9.2014 18:53
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Snorlax
Adam Ježek:23.9.2014 19:09

Tak, že ta hranatá část je buňka tabulky s nastavenym pozadim. To zelené je část, kde border-radius používam, ale nevim jak zaoblit tu výplň buňky. Teoreticky by se nabízelo použít zaoblenej obrázek jako pozadí, ale to budu muset pro každou část dělat individuální a to se mi nechce a navíc by to bylo nepraktický

Nahoru Odpovědět
23.9.2014 19:09
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Adam Ježek
Snorlax:23.9.2014 19:37

Pošli nám kód, to bude nezjednoduší na vzájemné pocohpení.

Nahoru Odpovědět
23.9.2014 19:37
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Adam Ježek
Honza Bittner:23.9.2014 19:38

Proč to máš sakra jako tabulku? :D

Tabulka se IMHO zaoblit nedá...

Nahoru Odpovědět
23.9.2014 19:38
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Honza Bittner
Adam Ježek:23.9.2014 19:39

jako tabulku to mam proto, že tam mam pruh různejch blbinek a dát to do tabulky bylo nejjednodušší řešení, jak je udržet tak jak chci :D vím že se to nedělá, ale prostě ta jednoduchost k tomu svádí

Nahoru Odpovědět
23.9.2014 19:39
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Adam Ježek
Snorlax:23.9.2014 19:42

nedělá se to zřejmě z nějakého důvodu. CSS je lepší z mnoha důvodů. a těžký taky není :)

Nahoru Odpovědět
23.9.2014 19:42
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Adam Ježek
Neaktivní uživatel:23.9.2014 19:44

Hele, tabulku můžeš zaoblit tak, že jednotlivé krajní buňky zaoblíš. Jiná možnost by byla , ale ne moc vhodná, že zaoblíš normálně ten hlavní element, ve kterém je ta tabulka a nastavíš mu

overflow: hidden;
Nahoru Odpovědět
23.9.2014 19:44
Neaktivní uživatelský účet
Avatar
Snorlax
Tvůrce
Avatar
Snorlax:23.9.2014 19:45

http://stackoverflow.com/…s-html-table

Nahoru Odpovědět
23.9.2014 19:45
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Snorlax
Adam Ježek:23.9.2014 19:45

No, pokud se v tom vyznáš... Pro organizaci tam mam tabulku (a tabulku v tabulce) a mě to nijak nepřehledný nepřijde, ale prej to pěkný zrovna neni.

        </td>

        <td>
            <table>
                <tr>
                    <td>
                             <ul class="navstevy">
                            <?php

                              $navstevnik = 4;
                              //DODĚLAT NAČÍTÁNÍ HODNOTY Z DATABÁZE IP ADRES NÁVŠTĚVNÍKŮ!
                                 echo '<br/><b>';
                                 echo('<li>Tyto stránky navštívilo již</li>');

                            //Promene pro nastaveni vzhledu pocitadla

                            $digits = 5;        //Pocet zobrazovanych cislic
                            $adrdigit = "font";    //Cesta k obrazkum s obrazem cisla
                            $count = $navstevnik;

                            //Vypsani stavu na obrazovku

                            $j = 0;
                            for($i=$digits-1;$i>=0;$i--)
                            {
                                if($i<strlen($count))
                                {
                                    $c = substr($count,$j,1);
                                    $j++;
                                    echo "<img src=$adrdigit/$c.gif>";
                                }
                                else
                                {
                                    echo "<img src=$adrdigit/n.gif>";
                                }
                            }
                            echo('<li>lidí! <br/></li>');
                            echo '</b><br/>';
                                 ?>
                             </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul class="navstevy"
                            <p><br/></p>
                                <script>
                                  //tady je další ten "modrej rámeček", je pod tim co je vidět na obrázku
                                </script>
                            <p><br/><br/></p>
                        </ul>
                    </td>
                </tr>
            </table>


        </td>
    </tr>
</table>
Nahoru Odpovědět
23.9.2014 19:45
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Snorlax
Adam Ježek:23.9.2014 19:50

bohužel takhle to nechci :/ výsledek byl asi takovýto, ale já bych chtěl, aby se zaoblily rohy těch modrejch rámečků

Nahoru Odpovědět
23.9.2014 19:50
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Adam Ježek
Neaktivní uživatel:23.9.2014 19:50 
</td>

<td>
    <table>
        <tr style="overflow: hidden;">
            <td>
                     <ul class="navstevy">
//a tak dále
Editováno 23.9.2014 19:51
Nahoru Odpovědět
23.9.2014 19:50
Neaktivní uživatelský účet
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Adam Ježek
Snorlax:23.9.2014 19:52

No já bych to celý předělal, ale pokud si stojíš nad tímto, tak jediný co mě napadá je tu vnitřní tabulku obalit divem kterému dáš onen border-radius, možná by to šlo, ale neručím za to. Ale fakt doporučuji to předělat, tabulky jsou už dávno mrtvý :)

Editováno 23.9.2014 19:52
Nahoru Odpovědět
23.9.2014 19:52
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Adam Ježek
Neaktivní uživatel:23.9.2014 19:54

Taky si myslím, že je vhodnější to předělat. Vždyť se na to podívej. Upravil jsi nějakou hodnotu a objevil se ti tam bílý rámeček. Odkud?

Nahoru Odpovědět
23.9.2014 19:54
Neaktivní uživatelský účet
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Adam Ježek:23.9.2014 19:59

neupravil jsem nějakou hodnotu, ale použil jsem tam to, co mi snorlax doporučoval ze stackowerflow a to bylo přidání další třídy do css

a co bych měl teda použít?

Editováno 23.9.2014 19:59
Nahoru Odpovědět
23.9.2014 19:59
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Adam Ježek
Neaktivní uživatel:23.9.2014 20:05

Předpokládám, že to pozadí máš jako css background: něco;. Pod to napiš toto.:

border-radius: 10px;
overflow: hidden;
Nahoru Odpovědět
23.9.2014 20:05
Neaktivní uživatelský účet
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Adam Ježek:23.9.2014 20:08

ano, v css mam na to třídu. každopádně ani po upravení na

.navstevy {
    background: url('pozadi/pozadi_modra_navstevy.png') #100BD1;
    border-radius: 10px;
    overflow: hidden;

}

nefunguje. Co teda tam mam mít když né tu tabulku?

Nahoru Odpovědět
23.9.2014 20:08
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Adam Ježek
Snorlax:23.9.2014 20:11

základem je si hrát na Alenku v říši DIVů :D Zkus si projet místní HTML & CSS tutoriály, určitě tam najdeš elegantnější způsob jak pozicovat :)

Nahoru Odpovědět
23.9.2014 20:11
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Snorlax
Adam Ježek:23.9.2014 20:24

Alenka v říši divů nejsem. V celém webu jsou jen dva divy - jeden na logo a druhý obaluje skoro všechno a řeší obtékání textu :D

Nahoru Odpovědět
23.9.2014 20:24
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Adam Ježek
Snorlax:23.9.2014 20:25

mno tak budeš mít div na počítadlo, div na menu, div, na patičku,... Máš pozicování absolute nebo relative?

Nahoru Odpovědět
23.9.2014 20:25
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Snorlax
Adam Ježek:23.9.2014 20:31

většina je statická, hlavička s meny je fixní. myslim že na pár místech mam relativní, ale to je jinde než to co teď řešim

Nahoru Odpovědět
23.9.2014 20:31
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Adam Ježek
Snorlax:23.9.2014 20:39

všude by měl být relative, absolute moc nepoužívej. Opravdu si zkoukni místní tutoriály, je to opravdu skvělá investice :)

Nahoru Odpovědět
23.9.2014 20:39
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Snorlax
Adam Ježek:23.9.2014 20:44

absolute nepoužívam. A všechno co o webotvorbě umim mam odtud

Nahoru Odpovědět
23.9.2014 20:44
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Adam Ježek
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Adam Ježek:23.9.2014 20:50

tak pardon, netušim co se stalo, ale najednou to už funguje a když jsem se vracel v historii úprav, tak jsem zjistil, že to je tím

border-radius: 10px;
 overflow: hidden;

Děkuju

Nahoru Odpovědět
23.9.2014 20:50
Počkej chvíli, poradím se s křišťálovou koulí.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 25 zpráv z 25.