XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   min-width, min-height und overflow wollen nicht (http://xhtmlforum.de/showthread.php?t=56583)

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 &quot;Starfleet Online&quot;!</h1>
<p>Das Rollenspiel Starfleet Online ist ein auf Star Trek basierendes Chat-Rollenspiel, welches am 28. Oktober 2007 gegr&uuml;ndet wurde. Gr&uuml;ndungsmitglieder waren zahlreiche Offiziere, die einen Monat zuvor vom urpl&ouml;tzlichen Ende ihres bisherigen Star Trek Rollenspiels nach fast sieben Jahren &uuml;berrascht worden waren. Binnen eines Monats wurde Starfleet Online mit Basisregeln, einem Forum und einer provisorischen Homepage ausgestattet.
Zahlreiche Altmember konnten f&uuml;r den Neustart gewonnen werden und spielen noch heute mit Begeisterung bei uns mit. Zudem z&auml;hlen wir jeden Monat viele Neuanmeldungen, die unser Spiel stetig wachsen lassen. Unser Forum, unsere Homepage und unser Regelwerk sind inzwischen ausgebaut. Derzeit k&ouml;nnen wir an vier verschiedenen Tagen der Woche auf vier verschiedenen Schiffen IRC-Missionen im Star Trek Universum anbieten.
Dazu finden fast w&ouml;chentlich weitere, freiwillig organisierte Missionen statt. Au&szlig;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&ouml;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&ouml;chtest Du auch ein Mitglied unserer Community und ein Sternenflotten-Offizier werden, um mit einem Raumschiff durch das Weltall zu jagen, dann f&uuml;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);
}


regloh 07.04.2009 14:40

Solang du so mit absoluter Positionierung um dich wirfst, wird das nie etwas mit ordentlich flexieblem Layout. Wenn ich "div.main_div" "min-width: 1000px;" mitgebe, klappt es. Aber durch die abs. Positionierung liegen die anderen Sachen natürlich drüber.

Zum Scrolling-Problem: Wenn ich "div.main_div" "overflow: auto;" mitgebe, klappt es problemlos. Es erscheint ein Scrollbalken, wenn das Fenster nicht hoch genug ist.

Alles mit Firebug unter FF3 "getestet". Eine wirklich gute Lösung ist das alles nicht.

Lord Lommel 07.04.2009 16:24

Naja, wie kann ich dann das Design relativ machen ? Hast du da nen Tipp ?

Bei "min-width: 1000px;" hab ich immer noch das Problem, daß der Rechte Rand sich trotzdem weiter mit reinbewegt, zumind. hier am IE7. Das ist auch blöd.
Mit dem Scrollen soll nur der Text scrollen, das Design soll sich nicht mit nach oben schieben, quasi position:fixed.

fricca 07.04.2009 16:50

IE 7 im Quirksmodus ist (fast) wie IE 5.5.
Google: "Doctype Switch"

Von welchen min-... Angaben ist hier eigentlich die Rede? Ich finde im Stylesheet keine.

Lese-Empfehlung: Little Boxes. Übermäßige abs. Pos. ist ein typischer Anfängerfehler, den es zu überwinden gilt.

Lord Lommel 07.04.2009 17:16

Ich hab sie ja auch wieder rausgenommen, weil es nicht ging. Ich will es so haben, daß das Design immer mind. 1000x500 Pixel zu Verfügung hat. Wie das nun genau geht, ist nicht so wichtig, solange es geht.

Kannst du mir wegen der relativen Positionierung z.B. mal zeigen, wie ich damit rechts oben etwas in die Ecke bekomme ? Ich dachte dafür ist das alsolute genau da.

fricca 07.04.2009 17:24

Nein, ich kann nicht mal eben schnell zeigen, wie CSS-Layout-Erstellen funktioniert. Deshalb der Buchtipp.
Von relativer Positionierung habe ich nichts geschrieben. Du brauchst meistens überhaupt keine Positionierung.

Und den Google-Tipp hast du auch ignoriert.

Lord Lommel 07.04.2009 17:40

Den Google-Tipp habe ich glatt übersehen. Du brauchst mir auch nicht unbedingt das CSS Programmieren beizubringen, ein wenig weiß ich da schon. Ich sehe bloß für dieses Design keine Möglichkeit, auf absolute Positionierung zu verzichten, was mir in letzter Zeit ein wenig Kopfschmerzen bereitet (zumal der ganze Krempel dann auch noch Template-basiert ist und ich auf meinem Rechner zu Hause aus irgendwelchen Gründen die Apacher-Konfiguration des Webservers streikt und ich somit alles mit Putty programmieren darf). Die Eigenheiten der Browser tun ihr übriges. Das hat man nun davon, wenn man auf JS verzichten will. :-/

Lord Lommel 07.04.2009 18:19

Hat funktioniert. Ausm Quirks-Mode raus, schon gehts. Da denkt man immer die Browserproblematik bei JS ist schlimm...

Vielen Dank !


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:46 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023