✔ Festes Layout (auch beim minimieren)

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
C

Comenius

Hi, ich mal wieder... :-)

Ich versuche ein Layout (head, left und right-menu, content und footer) zu erstellen, bei dem die Div-Boxen auch beim Minimieren des Browsers auf ihrem Platz bleiben.

Bis jetzt sind mir nur Tutorials unter die Finger gekommen, bei denen jeweils die äußeren Div-Boxen beim Minimieren in die Mitte mitwandern und sich irgendwann überschneiden.

Das mir irgendwie überhaupt nicht so recht passt...

Ich stelle mir es so wie hier (tutorials) vor, minimiert man das Fenster, bleibt alles auf seinem Platz.

Ich denke mal, dass es nur ein Einzeiler-Befehl sein wird, aber ich hab keine Ahnung.

Wäre super, wenn ihr mir da bissle helfen könntet.

Gruss
Commi
 
Hi;

Normalerweise reicht es, wenn du allen <div>s eine absolute Größe zuweist.
Ansonsten habe ich dein Problem nicht ganz verstanden.
Kannst du mal sagen, welche Tutorials du meinst?

Greetz
 
Hi,

Ich habe jetzt auf anhieb keins gefunden, aber ein gutes Beispiel.

Minimiere mal auf dieser Seite das Fenster. Du wirst merken, dass die Linke Navigation in die Mitte rutscht und irgendwann alles übereinander liegt:
http://www.mediaevent.de/tutorial/beispiele/colorbox1.html

Und dann Minimiere mal das Fenster von hier. (tutorials.de)
Da wirst du merken, dass alles auf seinem Platz bleibt. (so wie ich es gerne möchte)

Gruss
Commi
 
*grübel*

Tabellen sind kein Problem, aber wo ?

Kannst du mir das bitte noch sagen, wäre super.

Gruss
Commi
 
Ich glaube Du suchst nach so etwas?

<html>


<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td>a</td>
<td>
<div align="center">
b</div>
</td>
<td>
<div align="right">
c</div>
</td>
</tr>
<tr>
<td colspan="3">
<table width="800" border="0" cellspacing="0" cellpadding="0" height="0">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

Richtig?
 
Hehe, super :p

Dank dir.

Dann lag ich doch falsch, ich dachte es liegt am CSS-Code.

Gruss
Commi
 
Hmmm, Ein paar Sachen wären da noch.

Mein linkes Menü und die Mitte bleiben auf ihrem Platz, aber das rechte rutscht immer noch in der Gegend herum.

Den Head-Teil, bekomme ich gar nicht hin.

Ich hab eigentlich keine Probleme mit Html-Tabellen, aber in diesem Fall, habe ich keine Ahnung wo was hingehört.

HTML: 
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
  
  <td>
  <center>
  <div id="leftMenu">
  Links
  </div>
  </center>
  </td>
  
  <td>
  <center>
  <div id="content">
  Mitte
  </div>
  </center>
  </td>
  
  <td>
  <center>
  <div id="rightMenu">
  Rechts
  </div>
  </center>
  </td>
  
  </tr>
  
  <tr>
  <td colspan="3">
  
  <table width="1000" border="1" cellspacing="0" cellpadding="0" height="0">
  <tr>
  <td></td>
  </tr>
  </table>
  
  </td>
  </tr>
  </table>

Vielleicht haste ja nochmal nen Moment, um mir das noch zu erklären.

Gruss
Commi

PS: Warum hast du ganz unten eine Tabelle in der Tabelle gemacht ? Ich weiss, dass sie für den Mittelteil ist, aber ich versteh nicht, warum sie ganz unten stehen muss.
 
Falls es hilft, hier noch den CSS-Code:

Code: 
 #head
 {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 995px;
 height: 50px;
 margin: 10px 10px;
 padding: 0px;
 border: 1px solid #000000;
 }
 
 #content
 {
 position: absolute;
 top: 110px;
 left: 10px;
 width: 695px;
 height: 300px;
 margin: 0px 150px; 
 padding: 0px;
 border: 1px solid #000000;
 }
 
 #leftMenu
 {
 position: absolute;
 top: 110px;
 left: 10px;
 width: 130px;
 height: 300px;
 margin: 0px 0px;
 padding: 0px;
 border: 1px solid #000000;
 }
 
 #rightMenu
 {
 position: absolute;
 top: 110px;
 right: 10px;
 width: 130px;
 height: 300px;
 margin: 0px 0px;
 padding: 0px;
 border: 1px solid #000000;
 }

Gruss
Commi
 
Hallo!

versuche doch mal was gans anderes:
Code: 
 <html>
<head>
<style type="text/css" media="screen"><!--
ul.menu	 { background-color: #ccc; list-style-type: disc; margin: 0; width: 130pt; border: solid 1pt #000 }
table.text	 { background-color: #ccc; border: solid 1pt #666; outline: solid 1pt #000 }
--></style>
</head>
<body bgcolor="#ffffff">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td valign="top" width="160">
	 <ul class="menu">
	 <li>Link 1
	 <li>Link 2
	 <li>Link 3
	 <li>Link 4
 
	 <li>Link 5
 
	 </ul>
	 <div align="left">
	 <p></p>
	 </div>
	</td>
	<td valign="top">
	 <div align="center">
	 <table class="text" width="500" border="0" cellspacing="0" cellpadding="0">
	 <tr>
		<td>Beispiel</td>
	 </tr>
	 </table>
	 </div>
	</td>
	<td valign="top" width="160">
	 <div align="right">
	 <ul class="menu">
	 <li>Link 6
 
	 <li>Link 7
 
	 <li>Link 8
 
	 <li>Link 9
 
	 <li>Link 10
 
	 </ul>
	 </div>
	</td>
</tr>
</table>
<p></p>
</body>
</html>

Gruß Axel
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück