CSS- stylizacja i problem w menu.

Question

Tak wygląda  strona : http://s5.ifotos.pl/img/testpng_spnqqrw.png

Chcę usunąc  fragment zółtej lini pomiędzy " border zielonym" a nawigacją srodkową ... generalnie nie wiem czemu zwiększając wysokość elementu UL - do elementu rodzica czyli .nav (nawigacji ) automatycznie nawigacja się powieksza i znowu zostaje dolne miejsce....

kod w css

http://wklej.org/id/1791759/

edytuje i dodaje kod html:  ( oczywiscie samo body, pomijam tu header- bo tam tylko mam ... podstawy )

http://wklej.org/id/1792145/

 

Głowiłem się długo nad tym i już sam nie wiem.

Answer 1

 Pobileś rekord otwartych kart w Chrome 

Co do powiększania spróbuj tego:
 

#id{
          box-sizing: border-box;
/*
Dzięki temu element id bez względu na wielkość border, margin, padding, będzie mieć wciąż rozmiar z width i height. Używaj z przedrostkami -webkit- -moz- itd.
*/

}

 

Answer 2

Daj kod html też.

Comments

tak na  ślepo to mogę podpowiedzieć że istnieje możliwość:

ul
{	
	background-image:url(img/navigacja.png);
	display:inline-block;
	margin:0;
	padding:0;
	list-style-type:none;
	
}

dodać tutaj parametr height

---

Hej! Dodałem kod html na prośbę.

Napisałem w temacie, że nawet wpisując wartośc heigth ... np 36 px; taką jaką przeglądarka mi np pokazała dla navigacji, to nawi zwiększa się o ... np 4 .

---

Jak mam być szczery, to czytam pierwszy post już chyba 6 raz i nie potrafię się domyślić co tak na prawdę Ci nie działa i co chcesz osiągnąć.

---

mnie po prostu chodzi o to "aby kafelki menu jak na zdjęciu " objęły całą wysokość menu ( czyli zakryły pasek zółty pod sobą, natomiast aby zółte fragmenty po bokach zostały. )  Bardziej łopatologicznie nie potrafie :)

Answer 3

Możesz użyć na .nav pozycjonowania i uzyc overflow żeby objąć element ul. UL możesz nadać szerokość taką jak mają przyciski i marginesy boczne na auto co wyśrodkuje ci menu.

.nav
{	
	width:100%;
	background: yellow;
	text-align:center;
positon: relative;	
overflow: hidden;
}

.board
{	
	clear:both;
	background: green;
	border: 2px solid white;
	
}

ul
{	
	background-image:url(img/navigacja.png);
margin:0 auto;
	padding:0;
	list-style-type:none;
width:1020px;	/*mozna użyć max-width jeżeli chceż float drop przy zmniejszaniu okna*/
}

ul > li
{	
	
	line-height:2em;
	float:left;
	font-weight: bold;
	width:200px;
	border-left: 2px solid white;
display: block;
}

 

Comments

Nic to nie zmienia, mnie po prostu chodzi o to "aby kafelki menu jak na zdjęciu " objęły całą wysokość menu ( czyli zakryły pasek zółty pod sobą, natomiast aby zółte fragmenty po bokach zostały. )

---

Mógłbyś to wrzucić na jsfiddle albo codepen. Byłoby o wiele łatwiej pomóc.

---

Zadziałało jak użyłem max-heigth: 35px; ( dla nawigacji )

wtedy dla Ul dałem min-heith: 35px; 

Ale  myślę, że lepiej da się to rozwiązać :D 

---

A no chyba że tak, myślałem że chcesz się po prostu pozbyć paska z pod przycisków, a nie rozciągnąć je w pionie. Może i da się lepiej, nie wiem bo sam jestem początkujący, a rozwiązanie zaczerpnięte z książki polecanej przez MZ :D Najważniejsze że działa :D

Answer 4

Zrobiłem to nazasadzie umieszczenia własciwości  max-heigth: 35px;  DLA DIVA ( CLASSy NAV)

Następnie dodałem do listy ul  min-heigth: 35px; 

Wiem, że jest to troche mało kompetentne ( ale tak to obszedłem ), jeżeli ktoś  znajdzie na to - poprawny sposób tzn.  tzw" z rozsądkiem i oszczędnościa kodu ! niech śmiało pisze )