• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

2 Boxen untereinander mir maximaler Ausdehnung?

R

richard

New member
Hi,

Ich will 2 Bereiche/Boxen auf meiner Webseite haben. Von mir aus auch durch Tabellen.

Alle meine Versuche mich CSS und Tabellen bringen jedoch nie genau das was ich will:

Die obere Box soll in ihrer Breite maximiert sein, also immer so breit wie der Browser, aber nicht breiter! Ihre Hoehe soll 200px betragen.

Die Box darunter soll Bilder anzeigen. Sie soll in ihrer Breite ebenfalls maximiert sein, aber nie breiter als das Browserfenster - selbst wenn das Bild das sie anzeigt breiter ist. In diesem Fall soll sie Scrollbars anzeigen (habe das mit overflow: scroll; nicht so hinbekommen wie ich wollte).
In ihrer Hoehe soll die Box den kompletten Rest der Hoehe des Browserfensters einnehmen der uebrigbleibt - aber wiederrum nicht hoeher sein als das Browserfenster.

Danke...ricky.
 
Nanu...kann mir wenigstens jemand sagen ob sowas ueberhaupt geht?

Vielleicht ist es ja unmoeglich und ich probier mir hier sinnlos einen Wolf?
 
Du solltest Dich etwas in Geduld üben.
Manche Leute haben auch noch einen Job und eine Familie.
Also: Kühlen Kopf bewahren und nicht pushen...
...denn das bewirkt hier oft das erhoffte Gegenteil!
 
dkdenz schrieb:
Du solltest Dich etwas in Geduld üben.
Manche Leute haben auch noch einen Job und eine Familie.
Also: Kühlen Kopf bewahren und nicht pushen...
...denn das bewirkt hier oft das erhoffte Gegenteil!
Zum Vergrößern anklicken....

Tut mir leid. Ich wollte nicht pushen. Ich dachte es wuerden viele nicht antworten weil sie keine Antwort wuessten.

Deswegen wollte ich vorschlagen auch eine Antwort 'Geht nicht' ist eine Antwort. Ich bin totaler Anfaenger und kann nicht einschaetzen ob das Gewuenschte ueberhaupt mit CSS und Tabellen machbar ist.
 
Danke!

Ich habe wie gesagt stundenlang rumgespielt und 1000 Sachen durchgetestet. divs eingefuegt, diverse style="" Definitionen usw.

Eine Tabelle nutze ich weil ich einen Rahmen aus Bildern um den Content malen will. Ich hatte es sehr lange mit purem CSS versucht, aber irgendwie klappte es nie 100% wenn ich exotische Browser bzw. alte Browserversionen testete (Win2000/IE6).



HTML: 
<!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">

<head>
<title>test</title>

<style type="text/css">
<!--
body {
    margin:0;
    padding:0;
}
-->
</style>

</head>

<table style="width: 100%;" border="2" bordercolor="red" cellpadding="0" cellspacing="0">
	<tbody><tr>
		<td>
			Content box (100% width browser window, 200px height)
		</td>
	</tr>
			
	<tr>
		<td style="padding-top: 8px;">
			<table style="width: 100%;" align="center" border="2" bordercolor="blue" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td width="30"><img src="create_files/cornerNW.gif" width="30" height="30"></td>
			<td align="center" background="create_files/north.gif" height="30"><img src="create_files/north.gif" width="1" height="30"></td>
			<td width="30"><img src="create_files/cornerNE.gif" width="30" height="30"></td>
		</tr>
		<tr>
			<td align="center" background="create_files/west.gif" width="30"><img src="create_files/west.gif" width="30" height="1"></td>

			<td align="center" bgcolor="#ffffff" valign="middle">
				
				<div id="image_box">
							Image box (100% width browser window - but not larger. If image is bigger, scrollbars should appear inside this box (not the top browser scrollbars), height - full remaining height of browser)
				</div>	
			
			</td>

			<td align="center" background="create_files/east.gif" width="30"><img src="create_files/east.gif" width="30" height="1"> </td>
		</tr>
		<tr>
			<td width="30" height="30"><img src="create_files/cornerSW.gif" width="30" height="30"></td>
			<td align="center" background="create_files/south.gif" height="30"><img src="create_files/south.gif" width="1" height="30"></td>
			<td width="30" height="30"><img src="create_files/cornerSE.gif" width="30" height="30"></td>
		</tr>
	</tbody>
</table>
		
		</td>
	</tr>		
	
</tbody>

</table>

</body></html>
 
Zuletzt bearbeitet:
Schau mal, ob Du Dir da was abschauen kannst. Ich hab jetzt allerdings Prozenthöhen genommen. Nimm mal den Text raus, dann ist der Scrollbalken weg.
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<title>Zwei Divs</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
}
#header {
	background-color: yellow;
	height: 25%;
	width: 100%;
	position: relative;
}
div#scroll {
	height: 75%;
	background: lightblue;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	width: 100%;

}
.quer {
	width: 100px;
	margin: 5px;
	display: inline;
}
</style>
</head>
<body>
<div id="header">header inside</div>
	<div id="scroll">
		<div class="quer">Image box (100% width browser window - but not larger. If image is bigger, scrollbars should appear inside this box (not the top browser scrollbars), height - full remaining height of browser)</div>
		<div class="quer">New text: Image box (100% width browser window - but not larger. If image is bigger, scrollbars should appear inside this box (not the top browser scrollbars), height - full remaining height of browser)</div>
		<div class="quer">>New text: Image box (100% width browser window - but not larger. If image is bigger, scrollbars should appear inside this box (not the top browser scrollbars), height - full remaining height of browser)</div>
</div>
</body>
</html>
 
Danke. Das mit der Hoehe der unteren Box ist optimal.

Was noch stoert ist das Verhalten der Scrollbars.

Ich hab mal eine Fotomontage gemacht wie ich es mir vorstelle: http://img102.imagevenue.com/img.php?image=38925_montage_122_490lo.jpg

Du siehst in der unteren Box sind Scrollbalken, da dass Bild in der Box zu gross ist. Dies sind aber die Scrollbalken der Box und nicht des Browsers. Die Scrollbalken des Browsers sollten nie sichtbar werden, wie gross das Bild in der Box auch ist.

Wichtig ist auch, dass die untere Box genauso gross breit ist wie das Browserfenster. Die Box passt sich nicht der Groesse des Bildes an!

In dem Beispiel dass du geschickt hast waechst die Breite der unteren Box mit ihrem Inhalt. Ausserdem sind die Scrollbalken des Browsers sichtbar.

Vielen Dank.
 
anna55 schrieb:
Nein, es sind die des Divs. Gib mal 'div#scroll' eine geringere Höhe und Breite.
Zum Vergrößern anklicken....

Ja :)

ich bin auch zu doof. Ich hab jetzt mal ein sehr grosses <img> in die untere Box gesteckt. Genau so wie ich es wollte :)

Vielen vielen Dank!


P.S.: Wenn dass Bild schmaeler ist als die Box klebt es am linken Browserrand. Kann es auch mittig in der zu breiten Box ausgerichtet werden, oder rechts? (nicht so wichtig, wenn das nicht geht.)


Jetzt muss ich es nur noch schaffen die Bildbox unten so 'umzubiegen' dass ich divs anstatt Tabellen nutze :)
 
Zuletzt bearbeitet:
Sorry, aber Du scheinst einer dieser Kandidaten zu sein, der sich ernsthaft mit den Grundlagen auseinandersetzen sollte.
Du kannst nicht in einem Forum Deiner Wahl den heiligen Gral suchen und finden.
Ohne Selbstinitiative wirst Du keinen Lerneffekt erzielen...
 
Falls ich jetzt nicht zu müde bin: Bei meinem Beispiel müsstest Du noch ergänzen:
PHP: 
.quer img{
	margin: 0 auto;
	display: block;
}
 
Konnte es nicht lassen, komplett mittig könnte es so ähnlich aussehen:
PHP: 
.quer img{
	position: absolute;
	height: 200px;
	width: 400px;
	margin: -100px 0 0 -200px;
	top: 65%;
	left: 50%;
	padding: 0;
	overflow: auto;
}
 
anna55 schrieb:
Konnte es nicht lassen, komplett mittig könnte es so ähnlich aussehen:
PHP: 
.quer img{
	position: absolute;
	height: 200px;
	width: 400px;
	margin: -100px 0 0 -200px;
	top: 65%;
	left: 50%;
	padding: 0;
	overflow: auto;
}
Zum Vergrößern anklicken....

Danke danke...aber ich bin mit deinem ersten Vorschlag schon ganz zufrieden. Dieser CSS jetzt ist mir zu kompliziert. Eigentlich weiss ich was jeder Befehl heisst, aber irgendwie raff ich es trotzdem nicht.

Ich glaube mit diesen 200/400 heisst das doch auch, dass ich die Bildgroesse vorher kennen muss. Kann ich auch irren.

Gute Nacht nochmals!
 
hehe...ich hab noch einen (schaem)

ich denke mal es gibt keine Moeglichkeit dem header eine fixe Hoehe zu geben, also z.B. 200px ?
 
richard schrieb:
ich denke mal es gibt keine Moeglichkeit dem header eine fixe Hoehe zu geben, also z.B. 200px ?
Zum Vergrößern anklicken....

Hab ich schon probiert. Das Problem ist der Scrollbereich unten. So wie er angelegt ist, hab ich den Header mit festgelegter Höhe nicht hinbekommen. Ob es grundsätzlich gehen würde, weiß ich also nicht.

richard schrieb:
Ich glaube mit diesen 200/400 heisst das doch auch, dass ich die Bildgroesse vorher kennen muss.
Zum Vergrößern anklicken....

Ja, so ist es, Bildmaße oder die Maße eines umgebenden Divs.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben