Как да си направя навбар!

PHP, MySQL, Javascript, XHTML и др.
Post Reply
User avatar
HarveyWNvm
Потребител
Потребител
Posts: 280
Joined: 04 Aug 2016, 18:40
Skype: HarveyWNvmVevo
CS Nick: doide li admina
Favorite version: CS: 1.5
Steam Community ID: usersharvey190
Location: Plovdiv
Contact:

Как да си направя навбар!

Post by HarveyWNvm »

Здравейте, има ли някой да ми помогне за това защото имаше една тема за навбар но не можах да успея. Сега ще ви дам всичките кодове дето от един фр съм ги взел

Саздавате два файла един HTML и един CSS едитваме хтмл документа и пишем в него

// Има 2 начина за саздаването на навбар но и двата правят едно и съящо нещо !! сега ще използваме по-простия начин !!
Коментарите в хтмл се слагат в ъглови скопи пример <!-- Tova e comentar -->
index.html

Code: Select all

<!DOCTYPE html>  <!-- Девинираме, че съдържанието в файла е HTML5 -->
<html> <!-- отварящ таг оказваш началото на хтмл документа -->
<head> <!-- Това е главната част "главата на документа" моше да съдържа хипер връски, мета дани, инфо, и полезна информация за самия документ -->
<meta charset="utf-8" /> <!-- Това е мета таг разпознаващ изиците не може без него -->
<meta lang="en" /> <!-- Това също е мета таг но той дава информация на какъв език е написън кода -->
<link rel="stylesheet" type="text/css" href="style.css" /> <!-- Това инклудва цсс файла в хтмл документа  -->
<!-- Толкова за хеад часта тези дани са ни достатачни за да си направим готиния навбар :д -->
</head> <!-- Край на хеад тага -->

<body> <!-- Това е отварящ таг на бодито тоест тялото на документа -->
<div class="navbar">
<!-- Start  Links -->
<a href="#">начало</a>
<a href="#">начало</a>
<a href="#">начало</a>
<a href="#">начало</a>
<a href="#">начало</a>
<!-- End Links -->
</div> <!-- Navbar -->
</body> <!-- Това е затварящия таг на бодито -->
</html <!-- End html -->
Това беше навбара нищо сложно!! :)
Преминаваме към цсс файла:

В цсс /* Tova e coment */
style.css :D

Code: Select all

* { padding: 0px; margin : 0px; } /* Премахва отстъпа от хтмл документа демек ня да е малко на ляво или на дясно */
а { text-decoration: none }  /* Премахва декоративният бордер */
li { list-style-type: none } /* Премахва декоративните приставки на ли тага */
.navbar {
 width: 1000px; /* Дължина 1000px /*
 height 35px; /* Щирина 30px */
background-color: #333; /* Черен Фон */
border-top: 3px solid dodgerblue; /* Бордер от горната страна на навбара 3пх в син цвят */
border-bottom: 3px solid dodgerblue; */ Същото само, че от долу */
margin: auto; /* Центрира навбара */

.navbar a { 
display: block; /* Придаваме на а тага да е блоков елемент */
font-weight: bold; /* Текста да е одебелен */
font-size: 11px;  /* Текста ще е 11 пиксела */
text-transform: uppercase; */ Не зависимо дали сме го написали с малки или големи букви то ще се показва с големи */
color: dodgerblue; /* Цвета на текста */
padding-left: 10px; /* текста ще се одалечи с 10 пиксела от ляво */
padding-right: 10px; /* текста ще се одалечи с 10 пиксела от дясно */
line-height: 35px; /* Текста ще е по средата на навбара хоризонтално */
float: left; /* Ще дръпне текста на ляво с цел да е хоризонтално навбарче */
font-family: Tahoma;
Автор на урока: Nixe

Ето и кодовете но не знам да ли е от мен грешката или от приятеля дето съм ги копнал. Има ли някой дето разбира от дизайн за навбар, да ли някой ще ми помогне за тази ситуация?
User avatar
Nixe
Потребител
Потребител
Posts: 4
Joined: 07 Dec 2017, 16:38

Re: Как да си направя навбар!

Post by Nixe »

Ти няма да се научиш!!
User avatar
HarveyWNvm
Потребител
Потребител
Posts: 280
Joined: 04 Aug 2016, 18:40
Skype: HarveyWNvmVevo
CS Nick: doide li admina
Favorite version: CS: 1.5
Steam Community ID: usersharvey190
Location: Plovdiv
Contact:

Re: Как да си направя навбар!

Post by HarveyWNvm »

Може ли да ми дадеш готови кодове с style.css
User avatar
Nixe
Потребител
Потребител
Posts: 4
Joined: 07 Dec 2017, 16:38

Re: Как да си направя навбар!

Post by Nixe »

В този урок кодовете не са да ги copy/past и да ги използваш коментарите // не са коментари а просто съм оделил кода и коментара който съм оставил за да се знае разбира се че няма да ти работи кода ето ти един код за навбар:
направи си идин хтмл файл и това го сложи там;

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>NavBar</title>
	<meta charset="utf-8" />
	<style type="text/css">

		*{
			padding: 0px;
			margin: 0px;
		}
		body{
			background-color: gray;
			font-size: 14px;
			font-family: arial;
			color: #333;
		}

		.bar{
			width: 1000px;
			height: 30px;
			background-color: #212121;
			border-top: 3px solid #990000;
			border-bottom: 3px solid #990000;
			margin: auto;
		}

		.bar ul li{
			display: inline-block;
			list-style-type: none;
			line-height: 30px;
		}

		.bar ul li a{
			display: block;
			font-size: 10px;
			text-transform: uppercase;
			font-family: tahoma;
			text-decoration: none;
			color: #ccc;
			padding: 0px 20px 0px 20px;
			border-right: 1px solid #333;
			font-weight: bold;
			transition: 0.7s ease;
		}

		.bar ul li a:hover{
			color: #fff;
			background-color: black;
			transition: 0.7s ease;
		}
	</style>
</head>
<body>
	<div class="bar">
		<ul>
			<li><a href="#">Начало</a></li>
			<li><a href="#">форум</a></li>
			<li><a href="#">сървъри</a></li>
			<li><a href="#">банери</a></li>
			<li><a href="#">линкове</a></li>
			<li><a href="#">контакти</a></li>
	</div>
</body>
</html>
[code] 

Ето ти и демо: https://exticition.tinytake.com/sf/MjIyMTIwOF82ODcxMDc3
User avatar
SK Telecom T1
Потребител
Потребител
Posts: 106
Joined: 29 Sep 2009, 08:55
Skype: blacktample
CS Nick: Critfame
Favorite version: CS: Global Offensive
Steam Community ID: critfame
Location: Varnawood
Contact:

Re: Как да си направя навбар!

Post by SK Telecom T1 »

Първо си оправи синтаксиса на мета тага (това, което си написал е xhtml, не html5 [което си дефинирал на ред 1]) и после провери файла какъв encoding е.
User avatar
Nixe
Потребител
Потребител
Posts: 4
Joined: 07 Dec 2017, 16:38

Re: Как да си направя навбар!

Post by Nixe »

Пич тези неща съм ги учил от книга за програмиране точно на HTML/ CSS ако си мислиш че това е грешно демек цялата им книга е грешка и те самите тццц
Не пиши глупусти
User avatar
SK Telecom T1
Потребител
Потребител
Posts: 106
Joined: 29 Sep 2009, 08:55
Skype: blacktample
CS Nick: Critfame
Favorite version: CS: Global Offensive
Steam Community ID: critfame
Location: Varnawood
Contact:

Re: Как да си направя навбар!

Post by SK Telecom T1 »

Маняк не ме интересува какаво от къде си учил. Аз гледам да ти помогна ти ревеш. Оправяй се сам тогава.
User avatar
HarveyWNvm
Потребител
Потребител
Posts: 280
Joined: 04 Aug 2016, 18:40
Skype: HarveyWNvmVevo
CS Nick: doide li admina
Favorite version: CS: 1.5
Steam Community ID: usersharvey190
Location: Plovdiv
Contact:

Re: Как да си направя навбар!

Post by HarveyWNvm »

Вече ги изучих
Post Reply

Return to “Уеб програмиране”