Jak zlikwidować odstęp/obramowanie między przyciskami w menu


(czacha_25) #1

MENU

przycisk_sztachety.jpg


(Kpc21) #2

Powinien być Strict.

To może nie jest do końca błąd, ale nie radzę używać niestandardowych fontów jak Terbuchet, bo nie w każdym systemie operacyjnym one występują. Poza tym na końcu trzepa podać rodzinę fontów, w tym wypadku sans-serif, żeby jeśli ktoś nie będzie miał Terbuchet, Verdany ani Ariala, żeby wyświetliło mu się nie w np. Timesie tylko w foncie bezszeryfowym.

Jaki sens ma nadawanie tych parametrów dla znacznika body? Przecież body to jest cała strona. Tak więc nie zobaczysz obramowania, a tym bardziej marginesu.

Możesz pokazać screena jak ta strona wygląda?

I kody źródłowe wkleja się na serwis typu www.nopaste.pl i podaje link. W przypadku krótszych kodów można stosować znacznik

(jeśli chcesz z kolorowaniem składni, to [code=php]). A na pewno kodu nie wstawia się tekstem ciągłym.

(czacha_25) #3

ok fony poprawię :wink:

border dodałem by obramować całą stronkę, border będzie widoczny bo stronka nie jest na całym ekranie i stąd też marginesy


(Kpc21) #4

Ale skoro dałeś je do body, to nic ci to nie da, bo body to cała strona, a margin to margines zewnętrzny.

Ja zrobiłbym to tak. Wszystkie divy układu objąć divem "zewnętrznym", szary kolor jako margin diva zewnętrznego, a czerwony jako padding body (choć nie mam pewności czy to zadziała, jeśli nie zadziała, to trzeba to objąć jeszcze jednym divem).

W przypadku wartości "0" w CSS, nie podaje się żadnych jednostek.

Powinieneś dodać deklarację:

#menu ul li {margin-top: 0;margin-bottom: 0;padding-top: 0;padding-bottom: 0;[/code]



Jeszcze dziwnie mi wygląda to:

 
[quote]

#menu ul, li, {
list-style:none;
list-style-type:none;
margin-left:0px 0px 0px 0px;
border:0px;

}

[/quote]


 Obecnie to będzie obowiązywać do każdego ul w divie menu i do wszystkich li na stronie. Co jest bez sensu, bo jeśli umieścisz wykaz na którejś z podstron, nie będzie on miał punktorów. Chyba powinno być:


[code=php]#menu ul, #menu li {

(czacha_25) #5

Wprowadzę te zmiany i dam znać co z tego wyszło dziś już muszę uciekać. Tak jak Pisałem to jest pierwsza moja stronka to pewnie robię podstawowe błędy :wink:


(Kpc21) #6

I tak jest całkiem dobrze :slight_smile:


(czacha_25) #7

Wprowadziłem proponowane zmiany, lecz nie mogłem się dogadać z wyśrodkowaniem stronki więc zostałem przy marginesach ustawionych w body.

Jest jakiś sposób na przyciski w menu bo na ie robi mi obramowanie przycisku i odstępy miedzy nimi, dopiero wpisanie border w tym miejscu pomaga (a raczej powinno się to zastosować w css)

przycisk_ogrod.jpg


(Kpc21) #8

Dajesz w CSS:

img {border: 0;[/code]

(czacha_25) #9

super pomogło :wink:

chcę też zrobić "animowany" przycisk tj.

przemyslnie

to robić w w kodzie strony tak jak jest na linku czy też może jest jakiś zalecany sposób w css?


(Kpc21) #10

Można to zrobić na JS (tak jak ty podałeś), ale wtedy jeśli ktoś wyłączy JS w przeglądarce, nie będzie widział efektu. Można też zrobić w CSS, ale będzie to niezgodne z zasadami semantyki (używanie znaczników zgodnie z ich przeznaczeniem), poza tym jeśli ktoś wyłączy wyświetlanie grafiki albo wejdzie z przeglądarki tekstowej, menu będzie dla niego praktycznie niedostępne (są sposoby na obejście tego poprzez umieszczenie tekstu w divie i wypozycjonowanie go w CSS tak aby nie był normalnie widoczny, np. umieszczając go poza ekranem).

HTML:

<a href="przemyslenie.html"><div class="przemyslenie">div>a> [/code]

CSS:

[code=php].przemyslenie {
height: (wysokość w pikselach);
width: (szerokość w pikselach);
background: url('grfika/bot_3.gif');


(Jacek705) #11

to jest źle. margin-left odnosi się tylko do lewego marginesu.

powinno być:

margin: 0 0 0 0;

Aby pozbyć się wszystkich odstępów przy guziczkach najlepiej zrobić tak:

margin: 0 0 0 0;

border: none;

padding: 0 0 0 0;

(czacha_25) #12

to już wyjaśnił mi wcześniej Kpc21 musiałem jeszcze zastosować

img { 

border: 0; 

}

-- Dodane 13.05.2010 (Cz) 17:11 --

Kpc21 z Twojego doświadczenia której metody lepiej użyć do tych przycisków?

zrobiłem tak jak napisałeś w css

w walidacji wyskoczyło mi że Znacznik "div" jest niedozwolony wewnątrz "a"

można to jakoś obejść by była zgodność?