Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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: Problém s nastylováním textu

Aktivity
Avatar
Jan Demel
Tvůrce
Avatar
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é.
Avatar
Aleš Lulák
Člen
Avatar
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
Avatar
Odpovídá na Jan Demel
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č
Řešení problému
Nahoru Odpovědět
4.2.2015 19:12
Neaktivní uživatelský účet
Avatar
Jan Demel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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.