float: bei variierender Fenstergröße des Browsers

localex · 08.05.2008, 09:09

Hi zusammen!
Unten stehend Quellcode und CSS eines Entwurfs und Fragen, um deren Beantwortung ich euch herzlich bitte & danke!

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">
<head>



  
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


  


  
  
  
  <title>undefined</title>
  <meta name="Description" content="" />



  
  
  <meta name="Keywords" content="" />

<meta name="Description" content="" />
<link href="bug1.css" rel="stylesheet" type="text/css" />
</head>


<body>



<div id="container">
<div id="titel">titelgrafik</div>



<div id="nav">
  <p>navigation</p>
  <p>Punkt 1</p>
  <p>Punkt 2</p>
  <p>Punkt 3</p>
  <p>Punkt 4</p>
  <p>Punkt 5</p>
</div>



<div id="sub">
<p>submenu</p>



<p>Punkt a</p>



<p>Punkt b</p>
<p>Punkt c</p>
</div>



<div id="content">

<p>&nbsp;</p>

<table border="1" cellspacing="10">
  <tr>
    <td align="center" nowrap="nowrap">Tabelle A</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" nowrap="nowrap"><strong>Spalte 1</strong></td>
    <td align="center" nowrap="nowrap"><strong>Spalte 2</strong></td>
    <td align="center" nowrap="nowrap"><strong>Spalte 3</strong></td>
  </tr>
  <tr>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
    <td align="center" nowrap="nowrap">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
</div>



<hr />
</div>



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



</body>
</html>

Code:

html, body {
	padding:0;
	height:101%;
	margin: 0;
}
div#container {
	min-height: 100%;
}

* html #container {
     height: 100%;
}

#container {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	background-repeat: repeat-y;
	background-image: url(Bilder/hg.jpg);
}
#container #titel {
	display: block;
}

#container #nav {
	float: left;
	width: 200px;
	text-align: left;
	margin-top: 100px;
	text-indent: 10px;
}
#container  #sub {
	float: right;
	width: 200px;
	text-align: center;
}
#container hr {
	clear: both;
	visibility: hidden;
}
#container #content hr {
	color: #003366;
	visibility: visible;
}

#container #content {
	margin-top: 30px;
	margin-right: 210px;
	margin-left: 210px;
	margin-bottom: 30px;
	overflow: visible;
	zoom: 1;
}

#footer {
	width: 200px;
	margin-top: -50px;
	text-align: center;
	position: relative;
}
#container #nav a:link {
	color: #003366;
	text-decoration: none;
	display: block;
}
#container #nav a:visited {
	color: #003366;
	text-decoration: none;
	display: block;
}
#container #nav a:hover {
	color: #003366;
	text-decoration: none;
	display: block;
	background-color: #5C8B2E;
}
a:link {
	color: #003366;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #003366;
}
a:hover {
	text-decoration: underline;
}
#container #nav em {
	background-color: #FFFFFF;
	display: block;
}
h2 {
	color: #003366;
}
h3 {
	color: #000000;
	font-weight: lighter;
}
h4 {
	color: #003366;
}
h5 {
	font-size: 13px;
	font-weight: lighter;
}

Bitte verändert die horizontale Browsergröße von Vollbild manuell kleiner.

Der horiz. Rollbalken erscheint, sobald der horiz. Platz für die Tabelle A nicht mehr ausreicht?
Warum „fährt“ das div „sub in die Tabelle A im div „content“?
Warum ist das div „sub“ bei weiterer Verkleinerung des Browserfensters erst oberhalb der Tabelle A, bei noch weiterer Verkleinerung dann unter halb der Tabelle A zu sehen?

Es "verschiebt" mir die Positionierung der einzelnen divs auch dann, wenn ich im IE oder Firefox die Lesezeichen-Symbolleiste einblende.

Vielen Dank für Lösungsvorschläge & schönen Tag!

Heglanx · 23.05.2008, 20:22

zum Punkt 1. Das ist doch gut, falls jemand eine gar kleine Browserauflösung hat? oder versteh ich das richtig, dass du erzwingen willst, dass gar kein Scroolbalken erscheint?

zu Punkt 2. float:right bedeutet nach meinem Wissen, dass die Box zuerst ganz nach links floatet, bis es an ein Element stösst, dann genau das gleiche nach oben, bis zum obersten element, und nach rechts? Wenn man jetzt den Gedanken zurückfährt dann stösst bei verkleinerung das sub-menü an die tabelle in der mitte und geht halt den weg wieder zurück. Das ist ja ein bekanntes Problem beim floaten.

Du müsstest halt den Weg irgendwie blockieren. Also nicht mit den Werten margin und padding arbeiten, sondern sperren mit fixen div-boxen. musst halt mal ein wenig experimentieren. Das ist glaube ich beim floaten ganz natürlich und kann man wie gesagt, mein wissenstand ist noch sehr gering, nicht direkt umgehen.

zu Punkt 3.
Naja, anscheinend versucht er es zuerst oben dann unten?

da kann ich dir beim schnellen durchchecken auch nicht weiter helfen.

achja:

* html #container {
height: 100%;
}

wenn ich das richtig interpretier, dann willst du damit erreichen, dass alle Elemente in HTML/Container 100% höhe haben. Wobei das wahrscheinlich beim floaten ein wenig probleme gibt.

Das

#container #titel {
display: block;
}

bringt glaube ich nicht viel. das es sich bei div-boxen schon um Blockelemente handelt.

#container hr {
clear: both;
visibility: hidden;
}

Mit dem willst du das floaten beenden? nur sitzt die linie ja am unteren rand von der navi. ob das so auch funktioniert weiss ich nicht?

#container #content hr {
color: #003366;
visibility: visible;
}

kleine frage. für was ist der style?

Eine ziemlich doofe Lösung von nem Beginner: Anscheinend hat er die Probleme nicht wenn du mit fixen Höhen im Content arbeiten tust. Wenns dich nicht stört, allen Elementen eine Höhe von 2000px zu geben dann verschwindet die rechte sub-navi schön wenn man in der mitte angekommen ist. Ausserdem müsstest du dann alle elemente auf der gleichen höhe platzieren. Also kein margin-top benutzen! so gibst du dem ganzen keine möglichkeit weiter zu floaten. wobei dich dann der grosse scroolbalken stören würde?

Bin gespannt auf die Lösungen