Spezielles Layout Problem, was für Könner...

kaischo · 07.02.2010, 20:34

Hallo zusammen!

Und mal wieder: Ein ganz spezieller Fall von mir

Ich denke dass so ein Layout sogut wie nie im Einsatz ist und von daher finde ich leider selbst gerade keine Lösung.

Ich möchte einen Container mit fester Höhe und Breite im Browser komplett zentrieren. Das heißt horizontal und vertikal. Ich habe ein Lösung für dieses erste Problem gefunden, nämlich mit dem bekannten left: 50% Zeug...ihr kennt das. -> Worüber ich mir hier nicht im Klaren bin: Ist das eine gute Lösung ? Eine schöne ? Ist dieses Barrierefrei ? Was ist der Nachteil ? Bitte schreibt mir hierzu ein paar Zeilen. Ich habe sonst nur Lösungen gefunden mit Tabellen und diese können ja einfach nicht Barrierefrei sein...

Nun das Problem, dass ich noch garnicht lösen konnte: Ich möchte dass sich das Browserfenster dynamisch nur dem erwähnten ersten zentrierten Container anpasst. Wenn man also das Browserfenster kleiner zieht, sollen die Scrollbalken NUR an diesem Kasten auftauchen, der Browser soll nur an diesem Kasten "hängen bleiben". Ich denke ihr versteht ? TROTZDEM soll aber UNTER den bestehenden Kasten ein weiterer DIV-Container mit 300px Höhe.
Der Kasten darunter soll sozusagen "unbeachtet" bleiben wenn das Browser fesnter einmal kleiner ist als beide Container zusammen sind. Ich hoffe das ist verständlich soweit. Ich möchte anbei 3 Screenshots zur Verdeutlichung anhängen.Dazu Folgendes:

Fall1.jpg: Mein bisheriger Stand, Container horiz. & vert. zentriert.

Fall2.jpg: Der gewünschte blaue Container darunter, aber leider Scrollbalken rechts!!! Dieser dürfte hier nicht zu sehen sein. (der blaue Container ist hier schon 300px hoch und nicht ganz im Bild, daher der Scrollbalken...)

Fall3.jpg: So soll es aussehen wenn man das Browserfenster einmal kleinziehen soll... Nur am Roten, zentrierten Container soll der Browser "hängen bleiben."

Ich hoffe ihr könnt mir helfen! Wie wo soll ich den Container hinmachen im Code ??? Mein bisheriger Code ist dieser:

HTML:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>TITLE</title>

	<style type="text/css" media="screen">
		@import url( http://denniswinter.yourweb.de/joeybottle/wp-content/themes/joeybottle/style.css );
	</style>
	

</head>

<body>
<div id="primebox"></div><!-- PRIMEBOX ZU -->

<div id="aftmost"></div><!-- AFTMOST ZU -->

</body>
</html>

Style CSS:

Code:

/*////////////////////////////////////////////////////GENERAL STUFF*/
* {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	height: 100%;
}
/*////////////////////////////////////////////////////GENERAL CONTAINERS*/
body {
	width: 100%;
	height: 100%;
	text-align: center;
	
	font-family: "Helvetica Neue", "Helvetica", Arial, Century-Gothic, sans-serif;
	font-size: 15px;
	font-weight: normal;
	text-align: justify;
	
	background-color: aqua;
}

#primebox {
	width: 850px;
	height: 485px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -425px;
	margin-top: -242px;
	background-color: red;	
}

#aftmost {
	width: 100%;
	min-width: 850px;
	height: 100%;
	min-height: 485px;
	position: relative;
	text-align: center;
	
	background-color: transparent;
	background-image: url(images/);
	background-position: center;
	background-repeat: no-repeat;
}

Viele Grüße und Danke danke danke im Voraus!

Grüße,

Kaisch0

kaischo · 08.02.2010, 00:44

Kann man überhaupt einen DIV-Container dazu bringen, dass der Browser nicht an ihm hängen bleibt ???

kaiser · 08.02.2010, 11:41

Du kannst zB ein Div mit width: 960px; machen

Den dann mit margin: 0 auto; horizontal zentrieren. Vielleicht geht es auch margin nur auf auto zu setzen und dafür eine height zu definieren.

Ps. Was bitte meinst Du mit "hängen bleibt"?

kaischo · 08.02.2010, 12:01

Mit hängen bleiben meine ich, wenn man das BrowserFenster unten rechts an der Ecke anpacke mit der Maus und es kleinzieht. So klein, dass es kleiner wird als die angelegte Webseite....und dann passiert normal folgendes....es kommen Scrollbalken vom Browser!

Das meine ich mit hängen bleiben...

Marcus[IS] · 08.02.2010, 12:20

Hi,

ich hab mal den Google Knecht befragt und fand in diversen Foren diesen Code für die CSS

Code:

body { overflow:auto;}

Denke mal die overflow Anweisung musst du im body part von deiner oben geposteten css packen.

Allerdings weiß ich nicht, obs wirklich den gewünschten Effekt gibt und ob es unter jedem Browser funktioniert, müsstest du mal etwas experimentieren.

kaiser · 08.02.2010, 12:50

overflow definiert nur, ob du alles (an inhalt), was den rand des elements überschreitet angezeigt wird oder nicht.

kaischo · 31.07.2010, 17:16

Ich habe das Problem inzwischen IMMER NOCH! Ich schaffe es nicht einen Container zu erstellen welcher nicht hängen bleibt. Mit hängenbleiben meine ich, dass ein Container - wenn man das Browserfenster kleiner zieht - eine Scrollleiste erzwingt.

kaiser · 31.07.2010, 17:33

Alter, ganz ehrlich: Du kannst einfach nicht alles im Internet machen. Das Medium hat halt seine Grenzen. Überleg Dir einmal was Du da an Zeit und Energie rein steckst und was Du sinnvoller damit anfangen kannst. Grad bei 252 Beiträgen würd ich echt mal drüber nachdenken.

kaischo · 31.07.2010, 22:10

Ich glaube du hast mich missverstanden

Das was ich will ist bestimmt möglich

Und ich verbringe damit nur dann Zeit wenn ich sowieso nebenher kleine Jobs (für Freunde zB) erledigen muss...mhh bringt jetzt hier keinen weiter irgendwie. Nungut gruß. Vll weiß jemand nochmal was...

Monika · 02.08.2010, 00:57

das ist schlicht und einfach unmöglich

weil auch unlogisch,
du kannst einen Browser nicht sagen, zeige was an, aber tu es nicht,
genau das magst du haben

außerdem weißt Du niemals wieviele Zusatzleisten ich in meinem Browser offen habe und somit weißt du nie wie hoch mein Viewport ist

und was machste mit den iPhones etc ?

vergiss die Idee einfach