Diskuze: Problém s nastylováním textu

Naučíme tě pracovat na home-office.

Zjistit více...

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

Aktivity

Jan Demel

Tvůrce

Jan Demel:4.2.2015 18:50

Ahoj všichni. Narazil jsem na takový nemilý problém a opravdu nevím, jak ho vyřešit. Na obrázku můžete vidět, že <span> je umístěný opravdu hodně vpravo... Potřebuju, aby ten text byl přesně uprostřed toho pozadí. Dokázal byste mi někdo prosím poradit ?

HTML

<section class="navbar">
                <section class="container">
                        <section class="brand">
                                <img src="{$basePath}/images/logo.png">
                        </section>
                        <ul class="menu">
                                <li><a n:href="Homepage:default">Domů</a></li>
                                <li><a n:href="About:default">O nás</a></li>
                                <li><a n:href="Products:default">Aktuální nabídka</a></li>
                                <li><a n:href="Contact:default">Kontakt</a></li>
                        </ul>
                </section>
        </section>

        <div class="goodChoice">
                <span>Dobrá volba pro každou příležitost</span>
        </div>

CSS

*{
        margin:0;
        padding:0;
}

body{
        font-family:'Open Sans', sans-serif;
        background-color:#ecf0f1;
        margin:0;
        padding:0px;
}

.navbar{
        background-color:#000000;
        width:100%;
        height:50px;
}

.container{
        margin-left:auto;
        margin-right:auto;
        width:960px;
}

.navbar .brand{
        float:left;
}

.navbar .brand img{
        height:50px;
}

.menu{
        float:right;
        padding:0px;
        margin:0px;
}

.menu li{
        float:left;
        list-style-type:none;
}

.menu li:hover{
        background-color:white;
}

.menu li:hover > a{
        color:#000000;
}

.menu li a{
        display:block;
        padding:13px;
        color:white;
        text-decoration:none;
}

.goodChoice{
        margin:0px;
        padding:0px;
        width:100%;
        height:301px;
        background-image:url('../images/background.jpg');
        text-align:center;
}

.goodChoice span{
        line-height:301px;
        font-size:30px;
}

Odpovědět

4.2.2015 18:50

To co se zdá být nemožné, je vždy možné.

Aleš Lulák

Člen

Aleš Lulák:4.2.2015 19:08

Ahoj,

ke section.container přidej ješte

overflow: hidden;

přiznám se Ti, že teď přesně nevím proč, a už nemám čas to řešit, tak se Ti případně večer podívám

Nahoru Odpovědět

4.2.2015 19:08

"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:4.2.2015 19:12

Ahoj, obrázek

.navbar .brand

má zřejmě větší výšku než 50px. Vzhledem k tomu, že má nastavený float, způsobí, že všechny elementy kolem něj se odstrčí, posunou. Ihned pod tímto obrázkem máš ten div .goodChoice, který se musí také přizpůsobit tomu obrázku, posune se.
Máš dvě možnosti. Buď si musíš pohlídat, aby obrázek nezasahoval do další části stránky, nebo mu zrušit float. Můžeš také udělat to co ti radí Aleš Lulák...

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

4.2.2015 19:12

Neaktivní uživatelský účet

Jan Demel

Tvůrce

Jan Demel:4.2.2015 20:51

Dík moc. Pomohl jsi mi

Nahoru Odpovědět

4.2.2015 20:51

To co se zdá být nemožné, je vždy možné.

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 4 zpráv z 4.

Nejčastěji vyhledáváné

Diskuze: Problém s nastylováním textu