Forum PHP.pl > [CSS][HTML]Navbar na logu

Pomoc - Szukaj - Użytkownicy - Kalendarz

aas92

10.11.2015, 13:17:55

Witajcie,
Mam problem ze wstawieniem na logo belki (w kolorze czarnym z przezroczystością) na której będą buttony. Strona jest responsywna i chciałbym że możliwe było animowanie tych buttonów póżniej w js. Ma ktoś pomysł jak zrobić właśnie taki efekt w css?

HTML:

Kod

CSS:

Kod

* {padding:0;margin:0;}

html {width:100%;height:100%;}
#container
{
margin:0 auto;
}

header {margin:25px 0;}
header img {width:100%;}

#header-fixed
{
    background-image:url(../image/logo.jpg);
}

#header-fixed #header-limiter
{
    max-width: 1200px;
}

@media (min-width: 1100px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 1100px) and (min-width: 1000px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 1000px) and (min-width: 800px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 800px) and (min-width: 500px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 500px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}

freemp3

10.11.2015, 13:41:06

Elementowi o klasie 'header-limiter' ustawiasz w css atrubut position na relative. Następnie dodajesz w nim kontener, w którym to będą znajdowały się przyciski. Jemu z kolei ustawiasz position na absolute i bottom na 0, aby był "przyklejony" na dole.

aas92

10.11.2015, 16:07:18

I nadal coś nie działa. Dodam że się uczę

Wygląda to teraz tak:

CSS:

Kod

* {padding:0;margin:0;}

html {width:100%;height:100%;}
#container
{
margin:0 auto;
}

header {margin:25px 0;}
header img {width:100%;}

#header-fixed
{
    background-image:url(../image/logo.jpg);
}

#header-fixed #header-limiter
{
    max-width: 1200px;
    position: relative;
}

#container-header-limiter
    background-color:#292c2f;
    height: 80px;
    color: #ffffff;
    position:absolute;
    bottom:0;

#main {float:center;margin:0 0 25px;}

footer {clear:both;color:#FFF;background:#121212;padding:15px 0 15px 30px;margin:0 0 25px;}

@media (min-width: 1100px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 1100px) and (min-width: 1000px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 1000px) and (min-width: 800px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 800px) and (min-width: 500px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}
@media (max-width: 500px) {
    #container {width:1050px;float:center;}
    #main {width:100%;}
}

HTML:

Kod

<!DOCTYPE HTML>
<html lang='pl'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
    <title>nazwa</title>
    <meta name="description" content="opis">
    <meta name="keywords" content="słowa kluczowe" />
    <meta name="robots" content="noindex,nofollow">
    <meta name="googlebot" content="unavailable_after: 31-Dec-2007 23:59:59 EST">
    <link rel='stylesheet' href='css/style.css'>
</head>
<body>

<div class='container'>

    
    <header class="header-fixed" >
        <div class="header-limiter">
            <img src="images/logo.jpg" alt=""/>
        </div>
        <div class="container-header-limiter">
        <li>text</li>
        </div>
    </header>



    
    <section id="main">
        <h1>asdasdsdasda</h1>
        <p>test</p>
    </section>

    
    <footer>
        <p>sdasd</p>
    </footer>

</div>

</body>
</html>

A efekt jest taki: http://aas92.cba.pl

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.