Z uwagi na dużą liczbę wpisów stworzonych bez wątpienia wyłącznie w celu pozycjonowania stron na określone frazy, dodaliśmy do wszystkich linków (w postach i podpisach) atrybut rel="nofollow". Z tego względu wszystkie dodane linki straciły swoją moc pozycjonerską. Forum jest dla Was, dlatego prosimy o zamieszczanie wyłącznie "prawdziwych" tematów i odpowiedzi.

Pasek na górze i dole strony

Dreamweaver, XHTML, CSS, JavaScript, jQuery
Odpowiedz
  • Wiadomości
Offline

Amarantus

  • Posty: 51
  • Rejestracja: 19 kwie 2012, o 08:20
  • Lokalizacja: OSW

Pasek na górze i dole strony

Post20 lip 2012, o 15:18

Witam,

w jaki sposób zrobić takie paski na górze i dole stronki (aby sie nie przesuwały podczas scrolowania) tak jak na tej stronce:
http://www.intel.com/content/www/us/en/ ... uence.html
Na górę
Offline
Awatar użytkownika

wb1

  • Posty: 35
  • Rejestracja: 6 mar 2010, o 08:44

Re: Pasek na górze i dole strony

Post21 lip 2012, o 10:14

Nadajesz im position: fixed; i odpowiednio: top:0 i bottom:0.
[...] nic nie stoi w miejscu, ani ludzie, ani woda, ani czas.
Na górę
Offline

Amarantus

  • Posty: 51
  • Rejestracja: 19 kwie 2012, o 08:20
  • Lokalizacja: OSW

Re: Pasek na górze i dole strony

Post23 lip 2012, o 09:13

Niestety nie działa, bo przy scrollowaniu pasek znika z ekranu, a mi chodzi aby cały czas był na wierzchu.
Wydaje mi się, że za to odpowiada jakiś scrypt js, który blokuje scrollowanie i paski pozostają cały czas na swoim miejscu.
Na górę
Offline
Awatar użytkownika

Piotr Palarz

Ekspert

Ekspert

  • Posty: 685
  • Rejestracja: 24 kwie 2012, o 00:37

Re: Pasek na górze i dole strony

Post23 lip 2012, o 11:50

HTML:
Kod: Zaznacz cały
<div id="pasek1">
   <!-- treść paska górnego -->
</div>
<div id="pasek2">
   <!-- treść paska dolnego-->
</div>
CSS:
Kod: Zaznacz cały
#pasek1 {
   width: 100%;
   height: 30px;
   background-color: blue;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
}

#pasek2 {
   width: 100%;
   height: 30px;
   background-color: blue;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 9999;
}
Tam nie ma co nie działać :)
Obrazek
Na górę
Offline

Amarantus

  • Posty: 51
  • Rejestracja: 19 kwie 2012, o 08:20
  • Lokalizacja: OSW

Re: Pasek na górze i dole strony

Post23 lip 2012, o 13:57

Dzięki, wszystko działa jak należy :)
Powiedz mi tylko proszę po co jest ustawiony z-index?
Na górę
Offline

nutella

  • Posty: 28
  • Rejestracja: 20 kwie 2012, o 12:14

Re: Pasek na górze i dole strony

Post23 lip 2012, o 18:04

wb1 pisze:Nadajesz im position: fixed; i odpowiednio: top:0 i bottom:0.


Pewnie kolega zrozumiał, że zarówno do górnego paska jak i dolnego wrzuca i top i bottom - dlatego nie działało :P
Na górę
Offline
Awatar użytkownika

Piotr Palarz

Ekspert

Ekspert

  • Posty: 685
  • Rejestracja: 24 kwie 2012, o 00:37

Re: Pasek na górze i dole strony

Post23 lip 2012, o 18:17

z-index jest po to, aby jeden element dać nad drugi, kiedy są pozycjonowane (czyli position: relative, absolute lub fixed);

to znaczy, że gdybyś miał np. w topie jakiś element np. z position: absolute; to mógłby on zakrywać część Twojego paska. Działa to tak, że ten element, który ma wyższą wartość z-index będzie "na wierzchu".

Dlatego zapobiegawczo dodałem to do Twojego kodu :)
Obrazek
Na górę
Offline

Amarantus

  • Posty: 51
  • Rejestracja: 19 kwie 2012, o 08:20
  • Lokalizacja: OSW

Re: Pasek na górze i dole strony

Post24 lip 2012, o 11:01

Dziękuję bardzo za odpowiedź i wyjaśnienie. A mógłbyś zerknąć na ten post:
joomla-swmenufree-t2291.html
bo z tego co szukałem na necie to też jest niby jakiś problem z-index, ale nie udało mi się tego rozwiązać.
Na górę
Offline

PawelPracki

  • Posty: 2
  • Rejestracja: 2 maja 2017, o 21:03

Re: Pasek na górze i dole strony

Post2 maja 2017, o 21:29

Witam. Postanowiłem odświeżyć temat, ponieważ mam problem z tej samej dziedziny.

Chcę, by na mojej stronie w wersji responsywnej, <header>, w którym znajduje się logo oraz przycisk wyświetlający menu były obok siebie i zawsze na samej górze. Pod tymi elementami umieściłem cień, który ma odciąć stale wyświetlane elementy od reszty strony. Problem pojawia się gdy dodaję sekcję (photo) już poza <header>, ponieważ sekcja ta wyświetlana jest od samej góry strony i część chowa się za HEADEREM, a nie tak jak bym chciał czyli bezpośrednio pod nim. Wiem, że pomogło by nadanie tej sekcji parametru np. Top: 150px; ale w wersji responsywnej nie spełnia to swojej roli. Macie może pomysł jak rozwiązać ten problem? Z góry dziękuję.

Mój kod HTML:
Kod: Zaznacz cały
<body>
<header>
    <div class="outward">
        <div class="pos-center">
            <div class="logo">
            <img src="img/logo-annluk.png" />
            </div>
            <div class="menu">
                <div class="button">
                    <div class="toggler"></div>
                    <div class="toggler"></div>
                    <div class="toggler"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="shadow">
    </div>
</header>
   
<section id="photo">
    <div><img src="img/photo1.jpg"></div>
</section>
</body>


I CSS:
Kod: Zaznacz cały
@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1500px) {


    body {
        background: #f5f5f5;
        width: 100%;
    }

    body, input, textarea, select {
        font-family: 'Tahoma';
        font-size: 1em;
        line-height: 23px;
        color: #282722;
    }

    .pos-center {
        margin: 0px auto;

    }

    header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
   
    header .outward {
        background: #fff;
        height: auto;
        overflow: hidden;
    }
   
    header .shadow {
        width: 100%;
        height: 19px;
        background: url('../img/shadow.png') repeat-x;
        position: absolute;
        z-index: 1;
    }

    header .pos-center {
        width: 90%;
    }

    header .logo {
        width:50%;
        margin: 1.25em 0 1.25em 0;
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    header .logo img{
        width: 100%;
        min-width: 202px;
        min-height: 50px;
        max-width: 417px;
       
    }

    header .menu .button {
       
        width: 50%;
        width: 3.125em;
        height: 3.125em;
        float: right;
        margin-top: 1.25em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    } 

    header .menu .toggler {
        width: 100%;
        height: 10px;
        background: #d40000;
        border-radius: 5px;
        margin-bottom: 10px;
    }
   
   
    #photo {
        width: 100%;
        height: auto;
        position: relative;
        z-index: -1;
        border-bottom: solid 5px #343434;
       
    }
   
   #photo img {
        width: 100%;
        height: auto;
    }
Na górę
Offline

krzykwiat

  • Posty: 54
  • Rejestracja: 5 lip 2013, o 17:19

Re: Pasek na górze i dole strony

Post12 maja 2017, o 20:07

Jeżli znasz less/css to bez problemu odczytasz jak to zrobić:
Kod: Zaznacz cały
body {
   padding-top: 0;
   @media @tablet{
      padding-top: @height+3px;
   }
}
header {
   background-color: @white;
   z-index: 99999;
   width: 100%;
   border-bottom: 3px solid @primaryColor;
   position: inherit;
   &.active {
      .box-shadow();
   }
   @media @tablet {
      position: fixed;
      top: 0;
      left: 0;
   }
   .container {
      .clearfix();
         @media @tablet{
            height: @height;
         }
   }
   nav {
      float: none;
      @media @tablet{
         float: right;
         .center-vertical();
      }
      h2 {
         text-indent: -9999em;
         display: block;
         height: 0;
      }
      ul {
         display: none;
         background-color: #FFFFFF;
         @media @tablet {
            display: block;
            background-color: transparent;
         }
         li {
            border-bottom: 1px solid @dividerColor;
            float: none;
            width: 100%;
            &:first-child{
               border-top: 1px solid @dividerColor;
               @media @tablet {
                  border-top: none;
               }
            }
            @media @tablet{
               float: left;
               width: auto;
               border-bottom: none;   
               &:hover {
                  a {
                     .transition (0.3s);
                     border-bottom: 2px solid @primaryColor;
                  }
               }
            }
               
            
            a {
               display: block;
               text-decoration: none;
               text-transform: uppercase;
               font-family: @font-def;
               font-size: 16px;
               font-weight: 600;
               padding: 20px 10px;
               color: @primaryColor;
               @media @tablet{
                  margin-left: 5px;
                  margin-right: 5px;
                  padding-top: 3px;
                  padding-bottom: 3px;
                  .transition (0.3s);
                  border-bottom: 2px solid transparent;
               }
            }
         }
      }
   }
}


kod HTML:

Kod: Zaznacz cały
<header>
   <div class="container">
      <div class="hamburger">
         <div class="logo"><h1><a href="../">Taurus Energia Sp. z o.o.</a></h1></div>
         <div class="btn">
           <span></span>
           <span></span>
           <span></span>
         </div>
      </div>      
      <nav>
         <h2>Główna nawigacja</h2>
         <ul>
            <li><a href="/">Start</a></li>
            <li><a href="/o-nas/">O nas</a></li>
            <li><a href="/nasza-oferta/">Oferta</a></li>
            <li><a href="/wspolpraca/">Współpraca</a></li>
            <li><a href="/contact/">Kontakt</a></li>
         </ul>
      </nav>
   </div>
</header>


w akcji wygląda to tak: taurusenergia.pl
Na górę
Odpowiedz

Wróć do Projektowanie w XHTML i CSS

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 0 gości

cron