[CSS]margines dla tekstu bez stosowania kolejnego diva. Opcje

[GoOx]

Cześć,

Jak w temacie, czy istanieje jakiś sposób w css zrobić aby można było utworzyć margines dla tekstu dla diva?

padding odpada ponieważ tłem jest obrazek i całośc by była nieładna estetycznie.

[b4rt3kk]

Ustalasz padding i pomniejszasz wymiary diva o ten padding. Przykładowo jeśli obrazek tła ma 200x200px i właśnie takie nadałeś width i height, to ustalając równomierny padding, dajmy na to 20px musisz odjąć tyle z każdej strony i nadać wymiar diva 160x160px. Drugim sposobem jest background-position: x y tak samo pozycję możesz ustalić samym background.

Ten post edytował b4rt3kk 17.07.2012, 18:08:23

[GoOx]

Dzięki działa.

Ale chyba jest problem ponieważ tekst to jest odsyłacz a gdy padding zabiera to pole zmniajszamy obrazek i trzeba celować praktycznie w napis aby kliknąc w odsyłacz.

[b4rt3kk]

Jeśli dobrze rozumiem to div jest tłem buttona? Prościej zrobić z odnośnika (a) blok i nadać mu tło:

[HTML] pobierz, plaintext 
a {
display: block;
width: 100px;
height: 35px;
padding: 5px;
background: url(tlo.jpg);
}
[HTML] pobierz, plaintext 

[GoOx]

To nawet nie jest głupi pomysł ale jak wypozycjonować ten "a" na tle obrazka? I zrobić tak aby tło obrazka też całe tło było tym odsyłaczem.

Ten post edytował GoOx 17.07.2012, 18:22:05

[b4rt3kk]

Jeśli z a zrobisz display: block wtedy jest to odnośnik w postaci bloku, np o wymiarach 200x50px i wtedy gdziekolwiek by nie kliknąć na nim, nie musi być na tekście to jest to cały czas odnośnik.

To tło co miałeś w divie dajesz w a, nadajesz mu odpowiednie wymiary.

Najlepiej by było jakbyś podał fragment kodu HTML+CSS, bo tak to są tylko moje wyobrażenia.

[GoOx]

Mam coś takiego:

[HTML] pobierz, plaintext 
<a href='index' class='p_ziemia'>Strona główna</a>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
a .p_ziemia {
  background-image: url('../images/inp_ziemia.png');
  width:130px;
  height:30px;
  display:block;
  cursor:pointer;
  color:f4f4f4;
  font-weight:800;
  text-decoration:none;
}
 
a .p_ziemia:hover {
  background-image: url('../images/inp_ziemia_hover.png');
  width:130px;
  height:30px;
  display:block;
  cursor:pointer;
  color:f4f4f4;
  font-weight:800;
  text-decoration:none;
}
[HTML] pobierz, plaintext 

Teraz nawet obrazek nie jest wyświetlany.

Dobra już sobie poradziłem.

[b4rt3kk]

Przyczyną tego, że obrazek się nie wyświetla może być nieprawidłowa ścieżka?

[HTML] pobierz, plaintext 
a .p_ziemia {
  background: transparent url('../images/inp_ziemia.png') top left no-repeat;
  width: 130px;
  height: 30px;
  display: block;
  cursor:pointer;
  color: f4f4f4;
  font-weight: 800;
  text-decoration:none;
}
 
a .p_ziemia:hover {
  background-image: url('../images/inp_ziemia_hover.png');
}
[HTML] pobierz, plaintext 

Nie musisz powtarzać dla hoverów wszystkich tych własności jak dla zwykłego a, wystarczy tło, poza tym lepszym rozwiązaniem jest jeden obrazek pod drugim i dla podświetlenia robisz tylko:

[HTML] pobierz, plaintext 
a:hover {
background-position: bottom left;
}
[HTML] pobierz, plaintext 

tak dla przykładu.

[sunpietro]

To, że obrazek się nie wyświetla jest winą tego że źle napisałeś selektory. Powinno być a.p_ziemia a nie a .p_ziemia
Takie małe wtrącenie do pierwszych postów. zawsze możesz też wykorzystać:

Kod

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

i możesz zapomnieć o wyliczaniu szerokości z uwzględnieniem paddingów