Body verkleinern?!
SilverTiger
- css
Hallo. ich mache für counter-strike source eine motd.txt (das is ne kleine html page beim serverstart)... ich habe alles so gemacht, das man bei einer auflösung von 1280 x 1204 nicht scrollen muss. wenn ich jetzt jedoch bei meinen 1680 x1050 joine, dann ist die seite (die css layer) links oben und nicht mitig. setze ich sie mittig, muss ich bei kleinerer auflösung scrollen da erst noch unnötige schwarze ränder kommen. hier der quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>SilverTigers Server</title>
<style type="text/css">
a:link { color: #000000; text-decoration:none; }
a:active { color: #ff0000; text-decoration:none; }
a:visited { color: #0000ff; text-decoration:none; }
a:hover { color: #000000; text-decoration:overline; }
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-color: #000000;
overflow: hidden;
}
.bg
{
width: 960px;
height: 480px;
position: absolute;
text-align: center;
background-image: url(bg.png);
}
.top
{
width: 920px;
height: 75px;
position: absolute;
text-align: center;
left: 17px;
right: 13px;
top: 17px;
border: 2pt solid #000000;
background-image: url(top.png);
overflow: auto;
}
.main
{
width: 920px;
height: 350px;
position: absolute;
text-align: center;
left: 17px;
right: 13px;
bottom: 17px;
border: 2pt solid #000000;
background-image: url(maincss.png);
overflow: auto;
}
.nav
{
width: 70px;
height: 348px;
position: absolute;
text-align: center;
left: 0px;
background-image: url(maincss.png);
}
.text
{
font-family: verdana;
font-size: 9pt;
font-color: #000000;
text-align: center;
padding-left: 87px;
padding-right: 15px;
padding-top: 15px;
}
.littletext
{
font-size: 7pt;
}
</style>
</head>
<body scroll="no">
<div class="bg">
<div class="top">
</div>
<div class="main">
<div class ="nav">
<br>
<table>
<tr>
<td>
<a href="rules.html">
<img src="rulesbutton.png">
</img>
</a>
</td>
</tr>
<tr>
<td>
<a href="sounds.html">
<img src="soundsbutton.png">
</img>
</a>
</td>
</tr>
<tr>
<td>
<a href="maps.html">
<img src="mapsbutton.png">
</img>
</a>
</td>
</tr>
</table>
</div>
<div class="text">
<u> Wilkommen in SilverTigers Server! </u> <br> <br>
In diesem Counter-Strike: Source Server gibt es viel Abwechslung, knallharte Action und massig Spielspaß. Hier wird ein vielseitiger und bunter Mapcycle gespielt (siehe "Maps"). Alle Maps sind auf Qualität und Spielbarkeit geprüft worden und somit bedenkenlos einsetzbar. Zusätzlich gibt es eine Menge abspielbare Sounds (siehe "Sounds"), welche ebenfalls auf höchster Qualität und niedrigster Datenmenge gehalten wurden. Als Konfigurationgrundlage wurde das Mani Admin Plugin 1.2O verwendet (genauere Settings unter "Regeln"). Dieser Server ist nicht dediziert, sondern immer temporär online. Außerdem ist SilverTigers Server auch in "Half-Life 2: Deathmatch", "Garrys Mod 10", "Obsidian Conflict 1.3.4" und "Pilotable Strider Mod 1.3.5.1" aufzufinden. <br> <br>
<img src="silvertiger.png" border="2pt"> <br>
<div class="littletext"> (c) SilverTiger <br> <br>
</div>
</div>
</div>
</div>
</body>
</html>
Tipp: div mit fester Größe, bspw. 1024x768 drum herum, dieses absolut positionieren mit top/left je 50% und margin-top/left -[Hälfte der Höhe/Breite].
Gruß, LX
Ähm,
Tipp: div mit fester Größe, bspw. 1024x768 drum herum, dieses absolut positionieren mit top/left je 50% und margin-top/left -[Hälfte der Höhe/Breite].
Tipp: Genau dies *nicht* machen. Es sei denn Du magst es, dass Deine Inhalte unerreichbar sind.
Cheatah
Lieber Cheatah,
wie würdest Du mit CSS sonst eine Zentrierung erreichen? Abgesehen davon werden die Inhalte nur dann unerreichbar, wenn die Bildschirmgröße kleiner als 1024x768 wird - allerdings macht CS/Source, welches normalerweise im Vollbildmodus angezeigt wird, bei kleineren Auflösungen keinen Spaß, so dass dieser Fall ohnehin in der Regeln nicht vorkommen dürfte.
Gruß, LX
Hi,
wie würdest Du mit CSS sonst eine Zentrierung erreichen?
eine vertikale nach Möglichkeit gar nicht, eine horizontale über margin.
Abgesehen davon werden die Inhalte nur dann unerreichbar, wenn die Bildschirmgröße kleiner als 1024x768 wird
Nein, die Viewportgröße. Davon abgesehen geht der Trend bei Auflösungen von 1024x768 weg - und zwar in beide Richtungen.
Cheatah