✔ Anpassung Bildschirmgröße

Status
Nicht offen für weitere Antworten.
Was meinst du mit "die Spalten in der richtigen Höhe auf den Bildschirm bekommen"?

Vielleicht schwebt dir auch dieses Modell vor?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

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

#header, #footer {
height: 50px;
background: #cacaca;
}

#spalte1 {
float: left;
width: 180px;
height: 320px;
margin-right: 0 !important;
margin-right: -3px;
padding: 70px 10px 10px 10px;
}

#spalte2 {
height: 320px;
overflow:auto;
margin: 0 0 !important;
margin 0 -3px;
padding: 70px 10px 10px 10px;
background-color:#F8DF9C;
}

#spalte3 {
float: right;
width: 180px;
height: 320px;
margin-left: 0 !important;
margin-left: -3px;
padding: 70px 10px 10px 10px;
}
-->
</style>

</head>
<body>

<div id="header">header</div>
<div id="wrapper">
     <div id="spalte1">spalte 1</div>
     <div id="spalte3">spalte 3</div>
     <div id="spalte2">spalte 2</div>
</div>
<div id="footer">footer</div>

</body>
</html>
 
Hi,

du bist wirklich gut. Das ist genau das was ich haben will. Wenn sich das nun noch automatisch an die verwendete Bildschirmgröße, -auflösung anpasst bin ihc wunschlos glücklich.

Danke
heiner
 
In der Horizontalen ist dies ja schon der Fall, da die mittlere Spalte eine dynamische Breite besitzt, und wenn sich die Spaltenhöhen der vertikalen Bildschirm- / Fenstergröße anpassen sollen, müssen die Höhen eben relativ, also mit Prozentangaben definiert werden:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<style type="text/css">
<!--
html,body {
margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
height: 100%;
}

#header, #footer {
height: 50px;
background: #cacaca;
}

#spalte1 {
float: left;
width: 180px;
height: 50%;
margin-right: 0 !important;
margin-right: -3px;
padding: 70px 10px 10px 10px;
}

#spalte2 {
height: 50%;
overflow:auto;
margin: 0 0 !important;
margin 0 -3px;
padding: 70px 10px 10px 10px;
background-color:#F8DF9C;
}

#spalte3 {
float: right;
width: 180px;
height: 50%;
margin-left: 0 !important;
margin-left: -3px;
padding: 70px 10px 10px 10px;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">header</div>
     <div id="spalte1">spalte 1</div>
     <div id="spalte3">spalte 3</div>
     <div id="spalte2">spalte 2</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
 
Hi,

danke das funktioniert. Ich lasse das Thema mal noch offen und probiere heute und morgen mal noch ein bischen rum.

mfg
Heiner
 
Hi,

so ganz funktioniert es noch nicht. die Spalte 2 wird ab Spalte 1 bis zum rechten Rand des Bildschirms dargestellt und die Spalte drei darunter. Deshalb reicht der footer auch nur vom linken Bildschirmrand bis zum beginn der dritten Spalte.

HTML: 
<Body onload="setTimeout('Wechsel()',3000)"> 




<div id="wrapper">

	 <div id="header">
		<img id="h_position_1" src="tc_logo_3.gif">
		<img id="h_position_2"  src="tc_logo_2.gif">
		<img id="h_position_3"  src="firma4.gif">
	 </div>

	<div id ="spalte1" >
	</div>


	<div id ="spalte2" >
	</div>

	<div id ="spalte3" >
	</div>


	<div id="footer">	
	</div>		

</div>

</body>

html,body {
margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
height: 100%;
}

#header, #footer {
height: 200px;
background: #cacaca;
}

#spalte1 {
float: left;
width: 180px;
height: 50%;
margin-right: 0 !important;
margin-right: -3px;
padding: 70px 10px 10px 10px;
}

#spalte2 {
height: 50%;
overflow:auto;
margin: 0 0 !important;
margin 0 -3px;
padding: 70px 10px 10px 10px;
background-color:#F8DF9C;
}

#spalte3 {
float: right;
width: 180px;
height: 50%;
margin-left: 0 !important;
margin-left: -3px;
padding: 70px 10px 10px 10px;
}

es sollte doch möglich sein die höhe von header und footer getrennt zu definireren, oder?

bin langsam am Verzweifeln.

Heiner
 
Du hast im HTML-Code die Reihenfolge der drei Spalten vertauscht, was zu den Verschiebungen führt.

Es werden zunächst die beiden äußeren Spalten (mit der jeweiligen float-Eigenschaft) und dann die Mittlere genannt. Ich hab sie in diesem Beispiel mal entsprechend ihrer Lage umbenannt:

Code: 
<div id="spalte_Links"></div>
<div id="spalte_Rechts"></div>
<div id="spalte_Mitte"></div>

Und ja, man kann selbstverständlich die Höhe für den Header und Footer auch getrennt definieren. Ich hatte sie heute Vormittag in meinem Beispiel der Einfachheit halber nur zusammengefasst. ;)

Code: 
#header {
height: 200px;
background: #cacaca;
}

#footer {
height: 200px;
background: #cacaca;
}

Hier der komplette Quellcode:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<style type="text/css">
<!--
html,body {
margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
height: 100%;
}

#header {
height: 200px;
background: #cacaca;
}

#spalte_Links {
float: left;
width: 180px;
height: 50%;
margin-right: 0 !important;
margin-right: -3px;
padding: 70px 10px 10px 10px;
}

#spalte_Mitte {
height: 50%;
overflow:auto;
margin: 0 0 !important;
margin 0 -3px;
padding: 70px 10px 10px 10px;
background-color:#F8DF9C;
}

#spalte_Rechts {
float: right;
width: 180px;
height: 50%;
margin-left: 0 !important;
margin-left: -3px;
padding: 70px 10px 10px 10px;
}

#footer {
height: 200px;
background: #cacaca;
}
-->
</style>

</head>
<body>

<div id="wrapper">

         <div id="header">
                <img id="h_position_1" src="tc_logo_3.gif">
                <img id="h_position_2"  src="tc_logo_2.gif">
                <img id="h_position_3"  src="firma4.gif">
         </div>

         <div id="spalte_Links"></div>

         <div id="spalte_Rechts"></div>

         <div id="spalte_Mitte"></div>   

        <div id="footer"></div>

</div>

</body>
</html>
 
Hi,

Problem erkannt, problem gebannt. Danke. Jetzt habe ich noch eine Frage, das Positioniern von Bilder klappt ja hervorragen. Wie bekomme ich aber in der rechten Spalte eine Tabelle positioniert? Ich habe das menue als tabelle dargestellt und möchte diese nun ebenfalls positionieren.

mfg
heiner
 
Hi,

die Vorgehensweise ist die gleiche, wie bei den Bildern ;)

Code: 
#spalte_Rechts {
float: right;
width: 180px;
height: 50%;
margin-left: 0 !important;
margin-left: -3px;
padding: 70px 10px 10px 10px;
position: relative;
}

#table_position {
position: absolute;
left: 20px;
top: 100px;
}
Code: 
<div id="spalte_Rechts">
      <table id="table_position">
           <tr>
                <td>Eine Tabelle</td>
           </tr>
      </table>
</div>
 
Hi,

ich muß sagen du bist wirklich gut. Ohne dich würde ich hier ganz schön lange sitzen bis das funktioniert. Und bei normaler Schrift brauch ich vermutlich nur ein entsprechendes <P> definieren und absolut zu positionieren, oder?


mfg
heiner
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück