M
Maik
Hi,
ist es dir eigentlich bislang nicht sonderbar vorgekommen, dass in deinem CSS die right-Positionsangabe für #Leiste_rechts "-60px" anstelle von "-208px" lautet, um den Block über dem 208px breiten rechten weißen Rahmen von #container zu positionieren?
Gleiches gilt in diesem Zusammenhang für den gegenüberliegenden DIV-Block #Leiste_links und dessen left-Positionsangabe, um ihn über den linken Rahmen von #container auszurichten.
Wie gesagt, durch den Überschuß an schliessenden </div>-Tags, werden diverse DIV-Blöcke im HTML-Code durch sie frühzeitig geschlossen, was zur Folge hat, dass sich die absoluten Positionsangaben von #Leiste_rechts nicht, wie zu erwarten, auf die Boxenränder des relativ positionierten DIV-Blocks #main, sondern auf den Dokumentkörper (rechter Fensterrand) beziehen, und daher dieser Block nach links verschoben wird, wenn die Browserfensterbreite herunterskaliert wird. Zur Gegenprobe kannst du right:0 für #Leiste_rechts festlegen, und schauen, wo sich das Element anschließend wiederfindet.
Mit dem nachfolgenden HTML-Code, den ich von den fünf überschüssigen </div>-Tags befreit und jeweils mit einem Kommentar versehen habe, behält #Leiste_rechts unter Berücksichtigung der korrekten right-Regel beim Skalieren der Fensterbreite seine angedachte Position bei.
mfg Maik
ist es dir eigentlich bislang nicht sonderbar vorgekommen, dass in deinem CSS die right-Positionsangabe für #Leiste_rechts "-60px" anstelle von "-208px" lautet, um den Block über dem 208px breiten rechten weißen Rahmen von #container zu positionieren?
Gleiches gilt in diesem Zusammenhang für den gegenüberliegenden DIV-Block #Leiste_links und dessen left-Positionsangabe, um ihn über den linken Rahmen von #container auszurichten.
Wie gesagt, durch den Überschuß an schliessenden </div>-Tags, werden diverse DIV-Blöcke im HTML-Code durch sie frühzeitig geschlossen, was zur Folge hat, dass sich die absoluten Positionsangaben von #Leiste_rechts nicht, wie zu erwarten, auf die Boxenränder des relativ positionierten DIV-Blocks #main, sondern auf den Dokumentkörper (rechter Fensterrand) beziehen, und daher dieser Block nach links verschoben wird, wenn die Browserfensterbreite herunterskaliert wird. Zur Gegenprobe kannst du right:0 für #Leiste_rechts festlegen, und schauen, wo sich das Element anschließend wiederfindet.
Mit dem nachfolgenden HTML-Code, den ich von den fünf überschüssigen </div>-Tags befreit und jeweils mit einem Kommentar versehen habe, behält #Leiste_rechts unter Berücksichtigung der korrekten right-Regel beim Skalieren der Fensterbreite seine angedachte Position bei.
HTML:
<!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
HTML:
<div id="main">
<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->
<div class="kopf">
<div style="position:absolute; left:208px;top:145px; width:551px; height:231px; z-index:2;">
<center> <table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>
<p><img src="/templates/_normal/images/anzeigebild.gif" border="0" width="545" height="231" /></p> </td>
</tr>
</table>
</center>
</div>
<!-- Bild auf den verschiedenen Seiten (zwischen der Navigation und der Newsleiste -->
<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->
<div style="position:absolute; left:394px;top:297px; width:350px; height:80px; color:#FFFFFF; z-index:3;">
<strong></strong>
</div>
<!-- Beschriftung von dem Bild (Text wird mittig dargestellt) -->
<!-- Logo oben links in der Ecke -->
<div id="logo">
<img src="/templates/_normal/images/logo_spd.gif" width="100" height="100" alt="">
</div>
<!-- Logo oben links in der Ecke -->
<!-- Headleiste oben, Text Herzlich Willkommen - daneben Logo -->
<div id="marquee">
<img src="/templates/_normal/images/header.gif" width="759" height="128" alt="Herzlich Willkommen auf unserer Homepage">
</div>
<!-- Headleiste oben, Text Herzlich Willkommen - daneben Logo -->
<!-- Kleiner Balken oben ?ber der Navigation -->
<div id="balcken_links_oben">
<img src="/templates/_normal/images/balken_oben_links.gif" width="208" height="17" alt="">
</div>
<!-- Kleiner Balken oben ?ber der Navigation -->
<div id="pfad">
</div>
<!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
<!-- Kleiner Balken ?ber der Aktuellesbox -->
<div id="balcken_rechts_oben">
<div style="margin-left:22px; margin-top:2px;">Aktuelles
</div>
</div>
<!-- Kleiner Balken ?ber der Aktuellesbox -->
<!-- Ende des Kopfbereichs wird durch den unten geschriebenen Befehl
festgelegt. -->
</div>
<!-- Ende des Kopfbereichs wird durch den oben geschriebenen Befehl
festgelegt. -->
<!-- HTML -->
<div id="container">
<div id="inner">
<!-- HTML -->
<!-- Navigation -->
<div id="Leiste_links">
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
<tr>
<td>
<ul class="menu"><li id="current" class="parent active item1"><a href="startseite.html"><span>Startseite</span></a><ul><li class="item55"><a href="/startseite/unserefreuneundpartner.html"><span>Links</span></a></li></ul></li><li class="parent item27"><a href="/ueberuns.html"><span>Über uns</span></a></li><li class="item2"><a href="/downloads.html"><span>Downloads</span></a></li><li class="item37"><a href="/aktuelles.html"><span>Aktuelles</span></a></li><li class="parent item60"><a href="/galerie.html"><span>Galerie</span></a></li><li class="parent item41"><a href="/intranetanmeldung.html"><span>Login</span></a></li><li class="parent item54"><a href="/kontaktmituns.html"><span>Kontakt aufnehmen</span></a></li><li class="item58"><a href="/impressum.html"><span>Impressum</span></a></li></ul> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<td>
<link rel="stylesheet" href="/components/com_uddeim/templates/default/css/uddemodule.css" type="text/css" /><div id='uddeim-module'><p class='uddeim-module-head'>Sie sind nicht eingeloggt.</p></div> </td>
</tr>
</table>
</div>
<!-- Navigation -->
<!-- Ende des inner wird durch den unten geschriebenen Befehl
festgelegt. -->
</div>
<!-- Ende des inner wird durch den oben geschriebenen Befehl
festgelegt. -->
<!-- Aktuellesleiste rechts -->
<div id="Leiste_rechts">
<table cellpadding="0" cellspacing="0" class="moduletable_text">
<tr>
<td>
<div class="bannergroup_text">
<div class="banneritem_text"><b>Weisheit</b><br><div class="clr"></div>
</div>
</div> </td>
</tr>
</table>
</div>
<!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
<!-- Aktuellesleiste rechts -->
<!-- Ende des Containers wird durch den unten stehenden Befehl festgelegt -->
</div>
<!-- Ende des Containers wird durch den oben stehenden Befehl festgelegt -->
<!-- Mitgliedschaft (nicht sichtbar) -->
<div id="mitglied">
<table border="0" cellspacing="0" cellpadding="0" width="208">
<tr><td bgcolor="FFFFFF" height="18 "width="22"> </td><td bgcolor="#FFFFFF"> </td></tr>
<tr><td colspan="2" height="10"></td></tr>
<tr><td width="22"> </td><td><a href="/" target="_blank">
</a></td></tr>
<tr><td colspan="2"> </td></tr>
</table>
</div><!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
<!-- Mitgliedschaft (nicht sichtbar) -->
<!-- Content -->
<div id="Content_Home">
<br>
<style type="text/css">
p { margin-top:5px; margin-bottom:0px; }
</style>
<div style="position:relative; top:0px; left:23px; width:500px; border:1px solid #FFFFFF">
<table border="0" cellspacing="0" cellpadding="0" width="480">
<tr><td>
<div id="overflow">
<div class="componentheading">
Willkommen auf der Startseite</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div>
<table class="contentpaneopen">
<tr>
<td valign="top" colspan="2">
<p><small>Lorem Ipsum</small></p>
<h1>Lorem Ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla enim turpis, placerat eget pellentesque nec, vehicula fermentum odio. Nullam dictum tortor non mi egestas in fringilla justo adipiscing. Cras ut eros at massa ornare pretium. Vivamus nec dignissim elit. Suspendisse potenti. Morbi in nunc vitae tortor sollicitudin feugiat. Integer at lacus a magna commodo malesuada ac dictum leo. Mauris dapibus ullamcorper hendrerit. Donec sed nisl vitae lectus suscipit facilisis fringilla a dolor. Fusce ut purus nec velit ullamcorper aliquam.
Maecenas scelerisque lorem nec erat luctus congue. Maecenas consectetur sapien massa. Aliquam erat volutpat. Quisque ultricies turpis vel justo facilisis lobortis. In a diam non urna semper facilisis tristique vel nunc. Sed vulputate eros vitae quam consectetur sed ornare diam pulvinar. Integer in enim nunc, ac sodales turpis. Nam in purus ut est condimentum egestas. Phasellus at nisi enim. Integer non nibh velit. Morbi cursus dapibus quam, et malesuada nunc cursus et. Donec non sapien est, quis suscipit mi.
Ut dictum sem ac sapien tincidunt in semper leo mollis. Ut lorem nulla, rhoncus id placerat in, fringilla at urna. Praesent ultricies libero venenatis purus iaculis sed viverra urna lacinia. Duis bibendum leo a risus bibendum condimentum. Nunc vel enim in sem laoreet vestibulum. Aenean sit amet tortor eget tellus tempor posuere et in mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eget tortor ac nisl rhoncus condimentum. Vestibulum sit amet nisi erat, vitae varius tellus. Sed convallis quam vitae augue vehicula hendrerit iaculis leo tincidunt. Praesent arcu odio, mollis at elementum eget, lobortis eu eros. Nunc cursus, magna sed auctor interdum, velit lectus iaculis urna, non sollicitudin felis massa ac sem. Maecenas quis eros vel turpis eleifend tincidunt. Proin bibendum posuere ultrices.
Praesent congue ornare diam, eget vehicula tellus varius non. Etiam sit amet velit nulla, vel varius nisi. Aliquam in porttitor libero. Maecenas aliquam felis quis augue semper sit amet tristique nisl hendrerit. Curabitur vestibulum lacus leo, ut facilisis sem. Ut iaculis neque id metus ultricies varius. Donec nec magna ac justo laoreet rhoncus. Pellentesque nisl lectus, consequat at adipiscing ac, mollis ut erat. Ut ut rhoncus sem. Nulla nec sapien et magna posuere rhoncus sed et felis. Fusce augue urna, convallis nec vulputate ac, placerat in massa. Mauris porttitor, libero non condimentum feugiat, felis dui mollis leo, dapibus lobortis diam erat vulputate tortor. Phasellus vel magna et lorem gravida ullamcorper. Vivamus vitae augue nec felis hendrerit ullamcorper.
Etiam eu risus a felis fermentum mollis sit amet in eros. Mauris consectetur porta massa, sit amet dignissim ante commodo fringilla. Praesent congue vulputate dignissim. Nunc eleifend, tortor eu interdum gravida, diam lectus ultrices diam, sed gravida nisi est ac urna. Proin nulla felis, pharetra ut fringilla quis, lacinia viverra sapien. Nam nec enim diam. Nulla sit amet tellus libero. Suspendisse potenti. In hac habitasse platea dictumst. Praesent bibendum, felis sed pellentesque blandit, magna tellus vulputate eros, ut faucibus dolor nibh at dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</tr>
</table>
<span class="article_separator"> </span>
</div>
</td>
</tr>
</table>
</div>
</table>
</div>
<!-- Content -->
</div>
</div>
<!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->
<!--</div>--><!-- Auskommentiert von Maik - 12.05.2010 -->mfg Maik
