NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 14 - Obtékání v HTML - Float, Stín

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Martin Šenovský:17.7.2015 10:19

CSS vypadá takto (část s obtékáním)

        }

article header {
        width: 250px;
        float: left;

}

article section {

                width: 710px
                float: left;
                background:white;

}
 
Odpovědět
17.7.2015 10:19
Avatar
Odpovídá na Martin Šenovský
Neaktivní uživatel:21.8.2015 8:06

Ahoj,
mě se ten čistič pozadí také neprojevoval a když jsem si stáhnul zde web a kouknul do CSS, tak jsem měl chybu v CSS v místě, kdy se přidávalo pozadí z toho vygenerovanýho čteverečku.
v CSS by to mělo být napsané takto:

article {
background: url('obrazky/po­zadi.png');
}

Já jsem měl ten background přidaný v tagu body a proto se mi obtékání pozadí neprojevilo :)

Odpovědět
21.8.2015 8:06
Neaktivní uživatelský účet
Avatar
Bebbana
Člen
Avatar
Bebbana:24.9.2015 18:27

Ahoj, mám problém s pozicováním elementů. Mám html tagy i css styl přesně podle tohoto manuálu, ale chtěla jsem na stránky přidat php anketu, a tak jsem přidala do <article></article> kromě <header> a <section> ještě tag <aside>, ve kterém by se ta anketa měla zobrazit.
Když jsem do ní pak přidala php kód, tak se mi celý footer posunul nahoru k části, kde je aside, tak, že se překrývají. Čistič jsem nechala na místě, kde byl. Když dám do sekce aside pouhý html kód, tak to nedělá, jen když tam mám php skript. Co dělám špatně?
Tadyje výsek z mého index.php:
...

<article>
                        <div id="centrovac">
                                <header>
                                    <?php
                                        if (isset($_GET['stranka']))
                                            $titulky = ['domu' => 'Domů',
                                                    'omne' => 'O mně',
                                                    'dovednosti' => 'Dovednosti',
                                                    'clanky' => 'Články',
                                                    'kontakt' => 'Kontakt',
                                                    'prihlaseni' => 'Přihlášení',
                                                    ];
                                            $url = $_GET['stranka'];
                                            if(array_key_exists($url, $titulky) !== false)
                                            {
                                            echo('<h1>' . $titulky[$url] . '</h1>');
                                            }
                                    ?>

                                    <!--<img src="obrazky/borecNaKonec.jpg" alt="BOREC NA KONEC" width="230" height="100"/>-->
                                </header>

                                <section>
                                    <div class="centrovany">
                                        <?php
                                            if  ( isset($_GET['stranka']))
                                            {
                                                $url = $_GET['stranka'];
                                            }
                                            else if (isset($_GET['clanek']))
                                            {
                                                $url = $_GET['clanek'];
                                            }
                                            else
                                            {
                                                $url = 'domu';
                                                $vlozeno = include('podstranky/' . $url . '.php');
                                            }


                                            if (isset($_GET['stranka']) && (preg_match('/^[a-z0-9]+$/', $_GET['stranka'])))
                                            {
                                                $url = $_GET['stranka'];
                                                $vlozeno = include('podstranky/' . $url . '.php');
                                            }
                                            else if (isset($_GET['clanek']) && (preg_match('/^[a-z0-9]+$/', $_GET['clanek'])) )
                                            {
                                                require('Db.php');
                                                Db::connect('sql2.webzdarma.cz', 'nakonec.borec', 'nakonec.borec', '0000');
                                                //require_once('knihovny/clankyKnihovna.php');
                                                function najdiClanek($url)
                                                {
                                                    $clanek = Db::queryOne('
                                                    SELECT *
                                                    FROM clanky
                                                    WHERE url=?
                                                    ', $url);
                                                    return $clanek;
                                                }
                                                $clanek = najdiClanek($_GET['clanek']);

                                                echo('<h2>' . $clanek['titulek'] . '</h2>'
                                                    . '<b>' . $clanek['popisek']
                                                    . '</b><br/><br/><br/><p>' . $clanek['obsah'] . '</p><br/>');
                                            }
                                        ?>

                                    </div>
                                </section>
                            <aside>
                                <?php
                                    $spojeni=mysql_connect('sql2.webzdarma.cz', 'nakonec.borec', '0000');
                                    mysql_select_db('nakonec.borec',$spojeni);
                                    $cislo=1; //číslo ankety
                                    $vysledek=mysql_query("SELECT obsah FROM otazky WHERE anketa_id=$cislo",$spojeni);
                                    $radek=mysql_fetch_row($vysledek);
                                    echo '<table><tr><td colspan="2">'.$radek[0].'</td></tr>';


                                ?>
                            </aside>
                          <div class="cistic"></div>
                        </div>

                </article>

                <footer>
                        <?php

...

A ještě css, vše jak v manuálu, pouze přidána část s article aside:

article aside{
        float: right;
        width: 200px;
        background: white;
        border: 2px solid #006797;
        box-shadow: 2px 2px 7px #1c2228;
        padding: 0px 20px;

}

Přidala jsem náhled stránky .Patička zmizela z dolní částí a místo toho se ukazuje napravo nahoře pod částí, kde mám anketu (zatím jen rozdělanou), tj v části aside></aside>. Jakoby clear vůbec nefungovalo. Prosím, poraďte, co s tím.

 
Odpovědět
24.9.2015 18:27
Avatar
Bebbana
Člen
Avatar
Bebbana:24.9.2015 18:30

Jo, a ještě jsem také zapoměla upozornit na divné zobrazování modré barvy (resp. obrázku) v sekci <article></ar­ticle>, ale je to docela do očí bijící.

 
Odpovědět
24.9.2015 18:30
Avatar
Tomáš123
Člen
Avatar
Tomáš123:25.9.2015 16:10

Pravdepodobne to spôsobuje neukončený tag <table>. Ak to nezaberie, tak prilož výsledok z prehliadača. Tam bude vidieť, čo sa ako pretransformovalo. Prípadne odkaz na stránku.

Odpovědět
25.9.2015 16:10
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
chrisvalachovic:20.11.2015 22:13

Zdravim... Ja mam taky problem, ze ked mam v zlozke aj index.html spolu s rozlozeni.html , tak mi to nechce nacitat to rozlozenie... nacita to web v podstate spravne, len ako keby som tam vobecnepridal to rozlozenie... vie mi niekto poradit?

 
Odpovědět
20.11.2015 22:13
Avatar
Tomáš123
Člen
Avatar
Tomáš123:21.11.2015 10:25

Predpokladám, že chyba bude v adrese. Správne by tam mal byť iba názov súboru. Prípadne ukáž kód...

Odpovědět
21.11.2015 10:25
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Vít Cigánek:27.11.2015 12:07

Aby to vypadalo tak jak, je to v posledním obrázku. Tak to je třeba upravit html. Css je napsany ok.

 
Odpovědět
27.11.2015 12:07
Avatar
Martin Halada:16.12.2015 19:26

Martine, našel jsem chybu, která ti nevykreslí modré pozadí. Spočívá v zapomenutém středníku

article section {

width: 710px //zde musí být středník
float: left;
background:white;
}

Odpovědět
16.12.2015 19:26
Počítač je zařízení sloužící k řešení problémů, které by bez něj vůbec nevznikly.
Avatar
Petr Šťastný
Tvůrce
Avatar
Petr Šťastný:8.1.2016 14:23

Ahoj, mám problém se stylováním. Můj testovací web teď vypadá takto:
http://prntscr.com/9nitrw
ale podle tutorialu by měl vypadat nějak takhle
http://www.itnetwork.cz/…s_float1.jpg
Kde mám chybu? Přikládám kódy HTML a CSS

<!DOCTYPE html>
<html lang="cs-cz" />



  <head>
    <meta charset="utf-8" />

    <title>Test</title>
        <script type="text/javascript" src="testscript.js"></script>
        <link rel="stylesheet" href="testcss.css" type="text/css" />
  </head>
  <body>
    <article>
      <header>
                <h1>NADPIS</h1>
      </header>


      <section>
          <p>text</p>
          <img src="http://www.itnetwork.cz/images/awards/16.png" width=300> <br >
          <button>Tlacitko</button>
      </section>
    </article>
  </body>
/* CSS Document */
body {
        font-family: Verdana;
        background: url('http://www.itnetwork.cz/images/5/html/pozadi.png'); //vim, ze se to takhle delat nema, ale chci si to pouze vyzkouset...
}

h1, h2, h3, h4, h5 {
        text-align: left;
        color: #0a294b;
        font-family: Arial;

article header {
        width: 250px;
        float: left;
}

article section {
        width: 710px;
        float: left;
        background: white;
}
Editováno 8.1.2016 14:25
 
Odpovědět
8.1.2016 14:23
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 10 zpráv z 250.