Премини към съдържанието

Препоръчан отговор


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

DSdTIa7h.jpg

kTdFxGFh.jpg

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

<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;
}

 

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

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

  • Харесва ми 1

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

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

  • Харесва ми 1

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

това е целият 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;
}

 

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

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


Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 11 минути, Емил Костов написа:

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

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 1 минута, D101149 написа:

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

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 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;
}

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 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 е записано къде да отиде този бутон, за да може да се използва и да не се скрива при отваряне на сайта от мобилни устройства като табелите и телефони.

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

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

<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)

fex2r1Vh.png

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 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)

fex2r1Vh.png

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 3 минути, Емил Костов написа:

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

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
току-що, D101149 написа:

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

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
току-що, Емил Костов написа:

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

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

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

font-awesome.min.css

media.css

theme.css

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 1 минута, D101149 написа:

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

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

font-awesome.min.css

media.css

theme.css

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 1 минута, Емил Костов написа:

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

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 1 минута, D101149 написа:

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

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

  • Харесва ми 1

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 2 минути, Емил Костов написа:

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

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

Сподели този отговор


Линк към този отговор
Сподели в други сайтове
преди 3 минути, D101149 написа:

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

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

  • Харесва ми 1

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Регистрирайте се или влезете в профила си за да коментирате

Трябва да имате регистрация за да може да коментирате това

Регистрирайте се

Създайте нова регистрация в нашия форум. Лесно е!

Нова регистрация

Вход

Имате регистрация? Влезте от тук.

Вход

×

Информация

Поставихме бисквитки на устройството ви за най-добро потребителско изживяване. Можете да промените настройките си за бисквитки, или в противен случай приемаме, че сте съгласни с нашите условия за ползване.