+- 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: Pionowe środkowanie. (/thread-pionowe-%C5%9Brodkowanie)
Pionowe środkowanie. - Galfaroth - 25-11-2009
Witam serdecznie szanowne forum. Zaczynam swoją zabawę z xHtml i właściwie z CSS. Planuję przerzucić moją stronkę z flasha do xHTMLa.
Oto co mam:
http://peterszwach.prv.pl/xhtml/pscom.xhtml
Mój problem:
1. wyśrodkować główną treść w pionie (w poziomie juz jest) oraz menu i logo
2. sprawić, by stopka była oddalona od dolnego diva o 5 px - na razie jest na chama wpisana absolutna wartość 90%, chcialbym by to bylo od dolu zawsze 65px jako ze dolny div ma 60px.
Tutaj zrodelka:
Kod PHP:
<?xml version="1.0" encoding="iso-8859-2"?>
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<?xml-stylesheet type="text/css" href="style.css" ?>
<script type="text/javascript" src="expandingMenu.js"></script>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-2" />
<title></title>
</head>
<body xml:lang="pl">
<img id="background" src="bg.jpg" alt="Background-image" />
<div id="upframe"></div>
<div id="menu">HOME<br/>MUSIC<br/>WHO I AM<br/>NEWS<br/>CONTACT
</div>
<div id="content"><!-- <img src="testbit.png" alt="Black Ice Tales label"/> -->Przykladowa tresc strony. TODO: Tekst zagniezdzony na rysunku BIT, <br/>srodkowanie vertykalne.</div>
<div id="logo">PETER SZWACH<br/><span class="subtitle">STRONA DOMOWA</span></div>
<div id="stopka">COPYRIGHT 2009 PETER SZWACH ALL RIGHTS RESERVED.</div>
<div id="downframe"></div>
</body>
</html>
Kod PHP:
html { height: 100%; overflow:hidden; }
body { font-family: Calibri, Tahoma, Arial, sans-serif; background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: white; }
#upframe {
font-size: 12px; margin: 0; padding: 0; width: 100%; height: 60px; overflow: auto; background: #000;
}
#menu{
text-align:right; position: absolute; left: 0; top: 40%; margin: 10px; padding: 10px; color: 0; font-size: 21px; margin: 5px;
}
#content{
text-align: center; width: 100%; height: 100%; position: absolute; top: 20%; vertical-align: text-top;
}
#logo{
text-align:right; position: absolute; right: 0; top: 45%; margin: 10px; padding: 10px; color: 0; font-size: 24px; margin: 5px;
}
span.subtitle{
font-size: 14px;
}
#stopka{
text-align:right; position: absolute; right: 0; top: 90%; color: #FFF; font-size: 11px; font-weight: bold; margin: 5px; clear: both;
}
#downframe {
position: absolute; right: 0; bottom: 0; font-size: 12px; margin: 0; padding: 0; width: 100%; height: 60px; overflow: auto; background: #000;
}
RE: Pionowe środkowanie. - virus4 - 25-11-2009
1. Spróbuj dać:
Kod:
margin-top: auto;
margin-bottom: auton;2. Do #stopka dodaj:
Kod:
margin-bottom: 5px;