Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Zamknięty przez: Htsz
2014-03-15, 16:23
Autor Wiadomość
Lenalee 
Blogger.Klub


Wiek: 25
Dołączyła: 29 Lis 2013
Posty: 53

Wysłany:    

Mam drobny problem z rozwijanym menu. Działa ono sprawnie, rozwija się bez problemów, ale podczas zmieniania w kodzie wyglądu tego menu zmieniłam coś, czego nie chciałam zmieniać. Chodzi mi o ten mały ptaszek, który wskazuje na to, że można menu rozwinąć:

Tak wygląda on na moim blogu, zmieniałam obramowanie tego menu na linię przerywaną i niechcący zmieniłam też tę małą rzecz w trzy kropki. Próbowałam to odkręcić, ale nie mam pojęcia jak to zrobić.
Chciałabym, żeby wyglądało to w ten sposób:


To kod mojego menu:

Kod

/* Some stylesheet reset */
.nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}

/* The main container */
.nav {
/* Layout and positioning */
display: block;
position: center;
margin-left:370px;
height: 34px;
width: 600px; /* CHANGE this if you want another width or remove it if you want the width of the container */
border-radius: solid 1px;
border: 1px dashed #c1c1c1;



/* Background and effects */
background: #eaeaea; /* Background for IE9 and older browsers */
background: -webkit-linear-gradient(bottom, #ffffff, #ffffff); /Background for Chrome Safari */
background: -moz-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Firefox */
background: -o-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Opera */
background: -ms-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Internet Explorer 10 */
box-shadow: inset 0 0px 0 #fff;
}

.nav>li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0 1px 0 0;
}

/* The main navigation links */
.nav>li>a {
/* Layout */
display: block;
padding: 11px 20px;

/* Typography */
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #9a9a9a;
text-shadow: 0 1px 0 #fff;

/* Effects */
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}

/* The hover state of the navigation links */
.nav>li>a:hover, .nav>li:hover>a {
background: #fff;
background: rgba(255, 255, 255, .6);
color: #999;
display: block;
}

.nav>li:first-child>a {
border-top-left-radius: solid 3px;
border-bottom-left-radius: solid 3px;
}

.nav>.dropdown>a {
padding-right: 26px;
}

/* The arrow indicating a dropdown menu */
.nav>.dropdown>a::after {
content: "";
position: absolute;
top: 14px;
right: 11px;
width: 4px;
height: 4px;
border-bottom: 1px dashed #9a9a9a;
border-right: 1px dashed #9a9a9a;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

/* Changing the color of the arrow on hover */
.nav>.dropdown>a:hover::after, .nav>.dropdown:hover>a::after {
border-color: #999;
}

.nav ul {
position: relative;
position: absolute;
left: -9999px;
display: block;
box-shadow: 0 1px 1px rgba(0, 0, 0, .0);
}

/* Level 1 submenus */
.nav>li>ul {
padding-top: 0px;
z-index: 99;
border-top: 1px dashed #c9c9c9;
top: 34px;
}

/* Making the level 1 submenu to appear on hover */
.nav>li:hover>ul {
left: -1px;
}

/* Level 2+ submenus */
.nav ul ul {
left: -9999px;
top: 0px;
z-index: 999;
}

/* Making the level 2+ submenu to appear on hover */
.nav ul>li:hover>ul {
left: 120px;
top: -1px;
}

/* The submenu link containers */
.nav ul li {
position: relative;
display: block;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;

/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
height: 0px;
-webkit-transition: height .3s;
-moz-transition: height .3s;
-o-transition: height .3s;
-ms-transition: height .3s;
}

/* Expanding the list elements which contain the links */
.nav li:hover>ul>li {
height: 25px;
}

.nav ul li:hover>ul>li:first-child {
height: 26px;
}

/* The links of the submenus */
.nav ul li a {
/* Layout */
display: block;
width: 120px;
padding: 6px 10px 6px 20px;
border-bottom: 1px solid #e1e1e1;

/* Typography */
font-size: 12px;
color: #a6a6a6;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;

/* Background effects */
background: #fff;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
}

/* The hover state of the links */
.nav ul li>a:hover, .nav ul li:hover>a {
background: #e9e9e9;
color: #a1a1a1;
}

.nav ul ul>li:first-child>a {
border-top: 1px dashed #c1c1c1;
}

.nav ul>li:last-child>a {
border-bottom: 1px dashed #c1c1c1;

}

.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
border-color: #a1a1a1;
}

Czy ktoś mógłby mi wskazać, w którym miejscu jest błąd? I jak go naprawić?
http://prob-a.blogspot.com/ - to właśnie link do tego bloga, na którym testuję szablony.
 
  podziel się tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz Narowski
Pomógł: 814 razy
Wiek: 34
Dołączył: 01 Sty 2006
Posty: 8933
Miasto: Wrocław

Wysłany: 2013-11-29, 22:57   CSS Horizontal Dropdown Navigation Menu

Wydzieliłem temat, bo Twój kod jest inny niż omawiany w temacie o rozwijanym spisie treści.

Nie wiem skąd brałaś kod, ale ja znalazłem źródło tutaj:
Wiadomość (widoczna dla zarejestrowanych)
wraz z możliwością podglądu na żywo.

HTML:
Wiadomość (widoczna dla zarejestrowanych)

CSS:
Wiadomość (widoczna dla zarejestrowanych)

Po szybkiej analizie (przeczytaniu opisów) wyszło, że za strzałeczki odpowiedzialny jest ten fragment:
Wiadomość (widoczna dla zarejestrowanych)
Porównując to z Twoim kodem łatwo znaleźć różnicę. Zamiast solid masz dashed. Strzałki robione są za pomocą obramowania i potem obracane o 45 stopni. Jak zmieniłaś rodzaj - ze stałej linii na przerywaną - to się posypało.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel się tym postem na:
Lenalee 
Blogger.Klub


Wiek: 25
Dołączyła: 29 Lis 2013
Posty: 53

Wysłany: 2013-11-30, 12:14   

Dziękuję bardzo za pomoc! Zmieniłam dashed na solid i wszystko wygląda tak, jak chciałam.
 
  podziel się tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz Narowski
Pomógł: 814 razy
Wiek: 34
Dołączył: 01 Sty 2006
Posty: 8933
Miasto: Wrocław

Wysłany: 2013-11-30, 19:34   

jeżeli chcesz wyśrodkować menu, to nie stosuj lewego marginesu o określonej wartości (350px) dla elementu .nav, bo na inny rozdzielczościach znajdzie się w innej pozycji względem pasa wpisów. Lepiej:

Kod

margin: 0 auto 5px;
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel się tym postem na:
Lenalee 
Blogger.Klub


Wiek: 25
Dołączyła: 29 Lis 2013
Posty: 53

Wysłany: 2013-12-01, 13:20   

Dziękuję za poprawkę, nie miałam o tym pojęcia. Mam jednak jeszcze jedną prośbę o pomoc odnośnie tego menu. Znajduje się ono trochę zbyt blisko tytułu posta, chciałabym poszerzyć tę odległość, ale nie wiem dokładnie w którym miejscu w kodzie trzeba to zrobić.
Mam na myśli dokładnie tę odległość:


http://zlodziejka-ksiazek.blogspot.com/ - podam też bloga, o którego zmiany mi chodzi, żeby nie było problemów, bo szablon z tego próbnego został przeniesiony i nie jest już aktualny.
 
  podziel się tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 83
Imię: Arkadiusz Narowski
Pomógł: 814 razy
Wiek: 34
Dołączył: 01 Sty 2006
Posty: 8933
Miasto: Wrocław

Wysłany: 2013-12-01, 13:22   

Zwiększ wartość marginesu dolnego, w kodzie który podałem wyżej. Zamiast 5px wpisz więcej. Podstawy HTML/CSS ;-)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku. :^^:
 
  podziel się tym postem na:
Lenalee 
Blogger.Klub


Wiek: 25
Dołączyła: 29 Lis 2013
Posty: 53

Wysłany: 2013-12-01, 13:27   

Dzięki! Ja rozumiem, że to podstawy, ale jestem kompletnie zielona jeżeli chodzi o HTML/CSS, dlatego sama sobie z tym nie radzę niestety. :)
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Ten temat jest zablokowany bez możliwości zmiany postów lub pisania odpowiedzi
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2020 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz