Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z css

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Problem z css

Post 17.02.2015, 19:29:38

W wolnym czasie, dla zabawy, lubię popisać sobie stronki :)
Niewiele umiem, ponieważ niedawno zacząłem się uczyć :)
Zrobiłem takie coś:
Kod: Zaznacz cały
<html>
<head>
<title>Test 1</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="top">
      <div id="start"></div>
      <div id="forum"></div>
      <div id="sklep"></div>
      <div id="kontakt"></div>
      <div id="faq"></div>
<div>
</body>
</html>



I do tego CSS:
Kod: Zaznacz cały
#start
   {
   background-position: 0px 0px;
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   width: 192px;
   height: 44px;
   }
   
#start:hover
   {
   background-position: 0px -46px;
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   width: 192px;
   height: 44px;
   }
   
#forum
   {
   background-image: url(img/menu.png);
   background-position: -195px 0px;
   background-repeat: no-repeat;
   width: 192px;
   height: 44px;
   }
   
#forum:hover
   {
   background-position: -195px -46px;
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   width: 192px;
   height: 44px;
   }
#sklep
   {
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   background-position: -393px 0px;
   width: 192px;
   height: 44px;
   }
   
#sklep:hover
   {
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   background-position: -393px -46px;
   width: 192px;
   height: 44px;
   }
   
#kontakt
   {
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   background-position: -590px 0px;
   width: 192px;
   height: 44px;
   }
   
#kontakt:hover
   {
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   background-position: -590px -46px;
   width: 192px;
   height: 44px;
   }
   
#faq
   {
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   background-position: -787px 0px;
   width: 192px;
   height: 44px;
   }
   
#faq:hover
   {
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   background-position: -787px -46px;
   width: 192px;
   height: 44px;
   }


Efekt jest taki: Obrazek

Niestety nie wiem jak mam ustawić te przyciski obok siebie. Próbowałem jakimś sposobem z internetu i wyszło mi dosyć dziwne coś :)
Proszę, pomóżcie mi postawić przyciski obok siebie.
_Dominik_
Posty: 1
Dołączył(a): 17.02.2015

Re: Problem z css

Post 17.02.2015, 21:03:23

Ja bym to tak zrobił:
http://jsfiddle.net/7bm6wxg9/
Przede wszystkim na listach, bez odniesień po identyfikatorach (lepiej zostawić je JS-owi) i nie powielając zbytnio kodu.
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość

Hosting, Domeny, SSL

Subskrypcja

Mamy 52447 zarejestrowanych użytkowników.
Najnowszy użytkownik: molkumay@yandex.com


Nasi użytkownicy napisali:

  • 938988 wiadomości
  • w 248448 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)


cron