+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: odstępy w blokach z obrazkiem (/thread-odstepy-w-blokach-z-obrazkiem)
odstępy w blokach z obrazkiem - daniio - 26-10-2011
Witam
Proszę o pomoc z następującym problemem. Chciałbym zrobić pod sobą 2 bloki <div> w tym na górze baner w tym niżej taki pasek. Problem tkwi w tym, że wydawało mi się, że blok automatycznie jest wielkości umieszczonego w nim obiektu(tu obrazka). Przedstawiam screena tego co udało mi się uzyskać:
http://img810.imageshack.us/img810/7412/problemvy.png
Jak widać pod obrazkiem w bloku robi się odstęp, którego nie chcę. Wiem, że mogę ustawić wysokość na sztywno dla bloku ale chciałbym bardziej zrozumieć ich naturę i dlaczego tak się dzieje. Od razu mówię, że margin i padding mam ustawione na 0.
Poniżej zmieszczam kod:
Cytat:styl.css
@charset "UTF-8";
body
{
margin: 0px;
padding:0;px
}
div[id="strona"]
{
background-color: #DADADA;
}
div[id="baner"]
{
display:block;
text-align:center;
background-color:pink;
}
div[id="pasek_gora"]
{
display:block;
text-align:center;
background-color:red;
}
Cytat:index.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>eKożuszki</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./style/styl.css"/>
</head>
<body>
<div id="strona">
<div id="baner">
<img src="./img/baner.jpg" alt="eKożuszki" />
</div>
<div id="pasek_gora">
<img src="./img/menu.jpg" alt="eKożuszki" />
</div>
</div>
</body>
</html>
Wszelkie uwagi apropo tego kodu mile widziane. Z góry dzięki :]
RE: odstępy w blokach z obrazkiem - Kartofelek - 26-10-2011
ojojojojojoj. Img mają miejsce na opis. To miejsce jest właśnie pod obrazkiem. Dasz obrazkowi display:inline-block i masz problem z głowy. Możesz też dać display:block, ale wtedy musisz mu ustawić wymiary i pozycję.
Swoją drogą ciekawy sposób na id
Kod:
div[id="pasek_gora"] {....}Czy jest on szybszy? Bo nigdy nie używałem tej techniki
RE: odstępy w blokach z obrazkiem - daniio - 26-10-2011
Sposób taki znalazłem w jakimś kursie aczkolwiek koledzy z innego forum doradzili mi stosowanie:
div#pasek_gora gdyż jest kompatybilny ze starszymi przeglądarkami. Czy szybszy? Nie wiem ale może ktoś się na ten temat wypowie. Niestety inline-block nie pomaga. Zostaje zastosować display:block. Tylko ciekawe ile ma ten odstęp na opis. Ale dzięki za info bo się głowiłem czemu w ogóle taki odstęp się robi.
RE: odstępy w blokach z obrazkiem - Kartofelek - 26-10-2011
#pasek_gora img {display:block; ......}
RE: odstępy w blokach z obrazkiem - hieroshima - 26-10-2011
ja uzywam czasami input[name="imie"] {... style ... } do ostylowania poszczególnych pól formularzy, żeby nie zakopać się w klasach. A czy szybsze, wydaje mi się, że nawet jeśli to ile musiałby zajmować kod, żeby zobaczyć różnicę?
RE: odstępy w blokach z obrazkiem - Kartofelek - 26-10-2011
Wiesz ale tu chodzi o lans. Gdy będziesz wiedział czy to jest szybsze czy nie to potem będziesz mógł się chwalić na forum.
RE: odstępy w blokach z obrazkiem - hieroshima - 26-10-2011
hehe niestety nie mogę się lansować bo nie wiem czy to jest szybsze, ale na pewno mniej wygodne niż normalna technik
