Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] Dopasowanie kółka do tekstu
Dominator
post
Post #1





Grupa: Zarejestrowani
Postów: 565
Pomógł: 15
Dołączył: 11.10.2010

Ostrzeżenie: (20%)
X----


Witajcie, otóż mam problem, chcę aby kółko dopasowało się między środek tekstu; tzn mam takie coś (IMG:http://screenshooter.net/data/uploads/yo/eb/pevt.jpg)

Można zauważyć że kółko idzie tak parę pixeli na dół, a ja chciałbym aby ono było po środku a nie na dole; pomóżcie.

to znajduje się w ramce oraz w <li>

  1. .rameczka {
  2. text-align:left;
  3. background:black;
  4. position:relative;
  5. box-shadow: 0 0 20px 10px #288FF7;
  6. margin: 0 auto;
  7. margin-top:-8px;
  8. height: 260px;
  9. border-style: double solid;
  10. width: 610px;
  11. height: auto;
  12. }


oraz <li>

  1. li {
  2. list-style:url(linkdoobrazka);
  3. margin-right:138px;
  4. margin-top:12px;
  5. margin-bottom:12px;
  6. height:auto;
  7. margin: 0 25px;
  8. }
Go to the top of the page
+Quote Post
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Ogólnie aby to wszystko ładnie chodziło i wyglądało w każdej przeglądarce raczej robi się to inaczej.

Jest sposób - dajesz obrazek jako tło LI odpowiednio po lewej stronie. Na przykład:

  1. li {
  2. list-style-type:none; /* chowamy znaczek LI */
  3. background-image:url(obrazek.jpg); /* dodajemy nasz obrazek jako tło (załóżmy że ma jakieś 32x32) */
  4. background-position: left center; /* ustawiamy je z lewej na środku w pionie */
  5. background-repeat: no-repeat; /* nie powtarzamy */
  6. padding-left:32px; /* dajemy lewy padding dla LI aby teskt nie wchodził na tło (obrazek) */
  7. }


Poeksperymentuj z tym: http://jsfiddle.net/Q2QzK/
Go to the top of the page
+Quote Post
Dominator
post
Post #3





Grupa: Zarejestrowani
Postów: 565
Pomógł: 15
Dołączył: 11.10.2010

Ostrzeżenie: (20%)
X----


@Up

To nadal schodzi kawałek w dół (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
DDK15
post
Post #4





Grupa: Zarejestrowani
Postów: 8
Pomógł: 1
Dołączył: 16.04.2011

Ostrzeżenie: (0%)
-----


wywal

Kod
margin: 0 25px;
Go to the top of the page
+Quote Post
Dominator
post
Post #5





Grupa: Zarejestrowani
Postów: 565
Pomógł: 15
Dołączył: 11.10.2010

Ostrzeżenie: (20%)
X----


@Up

Dzięki, zadziałało (IMG:style_emoticons/default/smile.gif) )
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 4.10.2025 - 19:44