Divs untereinander

[progger]

Ich habe auf meiner Seite 2 Divs. Beide Divs haben keine feste Höhe (ergibt sich durch den immer unterschiedlichen Inhalt). Ich möchte nun den 2. div unter den 1. anordnen. wie geht das? Der 2. Div ist kein Kindelement vom 1. Div.
Bei mir schiebt es immer den 2. div unter den 1...

[M.]

Mahlzeit,

Ich möchte nun den 2. div unter den 1. anordnen. wie geht das?

Bei mir schiebt es immer den 2. div unter den 1...

Problem gelöst. Boah bin ich gut ...

[Baba]

Problem gelöst. Boah bin ich gut ...

Verrätst Du das dann auch noch progger?

;)

Cheers,
Baba

[M.]

Mahlzeit,

Verrätst Du das dann auch noch progger?

Hast du mein Zitat überlesen?

[Tabellenkalk]

Hallo,

Problem gelöst. Boah bin ich gut ...

wau, und das in 4 Minuten!

Gruß
Kalk

[Steel]

Moin!

Wie M. schon anmerken ließ, scheinst Du kein Problem zu haben oder es bedarf weiterer Erklärung. Du schreibst Du möchtest Div 2 unter 1 haben aber du hast immer 2 unter 1. *reibt sich das Kinn und legt ein denkerhaftes Stirnrunzeln auf*

Zumal es die normale Eigenschaft von Divs ist, untereinander angezeigt zu werden.

[progger]

Die Divs sind eben nicht untereinander. Ich meine das nicht auf der z-Ebene.
Ich möchte es so:

+------------------+
|                  |
|       Div1       |
|                  |
+------------------+
|                  |
|       Div2       |
|                  |
+------------------+

Das Problem ist, dass Div1 den 2. überlappt...
Ich bekomme es eben nur nicht hin, dass die Divs sich nicht überlappen.

[Tabellenkalk]

Hallo,

Das Problem ist, dass Div1 den 2. überlappt...
Ich bekomme es eben nur nicht hin, dass die Divs sich nicht überlappen.

zitat1968

Gruß
Kalk

[Der Martin]

Hallo,

Die Divs sind eben nicht untereinander. Ich meine das nicht auf der z-Ebene.
Ich möchte es so:

+------------------+
|                  |
|       Div1       |
|                  |
+------------------+
|                  |
|       Div2       |
|                  |
+------------------+

Das Problem ist, dass Div1 den 2. überlappt...

ah, sag das doch gleich. ;-)

Dann solltest du uns aber endlich mal zeigen, was du getan hast, dass sie sich überlappen. Normalerweise tun sie das nämlich nicht. Die wahrscheinlichste Erklärung ist, dass du dich mit absoluter Positionierung abmühst, obwohl du sie deiner Beschreibung nach gar nicht willst.

Wobei ... bist du sicher, dass das div-Element selbst seinen Nachfolger überlappt? - Wenn du ihm eine feste Höhe gibst, kann es sein, dass der *Inhalt* des Elements über seine Grenzen hinausläuft und das nachfolgende Element überlagert. Teste das mal, indem du dem div-Element eine Hintergrundfarbe gibst, dann siehst du genau, wo es zu Ende ist.

Ich bekomme es eben nur nicht hin, dass die Divs sich nicht überlappen.

Lass ihnen einfach ihren natürlichen Willen, dann tun sie das auch nicht.

Ciao,
 Martin

[progger]

Dann solltest du uns aber endlich mal zeigen, was du getan hast, dass sie sich überlappen.

Mein HTML- Code:

	<div id="head">  
		<div id="logo"></div>  
		<div id="navi">  
			<ul id="oben">  
				<li class="inactive"><a href="#">Home</a></li>  
				<li class="inactive"><a href="#">Ueber1</a></li>  
				<li class="inactive"><a href="#">Ueber2</a></li>  
				<li class="active"><a href="#">Ueber3</a></li>  
				<li class="inactive"><a href="#">Ueber4</a></li>  
			</ul>  
			<div id="trennlinie"></div>  
			<ul id="unten">  
				<li class="inactive"><a href="#">Unterueber1</a></li>  
				<li class="active"><a href="#">Unterueber2</a></li>  
			</ul>  
		</div>  
	</div>  
	<div id="content">  
	<h1>Unterueber2</h1>  
Text  
	</div>  

Der Div "content" wird von "head" überlappt.

Mein CSS:

  
/* Anordnung Navigation */  
#head {position: absolute; top:0px; left:0px; right:0px; background-color: #1782f9;}  
#head #logo {background-image: url(logo_mobile.png); background-repeat: no-repeat; width: 150px; height: 36px; vertical-align: middle;}  
#head #navi #oben {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-bottom: 0px;}  
#head #navi #oben li {background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}  
#head #navi #trennlinie {background-color: #fff; height: 2px; padding: 0px; margin: 0px;}  
#head #navi #unten {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-top: 0px;}  
#head #navi #unten li {color: #fff; background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}  
	  
/* weiteres design navi */  
#head #navi #oben li a {text-decoration: none;}  
#head #navi #oben li.inactive {vertical-align: middle; color: #fff;}  
#head #navi #oben li.active {vertical-align: middle; color: #0368d9; background-color: #fff;}  
#head #navi #oben li.active a {color: #0368d9;}  
#head #navi #oben li.inactive a {color: #fff;}  
#head #navi #unten li a {text-decoration: none;}  
#head #navi #unten li.inactive {vertical-align: middle; color: #fff;}  
#head #navi #unten li.active {vertical-align: middle; color: #0368d9; background-color: #fff;}  
#head #navi #unten li.active a {color: #0368d9;}  
#head #navi #unten li.inactive a {color: #fff;}  
  
/* Content */  
#head {display: inline;}  
#content {background-color: #fff; color: #0368d9; margin-top: 5px; display: inline;}  
#content a {color: #0368d9; text-decoration: underline;}  

[Matthias Apsel]

Om nah hoo pez nyeetz, progger!

Mein HTML- Code:

Du solltest kein Div-Suppe kochen. Es gibt passende Elemente.

Die vielen IDs sind nicht notwendig. Da eine ID in einem Dokument nur ein einziges Mal vorkommen darf, bräuchtest du sie auch nicht selektieren als

#head #navi #oben

was man lesen kann als:

Selektiere das einzig mögliche Element #oben innerhalb des einzig möglichen Elementes #navi innerhalb des einzig möglichen Elements #head.

Mach erstmal ein semantisch richtiges Markup draus und dann können wir gemeinsam weiter schauen.

Matthias

[Der Martin]

Hi,

Dann solltest du uns aber endlich mal zeigen, was du getan hast, dass sie sich überlappen.
Mein HTML- Code:

... ist grau... ähm, verbesserungswürdig. Ich bin sicher, dass man ohne Nachteile einige der div-Elemente einsparen oder zumindest durch semantisch passendere Elemente ersetzen könnte.

Beispielsweise finde ich es nicht sinnvoll, für ein Logo ein eigenes leeres div-Element vorzusehen; stattdessen würde ich das Logo-Bild entweder als Hintergrund einem der Elemente zuordnen, die sowieso da sind, oder sogar als img-Element im Markup notieren. Immerhin kann man bei einem Logo argumentieren, dass es nicht nur Zierde ist, sondern zum Inhalt gehört.

Oder Konstruktionen wie <div id="trennlinie"></div> - wenn ich zwei Elemente optisch voneinander trennen will, nehme ich dazu eine Rahmenlinie (border) an einem der beiden beteiligten Elemente - wenn's ein besonderer  Effekt sein soll, vielleicht sogar an beiden.
Warum die Navi überhaupt in zwei getrennte Blöcke aufgeteilt ist, erschließt sich mir auch nicht.

Der Div "content" wird von "head" überlappt.

Natürlich. Wie ich vermutet habe: Absolute Positionierung, ohne die Auswirkungen zu überblicken.

#head {position: absolute; top:0px; left:0px; right:0px; background-color: #1782f9;}

Wozu das? Du positionierst #head genau dorthin, wo es ohne Positionierung sowieso wäre. Nur dass du es durch die Positionierung aus dem Elementfluss nimmst, so dass es bezüglich der Anordnung der übrigen Elemente quasi "nicht mehr da ist". Die restlichen Elemente ordnen sich an, ohne auf den Platzbedarf von #head Rücksicht zu nehmen.

So long,
 Martin

[progger]

#head {position: absolute; top:0px; left:0px; right:0px; background-color: #1782f9;}

Wozu das? Du positionierst #head genau dorthin, wo es ohne Positionierung sowieso wäre. Nur dass du es durch die Positionierung aus dem Elementfluss nimmst, so dass es bezüglich der Anordnung der übrigen Elemente quasi "nicht mehr da ist". Die restlichen Elemente ordnen sich an, ohne auf den Platzbedarf von #head Rücksicht zu nehmen.

Wenn ich aber das
position: absolute; top:0px; left:0px; right:0px;
entferne wird meine Hintergrundfarbe nicht mehr angezeigt...

[Matthias Apsel]

Om nah hoo pez nyeetz, progger!

Wenn ich aber das
position: absolute; top:0px; left:0px; right:0px;
entferne wird meine Hintergrundfarbe nicht mehr angezeigt...

Mach erstmal ein semantisch richtiges Markup draus und dann können wir gemeinsam weiter schauen.

!

Matthias

[progger]

So. Ich hab das ganze jetzt nochmal überarbeitet:

HTML:

	<div id="head">  
		<img id="logo" src="logo.png">  
		<div id="navi">  
			<ul id="oben">  
				<li class="inactive"><a href="#">Ueber1</a></li>  
				<li class="inactive"><a href="#">Ueber2</a></li>  
				<li class="inactive"><a href="#">Ueber3</a></li>  
				<li class="active"><a>Ueber4</a></li>  
				<li class="inactive"><a href="#">Ueber5</a></li>  
			</ul>  
			<ul id="unten">  
				<li class="inactive"><a href="#">Unterueber1</a></li>  
				<li class="active"><a>Unterueber2</a></li>  
			</ul>  
		</div>  
	</div>  
	<div id="content">  
	<h1>Unterueber2</h1>  
Text  
	</div>  

CSS:

  
/* Anordnung Navigation */  
#head {position: absolute; top:0px; left:0px; right:0px; background-color: #1782f9;}  
#logo {width: 150px; height: 36px; vertical-align: middle;}  
#oben {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-bottom: 0px; border-bottom: solid 2px #fff;}  
#oben li {background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}  
#unten {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-top: 0px;}  
#unten li {color: #fff; background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}  
	  
/* weiteres design navi */  
#oben li a {text-decoration: none;}  
#oben li.inactive {vertical-align: middle; color: #fff;}  
#oben li.active {vertical-align: middle; color: #0368d9; background-color: #fff;}  
#oben li.active a {color: #0368d9;}  
#oben li.inactive a {color: #fff;}  
#unten li a {text-decoration: none;}  
#unten li.inactive {vertical-align: middle; color: #fff;}  
#unten li.active {vertical-align: middle; color: #0368d9; background-color: #fff;}  
#unten li.active a {color: #0368d9;}  
#unten li.inactive a {color: #fff;}  
  
/* Content */  
#head {display: inline;}  
#content {background-color: #fff; color: #0368d9; margin-top: 5px; display: inline;}  
#content a {color: #0368d9; text-decoration: underline;}  

Das Problem mit dem Überlappen ist aber immer noch. Und es hat sich auch nichts daran geändert, dass wenn ich
position: absolute; top:0px; left:0px; right:0px;
entferne die Hintergrundfarbe nicht mehr da ist.

[Steel]

Moin!

Das Problem mit dem Überlappen ist aber immer noch. Und es hat sich auch nichts daran geändert, dass wenn ich
position: absolute; top:0px; left:0px; right:0px;
entferne die Hintergrundfarbe nicht mehr da ist.

Das ist klar. Mit position absolute und den Positionsangaben hast Du dein head auf die Position von <html> gebracht. Das ist etwas größer als <body> worin der Rest liegt. Mit absoluter Positionierung und body {border:0; padding:0; margin:0;} dürfte auch so dein head unter dem Rest verschwinden.

Das 'Problem' ist, daß der Inhalt von head genauso groß ist wie head und man deshalb nix davon sieht. Ein weiteres kleines Manko ist display:inline. Wozu ist das denn? Nimm das raus, verpass head nen padding und Du solltest etwas von head um seinen Inhalt herum sehen. Mit inline hat head nur ne Minimalbreite und man sollte nur ein paar farbige Pixel am linken Rand sehen.

Ich glaube, Du solltest Dein Markup nochmal überdenken. Im Augenblick ist es doch eher etwas... brachial.

Ich weiß nicht, was genau Du erreichen möchtest, aber ich denke man kann wesentlich mehr mit weit weniger HTML und CSS hinbekommen.

So. Ich geh jetzt mal schauen was Xaver so treibt.

[Der Martin]

Hallo,

So. Ich geh jetzt mal schauen was Xaver so treibt.

hier im Stuttgarter Umland merkt man zwar schon was von ihm, es ist aber nicht viel mehr als ein Schnaufen und Sabbern. Den ganzen Tag über war das Wetter hier eigentlich noch recht freundlich, das einzig Merkwürdige war, dass am Abend die Temperatur nochmal um etwa 3° gestiegen ist; gegen 22 Uhr vorhin waren es noch etwa 8°C.

Seit etwa 20 Uhr ist es draußen etwas windig. Die Wetterstation vom Stuttgarter Flughafen meldet Windgeschwindigkeiten von rund 30km/h, in Böen pfeift der Wind schon mal ums Haus (pfeifende Windböen habe ich hier schon lange nicht mehr erlebt). Seit ein paar Minuten nieselt's dazu.

Und wenn ich dann so dran denke, was die Leute in Hamburg, auf den friesischen Inseln oder im Harz gerade erleben, dann bin ich wieder mal froh, dass ich hier im süddeutschen Raum solche Extrem-Wetterlagen fast immer nur abgeschwächt mitkriege.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Und wenn ich dann so dran denke, was die Leute in Hamburg, auf den friesischen Inseln oder im Harz gerade erleben, dann bin ich wieder mal froh, dass ich hier im süddeutschen Raum solche Extrem-Wetterlagen fast immer nur abgeschwächt mitkriege.

maximale Windgeschwindigkeit heute ca. 10:00 199 km/h. In der Nacht waren es um die 160. (gemessen mit einer Hobby-Wetterstation) Glücklicherweise ist bei uns bisher alles heil geblieben.

Ich hab vor langer Zeit mal http://was-mein-name-bedeutet.de angefangen und mein Co-Pilot wollte eigentlich für die Inhalte sorgen. Da hab ich mir gestern gedacht, ich könnte ja wenigstens „Xaver“ eintragen, aber der Name hat nicht mal eine Bedeutung. Wer erkennt die Plastiken?

Matthias

[Der Martin]

Moin Matthias,

Und wenn ich dann so dran denke, was die Leute in Hamburg, auf den friesischen Inseln oder im Harz gerade erleben, dann bin ich wieder mal froh, dass ich hier im süddeutschen Raum solche Extrem-Wetterlagen fast immer nur abgeschwächt mitkriege.
maximale Windgeschwindigkeit heute ca. 10:00 199 km/h.

das ist'n Haufen Holz ... *schweigt andächtig*

In der Nacht waren es um die 160. (gemessen mit einer Hobby-Wetterstation) Glücklicherweise ist bei uns bisher alles heil geblieben.

Hier in der Region sind es auch jetzt am Vormittag immer noch harmlose 40km/h Windgeschwindigkeit, in Böen etwas mehr, aber sicher nicht über 70km/h. Das passt aber auch zu den Unwetterwarnungen von gestern abend, nach denen der Südwesten Deutschlands am wenigsten von Xaver betroffen ist.
Die Temperatur hier vor dem Fenster liegt auch jetzt immer noch bei rund 6°C bei gelegentlichem Graupel, die Flughafen-Station meldet 4°C und "Scattered Clouds". Allerdings liegt STR auch knapp 40km Luftlinie von mir weg und exponiert auf einer Hochebene.

Ich hab vor langer Zeit mal http://was-mein-name-bedeutet.de angefangen und mein Co-Pilot wollte eigentlich für die Inhalte sorgen. Da hab ich mir gestern gedacht, ich könnte ja wenigstens „Xaver“ eintragen, aber der Name hat nicht mal eine Bedeutung.

Das sieht Wikipedia nicht so. Die argumentieren um drei Ecken, das ließe sich auf "Neuhaus" zurückführen.

Wer erkennt die Plastiken?

Aus der Nummer bin ich raus. Kunst und Kunstwerke - da kenne und erkenne ich ganz ganz wenige.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

maximale Windgeschwindigkeit heute ca. 10:00 199 km/h.

das ist'n Haufen Holz ... *schweigt andächtig*

In der Nacht waren es um die 160. (gemessen mit einer Hobby-Wetterstation)

Die offiziellen Angaben sind dann auch deutlich drunter. Wie genau die Messwerte sind, entzieht sich meiner Kenntnis.

Das sieht Wikipedia nicht so. Die argumentieren um drei Ecken, das ließe sich auf "Neuhaus" zurückführen.

Da hätte ich eigentlich selbst mal schauen können.

Wer erkennt die Plastiken?
Aus der Nummer bin ich raus. Kunst und Kunstwerke - da kenne und erkenne ich ganz ganz wenige.

Naja, es sind sicher nicht berühmte Kunstwerke. Die Frage ist eher nach dem Standort. Möglicherweise bist du schon dran vorbeigelaufen, wie an diesem hier.

Tipp: Die Plastiken heißen „Homme“ und „Femme“ (wie treffend).

Matthias

[Der Martin]

Mahlzeit,

maximale Windgeschwindigkeit heute ca. 10:00 199 km/h.
das ist'n Haufen Holz ... *schweigt andächtig*
In der Nacht waren es um die 160. (gemessen mit einer Hobby-Wetterstation)
Die offiziellen Angaben sind dann auch deutlich drunter.

besser so als andersrum.

Wie genau die Messwerte sind, entzieht sich meiner Kenntnis.

Den Angaben der professionellen Meteorologen traue ich durchaus, bei den Angaben von Hobbyisten muss man vorsichtig sein. Wo und wie messen sie? Die wenigsten Hobby-Wetterfrösche werden wohl ihr Anemometer auf einem 10m hohen frei stehenden Mast haben, sondern vielleicht am Balkongeländer, am Dach der Gartenlaube oder bestenfalls an einem Seitenausleger am Antennenmast auf dem Dach. Aber sie werden selten den wirklich freien, unbehinderten Wind messen, sondern Verwirbelungen zwischen Gebäuden und Bäumen. Daher sind die Werte von so einer Messstelle wahrscheinlich recht unzuverlässig. Es reicht für eine grobe Orientierung, mehr aber wohl nicht.

Wer erkennt die Plastiken?
Aus der Nummer bin ich raus. Kunst und Kunstwerke - da kenne und erkenne ich ganz ganz wenige.
Naja, es sind sicher nicht berühmte Kunstwerke. Die Frage ist eher nach dem Standort. Möglicherweise bist du schon dran vorbeigelaufen, wie an diesem hier.

Möglicherweise bin ich tatsächlich dran vorbeigelaufen, aber dann habe ich sie nicht bewusst wahrgenommen. Auch an den Brunnen kann ich mich nicht konkret erinnern. Wenn überhaupt, würde ich mich wahrscheinlich eher an den erinnern, als an die Skulpturen obendrauf.
Aber anhand des Hintergrunds habe ich eine Vorstellung, wo das wohl sein müsste.

Tipp: Die Plastiken heißen „Homme“ und „Femme“ (wie treffend).

Wie einfallslos. ;-)

Schönes Wochenende,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Aber anhand des Hintergrunds habe ich eine Vorstellung, wo das wohl sein müsste.

genau. Außerdem stehts natürlich in der URL des Bildes ;-)

Tipp: Die Plastiken heißen „Homme“ und „Femme“ (wie treffend).

„Homme“

Matthias

[Der Martin]

Hallo Matthias,

Aber anhand des Hintergrunds habe ich eine Vorstellung, wo das wohl sein müsste.
genau. Außerdem stehts natürlich in der URL des Bildes ;-)

jaa, aber dasteht nur allgemeingültig "Lübz". Das war aber der entscheidende Hinweis für mich, dass ich das Bild doch mit der inzwischen etwas verblassten Erinnerung abgleichen konnte. So konnte ich es fast auf den Punkt finden. Ich wollte erst noch einen Marker auf den Kartenausschnitt setzen, habe aber nicht herausgefunden, wie ich das tun kann.

Tipp: Die Plastiken heißen „Homme“ und „Femme“ (wie treffend).
„Homme“

Ah, das ist dann wohl der Arc de Triomphe? Ich war noch nie in Paris, und hab den Triumphbogen auch noch nie von oben gesehen, daher nehme ich das einfach mal an. Seltsam allerdings, dass an der Stelle und in der näheren Umgebung keine einzige Ortsangabe (Straße, Platz, POI) steht, die ich schon mal irgendwo gehört hätte.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Ich war noch nie in Paris,

Das hätte ich jetzt nicht erwartet. Das sollte unbedingt auf deine persönliche ToDo-Liste.

Ah, das ist dann wohl der Arc de Triomphe? Ich war noch nie in Paris, und hab den Triumphbogen auch noch nie von oben gesehen, daher nehme ich das einfach mal an.

Nein, das sind die Jardins du Trocadéro. Von dort aus hat man imho den schönsten Blick auf den Eiffelturm. maps.google

Matthias

[Der Martin]

Hallo,

Ich war noch nie in Paris,
Das hätte ich jetzt nicht erwartet. Das sollte unbedingt auf deine persönliche ToDo-Liste.

komischerweise gehört Paris aber zu den "Weltstädten", die mich überhaupt nicht reizen - und das liegt nicht daran, dass da Französisch gesprochen wird (oder nicht nur). Es gibt noch ein paar andere Städte, die mich ebensowenig reizen oder interessieren, wie etwa Wien oder Rom, ohne dass ich das jetzt rational begründen könnte.
Auf meiner persönlichen To-Go-Liste stehen eher Städte wie Stockholm, St.Petersburg, Dresden, Washington D.C. oder Hamburg. In Hamburg war ich zwar schon mal, aber das ist rund 15 Jahre her und war eine reine Geschäftsreise, bei der ich von der Stadt nicht viel mitbekommen habe.

Ah, das ist dann wohl der Arc de Triomphe? Ich war noch nie in Paris, und hab den Triumphbogen auch noch nie von oben gesehen, daher nehme ich das einfach mal an.
Nein, das sind die Jardins du Trocadéro.

Ja, das habe ich gelesen. Sagte mir aber auch nichts.

Von dort aus hat man imho den schönsten Blick auf den Eiffelturm.

La tour Eiffel, enfin quelque chose que je connais!

Schönen Sonntag noch,
 Martin

[dedlfix]

Tach!

Nein, das sind die Jardins du Trocadéro. Von dort aus hat man imho den schönsten Blick auf den Eiffelturm.

Und den besten Blick über die Stadt hat man meines Erachtens nach vom Tour Montparnasse. Wenn man ihn unter sich hat, hat man (bis auf La Défense) eine uneingeschränkte Aussicht, ohne dieses dunkle Riesending im Blickfeld haben zu müssen. Zudem ist die Touristenschlange auch deutlich kürzer als beim Eiffelturm.

dedlfix.

[Matthias Apsel]

Om nah hoo pez nyeetz, dedlfix!

Und den besten Blick über die Stadt hat man meines Erachtens nach vom Tour Montparnasse.

Einspruch!

Den schönsten Blick auf Paris hat man von der Kuppel der Basilika Sacré-Cœur de Montmartre.

Zudem ist die Touristenschlange auch deutlich kürzer als beim Eiffelturm.

Ich musste bisher weder am Tour Montparnasse noch am Aufstieg zur Kuppel warten. Außerdem ist Sacré-Cœur billiger (5 EUR, man kann auch einfach über das Drehkreuz klettern) und man hat wirklich was getan, wenn man oben angekommen ist. Schon allein der abenteuerliche Weg über die  Dächer hat was. Kein Vergleich etwa mit Notre Dame, wo man auch gern mal eine Stunde warten muss.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

ich könnte ja wenigstens „Xaver“ eintragen, aber der Name hat nicht mal eine Bedeutung.

Dafür kann man ihn tanzen.

Fortsetzung folgt.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, progger!

<header>  
  <img src="logo.png" alt="Logo der Firma Heinzelmännchen" width="150" height="36">  
</header>  
<nav>  
  <ul>  
    <li><a href="#">Ueber3</a></li>  
    <li><a>Ueber4</a></li>  
    <li><a href="#">Ueber5</a></li>  
  </ul>  
  <ul>  
    <li><a href="#">Ueber3</a></li>  
    <li><a href="#">Ueber5</a></li>  
  </ul>  
</nav>  

»» #head {position: absolute; top:0px; left:0px; right:0px; background-color: #1782f9;}
⇒ header {background-color: #1782f9;}
»» #logo {width: 150px; height: 36px; vertical-align: middle;}
⇒ kann ersatzlos entfallen

»» #oben {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-bottom: 0px; border-bottom: solid 2px #fff;}  

> #oben li {background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}  
> #unten {font-size: 14pt; margin-left: 0px; padding-left: 0px; margin-top: 0px;}  
> #unten li {color: #fff; background-color: #0368d9; list-style: none; padding: 0px; padding-left: 5px;}

⇒ nav ul {font-size: 14px; margin: 0; padding: 0; list-style: none;}  
⇒ nav ul:first-child {border-bottom: 2px solid #fff;}  
⇒ nav li {color: #fff; background-color: #0368d9; padding-left: 5px;}  
⇒ nav ul:first-child li {color: inherit;}	

nur mal so für den Anfang. (ungetestet)

Matthias

[progger]

Das funktioniert erstmal. Aber sind <header> und <nav> nicht HTML5-Tags? Was ist wenn man auf die Seite mit einem IE <9 geht?

[Matthias Apsel]

Om nah hoo pez nyeetz, progger!

Das funktioniert erstmal. Aber sind <header> und <nav> nicht HTML5-Tags? Was ist wenn man auf die Seite mit einem IE <9 geht?

<header> und <nav> sind zwar Tags aber von Bedeutung sind die Elemente. (Unterschied)

Es gibt für solche Fälle html5shiv. Zusätzlich sollte man unbekannte Elemente für ältere Browser im CSS mit der entsprechenden display-Eigenschaft versehen.

header, nav, article, section, main, footer {  
  display: block;  
}

Matthias

[progger]

Es gibt für solche Fälle html5shiv. Zusätzlich sollte man unbekannte Elemente für ältere Browser im CSS mit der entsprechenden display-Eigenschaft versehen.

header, nav, article, section, main, footer {

display: block;
}

Und damit funktioniert die Seite dann in allen Browsern?

[Gunnar Bittersmann]

@@progger:

nuqneH

Und damit funktioniert die Seite dann in allen Browsern?

Nicht in alten IEs von JavaScript-Abschaltern. Die sind in der freien Wildbahn wohl ausgestorben und werden nur noch in Zoos gehalten.

Qapla'

[progger]

Ok. Dann werde ich das so machen.
Danke!

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Es gibt für solche Fälle html5shiv. Zusätzlich sollte man unbekannte Elemente für ältere Browser im CSS mit der entsprechenden display-Eigenschaft versehen.

Das Shiv tut das bereits.

Nicht-IEs, die header, nav, article, section, footer nicht kennen (d.h. für diese { display: block } schon im Browser-Stylesheet haben), sollte es kaum noch geben.

Einzig main { display: block } sollte noch vonnöten sein, damit es auch ohne JavaScript funktioniert.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, progger!

und wenn du dann dabei bist:

<li class="inactive"><a href="#">Ueber2</a></li>

<li class="active"><a href="#">Ueber3</a></li>
<li class="inactive"><a href="#">Ueber4</a></li>

Es ist lobenswert, dass du die aktive Seite von den anderen abgrenzen willst, man braucht sie aber auch nicht anklicken können.  
~~~html
<li><a href="#">Ueber2</a></li>  
<li><a>Ueber3</a></li>  
<li><a href="#">Ueber4</a></li>

ist deutlich kürzer, leistet dasselbe (sogar noch mehr, weil du nicht mehr auf die aktuelle Seite verlinkst) und lässt sich mit CSS ebenso selektieren

Matthias

[progger]

Gute Idee!