• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pytanie odnosnie Kursu Pana Mirosława CSS odc. 3: Rozwijane, przyklejane menu główne

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+4 głosów
916 wizyt
pytanie zadane 24 czerwca 2015 w HTML i CSS przez zxcv88 Nowicjusz (240 p.)
Fajny przykład, jednak jeśli proboje to zastosować na stronie w której menu ma określoną szerokość, tak jak i cały pojemnik na strone np 900px szerokości, to menu główne przykleja mi się pieknie do górnej krawędzi ale niestety równiez i do lewego górnego rogu, jak naprawić by dalej było na środku? Dziękuje za informację i gorąco pozdrawiam użytkowników forum jak i Pana Mirosława za wspaniałe materiały naukowe.

4 odpowiedzi

+1 głos
odpowiedź 24 czerwca 2015 przez ArturB Mądrala (6,060 p.)
wybrane 25 czerwca 2015 przez zxcv88
 
Najlepsza
Nie wiem czy dobrze pamiętam, ale klasa któa jest dodawana do tego menu jak jest przypięta do góry ma: top:0 i left:0, może jak usuniesz to left:0 to bedzie taki efekt jaki chcesz ?
komentarz 24 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)
usuwając left, przypina mi się w przeglądarce chrome wówczas do prawej krawędzi...

 

Zapewne rozwiązaniem jest zastosowanie pojemnika na strone bez sztywnie ustawionej szerokości, natomiast pozosałe divy wyśrodkować tak  jak jest to w kursie pana M, jednak bardziej zależy mi na przerobieniu tego pod moje potrzeby bez zmiany szkieletu strony,
komentarz 24 czerwca 2015 przez ArturB Mądrala (6,060 p.)
a to całe menu masz w kontenerze tym co całą stronę, czyli o szerokości 900 px?

z wyśrodkowaniem możesz pobawić się z marginesami left i right na auto.

Jakbym zobaczył tą stronę (np. w necie - a nie jako sam kod) to szybciej mógłbym pomóc, ponieważ moja wiedza nie jest wystarczająca aby wiedzieć co tam można poprawić i podaje tylko takie propozycje od czego bym sam zaczął poprawiać.
komentarz 24 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)

strona to contener o okreslonych rozmiarach wysrodkowana, w srodku jest menu w divie o okreslonej szerokosci itp, i ten cały div ma mi się przypiąć :) 

ponizej link do strony, jest to strona testowa, w której testuje rózne elementy tak jak kafelki logo itp:), nie doróbkami proszę sie nie przejmowac, zalezy mi na tym aby się to mi wkoncu przypieło w odpowiednim momencie:). pozdrawiam

http://ksero-roland.pl/marcin/

komentarz 24 czerwca 2015 przez ArturB Mądrala (6,060 p.)
może zobacz tak: z klasy .sticky usuń:

left:0;

left:50%;

display: inline-block;

a dodaj:

margin-top:-3px;

a następnie w #cssmenu>ul dodaj:

width:960px;

może taki efekt Cię zadowoli.
komentarz 25 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)
Fantastycznie, teraz już czaje z czym był problem, ten div #cssmenu -> jest z dodatkowego arkusza stylów który odpowiedzialny jest za to menu takie fikuśne, przed podrzuceniem strony tutaj zapomniałem go wyłączyć, wszystko jest robione na podstawie innego diva, ale te informacje tutaj wiele mi ułatwiły:) bardzo dziękuje ślicznie,
0 głosów
odpowiedź 24 czerwca 2015 przez Wiktord48 Początkujący (380 p.)
Na początku piszesz w HTML :

<ol>

<li>Napis w Menu</li>

<li>Napis w Menu</li>

</ol>

Następnie w CSS piszesz:

ol
{
    padding: 0;
    margin:0;
    list-style-type:none;
    font-size:18px;
    height:35px;
    line-height: 200%;
    display:inline-block; A ta linijka wyśrodkuje tekst.
}
komentarz 24 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)
menu jest  wylistowane w divie z ID i to on cały ma się przykleić do górnej krawędzi, wszystko ładnie działą tylko zamiast się przykleic na srodku to przykleja się w lewym górnym rogu:) Zrobione to jest z przykładu pana Mirosława

Podejrzewam że problem jest raczej tutaj, używając zamiast left, right, menu prawie jest na środku, jednak prawie nie oznacza że na środku

 

.sticky
{
    
    position: fixed;
    
    right:0;
    top:0;
    z-index:100;
    display: inline-block;
    
}
0 głosów
odpowiedź 24 czerwca 2015 przez Comandeer Guru (606,240 p.)
#menu 
{
    width: 900px;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -450px;
}

 

komentarz 24 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)
http://ksero-roland.pl/marcin/

 

taki efekt daje zastosowanie tego co tutaj jest:)
komentarz 24 czerwca 2015 przez Comandeer Guru (606,240 p.)
Jak masz tak pokićkane w arkuszu stylów to nic dziwnego, że nie działa
komentarz 25 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)
Widzisz, sprawa wygląda tak iż mogę wyłączyć drugi arkusz stylów, nie stoi to na przeszkodzie, po kickane jest gdyż kombinuje na wszystkie sposoby aby przypiąć tego diva w odpowiednim miejscu. Ważne jest iż wiem w którym miejscu co jest i jak to wyłączyć a problem jest całkowicie w innym miejscu, w każdym razie dzięki za bardzo "pomocna" odpowiedz.
komentarz 25 czerwca 2015 przez Comandeer Guru (606,240 p.)
Eh, no bo ten sposób działa, ale masz pełno wykomentowanych rzeczy w arkuszu i dlatego nie działa…
komentarz 30 czerwca 2015 przez zxcv88 Nowicjusz (240 p.)
Tak jakby komentarze miały wpływ na działanie kodu:) pozdrawiam
komentarz 30 czerwca 2015 przez Comandeer Guru (606,240 p.)

No mają.

Specyfikacja CSS przewiduje jeden typ komentarzy: /* */. Styl // jest dozwolony tylko do wyłączania poszczególnych własności. Natomiast u Ciebie są "komentarze":

\\border-bottom: 3px solid #686869;

czyli tworzysz niepoprawny składniowo plik CSS.

0 głosów
odpowiedź 3 lipca 2015 przez PreZmyK Pasjonat (21,470 p.)
Witam,

podczepie się pod ten temat, bo także mam pytanie odnośnie menu z tego odcinka.

Przy pomniejszaniu strony menu się rozsypuje, tzn. przechodzi w listę. Jest jakiś trick, żeby to zablokować?

dzięki i pozdrawiam.

Podobne pytania

0 głosów
1 odpowiedź 654 wizyt
+1 głos
0 odpowiedzi 8,421 wizyt
+1 głos
1 odpowiedź 204 wizyt

93,187 zapytań

142,201 odpowiedzi

322,012 komentarzy

62,514 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2365p. - dia-Chann
  2. 2315p. - Łukasz Eckert
  3. 2209p. - Łukasz Piwowar
  4. 2037p. - Tomasz Bielak
  5. 2006p. - rucin93
  6. 2006p. - Michal Drewniak
  7. 2005p. - Łukasz Siedlecki
  8. 1964p. - CC PL
  9. 1946p. - Adrian Wieprzkowicz
  10. 1901p. - Mikbac
  11. 1744p. - rafalszastok
  12. 1734p. - Anonim 3619784
  13. 1586p. - Dawid128
  14. 1520p. - Marcin Putra
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...