Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

Проблем с CSS Navigation Bar

Нова тема

27 декември 20187 г.

Здравейте! Правя си сайт и стигнах до някъде, но Navigation bar-a Ми прави проблеми... Направил съм 5 менюта на Navigation бара, но ми трябват още 2-3. След като направя още поне 1 той пада отдолу, а когато испектирам страницата си е горе бутона.

Това е кодът ми:

<nav class="Navigation">
					
                        <ul>
                            <li><a class="active<a href="#home">Home</a><span class="menu-item-bg"></span></li>
							
                            <li><a href="#about">About</a><span class="menu-item-bg"></span></li>
							
                            <li><a href="#services">Cruise</a><span class="menu-item-bg"></span></li>
							
							<li><a href="#pricing">Servers</a><span class="menu-item-bg"></span></li>
                           
						   <li><a href="#contact">Contact</a><span class="menu-item-bg"></span></li>
							
                            <li ><a class="active<a href="#home1">Test</a><span class="menu-item-bg"></span></li>
							
                        </ul>
                    </nav>

#nav { /* de stijlen van de navigatie */
	margin: 0;
	padding: 0;
	float: left;
}

#nav a { /* de stijlen voor de links in de navigatie */
	padding: 0.5em 0 0.5em 0;
	margin: 0 0 1px 0;
	width: 100px;
	display: block;
	text-indent: 1em;
	font-variant: small-caps;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
background-color: #ffffff;
	border: 1px solid #AAA;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

#nav a:hover { /* de stijlen voor de links in de navigatie waar de cursor boven zweeft */
color: #9ecf39;
}

Цитирай

27 декември 20187 г.

Липсва част от стилизиращия код тук, докато не го покажеш целия, няма как да ти се помогне, т.е. може да се помогне като се напише нов, амЪ ще го пейстнеш ей така написан и може да има конфликти с вече написаният. Това, което липсва е за ul, li, active.

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

Като за начало More трябва да го сложиш в листа, с който описваш главното меню. В момента more е дете на Home.

Цитирай

27 декември 20187 г.

Автор

това е целият style.css. Адски много Ви благодаря и на @Емил Костов и на @exwol За съжаление не разбрах какво Емил иска да каже, че More трябва да е в листа. Вътре в <ul></ul> нали има <li>....</li> това не е ли лист?

body { /* de stijlen voor het hele document */
	margin: 0;
	padding: 1em;
	font: 12px verdana, arial, helvetica, sans-serif;
}

a { /* de stijlen voor de links */
	color: #3c7796;
}

a:hover { /* de stijlen voor de links waar de cursor boven zweeft */
	color: #9ecf39;
}

a:visited { /* de stijlen voor de bezochte links */
	color: #9ecf39;
}

#container {
	box-sizing: border-box;
	width: 650px;
	height: 650px;
	padding: 20px 15px 15px 15px;
	margin: 15px auto 30px auto;
	border: 1px solid #ddd;
	background: #fff;
	background: linear-gradient(#f6f6f6 0, #fff 50px);
	background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
	background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

#header { /* de stijlen van de header, het logo */
	height: 75px;
	margin: 0 0 0.5em 0;
	border: 1px solid #3c7796;
	background-image: url(img/reklbg.jpg);
	background-repeat: repeat-y;
	background-position: right;
	background-color: #dbefff;
	padding: 2px;
}

.btn-group button {

  background-color: #f5f5f5;
	border: 1px solid #AAA;
  color: white; /* White text */
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

#nav { /* de stijlen van de navigatie */
	margin: 0;
	padding: 0;
	float: left;
}

#nav a { /* de stijlen voor de links in de navigatie */
	padding: 0.5em 0 0.5em 0;
	margin: 0 0 1px 0;
	width: 100px;
	display: block;
	text-indent: 1em;
	font-variant: small-caps;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
background-color: #ffffff;
	border: 1px solid #AAA;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

#nav a:hover { /* de stijlen voor de links in de navigatie waar de cursor boven zweeft */
color: #9ecf39;
}

#content { /* de stijlen voor de inhoud, de tekst */
	float: left;
	margin: 0 0 0 0.5em;
	padding: 0 0.5em 0 0.5em;
	width: 750px;
}

#content h2 { /* de stijlen voor de kopjes in de inhoud */
	border: 1px solid #3c7796;
	text-indent: 0.5em;
	font-size: 12px;
	font-variant: small-caps;
	color: #ffffff;
	margin: 0;
	padding: 0.5em;
	bottom:20;
	background: #3c7796;
}


	border: 1px solid #3c7796;
	text-indent: 0.5em;
	font-size: 12px;
	font-variant: small-caps;
	color: #ffffff;
	margin: 0;
	padding: 0.5em;
	bottom:20;
	background: #9ecf39;

#content p { /* de stijlen voor de alinea's in de inhoud */
	margin: 0.5em;
	padding: 0;
}



#footer { /* de stijlen voor de voet, de copyright */
	clear: both;
	text-align: center;
	
	position:absolute;
   bottom:0;
   width:45%;
   height:20px;
	margin: 0;
	padding: 0;
	border: 1px solid #DDD;
	background: #AAA;
	color: #ffffff;
}

#footer p { /* de stijlen voor de alinea's in de voet */
	margin: 0;
	padding: 0;
}

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

Ако не знаеш какво е наследство в HTML 5 ( child and parent element) е безмислено да обяснявам повече. Да не говорим, че това е Bootstrap. Тук трябва да знаеш точното име на всеки клас, за да сработят нещата.

Цитирай

27 декември 20187 г.

Автор

преди 11 минути, Емил Костов написа:

Ако не знаеш какво е наследство в HTML 5 ( child and parent element) е безмислено да обяснявам повече. Да не говорим, че това е Bootstrap. Тук трябва да знаеш точното име на всеки клас, за да сработят нещата.

Добре, но какво общо има това с моят бутон, който когато си стесня chrome таба се качва горе в Navigation Bar-a и когато е на fullscreen е под Navigation bar-a?

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

преди 1 минута, D101149 написа:

Добре, но какво общо има това с моят бутон, който когато си стесня chrome таба се качва горе в Navigation Bar-a и когато е на fullscreen е под Navigation bar-a?

Аз не го виждам описан в NAV UL. А това като стесниш екрана къде отива се описва. В самия Boostrap има опция как да се вижда менюто при Таблет, GSM и компютър.

Цитирай

27 декември 20187 г.

Автор

преди 3 минути, Емил Костов написа:

Аз не го виждам описан в NAV UL. А това като стесниш екрана къде отива се описва. В самия Boostrap има опция как да се вижда менюто при Таблет, GSM и компютър.

Ппц имам много малки познания в тази област, предполагам че си личи доста. Гледам да се опитвам да пиша на готови templates, но ги пиша с помощта единствено на notepad++. В Boostrap по-лесно ли ще е смисъл като опции повече неща ли могат да се пипат или си е все едно и също?

П.П а това не се ли отнася за Navigation bar-a (част от style.css)

#nav { /* de stijlen van de navigatie */
	margin: 0;
	padding: 0;
	float: left;
}

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

преди 4 минути, D101149 написа:
Ппц имам много малки познания в тази област, предполагам че си личи доста. Гледам да се опитвам да пиша на готови templates, но ги пиша с помощта единствено на notepad++. В Boostrap по-лесно ли ще е смисъл като опции повече неща ли могат да се пипат или си е все едно и също?

П.П а това не се ли отнася за Navigation bar-a (част от style.css)
#nav { /* de stijlen van de navigatie */
	margin: 0;
	padding: 0;
	float: left;
}

Общо казано ( макар, че не е точно така) Bootstrap е като CSS3, но класовете си имат строго определени имена и ти трябва да ги знаеш. Ще го напиша пак - Бутон MORE трябва да е в списъка, където е описано - HOME,ABOUT, CRUISE, SERVERS,CONTACT. Аз там не го виждам. Затова смятам, че е Child на HOME понеже излиза под него като подменю. Като стесняваш екрана в Boostrap е записано къде да отиде този бутон, за да може да се използва и да не се скрива при отваряне на сайта от мобилни устройства като табелите и телефони.

Редактирано 27 декември 20187 г. от Емил Костов (преглед на промените)

Цитирай

27 декември 20187 г.

Автор

А защо тогава примерно ако преместя

<li><a href="#more">More</a><span class="menu-item-bg"></span></li>

на мястот на

 <li><a href="#contact">Contact</a><span class="menu-item-bg"></span></li>

в Navigation bar-a Контактите падат на мястот на More под Home? Същото става само че More остава горе на мястот на Contact, а Контактите заемат мястото на More (където не се дигаше и стоеше под Home)

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

преди 18 минути, D101149 написа:
А защо тогава примерно ако преместя
<li><a href="#more">More</a><span class="menu-item-bg"></span></li>
на мястот на
 <li><a href="#contact">Contact</a><span class="menu-item-bg"></span></li>
в Navigation bar-a Контактите падат на мястот на More под Home? Същото става само че More остава горе на мястот на Contact, а Контактите заемат мястото на More (където не се дигаше и стоеше под Home)

Защото така е описано в Boostrap. И не може да го местиш просто така, защото в Boostrap всеки един клас си има точно определено ИМЕ. И не трябва да ги сменяш, а да добавиш MORE в UL списъка. За целта трябва да се види целия boostrap както и HTML файла.

Цитирай

27 декември 20187 г.

Автор

преди 3 минути, Емил Костов написа:

Защото така е описано в Boostrap. И не може да го местиш просто така, защото в Boostrap всеки един клас си има точно определено ИМЕ. И не трябва да ги сменяш, а да добавиш MORE в UL списъка. За целта трябва да се види целия boostrap както и HTML файла.

Ясно.. Чак сега схванах. Благодаря за информацията. А трябва ли ми Bootstrap studio-то или не?

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

току-що, D101149 написа:

Ясно.. Чак сега схванах. Благодаря за информацията. А трябва ли ми Bootstrap studio-то или не?

Не те разбрах???

Цитирай

27 декември 20187 г.

Автор

току-що, Емил Костов написа:

Не те разбрах???

За да мога да обработвам bootstrap трябва ли ми boostrap studio?

П.П мисля че това сайловете

font-awesome.min.css

media.css

theme.css

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

преди 1 минута, D101149 написа:

За да мога да обработвам bootstrap трябва ли ми boostrap studio?

П.П мисля че това сайловете

font-awesome.min.css

media.css

theme.css

Е може да използваш какъвто инструмент си искаш. Аз използвам Notepad++. Проблемът е, че имаш 3 CSS файла и си е предизвикателство.

Цитирай

27 декември 20187 г.

Автор

преди 1 минута, Емил Костов написа:

Е може да използваш какъвто инструмент си искаш. Аз използвам Notepad++. Проблемът е, че имаш 3 CSS файла и си е предизвикателство.

Благодаря тези са файловете, които трябва да прегледам нали?

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

преди 1 минута, D101149 написа:

Благодаря тези са файловете, които трябва да прегледам нали?

Да, но трябва да знаеш какво да пипаш в тях. Освен това има и приоритет. Може да напишеш правилно атрибутите за дадения клас и нещата да не се получат. Не, че те плаша и не че е толкоз сложно, но преди да пипаш тема написана на Boostrap трябва да си поне малко наясно с CSS3.

Цитирай

27 декември 20187 г.

Автор

преди 2 минути, Емил Костов написа:

Да, но трябва да знаеш какво да пипаш в тях. Освен това има и приоритет. Може да напишеш правилно атрибутите за дадения клас и нещата да не се получат. Не, че те плаша и не че е толкоз сложно, но преди да пипаш тема написана на Boostrap трябва да си поне малко наясно с CSS3.

Благодаря много Ще се опитам пък ако не стане някой от бутоните ще го направя да препраща към друга страница и там ще си напиша каквото трябва. Благодаря отново! Весели празници!

Цитирай

Емил Костов

Hardware Team

Пол:Мъж
Град:Плевен
Интереси:Интернет,Компютърни игри и програми. WEB design

27 декември 20187 г.

преди 3 минути, D101149 написа:

Благодаря много Ще се опитам пък ако не стане някой от бутоните ще го направя да препраща към друга страница и там ще си напиша каквото трябва. Благодаря отново! Весели празници!

То препращането не е проблем!!! Просто трябва да се намери More в кой клас е и какво му е зададено да прави при промяна на пикселите.

Цитирай

Архивирана тема

Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.