Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Obrazek w jednej lini z h2
Tom:-)
post 5.09.2011, 00:33:16
Post #1





Grupa: Zarejestrowani
Postów: 284
Pomógł: 0
Dołączył: 25.03.2007
Skąd: Globalna wioska

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


Jak powinien wyglądać HTML oraz CSS aby do h2 dodać na początku obrazek i żeby było wszystko w jednej linii (vertical-align:middle)

Całość będzie się mieścić w div:
  1. background-image:url(images/21.jpg);
  2. background-repeat:repeat-x;
  3. height:35px;


Ten post edytował Tom:-) 5.09.2011, 00:35:11


--------------------
Go to the top of the page
+Quote Post
sadistic_son
post 5.09.2011, 01:31:52
Post #2





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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


  1. h2,#obrazek{
  2. display:inline;
  3. }

Oczywiście obrazek musi mieć id="obrazek"


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...

-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
Tom:-)
post 5.09.2011, 02:23:55
Post #3





Grupa: Zarejestrowani
Postów: 284
Pomógł: 0
Dołączył: 25.03.2007
Skąd: Globalna wioska

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


Robiłem tak wcześniej i nie było trybiło. Przemęczenie górą a pytanie błache. To jeszcze jedno pytanie (proszę o wyrozumiałość). Czy da się w pionie wypośrodkować elementy bez używania padding-top?


Ten post edytował Tom:-) 5.09.2011, 02:27:37


--------------------
Go to the top of the page
+Quote Post
Ociu
post 5.09.2011, 12:53:09
Post #4





Grupa: Moderatorzy
Postów: 1 566
Pomógł: 37
Dołączył: 14.05.2003
Skąd: Kraków




Ogólnie średnio z centralizacją w pionie. Można zrobić to tak:
  1. .centralizacja
  2. {
  3. position: absolute;
  4. top: 50%;
  5. }

Ale to tylko dla głównego diva.
Go to the top of the page
+Quote Post
gargamel
post 5.09.2011, 13:11:35
Post #5





Grupa: Zarejestrowani
Postów: 278
Pomógł: 35
Dołączył: 25.06.2010

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


Żeby tekst h2 rozpoczynał się obrazkiem, najlepiej rozwiązać to w ten sposób:
  1. h2 { background-image:url('sciezka/do/obrazka.jpg'); background-repeat:no-repeat; background-position: left center; }

Aby dodatkowo wyśrodkować go w pionie, należy dodatkowo dopisać do niego klasę:
  1. .centred { line-height:10px; }
gdzie oczywiście nie wpisujesz przykładowych 10px, tylko wysokość otaczającego elementu.

Ten post edytował gargamel 5.09.2011, 13:12:05
Go to the top of the page
+Quote Post
sadistic_son
post 5.09.2011, 15:07:12
Post #6





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

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


A może chodzi Ci o wyśrodkowanie absolutne - DEAD CENTER questionmark.gif
Poeksperymentuj sobie zmieniając rozdzielczość, rozmiar okna przeglądarki itp. Czerwony prostokąt jest ZAWSZE na środku.

Ten post edytował sadistic_son 5.09.2011, 15:08:15


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...

-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
Tom:-)
post 5.09.2011, 15:10:17
Post #7





Grupa: Zarejestrowani
Postów: 284
Pomógł: 0
Dołączył: 25.03.2007
Skąd: Globalna wioska

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


Każdy post jest pomocny i za to dziękuję. Uważam że
Kod
h2 { background-image:url('sciezka/do/obrazka.jpg'); background-repeat:no-repeat; background-position: left center; }

wygląda najbardziej pro


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 22.05.2025 - 15:07