Pasek na górze strony

pytanie zadane 17 sierpnia 2016 w HTML i CSS przez Barttyyy Gaduła (4,680 p.)

Witam, siedzę nad tym trochę czasu i próbowałem wiele sposobów. Otóż chcę aby ten kolorowy pasek wydłużył się tak aby dotykał góry strony, tekst ma zostać tam gdzie jest. Ustawiałem height i nic to nie dawało, przy ustawieniu height 100 pasek był dłuższy ale tylko od dołu, nie rósł w górę.

body{
	background-color: #191816;
	margin: 0;
	font-family: 'Slabo 27px', serif;
}
#container{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
h1{
	text-align: center;
	color: #ffffff;
	font-size: 45px;
	text-shadow: 3px 3px 6px #000000;
}
nav{
	display: block;
}
.header{
	background-color: #7FFFD4;
}
.ul1{
	margin-left: 620px;
	font-size: 32px;
	padding: 21px;
	margin-top: -114px;
	list-style: none;
	margin-left: 440px;
	position: fixed;
}
.ul2{
	position: fixed;
	font-size: 32px;
	padding: 21px;
	margin-top: -114px;
	list-style: none;
	margin-left: 1087px;
}
li{
	float: left;
	padding: 20px;
}

	<div id="container">
	<div class="header">
		<h1>Jan Kowalski</h1>
			<nav>
                <ul class="ul1">
                      <li class="Strona główna"><a href="index.html">Strona główna</a></li>
                      <li class="O mnie"><a href="omnie.html">O mnie</a></li>
				</ul>
			</nav>
			<nav>
				<ul class="ul2">
                      <li class="Moje projekty"><a href="#mojeprojekty">Moje projekty</a></li>
                      <li class="Kontakt"><a href="#kontakt">Kontakt</a></li>
                 </ul>
              </nav>
	</div>
	</div>

komentarz 18 sierpnia 2016 przez Eimens Maniak (69,240 p.)

margin-left: 1087px;

Jak musisz coś takiego robić to wiedz że coś źle kombinujesz :)

2 odpowiedzi

odpowiedź 17 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)
wybrane 17 sierpnia 2016 przez Barttyyy

Najlepsza

h1 - > margin: 0;

komentarz 17 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

No tak zamiast napisać margin: 0; pisałem top: 0; Dzięki :D

komentarz 17 sierpnia 2016 przez jaca121212 Nałogowiec (40,760 p.)

no i lipa na codepein pasek nie jest ładny

spójrz -> http://codepen.io/jaca121212/pen/dXAKGL

a dlaczego dajesz dwa razy nav w tym samym divie.

komentarz 17 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

Nie wiedziałem za bardzo jak oddzielić 2 miedzy 2 żeby pomiędzy nimi było miejsce na imie i nazwisko, tylko takie wyjście wpadło mi do głowy ;d

komentarz 17 sierpnia 2016 przez jaca121212 Nałogowiec (40,760 p.)

to i tak nie jest prawidłowo zrobione ale chcę ci pokazać taki atrybut jak :nth-child();

http://codepen.io/jaca121212/pen/dXAKGL

komentarz 17 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)

Dzięki, nie znałem tego ;)

odpowiedź 18 sierpnia 2016 przez Eimens Maniak (69,240 p.)

No wiesz nie każdy użytkownik internetu będzie miał taką rozdzielczość ekranu jak ty!

Nie przyjąłeś żadnego grida, robisz stronę na 100% szerokości strony i ustawiasz wszystko co do piksela. W takim wypadku jak lekko zmieni się rozmiar przeglądarki to wszystko runie. Z własnego doświadczenia powiem ci jak ja bym zrobił na twoim miejscu, zabrał się za czytanie i naukę języka html i css bo nie jest tego mało, a jak patrzę na twoje prace to po prostu nie rozumiesz tego jeszcze i będziesz tylko utrwalał błędy, czego powinieneś unikać. Jeżeli nie masz siły, ochoty wgl czytać o tych językach to nie ma sensu żebyś wgl w tym robił. Jeżeli chcesz zrobić menu to poszukaj w necie np na Codepen, jak tworzą je inni i się tym wzoruj, jeżeli czegoś nie rozumiesz albo nie jesteś pewien to gogluj. W ten sposób powinieneś ominąć wiele złych nawyków.

komentarz 18 sierpnia 2016 przez Barttyyy Gaduła (4,680 p.)
edycja 18 sierpnia 2016 przez Barttyyy

Dopiero ćwiczę tworzenie stron, skupiam się na razie na wyglądzie a nie na responsywności strony.

Ps. Poleciłbyś jakąś książkę, gdzie dobrze jest opisane tworzenie stron łącznie z cssem oraz responsywnościa?