Skocz do zawartości

odstępy w blokach z obrazkiem


daniio

Recommended Posts

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:

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;

}

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 :]

Link do komentarza
Udostępnij na innych stronach

w stylu css zamiast: "div[id=strona]" proponuje użyć " #strona"

W sekcji body użyj czegoś takiego:

&lt;div id="top"&gt;
	&lt;div id="NAGLOWEK"&gt;Nagłówek szablonu&lt;/div&gt;
	&lt;div id="TRESC"&gt;Treść strony&lt;/div&gt;
	&lt;div id="STOPKA"&gt;Stopka serwisu&lt;/div&gt;
&lt;/div&gt;

A w pliku css spróbuj coś takiego:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#top {
	width: 780px;
}

#NAGLOWEK {
	background-color: #888;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Oczywiście poustawiaj sobie dane według swoich potrzeb.

Jeśli nie pomoże napisz, poszukamy innego rozwiązania.

Jeśli pomogłem daj "+".

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...