Forum PHP.pl > [HTML/CSS] Dziwny padding przy obrazku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML/CSS] Dziwny padding przy obrazku

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

Jarod

3.07.2008, 15:58:53

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

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

[HTML] pobierz, plaintext 
div#header {margin: 0 auto; width: 1002px; height: 6000px; background-color:green; overflow: auto;}
.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.

Shili

3.07.2008, 16:06:04

Spróbuj wyświetlić obrazek jako "display: block"

Jarod

3.07.2008, 16:07:37

Cytat(Shili @ 3.07.2008, 15:06:04 )

Spróbuj wyświetlić obrazek jako "display: block"

Próbowałem

na wszelkie sposoby. Inny pomysł?

Sprawdź sama lokalnie.

Shili

3.07.2008, 16:11:35

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.

Jarod

3.07.2008, 16:14:27

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.

Shili

3.07.2008, 16:19:01

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

JoShiMa

3.07.2008, 16:24:25

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

Jarod

3.07.2008, 16:43:14

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>

phpion

3.07.2008, 16:43:50

Shili już o tym pisała, ale może dawałeś styl w złym miejscu:

[HTML] pobierz, plaintext 
p.logo img {
display: block;
}
[HTML] pobierz, plaintext

Jarod

3.07.2008, 16:48:19

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 
p.logo img {
display: block;
}
[HTML] pobierz, plaintext

Nakierowałeś mnie.

Zamieniłem:

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

[HTML] pobierz, plaintext 
.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ć..

phpion

3.07.2008, 16:49:39

Nie, p to p, a img to img

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.

Jarod

3.07.2008, 16:53:39

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

Ma pomógł. Dziękuje.

JoShiMa

4.07.2008, 07:35:10

Cytat(Jarod @ 3.07.2008, 17:43:14 )

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

spoon-pl

18.02.2009, 00:07:48

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.