[HTML]/[CSS] - Złe wyświetlanie tekstu w div-ie


(Ticio14) #1

Witam. Robię sobie stronę internetową, by poćwiczyć html i css.

Wszystko szło mi dobrze, do czasu.

Jeden z div-ów wyświetla mi tekst, ale nie tam gdzie powinien, tzn. div ma wysokości 150px (ładne tło obrazkowe itp.) a tekst wyświetla się na wysokości ok. 200 px i jest przykryty przez inny div.

Można powiedzieć, że tekst się "zbuntował" i nie chce być wyświetlany na tle.

strona2e.jpg

Nie wiem, czy mam błąd w html, czy w css (być może mam źle rozmieszczone div-y w html-u).

Zamieszczam kod ze styli kaskadowych:

body {

	background: url(images/tlo.jpg) repeat;

	background-color: #3b4113;

	margin-top:0px;

	margin-left:auto;

	margin-right:auto;

	margin-bottom:0px;

	width:1024px;

	list-style: none;

	}


div {

	font: Verdana 12px #000;

	position: relative;

	}


a {

	text-decoration: none;

	}


#kontener {

	width: 1024px;

	height: 100%;

	border-left: solid #34381d 2px;

	border-right: solid #34381d 2px;

	background: #3b4113;

	}


	#naglowek {

		float: left;

		background: #fff url(images/logo1.jpg) no-repeat;

		width: 250px;

		height: 193px;

		}


	#logo {

		float:right;

		background: #fff url(images/logo.jpg) no-repeat;

		width: 774px;

		height:193px;

		}


	#belka{

		position: relative; top: 193px;

		background: #fff url(images/belka.jpg) repeat;

		width: 250px;

		}


	#tytul{

		display: block;

		position: relative; left: 250px;

		text-align: center;

		background: #fff url(images/tlo_tekst_top.jpg) no-repeat;

		margin-left:auto;

		margin-right:auto;

		padding-top: 50px;

		padding-left: 20px;

		width: 754px;

		height: 100px;

		}


	#tresc {

		display: block;

		position: relative; left: 250px;

		min-height: 220px;

		margin-left:auto;

		margin-right:auto;

		padding-left: 20px;

		background: #fff url(images/tlo_tekst_mid.jpg) repeat;

		width: 754px;

		}


	#koniec{

		display: block;

		position: relative; left: 250px;

		text-align: center;

		margin-left:auto;

		margin-right:auto;

		padding-left: 20px;

		background: #fff url(images/tlo_tekst_bot.jpg) no-repeat;

		width: 754px;

		height: 150px;

		}


	#stopka{

		background: #3b4113 url(images/stopka.jpg) no-repeat;

		text-align: center;

		width: 1024px;

		height: 35px;

		}

oraz z html-a:

Tekst tytułu

To jest przykładowy tekst, który będzie wyświetlany jako treść strony www. To jest przykładowy tekst, który będzie wyświetlany jako treść strony www. (...)

Koniec

Stopka

[/code]

Wszystko wyświetla się ładnie, ale mam problem z tym nieszczęsnym div-em "tytul", którego dotyczy cały temat.

Aha, i proszę o wyrozumiałość, jestem początkujący i nie do końca jeszcze wiem co i jak.


(Grzesie K) #2

(Ticio14) #3

(Grzesie K) #4

Oczywiście da się to zrobić na oim przykładzie dodając jeszcze jednego diva, lecz nie posiadając grafiki nie jestem wstanie zrozumieć o co chodzi. Wrzuć na jakiś hosting te pliki graficzne lub cały projekt.


(Ticio14) #5

Efekt można zobaczyć tu:

Tutaj

Chodzi o to, że belka powinna "przylegać" do stopki.

Atrybut "repeat" nie wiedzieć czemu, nie pomógł.


(Grzesie K) #6

(Ticio14) #7

EDIT:

Poradziłem sobie, dzięki za pomoc :slight_smile: