Skocz do zawartości

Cuan
 Udostępnij

Rekomendowane odpowiedzi

Witam!
Przedstawiam, mój kolejny poradnik, tym razem już z dobrego serca, nie aby odpracować warna. :D

Dziś mamy bardziej skomplikowaną strukturę strony niż w ostatnim poradniku, a wygląda ona tak:

 

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf8" />
	<title>Nawigacja</title>
	<style>
	* {
		border: none;
		margin: 0px;
		padding: 0px;
	}
	
	body {
		min-width: 1024px;
	}
	
	header {
		width: 100%;
		font-size: 16px;
		font-family: Verdana, Arial;
		text-align: center;
		background: RGB(64, 128, 32)
	}
	
	header>nav {
		width: 100%;
		height: 48px;
		background: RGB(64, 32, 128);
	}
	
	aside, section {
		display: inline-block;
	}
	
	aside {
		width: 20%;
	}
	section {
		width: 80%;
	}
	</style>
</head>
<body>
	<header>
		Nagłówek 
		<nav></nav>
	</header>
	<aside>
		
	</aside><section>
		
	</section>
	<footer></footer>
</body>
</html>
Podgląd: KLIK

Szybkie objaśnienie struktury:
aside - sidebar (boczny panel)
section - sekcja strony, element ten stosuje się, gdy strona podzielona jest na podstrony (sekcje).

//Znów dzięki dwójkowemu systemowi otrzymaliśmy flatowy kolorek nawigacji.


To teraz do rzeczy...

1. Pionowa nawigacja na liście.
HTML:

 

<ul class="mynav">
	<li><a href="http://nydylier.pl">Nydylier</a></li>
	<li onclick="window.location = 'https://www.pecetowicz.pl';">Webmasteruj</li>
</ul>
CSS:

 

	ul.mynav {
		width: 100%;
		display: block;
		list-style: none;
	}
	
	ul.mynav>li {
		width: 100%;
		height: 24px;
		display: block;
	}
	
	ul.mynav>li>a {
		width: 100%;
		height: 24px;
		display: block;
	}
Przykład: KLIK
Objaśnienie: Tworzymy listę i nadajemy jej klasę "mynav", następnie elementom listy (li) nadajemy wymiary i wyświetlanie jako blok. Aby elementy listy nas przenosiły pod wybrany adres możemy użyć odnośnika (a) i nadać mu rozmiary elementu listy, oraz wyświetlanie w bloku lub za pomocą JavaScript. Dwie opcje przedstawione są na dwóch elementach listy.

2. Pozioma nawigacja na liście.
HTML:

 

<ul class="mynav">
	<li><a href="http://nydylier.pl">Nydylier</a></li>
	<li onclick="window.location = 'https://www.pecetowicz.pl';">Webmasteruj</li>
</ul>
CSS:

 

	ul.mynav {
		width: 100%;
		display: block;
		list-style: none;
		text-align: left;
	}
	
	ul.mynav>li {
		height: 48px;
		display: inline-block;
	}
	
	ul.mynav>li>a {
		height: 48px;
		display: block;
	}
Przykład: KLIK
Objaśnienie: Tworzymy listę i nadajemy jej klasę "mynav", następnie elementom listy (li) nadajemy wysokość i wyświetlanie jako blok w lini. Aby elementy listy nas przenosiły pod wybrany adres możemy użyć odnośnika (a) i nadać mu wysokość elementu listy, oraz wyświetlanie w bloku lub za pomocą JavaScript. Dwie opcje przedstawione są na dwóch elementach listy. Bloki w lini możemy ustawić jak tekst, używając text-align dla ul.

3. Nowoczesna pozioma nawigacja.
Krótki opis: Dziś HTML5 daje nam znacznij
Odnośnik do komentarza
Udostępnij na innych stronach

  • 3 tygodnie później...

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Podobna zawartość

    • Witam. Postanowiłem uczyć się PHP itd., a najlepiej wg mnie uczyć się w praktyce, więc zacząłem pisać sobie stronę. Część HTML i CSS skończyłem, więc teraz zaczynają się niewiadome i czarna magia. 
      Zawsze mnie zastanawiało jak wygląda struktura strony gdzie są skrypty PHP wczytywane z bazy danych i zewnętrznych plików (newsy, komentarze itd.). Więc, nie wiedząc kompletnie nic, przerobiłem index.php na stronę gdzie wszystko jest includowane z zewnętrznych plików (header.php, navigation.php, news.php [co obecnie robi za treść strony głównej] i footer.php). I w zasadzie nie wiem jak to poprawnie rozwiązać. Myślałem, by może czymś co znam pod nazwą $_GET przeładowywać treści index.php, że np. kliknięcie w link "Regulaminy" zamieni include news.php w include regulamin.php czy coś, ale tak jak mówię, niewiele się na tym znam. 
    • Witam. Mam takie pytanie, chciałbym aby cała tabelka, czyli nawigacja, licznik prędkości, zbiornik paliwa itp. znajdował się na górze ekranu w poziomej tabelce. Szukałem takowej opcji w ustawieniach, ale za nic nie mogę tego znaleźć. Byłbym wdzięczny za każdą pomoc. 

    • Hejka wszystkim.
      Mam pewne pytanko dotyczące CSS'a. W jaki sposób mogę rozmieścić elementy w nawigacji, które są zamieszczone w liście np. aby logo znajdowało się po prawej stronie, Strona Główna oraz Oglądaj na środku a Rejestracja z Logowaniem po prawej stronie. Dołączam zdjęcie oraz kod źródłowy. Pozdrawiam i dziękuje za zainteresowanie
      Kod html :
      <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="description" content="Strona poświęcona rozgrywką piłkarskim. Udostępniony strumień w czasie rzeczywistym z aktualnym meczem."> <meta name="keywords" content="piłka nożna, mecze, rozgrywki, piłkarskie, stream, na żywo"> <meta name="author" content="Rafał Podraza"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="img/favicon.ico"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet"> <title>MY SPORT</title> </head> <body> <div id="container"> <div id="nav"> <ol> <li><img src="img/logo.png" alt="Logo"></li> <li><a href="#">Strona Główna</a></li> <li><a href="#">Oglądaj</a></li> <li></li> <li class="right"><a href="#">Zaloguj</a></li> <li><a href="#">Zarejestruj</a></li> </ol> </div> <div class="section1"></div> <div class="section2"></div> <div id="footer"></div> </div> </body> </html> Kod CSS:
      * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Slabo 27px', serif; } body { font-size: 20px; } #container { max-width: 100%; max-height: auto; margin-left: auto; margin-right: auto; } #nav { width: 100%; height: auto; background-color: #10253D; padding: 24px 18px; text-align: center; } #nav > ol { display: inline-block; list-style-type: none; margin: 0 auto; } #nav > ol > li { float: left; margin-right: 20px; line-height: 130px; } #nav > ol > li.right { } #nav > ol > li img { width: 40%; } #nav > ol > li > a { display: block; text-decoration: none; font-family: 'PT Sans Narrow', sans-serif; color: #ffffff; font-size: 22px; font-weight: bold; }
    • Witam posiadam taki problem że na stronie główniej jako gość rejestracja jest gdzieś z boku nie mogę tego nigdzie znaleśc żeby zmienić.
      Screen:

    • Witam gdzie mogę zmienić obramowanie takiej belki http://prntscr.com/am1kei
      Żeby było coś takiego lub podobnego szukałem i nie mogę zrobić http://prntscr.com/am1l0m
      Adres forum pst.xaa.pl
  • Najnowsze tematy

  • Ostatnio rozwiązane

×