Forum Webmasterskie: odstępy w blokach z obrazkiem - Forum Webmasterskie

Skocz do zawartości

Strona 1 z 1
  • Nie możesz napisać tematu
  • Nie możesz odpowiedzieć

odstępy w blokach z obrazkiem

#1 Użytkownik nie jest zalogowany   daniio Ikona

  • Przedszkolak
  • Pip
  • Grupa Members
  • Postów 1
  • Rejestracja 25-październik 11

Napisano 25 październik 2011 - 21:13

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.images...2/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 :]
0

#0 Reklama

  • WebForum.pl
  • Grupa Advert

Napisano --


#2 Użytkownik nie jest zalogowany   djpittbull Ikona

  • Bywalec
  • PipPipPip
  • Grupa Members
  • Postów 44
  • Rejestracja 11-marzec 11

Napisano 28 październik 2011 - 15:51

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



W sekcji body użyj czegoś takiego:
<div id="top">
	<div id="NAGLOWEK">Nagłówek szablonu</div>
	<div id="TRESC">Treść strony</div>
	<div id="STOPKA">Stopka serwisu</div>
</div>

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 "+".
0
Strona 1 z 1
  • Nie możesz napisać tematu
  • Nie możesz odpowiedzieć

Użytkownicy przeglądający ten temat: 1
0 użytkowników, 1 gości, 0 anonimowych