zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden min-width, min-height und overflow wollen nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.04.2009, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2009
Beiträge: 18
Lord Lommel befindet sich auf einem aufstrebenden Ast
Standard 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);
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.04.2009, 13:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.04.2009, 15:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2009
Beiträge: 18
Lord Lommel befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.04.2009, 15:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.04.2009, 16:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2009
Beiträge: 18
Lord Lommel befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 07.04.2009, 16:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 07.04.2009, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2009
Beiträge: 18
Lord Lommel befindet sich auf einem aufstrebenden Ast
Standard

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. :-/
Mit Zitat antworten
  #8 (permalink)  
Alt 07.04.2009, 17:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.03.2009
Beiträge: 18
Lord Lommel befindet sich auf einem aufstrebenden Ast
Standard

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

Vielen Dank !
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 16:02
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 22:35
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 14:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:13 Uhr.