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

HTML a CSS HTML a CSS Problém s nastylováním textu American English version English version

Avatar
Jan Demel
Redaktor
Avatar
Jan Demel:

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:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Jan Demel
Fredep:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět  +2 4.2.2015 19:12
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Jan Demel
Redaktor
Avatar
Odpovídá na Fredep
Jan Demel:

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.