Pasek na górze strony, przewijający się wraz ze stroną

0

Cześć! Mam pytanie. Otóż chce zrobić pasek na górze strony (Taki jak na allegro, tylko że jest stały tzn. nieruchomy tzn. nie przewija się wraz ze stroną.), i mam na razie taki kod:

html:

<body>
<div class="sidebar">
<div>

css:

<style type"text/css">
.sidebar {
    top: 0;
    left: 0;
    right: 0;
	position: fixed;
	height: 80px;
	border: solid 1px #fdd041;
	border-top-width: 3px;
	padding: 10px;
	background-color: #C0C0C0;
	overflow: hide;
}
</style>

Ale chciałbym żeby na pasku było np. coś takiego: z lewej nagłówek strona internetowa, a z prawej strony napis hasło i

<input type="text">

obok siebie. Pomożecie?

0

Chodzi o sidebara umieszczonego na gorze strony. Ale nie wiem jak zrobic odstep pomiedzy napisami itd.

0

Chodzi Ci o to żeby elementy były ułożone obok siebie, a nie pod sobą?

Poczytaj o właściwości Float.

#element1, 
.elementy-obok-siebie {
  float: right;
}
.clear {
  clear: both;
}

<div class="sajdbar">
  <div id="element1"></div>
  <input class="elementy-obok-siebie" type="text />
  <input class="elementy-obok-siebie" type="text />

  <div class="clear"></div>    <!-- dodaj to żeby .sajdbar się nie rozjechał -->
</div>
0

Dzięki, działa. Sorry że napisałem sidebar (html'em itd zajmuje się już całkiem długo, ale tym paskiem dopiero co się zainteresowałem) i przestawiłem sobie na górę, ale mam jeszcze jedno pytanko. Mianowicie: jak zrobić taki paseczek (wysokość: 50px) zaraz pod tym moim bannerem (czy jak mu tam :) ) żeby tylko on się ruszał (position: fixed) a ten na nad nim nie, i żebym nie musiał liczyć ile ten pierwszy ma w sumie pikseli itd tylko żebym od razu mógł napisać że np 5px pod tym moim bannerem. Jak to zrobić? (ps. myślałem żeby zrobić go tak samo jak Ty mi napisałeś, ale nie wiem jak to zrobić żebym mógł zrobić tak żeby wpisać np 5px pod moim bannerem)

0

Opierając się na poprzedniej struktorze:

<div class="sajdbar">
  <div id="element1"></div>
  <input class="elementy-obok-siebie" type="text />
  <input class="elementy-obok-siebie" type="text />
 
  <div class="clear"></div>    <!-- dodaj to żeby .sajdbar się nie rozjechał -->
</div>
<div class="paseczek"></div>

.paseczek{
height:50px;
position:fixed;
}

powinno zadziałać, ale nie jestem pewien bo nie przetestowałem.
Problem w tym jest taki, że przy scrollowaniu w dół będziesz miał na górze przerwe o wysokości "sajdbara" i poniżej dopiero paseczek co chyba nie jest Twoim celem?

0

Tak . To nie jest to chciałem. Da sie zrobic, żeby dobrze działało, żeby paski były kolorowe, i miały overflow na hidden?

0

Że co? Powiedz na spokojnie jaki chcesz efekt uzyskać i potem wytłumacz co ma do tego kolor paska i overflow..

0

Chce mieć dwa paski na górze. Jeden już mam. Chce mieć drugi 50px w dół od razu pod nim. Tylko ten drugi mniejszy ma przewijać się wraz ze stroną. Oba mają mieć overflow: hidden i kolory, każdy inny. (Uff)

0

Skoro obaj mają mieć overflow:hidden i kolory to w czym masz problem? Daj overflow:hidden i kolory...
Co do pierwszej części... czemu moje poprzednie rozwiązanie było złe?

0

Nie wiem do ktorej cześci kodu to dodac.

0

Ja też nie wiem. Ogarnij się.

0

Jeszcze raz. Nie wiem gdzie wstawić overflow i color. I twoja odpowiedź była dobra; nie zrozumieliśmy się.

0

Do arkusza css?
Masz klasy "sajdbar" i "paseczek". W stylach dopisujesz dla obu te atrybuty. Dla paseczka będzie to wyglądało tak:

.paseczek{
height:50px;
position:fixed;
overflow:hidden;
background:pink; 
}

W background dajesz wartość koloru słownie (musisz sprawdzić jakie są zdefiniowane kolory w css), w rgb (np. rgb(r,g,b), gdzie r,g i b to wartości 0-255, lub kod hexadecymalny (np. #A0A0A0) ).

0

A do paseczka trzeba dodac float: top ?

0

float może być tylko left i right... Co Ty chcesz osiągnąć?

1

Nie ma czegoś takiego jak float: top. Czytałeś wgl linka którego Ci wysłałem?

Wydaje mi się że nie wiesz jak do końca te elementy na stronie się układają, i jak parametr float to zmienia.

0

Chce osiągnąc 2 paski na gorze strony. Jeden wiekszy, drugi mniejszy. Oba mają miec overflow: hidden i background-color. Drug mniejszy paseczek (ten niżej) ma miec position: fixed.

0

Nie no bez jaj... Wszystko już w tym wątku jest napisane. Nie znasz najbardziej podstawowych podstaw. Nie obraź się, ale jeżeli faktycznie starasz się to rozgryźć to daj sobie spokój z tym. Jak to jest na poprawkowe zaliczenie to i tak długo nie pociągniesz na tych studiach. Jeżeli jednak nie chce Ci się zrozumieć i oczekujesz gotowego rozwiązania to nie ten dział.

Po co Ci w ogóle overflow:hidden? Wiesz co robi ten atrybut? Wszystko to wygląda jakbyś przepisał to z zadania na jakieś zaliczenie, a nie kiwnął nawet palcem, żeby sprawdzić co i jak.

0

Może i tak... Ale overflow jest do obsługiwania tekstu wychodzącego poza obszar klasy.

0

I rozumiem ze jak tekst się nie mieści to chcesz go uciąć...?

1

Postaram Ci się opisać troszkę, żeby Ci rozjaśnić w głowie i żeby Ci było łatwiej samemu sobie radzić z tego typu problemami.

Wyobraź sobie że każdy element na stronie np <div> </div>, <p> </p>, <ul> <li></li> </ul> to pudełko (nie licząc obiektów z display: inline, jak np <a></a>). Pudełka mogą mieć różny rozmiar oraz margines. Teraz tak, jeżeli nie ustawisz im żadnego position ani float to te pudełka będą jedno pod drugim. Nie ważne ile masz dostępnego miejsca, bez znaczenia jest też rozmiar. Pod sobą i koniec.

Jeżeli ustawisz jednemu i/lub więcej elementom obok siebie float (np float: left albo float: right) to wtedy nie będą pod sobą, tylko odpowiednio po prawej lub po lewej obok siebie w dostępnym miejscu (nadrzędne pudełko, nie całej strony).

Jeżeli ustawisz pudełku jakieś position, to ten element tak jakby "wyjdzie" z tego szablonu i będziesz mógł go ustawić nad innymi elementami, albo w taki sposób by był po środku dwóch elementów, albo np żeby wychodził poza kontury swojego rodzica (nadrzędnego elementu) albo możesz go przyciąć (tu się przyda overflow).

position: absolute sprawi że pudełko będzie "na wierzchu" w górnym lewym rogu (na pozycji (0, 0) chyba że ustawisz inaczej z top i left). Kolejne pudełka nie będą poniżej niego (czyli górna krawędź następnego elementu nie będzie zaraz pod dolną krawędzią aktualnego elementu) ale będzie pod tym elementem (czyli np jak następnym będzie mniejszy, to ten pierwszy może go zakryć).

position: fixed oznacza prawie to samo co absolute, z tym że element nie rusza się jak scrollujesz.

Jak mówiłem wyżej, elementy bez ustawionego float i position są w stosunku do "rodzica" (elementu nadrzędnego). Tzn taki element nie może wyjść poza ramy rodzica.
Z position: fixed lub position: absolute sprawa ma się trochę inaczej. Te elementy są w stosunku do pierwszego elementu z position inną niż static (idąc od elementu w górę) (każdy element ma domyślnie position: static). Jeżeli nadałeś tylko jednemu elementowi position, to ten element będzie w relacji do body.

Tyle ode mnie, ale na przyszłość postaraj się korzystać z dostępnych źródeł. Jeżeli nie masz problemu z angielskim, strona http://www.w3schools.com/ jest dla Ciebie, jest tam cały dział poświęcony html'owi oraz sandbox w którym możesz pisać swój kod i od razu zobaczyć wynik ("Try it yourself", z tego co pamiętam). Jeżeli operujesz tylko polskim zainteresuj się http://www.kurshtml.edu.pl/

0

Poza tym, po co robić dwa elementy z position: fixed z height: 100px skoro możesz zrobić jeden z height: 200px i do środka walnąć normalne dwa divy.

Na starych kompach czasem ten pasek nie nadąża z przesunięciem, więc czasem te paski mogłyby się rozdzielić.

1 użytkowników online, w tym zalogowanych: 0, gości: 1