Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML/CSS] Dziwny padding przy obrazku
Jarod
post 3.07.2008, 15:58:53
Post #1





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Mam obrazek o wymiarach: 348x128. Wstawiłem go do dokumentu:

[HTML] pobierz, plaintext 
  1. (prawidłowe doctype itp..)
  2. <body>
  3.       <div id="header">
  4.              <p class="logo"><img src="Images/logo.png" alt="Logo"></p>
  5.       </div>
  6.  
  7. </body>
  8. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div#header {margin: 0 auto; width: 1002px; height: 6000px; background-color:green; overflow: auto;}
  2. .logo {  margin: 0; padding: 0; background-color:black; border: 1px red solid; }
[HTML] pobierz, plaintext


Pod obrazkiem (tzn. między obrazkiem i dolnym obramowaniem) jest przerwa jakieś 3px. Tak jakby ten obrazek miał większą wysokość. Jak zmniejszę wysokość to pojawia się boczny scroll. Macie jakiś pomysł?
ps. kombinowałem z font-size: 0px; ale to pomaga tylko w ff a w operze jest nadal ta przerwa.

Ten post edytował Jarod 3.07.2008, 16:12:30


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
Shili
post 3.07.2008, 16:06:04
Post #2





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Spróbuj wyświetlić obrazek jako "display: block"
Go to the top of the page
+Quote Post
Jarod
post 3.07.2008, 16:07:37
Post #3





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(Shili @ 3.07.2008, 15:06:04 ) *
Spróbuj wyświetlić obrazek jako "display: block"

Próbowałem winksmiley.jpg na wszelkie sposoby. Inny pomysł? smile.gif Sprawdź sama lokalnie.

Ten post edytował Jarod 3.07.2008, 16:08:10


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
Shili
post 3.07.2008, 16:11:35
Post #4





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

U mnie się to nie pojawia, bez względu na dołożony obrazek.

Jedyne co tak na sucho mi przychodzi do głowy to zlikwidowanie scrolla przez overflow: hidden;

ps. Przeglądarka taka jak Opera ma domyślnie ustawioną najniższą czcionkę bodajże 9px. W firefoksie trzeba to ustawiać ręcznie, ale również się da, dlatego zmniejszanie czczionek nie jest przeważnie dobrym rozwiązaniem.

@edit
Jako że u mnie tego nie ma ani na Firefoksie ani na Operze wydaje mi się, że coś innego Ci miesza tak na marginesie.

Ten post edytował Shili 3.07.2008, 16:14:10
Go to the top of the page
+Quote Post
Jarod
post 3.07.2008, 16:14:27
Post #5





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(Shili @ 3.07.2008, 15:11:35 ) *
U mnie się to nie pojawia, bez względu na dołożony obrazek.

Poprawiłem kod w pierwszym poście - może teraz zobaczysz.

Cytat(Shili @ 3.07.2008, 15:11:35 ) *
Jedyne co tak na sucho mi przychodzi do głowy to zlikwidowanie scrolla przez overflow: hidden;

Scroola nie będzie ale będę wiedział że obrazek wypływa poza kontener header - błą będzie z tym, że nie widoczny dla zwykłego usera...
Zaraz zamieszczę fotke.


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
Shili
post 3.07.2008, 16:19:01
Post #6





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Tylko tak informuję, że u mnie nadal jest bez żadnej przerwy. Poczekam na tą fotkę i jeśli jeszcze będę w pracy i wpadnę na jakiś pomysł, to dam znać.

ps. W ostateczności błędy warto w ten sposób ukrywać przed użytkownikami. Zwłaszcza jeśli rozwiązanie problemu jest trudne, a obejście proste, ale może ktoś inny wpadnie jeszcze na pomysł czemu się tak dzieje winksmiley.jpg
Go to the top of the page
+Quote Post
JoShiMa
post 3.07.2008, 16:24:25
Post #7





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

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

A w jakim celu ten obrazek jest wsadzony do znacznika <p/> ?


--------------------
Zajrzyj, poczytaj, naucz się
Go to the top of the page
+Quote Post
Jarod
post 3.07.2008, 16:43:14
Post #8





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

KLIK

Cytat(JoShiMa @ 3.07.2008, 15:24:25 ) *
A w jakim celu ten obrazek jest wsadzony do znacznika <p/> ?

Blok header będzie podzielony na dwie części. W lewej będzie obrazek pływający do lewej, w prawej inny blok pływający do prawej. Może rzeczywiście bardziej nadaje się do tego <div> zamiast <p>


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
phpion
post 3.07.2008, 16:43:50
Post #9





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
Shili już o tym pisała, ale może dawałeś styl w złym miejscu:
[HTML] pobierz, plaintext 
  1. p.logo img {
  2. display: block;
  3. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Jarod
post 3.07.2008, 16:48:19
Post #10





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(phpion @ 3.07.2008, 15:43:50 ) *
Shili już o tym pisała, ale może dawałeś styl w złym miejscu:
[HTML] pobierz, plaintext 
  1. p.logo img {
  2. display: block;
  3. }
[HTML] pobierz, plaintext


Nakierowałeś mnie.

Zamieniłem:
[HTML] pobierz, plaintext 
  1. .logo { margin: 0; padding: 0; background-color:black; border: 1px red solid; }
[HTML] pobierz, plaintext


na 
[HTML] pobierz, plaintext 
  1. .logo img { margin: 0; padding: 0; background-color:black; border: 1px red solid; }
[HTML] pobierz, plaintext

i jest ok. Tylko zastanawia mnie jedna rzecz. Przecież <p> jest domyślnie wyświetlany jako blok, więc obrazek także powinien być..


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
phpion
post 3.07.2008, 16:49:39
Post #11





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
Nie, p to p, a img to img smile.gif To, że img jest wewnątrz znacznika blokowego nie oznacza, że automatycznie jest również blokiem.

PS: dzięki za "pomógł" ale to Shili pierwsza podała Ci poprawne rozwiązanie.

Ten post edytował phpion 3.07.2008, 16:50:22
Go to the top of the page
+Quote Post
Jarod
post 3.07.2008, 16:53:39
Post #12





Grupa: Zarejestrowani
Postów: 1 190
Pomógł: 27
Dołączył: 23.04.2005

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

Cytat(phpion @ 3.07.2008, 15:49:39 ) *
PS: dzięki za "pomógł" ale to Shili pierwsza podała Ci poprawne rozwiązanie.

Niby tak ale mało precyzyjnie winksmiley.jpg Ma pomógł. Dziękuje.


--------------------
”Godzina nauki w życiu nowoczesnego apostoła jest godziną modlitwy.”
(św. Josemaría Escrivá, Droga, 335)
Go to the top of the page
+Quote Post
JoShiMa
post 4.07.2008, 07:35:10
Post #13





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

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

Cytat(Jarod @ 3.07.2008, 17:43:14 ) *
Blok header będzie podzielony na dwie części. W lewej będzie obrazek pływający do lewej, w prawej inny blok pływający do prawej. Może rzeczywiście bardziej nadaje się do tego <div> zamiast <p>

Jeśli to będą obrazki to same sobie poradzą z pływaniem. Nie trzeba komplikować struktury i umieszczać ich w żadnych innych pudełkach smile.gif

Ten post edytował JoShiMa 4.07.2008, 07:35:28


--------------------
Zajrzyj, poczytaj, naucz się
Go to the top of the page
+Quote Post
spoon-pl
post 18.02.2009, 00:07:48
Post #14





Grupa: Zarejestrowani
Postów: 14
Pomógł: 2
Dołączył: 17.02.2009

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

prościej zamiast <div id="header> zrobić <div id="header_left"> </div> <div id="header_right"> </div> dorzucasz tylko odpowiednie rozmiary i położenie wobec siebie float:left
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 20:00
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn