[CSS] Pozycjonowanie

0

Mam nastepujacy fragment kodu:

			<div id="content">
				<span id="images">
					<img id="cf_logo" src="codeforge_logo.png" alt="logo" />
					<img id="cf_text" src="codeforge_text.png" alt="codeforge" />
				</span>
			</div>

i pytanie, jak umiescic dwa obrazki roznej wielkosci

  1. w jednej lini obok siebie
  2. <ort>wysrotkowane </ort>w poziomie i pionie

Czesciowo uzyskalem to poprzez (jedna linia) i CSS (wysrodkowanie w poziomie):

#content {
	text-align: center;
}

Pozostaje wysrodkowanie w pionie, ktore mi wychodzi. Rozwiazanie musi dzialac w FF i IE.

0

z tego co wiem to CSS nie udostepnia wysrodkowania w pionie
a szkoda ...

0

zobacz na to http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

z tym ze, nie udaje mi sie na podstawia tego artykulu przystosowac stylu do dwoch obrazkow :(

0

Udostępniać w prost nie udostępnia, ale:

span.images{
   display: block;
   height: X;
   margin-top: -X/2;
   top: 50%;
}

Czy jakoś tak. Generalnie jeżeli element ma znaną wysokość to możesz go najpierw obniżyć do połowy strony (top: 50%), a następnie podnieść o połowę jego wysokości (margin-top: -X/2). Trochę trzeba tu poeksperymentować, bo od pół roku nic w cssach ie grzebałem i po prostu nie do końca pamiętam, jak tą sztuczkę się robiło.

0

ok, a jezeli

dopasowuje sie do wielkosci obszaru roboczego przegladarki? zalozmy ze nie uzywamy js i zostajmey przy samym css.</p>
0

Hm... :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
div.content {
	height: 50%;
	position: absolute;
	top: 50%;
	margin-top: -18%;
	border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">test</div>
</body>
</html>

Testowane tylko pod ff

0

pomysl jest. dzieki.

dziala pod IE, FF, Opera i Safari

1 użytkowników online, w tym zalogowanych: 0, gości: 1