Lord Lommel |
07.04.2009 13:37 |
min-width, min-height und overflow wollen nicht
Es geht um folgende Seite: http://www.starfleetonline.de/new/
Eigentlich gibt es da keine Probleme, wenn man den Browser nicht kleiner macht. Ich wollte das Design so bauen, daß es eine Mindestbreite von 1000px und Mindesthöhe von 500px hat. Bevor ich mich an so Sachen wie den IE6 mache, sollte es erstmal auf IE7 und FF funktionieren. Tut es aber nicht. Wenn ich min-width und min-height setzt, wird das Layout zerstört. Wenn ich noch width und height auf 100% setze geht das Layout, aber die Mindestbreite funktioniert nicht. Da ist es auch egal, ob ich es an das Body-Tag oder an ein Div drumrum baue. Auch das legen eines Hintergrund-Divs 1000x500 hat nichts gebracht, weil dann die rechts ausgerichteten Elemente nicht am Div, sondern am Browserfenster ausgerichtet werden. Was kan ich tun ?
Das zweite Problem betrifft den Text. Irgendwie kann ich overflow-scroll dranhängen wo ich will, ich bekomme Scrollbalken, aber der Text wird immer voll dargestellt. Ich möchte ja keine feste Höhe des Text-Divs angeben, er soll ja immer bis unten gehen plus scrollen wenn er Text zu lang ist. Hat hier jemand nen Tipp ? Wahrscheinlich sehe ich den Wald vor lauter Bäumen nicht.
Erstmal vielen Dank, hier noch der Quelltext:
HTML-Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="lcars.css">
<title></title>
</head>
<body>
<div class="overall_div">
<div class="left_menu">
<div class="status_top">
<img src="label01-starfleet.png" style="top:5px;" alt="Starfleet Online" />
<img src="label02-sternenflotte.png" style="top:30px;" alt="Star Trek Sternenflotte" />
</div>
<div class="status_bottom">
<img src="label03-headquarters.png" style="top:5px;" alt="Headquarters" />
<img src="label04-lcars.png" style="top:30px;" alt="LCARS" />
<img src="label05-stardate.png" style="top:55px;" alt="Stardate" />
</div>
</div>
<div class="top_left"></div>
<div class="right_label"></div>
<div class="main_menu" style="width:270px;">
<a href="Abteilungen.html" style="top:0px;left:6px;"><img src="button02-Abteilungen.png" alt="Abteilungen" /></a>
<a href="Flotten.html" style="top:27px;left:6px;"><img src="button02-Flotten.png" alt="Flotten" /></a>
<a href="Personal.html" style="top:54px;left:6px;"><img src="button02-Personal.png" alt="Personal" /></a>
<a href="http://forum.starfleetonline.de" target="_blank" style="top:0px;left:94px;"><img src="button02-Forum.png" alt="Forum" /></a>
<a href="Anmeldung.html" style="top:27px;left:94px;"><img src="button02-Anmeldung.png" alt="Anmeldung" /></a>
<a href="Informationen.html" style="top:54px;left:94px;"><img src="button02-Informationen.png" alt="Informationen" /></a>
<a href="Links.html" style="top:0px;left:182px;"><img src="button02-Links.png" alt="Links" /></a>
<a href="Impressum.html" style="top:27px;left:182px;"><img src="button02-Impressum.png" alt="Impressum" /></a>
<div class="static" style="top:54px;left:182px;"><img src="button03-SFO.png" alt="SFO" /></div>
</div>
<div class="effect">
<img src="images/effect_blue.png" style="bottom:0px;left:0px;" />
<img src="images/effect_silver.png" style="bottom:20px;left:0px;" />
<img src="images/effect_blue.png" style="bottom:40px;left:0px;" />
<img src="images/effect_blue.png" style="bottom:60px;left:0px;" />
<img src="images/effect_blue.png" style="bottom:80px;left:0px;" />
<img src="images/effect_blue.png" style="bottom:0px;left:36px;" />
<img src="images/effect_blue.png" style="bottom:20px;left:36px;" />
<img src="images/effect_blue.png" style="bottom:40px;left:36px;" />
<img src="images/effect_blue.png" style="bottom:60px;left:36px;" />
<img src="images/effect_silver.png" style="bottom:80px;left:36px;" />
<img src="images/effect_silver.png" style="bottom:0px;left:72px;" />
<img src="images/effect_silver.png" style="bottom:20px;left:72px;" />
<img src="images/effect_silver.png" style="bottom:40px;left:72px;" />
<img src="images/effect_blue.png" style="bottom:60px;left:72px;" />
</div>
<div class="main_div">
<span>
<h1>Herzlich Willkommen bei "Starfleet Online"!</h1>
<p>Das Rollenspiel Starfleet Online ist ein auf Star Trek basierendes Chat-Rollenspiel, welches am 28. Oktober 2007 gegründet wurde. Gründungsmitglieder waren zahlreiche Offiziere, die einen Monat zuvor vom urplötzlichen Ende ihres bisherigen Star Trek Rollenspiels nach fast sieben Jahren überrascht worden waren. Binnen eines Monats wurde Starfleet Online mit Basisregeln, einem Forum und einer provisorischen Homepage ausgestattet.
Zahlreiche Altmember konnten für den Neustart gewonnen werden und spielen noch heute mit Begeisterung bei uns mit. Zudem zählen wir jeden Monat viele Neuanmeldungen, die unser Spiel stetig wachsen lassen. Unser Forum, unsere Homepage und unser Regelwerk sind inzwischen ausgebaut. Derzeit können wir an vier verschiedenen Tagen der Woche auf vier verschiedenen Schiffen IRC-Missionen im Star Trek Universum anbieten.
Dazu finden fast wöchentlich weitere, freiwillig organisierte Missionen statt. Außerdem bieten wir bei Starfleet Online ein freiwilliges Foren-Rollenspiel an, mit dem man sich zwar keine Punkte, aber unterschiedliche Orden erspielen kann. Unsere Abteilungen Academy, Personalabteilung und das Starfleet Research Institute geben jenen Offizieren eine weitere Stellung, die neben den IRC-Missionen gerne Neulinge und Offiziere ausbilden, Mitglieder betreuen oder neue Technologien
erforschen und entwickeln wollen oder an der Storyline des Rollenspiels mitwirken möchten.</p>
<p>Sollten wir nun Dein Interesse geweckt haben, so scheue Dich nicht, Dich weiter bei uns auf der Homepage umzusehen oder unser Forum zu besuchen. Möchtest Du auch ein Mitglied unserer Community und ein Sternenflotten-Offizier werden, um mit einem Raumschiff durch das Weltall zu jagen, dann fülle doch gleich unser Anmeldeformular aus und werde ein Kadett der Sternenflotte! Wir freuen uns auf Dich!</p>
<p>Lebe lang und in Frieden!</p>
<p>Das Flottenkommando von Starfleet Online:</p>
<p>
Fleet Admiral Yaresh de Salle<br>
Admiral Pete Mitchell<br>
Rear Admiral Pawel Jong<br>
</p>
</span>
</div>
</div>
</body>
</html>
Die css-Datei:
Code:
/* Hauptelemente */
body {
background-color: #000000;
background-image: url(images/background.png);
background-repeat: repeat-x;
}
div.overall_div {
}
div.main_div {
position: absolute;
top: 200px;
left: 300px;
right: 100px;
bottom: 0px;
font-family: Arial;
color: #CCCCCC;
font-size: 12px;
}
div.main_div span {
}
span.error {
color: #CC3333;
}
h1 {
font-size: 18px;
}
/* Haupt-Bilder */
div.left_menu {
position: absolute;
background-image: url(images/left_menu.png);
background-repeat: repeat-y;
top: 0px;
left: 0px;
height: 100%;
width: 121px;
}
div.top_left {
position: absolute;
background-image: url(images/top_left.png);
background-repeat: no-repeat;
top: 21px;
left: 121px;
height: 120px;
width: 296px;
}
div.right_label {
position: absolute;
background-image: url(images/right_label.png);
background-repeat: no-repeat;
top: 0px;
right: 0px;
height: 100%;
width: 267px;
}
/* feste Elemente */
div.status_top {
background-color: #000033;
position: absolute;
top: 15px;
left: 15px;
height: 55px;
width: 90px;
}
div.status_top img {
border-width: 0px;
position: absolute;
left: 5px;
height: 20px;
width: 80px;
}
div.status_bottom {
background-color: #000000;
position: absolute;
bottom: 15px;
left: 15px;
height: 80px;
width: 90px;
}
div.status_bottom img {
border-width: 0px;
position: absolute;
left: 5px;
height: 20px;
width: 80px;
}
div.effect {
position: absolute;
bottom: 0px;
left: 126px;
height: 100px;
width: 100px;
}
div.effect img {
border-width: 0px;
position: absolute;
height: 20px;
width: 31px;
}
/* dynamische Elemente */
div.main_menu {
background-color: #000033;
position: absolute;
top: 20px;
left: 450px;
height: 82px;
}
div.main_menu a {
background-color: transparent;
position: absolute;
height: 26px;
width: 82px;
cursor: pointer;
}
div.main_menu a:hover {
background-color: #FF0000;
}
div.main_menu a img {
border-width: 0px;
position: absolute;
top: 1px;
left: 1px;
clip: rect(0px 80px 24px 0px);
}
div.main_menu a:hover img {
margin-top: -24px;
clip: rect(24px 80px 48px 0px);
}
div.main_menu div.static {
background-color: transparent;
position: absolute;
height: 26px;
width: 82px;
}
div.main_menu div.static img {
border-width: 0px;
position: absolute;
height: 24px;
width: 80px;
top: 1px;
left: 1px;
}
div.sub_menu {
background-color: #000033;
position: absolute;
left: 15px;
width: 90px;
}
div.sub_menu a {
background-color: transparent;
position: absolute;
height: 23px;
width: 82px;
left: 4px;
cursor: pointer;
}
div.sub_menu a:hover {
background-color: #AA0000;
}
div.sub_menu a img {
border-width: 0px;
position: absolute;
top: 1px;
left: 1px;
clip: rect(0px 80px 21px 0px);
}
div.sub_menu a:hover img {
margin-top: -21px;
clip: rect(21px 80px 42px 0px);
}
|