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

Question

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.

Answer 1

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 ?

Comments

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,

---

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ć.

---

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/

---

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.

---

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,

Answer 2

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

Comments

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

Answer 3

#menu 
{
    width: 900px;
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -450px;
}

 

Comments

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

 

taki efekt daje zastosowanie tego co tutaj jest:)

---

Jak masz tak pokićkane w arkuszu stylów to nic dziwnego, że nie działa

---

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.

---

Eh, no bo ten sposób działa, ale masz pełno wykomentowanych rzeczy w arkuszu i dlatego nie działa…

---

Tak jakby komentarze miały wpływ na działanie kodu:) pozdrawiam

---

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.

Answer 4

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.