[f.....1]

Uczem sie html-a, podaje kod z matrixa i proszę o pomoc:

Co i gdzie muszę wpisać żeby górny szary pasek z menu nie przewijał się razem ze stroną tylko zostawał widoczny tak jak wykopowy pasek z nawigacją, logiem i menu?

http://jsfiddle.net/hgtg09un/

#pytanie #html #css #zielony

[A.....h]

@fijol1:

position
```**```
: 
```**```
fixed
```**```
;

    
```**```
right
```**```
: 
```**```
0
```**```
;

    
```**```
left
```**```
: 
```**```
0
```**```
;

[brt]

@fijol1: .menu {

background-color: #666666;

height: 55px;

margin: 0 auto;

position: fixed; <!-- tutaj<br/>
}

[A.....h]

I top: 0; też, zapomniałem.

[f.....1]

@Aysorth: @brt: Dziękuje wam mistrzowie klawiatury ( ͡° ͜ʖ ͡°)ﾉ⌐■-■

[Mr_Plank]

@fijol1: Jeśli chcesz wiedzieć, jak wykonano pewien element strony, to wystarczy zajrzeć do konsoli przeglądarki (klawisz F12) i go odnaleźć.

[f.....1]

@Mr_Plank: wiem ale nie mogłem tego znaleźć, dzięki wielkie

[moon5]

@fijol1:

W CSS tylko, bez zmian w HTML.

.menu {

background-color: #666666;

height: 55px;

margin: 0 auto;

position:fixed;

margin-top: -5px;

}

(U mnie działa. A jak nie -5px, to inna liczba idealnie pasująca.)

Ale nie wiem, czy to jest postępowania wzorcowe.

[moon5]

@fijol1:

Faktycznie musi być: "margin: -8px;". Pośpieszyłam się.

[moon5]

Lepiej będzie:

.menu {

background-color: #666666;

height: 55px;

margin: 0 auto;

position:fixed;

top: 0; 

}

Nie wiem, po co tam było:

right: 0;

    left: 0;

(?)

[f.....1]

margin-top: -5px;

@moon5: dzięki stary, margin-top: -8px; działa ale pasek jest tylko do połowy, trzyma się lewej krawędzi.

Pytałeś po co

right: 0;

left: 0;

Dzięki temu pasek nie ucieka w którąś ze stron i działa poprawnie czyli prawidłowej odpowiedzi udzielił mi @Aysorth:

Pozdrawiam :)

[moon5]

@fijol1:

Dzięki temu pasek nie ucieka w którąś ze stron i działa poprawnie

Gdy zrobiłam test z "right: 0;" i "left: 0;" pasek menu poszedł w bok (parę pikseli w lewo) w stosunku do reszty strony... ale pewnie tylko tam, a w Twojej sytuacji takie ustawienie może się sprawdzać.

(A faktycznie reszta strony się przesunęła w prawo.)

Pozdrawiam :)

Ilustracja

[f.....1]

@moon5: pamiętaj jeszcze o

top: 0;

Skoro już się odezwałeś mam inne pytanie:

Jak najedziesz myszką na menu to pojawia się szary pasek ale nie na samym dole jak na wykopie tylko w środku i właśnie myśle jak zrobić żeby pasek pojawiał się na dole:

świeży kod > http://jsfiddle.net/e0m06o0x/

[moon5]

@fijol1:

pamiętaj jeszcze o

top: 0;

Miałam też "top:0".

Jak najedziesz myszką na menu to pojawia się szary pasek ale nie na samym dole jak na wykopie tylko w środku i właśnie myśle jak zrobić żeby pasek pojawiał się na dole:

Ten pasek wygląda jak "border-bottom" pod "menu item" (albo czymś podobnym) w pozycji przy najechaniu myszą ("a: hover")

Trzeba dać większy margines pod tym borderem (czyli "margin" czy "margin-bottom" -->

[f.....1]

@moon5: Wybacz, nie patrzyłem na avatar, zaraz rozpracuje ten border-botom, myśle czy by jakiś padding/ większy odstęp dać między napisami a podkreśleniem, zobaczymy co mi z tego wyjdzie.

[moon5]

@fijol1:

Zwykle wystarczy "margin", ale są takie szablony czy sytuacje, że trzeba wstawić "padding" nie "margin" (zwłaszcza w okolicach "menu"). Ja jestem w tym średnio-zaawansowana. Robiłam to parę razy, ale nie mam pełnej wiedzy.

[moon5]

Tzn. znam różnicę między "margin" a "padding", jednak czasami wiedza teoretyczna nie wystarcza.

[f.....1]

@moon5: Uwaga rozwiązanie zagadki ( ͡° ͜ʖ ͡°)

żeby pasek był na dole a nie w połowie należało w

ul a:link, ul a:visited {

zmienić padding: 5px 10px; na padding: 14px 10px; (pierwszy to odstęp od liter a drugi to przestrzeń między nimi)

http://jsfiddle.net/spvbvnzw/

edit. a margin to marginesy a padding to odstęp.

[moon5]

@fijol1:

Czyli padding dolny się zwiększył.

OK. Powodzenia :)

[f.....1]

@moon5: Dzięki za chęć pomocy, miłego dnia