Odstępy między elementami

Question

Witam, w jaki sposób zwiększyć odległość pomiędzy tymi 3 elementami?

Dodam, że są one stworzone za pomocą list wypunktowanych oraz stylizowane w CSSie

Answer 1

Dodaj margin-right dla elementu li.

Pozdrawiam serdecznie

Comments

Kiedy to dodałem, napisy w rozwijanym menu mi się rozjechały, a były ustwaione na środku za pomocą text-align

---

jeśli chcesz to robić margin leftem to musisz zaznaczyć ze akurat tylko do tych li na pasku się odwołujesz a nie wszystkich na stronie. Możesz to zrobić tworząc dla nich specjalną klase, dać id dla głównego ul albo zdefiniować "scieżkę" np #heder ul li { }

---

Dobrze byłoby, gdybyś podał nam twój kod, a już najlepiej gdybyś od razu zaserwował go z live demo. 

---

Proszę bardzo. Demo wraz z kodem

http://speedy.sh/bBmME/Echo-Custom-Strat.zip

---

W css usuń tą linijkę co dodaje padding z prawej 150px,

Jeśli chcesz aby były te odstępy dodaj 

#nav-wrapper ul li{
padding: 0 70px;
}

Jeśli chcesz żeby lista rozwijana miała spowrotem swoją szerokość możesz wyzerować padding dopisując w css poniżej 

#nav-wrapper ul li ul li{
padding: 0;
}

tutaj też możesz ewentualnie dodać delikatnie paddingu co polepszy wizualnie tą liste

---

Okej, śmiga, tylko jak wyśrodkować te listy względem Napisów tych na górze? (Kolor, płytka, dodatki)

---

hmm, tak sobie teraz to kombinowałem i wykombinowałem tylko tyle, żeby wywalić to wszystko z paddingami itd. i wkleić

#nav ul li
{
text-align:center;
width:200px;
}

 Sprawdź jak to widzisz.

EDIT: Jeśli denerwuje cię to, że po rozwinieciu masz taką dziwną niedokładnosć rozwiniętego do przycisku to dodaj jeszcze 

#nav ul ul li
{
width: 190px;
}

 

---

Okej, wszystko działa, tylko teraz jak zrobić aby po wybraniu elementu z listy wyświetlał się obrazek?

---

Ale obrazek gdzieś na stronie po najechaniu na podliste? Myślę że to już trzeba za pomocą javascript kombinować. Teoretycznie można taki efekt uzyskać za pomocą <iframe> i target, lub też po prostu wkleić gotowego slimboxa. Może opisz jak to powinno działać lub co konkretnie chcesz osiągnąć.

---

Chciałbym, na przykład po rozwinięciu zakładki kolor i kliknięciu na przykład czarny pojawił się obrazek i wartość zadeklarowanej wcześniej zmiennej zwiększy się o 1

---

Jesli tylko ma się wyświetlić obrazek i zwiększyć licznik, to podpinasz slimboxa i w php musisz napisać funkcje zwiększajacą licznik.

---

Co to slimbox? Nie sprecyzowałem, chodzi o to że po najechaniu na każdą inną opcję zmienna przyjmuje inną wartość. I chciałbym żeby obrazki wyświetlałty się bez przeładowania strony

---

slimbox i lightbox to gotowe silniki i skrypty javascript, które wyświetlają zdjecie tak jak dzieje się to w galeriach. Przykałd http://ujeb.se/VkWix

Co do tego zliczania to nie wiem czy da się po najechaniu (najprawdopodobniej się da, tylko troche z tym kombinowania a ja się kompletnie na tym nie znam), ale mozesz dopisać funkcje w javascript i podpiąć ją pod "onclick" do <a>. Musisz mieć też jakiś plik który będzie robił za przechowalnik ile już było kliknięć. Jakoś sobie z tym poradzisz 

---

No właśnie zacząłem kombinować z onclickiem, zostało mi tylko wyświetlanie obrazków. Dziękuję ślicznie za pomoc ;) Temat do zamknięcia :)

Answer 2

Dodaj margin-left lub margin-right do CSS'a.

Answer 3

możesz zwiększyć padding w css dla elementów #naglowek ul li {padding: 10px;}

Comments

A dlaczego nie margin-left'em?

---

Wszystko zależy jak dalej chce tego użyć, ja zazwyczaj używam tego jako przyciski więc padding pomaga mi zachować wyśrodkowany tekst na przycisku o zwiększonej powierzchni, margin sprawia że przycisk będzie dalej mały a przerwy pomiędzy nimi się powiększą.

W tym przypadku istotnie mozna zastosować również margin, kto co lubi ;)

---

Okiej. :) Oczywiście jeżeli miałby być to button, to też bym stosował padding. :)

Answer 4

Witaj,

wydaje mi się ze łatwiej byłoby zamienić je na pojemniki div, dodać zapis float: left; a następnie w CSS dodać:

#nazwadiva

{

Padding: 10px;

}

Comments

Lepiej zrobić to z <ul> i <li> jest bardziej przejrzyste. :)

<ul class="">

    <li>Strona Główna</li>

    <li>Kontakt</li>

    <li>Pomoc</li>

</ul>

Z divami:

<div class="">Strona Główna</div>

<div class="">Kontakt</div>

<div class="">Pomoc</div>

 

---

Możliwe, ale napisałem to co w mojej opini jest najlepsze :D i wiem, ze będzie działać.

Pozrdawiam

---

Cóż... Pozdrawiam. :)

Answer 5

dla danego elementu ustawiasz wewnętrzne marginesy: padding-left,right,top,bottom, lub zewnętrzne(nie polecam będą źle elementy się układać przy scrollowaniu strony) margin-left,top,right,bottom