O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Położenie elementu górne poziome menu

Opisałam już jak stworzyć sobie górne menu gdy korzysta się z jednego z szablonów sportowych (temat szablonu łatwo można zmienić, dla większości szablonów sportowych przygotowałam też niesportowe nagłówki). Menu zaczęłam dodawać do innych moich szablonów ale to potrwa. Nie każdy też korzysta z szablonu zrobionego przeze mnie. Dlatego dzisiaj opiszę jak najszybciej i najprościej umieścić takie menu nad tytułem własnego bloga bez względu na to z jakiego szablonu się korzysta.

Instrukcja w wersji skrótowej:

1. Stworzony uprzednio kod menu dodajemy w polu na kod html (USTAWIENIA -> BOCZNA SZPALTA)

2. Przechodzimy do arkusza stylów (WYGLĄD -> EDYCJA CSS) i przy selektorze #BlogGlowyBox dopisujemy position:relative;

3. Na końcu arkusza dodajemy opis wyglądu i umiejscowienia naszego menu:

#menuTop {
position:absolute;
top:5px; /* odległość od górnej krawędzi */
left:20px; /* odległość od lewej krawędzi */
width:600px; /* szerokość elementu, ma być mniej pikseli niż szerokość bloga */
height:25px;
list-style-type:none; /* likwiduje wypunktowanie */
padding:0; /* likwiduje automatyczne dopełnienie wypunktowania */
margin:0; /* likwiduje przeglądarkowy margines wypunktowania */
}

#menuTop li {
display:inline; /* układa elementy listy obok siebie */
padding: 0 3px; /* odsuwa elementy od siebie w poziomie */
border-left: 1px solid grey; /* dodaje po lewej szare kreseczki rozdzielające elementy menu */
}

W powyższej instrukcji jest wszystko co konieczne i niezbędne. Jeżeli jednak potrzebujesz dokładniejszych instrukcji, zależy Ci na nieco innym wyglądzie albo coś w twojej zmianie poszło nie tak jak się spodziewałeś to zapraszam do przeczytania rozszerzonej wersji wyjaśnień. A na koniec fragmenty css z szablonów sportowych opisujące wygląd tamtejszych górnych menu, jednym słowem gotowce.

1. Dodawanie kodu

Stworzony uprzednio kod górnego menu dodajemy do naszego bloga korzystając ze specjalnego pola na kod HTML. Wchodzimy w edycję bloga, następnie wybieramy zakładkę USTAWIENIA i przechodzimy do karty BOCZNA SZPALTA

USTAWIENIA -> BOCZNA SZPALTA -> DODATKI

dowiedz się jak znaleźć to pole »

2. Miejsce na menu

Tutaj możliwości jest kilka i zależą zarówno od wyglądu szablonu z którego korzystasz (menu powinno znaleźć się na w miarę jednolitym tle w stosunkowo sporej odległości od tytułu) jak i jego kodu HTML (stare bloksowe kody szablonowe różnią się dość znacznie w swojej budowie). Jeżeli okaże się, że potrzebujemy coś odsunąć aby umieścić górne menu nad tytułem to o ile to możliwe najlepiej przesunąć nieco zawartość całego bloga albo elementu tytułowego. Jeżeli w części tytułowej mamy wystarczająco dużo miejsca to bezpieczniej będzie niczego nie przesuwać.

W przypadku szablonów sportowych w większości niczego nie przesuwałam ale gdyby taka potrzeby zaistniała u was to proponuję dodać górne dopełnienie do elementu #BlogGlownyBox. Jeżeli padding jest już tam wpisany to oczywiście liczby należy zsumować. Kolejność zapisu to: górny-prawy-dolny-lewy.

#BlogGlownyBox {
 padding: 30px 0 0 0;
}

3. Granice czyli względem czego umiejscawiamy

Naturalną pozycją elementu dodanego przez pole na kod HTML jest miejsce pod wąską szpaltą. Zamierzamy to oczywiście zmienić ale najpierw musimy określić względem czego będziemy nasz element ustawiać. To trochę tak jakbym powiedziała przewoźnikowi, że nową sofę chcę postawić w salonie ale nie podałabym mu adresu mojego mieszkania. Zacznijmy więc od określenia gdzie mieszkamy.

Podając tylko położenie elementu względem lewej i górnej krawędzi (a tak będziemy robić) przeglądarka zadecydowałaby, że mamy na myśli jej okno. Czasami jest to wystarczające określenie ale bardzo złudne. Wielkość okna przeglądarki zależna jest od rozdzielczości. Może u was wasz blog zajmuje niemal całe okno ale niektórzy mają mniejsze bądź większe monitory a to sprawi, że u nich wasze menu będzie w zupełnie innym miejscu. Aby temu zapobiec musimy określić element nadrzędny dla naszego menu.

W związku z tym, że szerokość bloga zazwyczaj jest precyzyjnie określona a nasze menu ma całkiem dosłownie wyświetlać się w ramach bloga, najlepiej będzie określić główny kontener bloga jako element względem którego ustawiać będziemy menu. Do selektora #BlogGlownyBox dopisujemy właściwość position:relative;

#BlogGlownyBox {
 position:relative;
}

4. Przenoszenie elementu górne menu

Tworząc kod menu przypisaliśmy mu identyfikator id="menuTop". Teraz korzystając z tego identyfikatora umiejscowimy nasze menu. Dzięki poprzedniemu zapisowi ustawiać je będziemy względem krawędzi bloga a nie okna przeglądarki. Odległości należałoby dostosować do wyglądu szablonu ale poniższe sprawdzą się na początek w każdym chyba przypadku.

#menuTop {
 position:absolute;
 top:5px;
 left:20px;
}

5. Wygląd górnego menu

Na razie nasze menu wygląda niespecjalnie. To po prostu lista umieszczona w dziwnym miejscu. Pora to zmienić. Na początek musimy usunąć formatowanie listy nieuporządkowanej. Wypunktowanie jest fajne ale nie w przypadku poziomego menu.

#menuTop {
 list-style-type:none;
 padding: 0;
 margin: 0;
}

Warto też określić maksymalną wielkość elementu. Ułożenie za chwilę poprawimy ale teraz powinniśmy jeszcze określić szerokość i wysokość. Pozornie może to niczego nie zmieniać ale w rzeczywistości ingerujemy w wygląd w bardzo dużym stopniu i różne przeglądarki różnie mogą na to reagować. Lepiej nie pozostawiać im wyboru i samemu zadecydować o pewnych rzeczach.

#menuTop {
 width:600px;
 height:25px;
}

Element jest już na miejscu. Pozbawiliśmy go kropek ale wcale nie wygląda dużo lepiej. Pora zabrać się za ściśle wyglądowe zmiany. Poza pierwszym punktem reszta jest zupełnie dowolna i można sobie je dowolnie zestawiać. Wygląd będziemy teraz opisywać dla pojedynczego elementu listy czyli naszym selektorem będzie teraz #menuTop li

5.1. Ustawienie w jednej lini

Elementy listy wyświetlają się zawsze jedne pod drugimi. Taki sposób wyświetlania nazywamy blokowym. Nam zależy na ułożeniu listy tak jak słowa w zdaniu czyli obok siebie. Takie ułożenie nazywamy liniowym.

#menuTop li {
 display:inline;
}

5.2. Odsunięcie czyli margines pomiędzy elementami

Elementy może i owszem są w jednej linii ale aż za bardzo, zupełnie straciły odstępy między sobą. Aby je przywrócić skorzystamy z cechy margin. Wartości podajemy w kolejności góra-prawy-dół-lewy. Jeżeli jest podana tylko jedna to oznacza, że we wszystkich czterech stronach ma być tak samo. Jeżeli dwie to znaczy, że wartości są symetryczne w pionie i poziomie. Jeżeli mamy zaś trzy wartości to brakująca czwarta zostaje uzupełniona wg. klucza symetrycznego czyli lewy odstęp dostaje taką samą wartość jaką zapisaliśmy prawemu. Margin to odstęp pomiędzy elementami, na zewnątrz nich.

#menuTop li {
 margin: 0 3px;
}

5.3. Ramka czyli kreseczki rozdzielające poszczególne elementy

Najlepszym rozdzielaczem jest światło czyli pusta przestrzeń. Niektórzy jednak chcieliby dodać bardziej dosłowny rozdzielacz czyli kreseczkę. Można ją oczywiście wpisać do kodu HTML ale warto trzymać się zasady, że decyzje związane z wyglądem podejmuje się w arkuszu stylów. Dlatego też do stworzenia kreseczek wykorzystamy lewą ramkę. Jako jej kolor wybrałam jasnoszary i wpisałam go w postaci słownej ale dozwolona jest każda wersja zapisu.

#menuTop li {
 border-left: 1px solid silver;
}

5.4. Inne tło elementów

Jeżeli treść elementów jest za mało widoczna ze względu na tło na jakim jest wyświetlana to można zmienić je tylko dla elementów menu. Oczywiście cechą którą wykorzystamy będzie background czyli tło. Ja wybrałam niemal białe i tym razem zapisałam je w postaci szesnastkowej (HEX)

#menuTop li {
 background: #eee;
}

5.5. Odstęp w elemencie

Dodając elementowi tło zawsze warto poprawić nieco odstępy. Różne tło bardzo ściaśnia wygląd elementu, podobnie jak dodawanie ramek. Dlatego należy rozluźnić nieco wygląd dodając elementów dopełnienie czyli wewnętrzny odstęp: padding.

#menuTop li {
padding: 1px 3px;
}

5.6. Wielkość kroju

Może się okazać że czcionka jest za mała. Ja często zmniejszam ją w body do wielkości około 10px co pozwala mi łatwiej zorientować się w wielkościach. Zdarzyć się też może, że wielkość chociaż czytelna jest zupełnie nieodpowiednia dla tego menu. Najlepiej zmienić ją względnie czyli korzystając z procentów lub firetów/em. 120% z 10px to oczywiście 12px. 1.2em to dokładnie to samo, należy jednak pamiętać, że to jest wartość względna a więc względem czegoś określana, tym czymś będzie wielkość fontu w elemencie nadrzędnym, zapewne dopiero w body.

#menuTop li {
font-size:1.2em;
}

5.7. Kolor

Jeżeli nasze menu zawiera tylko słowa nie posiadające żadnych akcji to oczywiście kolor możemy przypisać przy tym samym selektorze co poprzednio. Zazwyczaj jednak dodając to menu umieszczamy w nim linki a linki mają to do siebie, że wymagają dodatkowego opisu. Naszym selektorem dla kolorów linku będzie #menuTop li a. Jeżeli natomiast chcemy opisać także akcję po najechaniu na link kursorem to musimy dodać kolor także przy selektorze #menuTop li a:hover.

#menuTop li a {
 color: navy;
}
#menuTop li a:hover {
 color: gray;
}

Podsumowanie

Cały, powyżej opisany kod będzie wyglądał mniej więcej tak:

#BlogGlownyBox {
 position:relative;
}

#menuTop {
 position:absolute;
 top:5px;
 left:20px;
 width:600px;
 height:25px;
 list-style-type:none;
 padding: 0;
 margin: 0;
}

#menuTop li {
 display:inline;
 margin: 0 3px;
 border-left: 1px solid silver;
}


To tylko najprostsze opisy elementu. CSS daje bardzo duże możliwości. Nie ma co jednak przesadne ozdabiać czegoś co będzie wyświetlane w części tytułowej a co nie jest tytułem. Jeżeli jednak macie pomysł na ciekawy wygląd to zachęcam do eksperymentów. Jednym z moich ulubionych górnych menu jest oczywiście tajemniczy szlak z Karaibów wymaga on jednak bardziej skomplikowanego opisu i rozplanowania. Wygląd górnych menu szablonów sportowych jest znacznie bardziej prosty i łatwiejszy do zastosowania na własnym blogu. Poniżej podaję kody css tych menu ale nieco zmienione tak aby pasowały na niemal każdy blog. Zachęcam do inspiracji, czerpania, dosłownego kopiowania... proszę tylko pamiętać o

#BlogGlownyBox {
 position:relative;
}

Jaskrawa beleczka z górnym menu poniżej tytułu blogu

TopMenu

#menuTop {
 position:absolute;
 top:150px; /* należy zmienić na odpowiedni własny odstęp, tak aby menu było pod tytułem */
 left:0px;
 border:1px solid #ff3038;
 background: #ff3038 url() repeat-x top left; /* w nawiasie należy podać adres tła graficznego */
 width: 800px; /* tą wielkość należy zmienić tak aby pasek z menu pasował do szerokości bloga */
 height:45px;
 font-size:1.4em; /*ta wielkość zależy od użytej czcionki */
 list-style-type:none;
 padding:0px;
 margin:0px;
}
#menuTop li {
 float:left;
 padding:10px 0px 0px 0px;
 margin:0px 0px 0px 20px;
 color:#ccc;
}
#menuTop li a {
 color:#fff;
}
#menuTop li a:hover{
 text-decoration:underline;
}

Górne menu pływające do prawej

TopMenu

#menuTop {
 position:absolute;
 top:0px;
 right:0px;
 width: 800px; /* tą wielkość należy zmienić tak aby pasek z menu pasował do szerokości bloga */
 height:45px;
 list-style-type:none;
 padding:0px;
 margin:0px;
}
#menuTop li {
 float:right;
 padding:10px 20px 5px 10px;
 margin:0px 0px 0px 0px;
 color:#ccc;
 border-left: 1px solid #022857;
}
#menuTop li:hover {
 background: #022857;
}
#menuTop li a {
 COLOR: #497EAD;
}
#menuTop li a:hover{
 text-decoration:underline;
}

Bardzo górne menu w rameczce

TopMenu

#menuTop {
 position:absolute;
 top:5px;
 left:14px;
 width:750px; /* szerokość pomniejszona powinna być o boczne odstępy i grubość ramki */
 height:29px;
 border:1px solid #dfdad6;
 font-size:0.9em; /* tą wielkość należy dopasować do rodzaju czcionki */
 list-style-type:none;
 padding:0px;
 margin:0px;
}
#menuTop li {
 float:left;
 padding:0px 0px 0px 10px;
 margin:6px 0px 0px 10px;
 color:#ccc;
 border-left:1px solid #dfdad6;
}
#menuTop li:first-child {
 border-left:none;
}

Górne menu powiększające się po najechaniu kursorem

TopMenu

#menuTop {
 position:absolute;
 top:0px;
 left:0px;
 width: 770px;
 height:20px;
 font-size:0.9em;
 list-style-type:none;
 padding:0px;
 margin:0px;
}
#menuTop li {
 background: #361d05 url() repeat-x left bottom; /* w nawiasie należy podać adres tła graficznego */
 float:left;
 padding:5px 3px 3px 3px;
 margin:0px 0px 0px 5px;
 color: #EEC990;
}
#menuTop li:hover {
 background: #361d05 url() repeat-x left bottom; /* w nawiasie należy podać adres tła graficznego */
 padding:15px 3px 3px 3px;
}
#menuTop li a {
 color:#fff;
}
#menuTop li a:hover {
 color: #EEC990;
}

Górne menu nad treścią i na tle o zaokrąglonych rogach

TopMenu

#menuTop {
 position:absolute;
 top:210px; /* ta odległość to wysokość topu minus 40 pikseli */
 left:20px;
 padding:0 5px;
 background: url() repeat; /* w nawiasie należy podać adres tła graficznego, polecam częściowo transparentne */
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 width: 760px;
 height: 40px;
}
ul#menuTop {
 list-style-type:none;
 padding:0px;
 margin:0px;
}
#menuTop li {
 float:left;
 padding: 0 0 0 8px;
 margin:0.5em 0px 0.5em 8px;
 font-style:italic;
 font-size:1.2em;
 color:#333;
 border-left: #9e0b0f 1px solid;
}
#menuTop li:first-child {
 border-left: none;
 margin:0.5em 0 0.5em 7px;
}
#menuTop li a {
 color:#000;
}
#menuTop li a:hover{
 text-decoration:underline;
}


Jeżeli ktoś zdecyduje się skorzystać ze sportowych górnych menu przy niesportowym szablonie to zachęcam do podzielenia się rezultatem. Ciekawa jestem jak te gotowce zadziałają przy innych wyglądach. Proszę was tylko o jedno, róbcie ładne menu. Bądźcie dokładni i staranni, co do jednego pikselika. Dzielę się z wami moją MOCĄ, nie zmieniajcie jej w coś pokracznego. Jeżeli potrzebujecie pomocy to jestem tutaj, można zadać mi pytanie, poprosić o sprawdzenie wyglądu zmiany. Zawsze odpowiadam na komentarze, czasem po tygodniu dopiero ale odpowiedź się pojawi.

wtorek, 18 października 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Zielona Pietruszka, *.zapnet-isp.net
2012/06/14 22:36:11
Jestem totalnie zielona w tych sprawach. Podążając za wskazówkami coś udało mi się zrobić, ale pojawiło się to w bocznej szpalcie a nie u góry, mimo, że w csssie wpisałam ten kod. Co poszło nie tak?? Czarna magia to dla mnie :P
-
kate_mac
2012/06/18 12:44:39
@zielona pietruszka
Za jakimi wskazówkami podążałaś i czy czytałaś je czy tylko skopiowałaś kod? Bo jeżeli czytałaś i były one na tym blogu to znaczy, że gdzieś się pomyliłam i musiałabym to poprawić. Z tego co widzę to trzy notki w których pamiętam, że poruszałam ten temat na tym blogu są ok... więc skąd masz te wskazówki?

Co poszło nie tak?
Inny element dodałaś a inny opisałaś w szablonie. W polu na kod HTML dodałaś element z identyfikatorem menu-top a w szablonie opisujesz element, który powinien mieć identyfikator menuTop - to jak PKO i pekao dwie zupełnie różne rzeczy
-
koronka1986
2012/07/03 21:34:54
Dzięki za odpowiedź! Czytałam wszystkie Twoje wpisy, ale kod skopiowałam :) nie jestem aż tak kreatywna, nie moja dziedzina :)
Myślę, że z tymi menu Topami mam ok, bo sprawdzałam!

Nawet nie wiesz jak muszę się skupić, żeby coś zrobić podążając za Twoimi wskazówkami :D:D:D Udało mi się nawet stworzyć trzecią szpaltę. Teraz muszę ją zapełnić, ale zostawię to sobie na inny dzień.
Jesteś wielka!
-
Gość: kate_mac, *.dynamic.chello.pl
2012/07/04 14:57:15
@koronka1986
"Myślę, że z tymi menu Topami mam ok, bo sprawdzałam!"

Serio? To sprawdź jeszcze raz bo ja sobie tego nie biorę z powierza tylko z Twojego blogu. Jak pisałam poprzedni komentarz to sprawdziłam jak to wygląda i teraz ponownie zerknęłam do Twojego kodu. Dalej identyfikatory są inne. Jesteś pewna, że sprawdzałaś właśnie to co trzeba?
Dodawanie dodatków - tworzenie elementów
Wprowadzanie zmian w szablonie - wygląd

Zerknęłam do źródła strony (Ctrl+U) i tam wyraźnie jest użyty identyfikator menu-top, pisany małymi literami, połączony dywizem:

<ul id="menu-top">
<li><a href="http ://zielonapietruszka.blox.pl ">STRONA GŁÓWNA</a></li>
<li><a href="http ://zielonapietruszka.blox.pl ">O BLOGU</a></li>
</ul>

W arkuszu stylów masz natomiast opis identyfikatora menuTop, pisanego wielbłądzimi literami. Mam nadzieję, że widzisz różnicę bo inaczej wyjaśnić tego już nie potrafię. Wielkość liter, odstępy, różne znaki - wszystko to ma znaczenie.

#menuTop {
position:absolute;
top:5px;
left:20px;
width:600px;
height:25px;
list-style-type:none;
padding:0;
margin:0;
}
#menuTop li {
display:inline;
padding: 0 3px;
border-left: 1px solid grey;
}


Jeżeli w polu na kod HTML wklejasz znaczniki, którym przypisałaś określony identyfikator i chcesz ten stworzony element opisać w arkuszu to musisz użyć dokładnie takich samych nazw zarówno identyfikatorów jak i klas.


Co do trzeciej szpalty to na razie masz tylko miejsce na nią. Kod, który wkleiłaś na koniec arkusza nic nie robi bo jest błędny: pomieszałaś HTML z CSS, dodałaś też spację tam gdzie nie powinno jej być. Pamiętaj o tym, że każdy znak ma znaczenie i nazwy które wpisujesz w arkuszu stylów muszą się zgadzać z nazwami, które dodajesz w polu na kod HTML w przeciwnym razie dotyczą dwóch różnych rzeczy. Pamiętaj też, że arkusz stylów (CSS) służy do opisywania wyglądu istniejących elementów (możesz przenieść kodem CSS fragment nawigacji w inne miejsce na stronie ale nie stworzysz poprzez CSS żadnego elementu). Do dodawania rzeczy służy kod HTML. HTML to cegły, okna i schody. CSS natomiast opisuje kolor ścian, czy okna są drewniane czy plastikowe, czy żarówka świeci słabym światłem czy mocnym.

I na koniec: na blogu zachodzą zmiany i notki dotyczące trzeciej kolumny są nie całkiem kompatybilne ze sobą (używam różnych nazw) ale jeżeli będziesz czytała dlaczego coś jest określone tak a nie inaczej to bez problemu domyślisz się, które rzeczy trzeba sobie poprawić.
-
koronka1986
2012/07/04 20:55:44
Widzisz! Źle przeczytałam poprzedni Twój komentarz do mnie, myślałam, że one muszą być inne ( te menu topy ;) ). Tylko to poprawiłam i jest- dziękuję! Małymi kroczkami dojdę do celu!
Tą trzecią szpaltę zostawię sobie na później. Za dużo wrażeń!
-
mojeslodkie
2012/09/18 21:27:22
A będą jakieś wskazówki jak zrobić takie menu dla szablonów z nowym kodem? Bo w ten sposób próbowałam, ale albo się nie da, albo nie potrafię. Byłabym bardzo wdzięczna :)
-
kate_mac
2012/09/19 11:42:02
@mojeslodkie
W oich szablonach na nowym kodzie opisane jest takie menu. Używam tam jednak nieco innych nazw selektorów więc opis z tego bloga nie dotyczy szablonów na nowym kodzie. W przyszłości informacji o szablonach na nowym kodzie szukaj na blogu stylekatemac.blox.pl

Instrukcję o jakiej wspominasz napiszę ale na pewno nie w ciągu najbliższego miesiąca czy dwóch. Będzie to analogiczne do powyższej instrukcji tylko położenie względem lewej krawędzi będzie inaczej określane. Czy to z tym masz problem? Z położeniem w poziomie?
-
Gość: , *.ennet.pl
2012/09/19 13:55:54
Dziękuję za odpowiedź :)
Przerabiam jeden z nowych podstawowych szablonów bloxa. Na razie to menu znajduje się w bocznej szpalcie, nie wiem co zrobić żeby znalazło się w miejscu docelowym.
-
kate_mac
2012/09/21 09:53:00
@Gość
Dopóki nie zobaczę na żywo mogę tylko zgadywać rozwiązanie. Proponuję abyś elementowi pozycjonowanemu absolutnie ustawiła położenie względem lewej krawędzi na 50% a następnie ujemnym lewym marginesem przesunęła menu o połowę wartości szerokości menu (podaną już normalnie w pikselach). Jeżeli menu nie ma być na całą szerokość to odpowiednio ten lewy ujemny margines zmniejsz albo zwiększ.
Położenie względem górnej krawędzi możesz podać normalnie w pikselach. Reszta raczej bez zmian bo dotyczy wyglądu a jak rozumiem problem jest z położeniem.
-
mojeslodkie
2012/10/07 19:13:27
Hmm, dalej nie mogę tego zrobić ale trudno, poczekam na instrukcję dla nowego kodu.
Mam jeszcze jedną prośbę. Od jakiegoś czasu próbuję ustawić klikalny nagłówek (zamiast zwykłego nagłówka+klikalnego tytułu), w tej chwili wygląda to tak:
w edytorze Css:
#naglowek { width: 1250px; margin: 0 auto 32px; height: 391px; background: url(cukremimiodem.blox.pl/resource/banner.jpg) no-repeat 0 0; }
#naglowek h1 { width: 600px; padding: 110px 110px 0 48px; text-align: center; font-size: 70px; }
a{ color: # A11D14; text-decoration: none; }

w bocznej szpalcie:

<ul id="naglowek">
<li><a href="cukremimiodem.blox.pl><img src="cukremimiodem.blox.pl/resource/banner.jpg alt="cukrem i miodem" border="0" /></a>
</li>
</ul>

W tej chwili mam ten klikalny nagłówek w bocznej szpalcie i nie wiem co zrobić aby przenieść go w miejsce prawdziwego nagłówka.
Jeśli byłabyś tak miła i pomogła m z tym problemem byłabym bardzo wdzięczna :).
Pozdrawiam serdecznie.
-
kate_mac
2012/10/27 12:48:46
@mojeslodkie
Po pierwsze jeżeli korzystasz z szablonu na nowym kodzie to w html już jest element o identyfikatorze #naglowek - to to miejsce gdzie masz tytuł i opis bloga. Identyfikator musi być unikalny (jak nr pesel dla osoby) jeden identyfikator = jeden element. Jeżeli nie wiesz jakich identyfikatorów używa blox to zerknij do źródła strony (Ctrl+U) i nie używaj takich samych bo to tylko wprowadza niepotrzebne zamieszanie. (Klasy możesz używać wielokrotnie identyfikatora tylko dla jednego elementu - Co jest czym w CSS czyli budowa stylu)

Po drugie cokolwiek co wkleisz w pole na dodatkowy kod HTML wyświetli się w bocznej szpalcie o ile tego nie zmienisz (obok pola na kod jest informacja o tym gdzie wyświetla się jego treść na blogu). Aby zmienić położenie elementu musisz skorzystać z cech związanych z położeniem (position).

Po trzecie moim zdaniem istnieje prostsze rozwiązanie niż dodawanie nowego elementu, który ma zakryć stary. Ja zazwyczaj stosuję coś na kształt image replacement. Na nowym kodzie oczywiście trzeba użyć innych selektorów. Zaraz dopiszę proponowane zmiany w komentarzu pod tamtym wpisem.
-
mojeslodkie
2012/11/03 21:08:57
Dziękuję Ci, bardzo mi pomogłaś :) udało się uzyskać oczekiwany efekt, załadowałam nowy szablon na bloga i już jestem zadowolona, chociaż czeka mnie jeszcze sporo poprawek. Dziękuję raz jeszcze :).
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...