mhhh… das ist aber mit meinem Layout schwierig.
Von der html Reihenfolge sieht meine Seite in etwa so aus:
Logobild
Hauptnavigation
Unternavigation
Nochmal eine Schnellnavigation
Inhalt mit Text und Überschriften
Inhaltsnavigation
Copyright
Impressum, etc.
Aber: Mein Design ist nicht in dieser Reihenfolge. Deshalb tue ich mit „relativen“ Positionen auch so schwer bzw. vielleicht habe ich auch etwas übersehen. Mein Layout sieht so aus:
Layout ist 1010 px breit und soll in der Höhe variabel sein.
Logobild links oben
Unternavigation recht oben (drucken, Hilfe, etc.)
Rechte Seite:
Hauptnavigation unter Logobild auf der linken Seite
Quicknavigation darunter
Mitte:
Inhalt
darunter soll der Footer sein
Links:
Inhaltsnavigation
Wenn man es genau betrachtet ist es eigentlich recht einfach:
- Header
- 3 spaltiges Content Bereich mit Navigationen
- Footer
Kniffelig wird es aber im Detail:
Das Design ist wie schon gesagt 1010 px breit. Innerhalb dieser Breite ist der Hintergrund weiß. Als „richtigen“ Hintergrund habe ich graue Punkte genommen.
Mein Problem mit relativen Positionen geht jetzt schon los:
Wie kann ich mein so einstellen, dass der Homepagebereich immer auf 1010px begrenzt ist? Dann könnte ich einfach die 3 Spalten per float: links und rechts positionieren und den Footer unten einfügen.
Falls man das nicht versteht, lade ich noch später ein Bild hoch.
Außerdem ist mein Homepageaufbau etwas anders als gewöhnlich, ich diesen aber gerne beibehalten würde… Daher für folgendes keine Diskussion eröffnen (ich weiß, dass ich die h Überschriften missbrauche; ich finde diesen Aufbau aber sehr aufgeräumt…;))
[html]
Versicherungsstelle Veronika Cramer
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="content-language" content="deutsch, de">
<meta http-equiv="page-enter" content="blendTrans(Duration=1)">
<meta name="author" content="Versicherungsstelle Veronika Cramer">
<meta name="copyright" content="Versicherungsstelle Veronika Cramer">
<meta name="keywords" content="Versicherung, Versicherungsprodukte, Haftpflicht, Sachwerte, Rechtschutz, ">
<meta name="description" content="Versicherungsstelle Veronika Cramer">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days">
<link media="screen" rel="stylesheet" type="text/css" href="css/screen.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/navigation.css">
<link media="print" rel="stylesheet" type="text/css" href="css/print.css">
<!--[if lt IE 7]>
<link media="screen" rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
<link rel="shortcut icon" type="image/ico" href="images/favicon2.ico">
<script type="text/javascript" src="scripts/javascripts.js"></script>
Versicherungsstelle Veronika Cramer
<div id="logo">
<a name="anker_seitenanfang"></a>
<a href="index.html"><img src="images/vfth_logo.gif" width="223" height="47" border="0" alt="Startseite"></a> </div>
Navigation
<div id="hauptnavigation">
<h3><a name="anker_hauptnavigation"><span class="hidden">Hauptnavigation</span></a></h3>
<ul>
<li><a class="hauptnavi1" href="index.html"><span class="hidden">Startseite</span></a></li>
<li><a class="hauptnavi2" href="wirueberuns.html"><span class="hidden">Wir über uns</span></a></li>
<li><a class="hauptnavi3" href="versicherungsprodukte.html"><span class="hidden">Versicherungsprodukte</span></a></li>
<li><a class="hauptnavi4" href="kundenservice.html"><span class="hidden">Kundenservice</span></a></li>
</ul>
</div>
<div id="servicenavigation">
<h3><a name="anker_servicenavigation"><span class="hidden">Servicenavigation</span></a></h3>
<ul>
<li><a class="servicenavi1" href="sitemap.html"><span class="hidden">Sitemap</span></a></li>
<li><a class="servicenavi2" href="impressum.html"><span class="hidden">Impressum</span></a></li>
<li><a class="servicenavi3" href="datenschutz.html"><span class="hidden">Datenschutz</span></a></li>
<li><a class="servicenavi4" href="hilfe.html"><span class="hidden">Technische Hilfe</span></a></li>
</ul>
</div>
<div id="suche">
<h3><a name="anker_suche"><span class="hidden">Suche</span></a></h3>
</div>
<div id="quickfinder">
<h3><a name="anker_quickfinder"><span class="hidden">Quickfinder</span></a></h3>
<ul>
<li><a class="quickfinder" href="sitemap.html">Produkte von A bis Z</a></li>
<li><a class="quickfinder" href="impressum.html">Schadensmeldung</a></li>
<li><a class="quickfinder" href="datenschutz.html">Aktuelle Pressemitteilungen</a></li>
<li><a class="quickfinder" href="hilfe.html">Adressen und Links</a></li>
<li><a class="quickfinder" href="hilfe.html">DVE Mitglieder</a></li>
</ul>
</div>
Inhalt
<div id="inhalt">
<a name="anker_inhalt"><span class="hidden"></span></a>
<h3 class="inhalt">Versicherungen für Arbeitgeber</h3>
<h4>Haftpflichtversicherungen im Berufsbereich</h4>
<p class="normal">Während die oben angeführte Definition eines Textes als abgegrenzte schriftliche oder potentiell zu verschriftlichende Äußerung im Alltag meist ausreichend ist, führt eine genauere, wissenschaftliche Betrachtung zu komplexeren Definitions- und Beschreibungsversuchen.Die Eigenschaft des Text-Seins bezeichnet man als Textualität, die sprachwissenschaftliche Untersuchung von Texten ist die Textlinguistik. Diese Disziplin stellt verschiedene Textualitätskriterien zur Verfügung. Robert-Alain de Beaugrande und Wolfgang Ulrich Dressler stellten 1981 eine Reihe solcher Kriterien vor:Diese Kriterien beziehen sich einerseits auf die Merkmale des Textes selbst (Kohäsion und Kohärenz), andererseits auf die Merkmale einer Kommunikationssituation, aus der der betreffende Text entsteht bzw. in der er eingesetzt wird (Intentionalität, Akzeptabilität, Informativität, Situationalität).Die einzelnen hier angeführten Textualitätskriterien sind in ihrer Interpretation durch de Beaugrande/Dressler zum Teil umstritten. Allgemein anerkannt ist, dass ein Text eine erkennbare kommunikative Funktion hat, die durch die kommunikative Absicht des Senders und die Erwartungen des Empfängers bestimmt wird, dass er als Äußerung abgegrenzt und thematisch orientiert ist, d. h. über einen inhaltlichen Während die oben angeführte Definition eines Textes als abgegrenzte schriftliche oder potentiell zu verschriftlichende Äußerung im Alltag meist ausreichend ist, führt eine genauere, wissenschaftliche Betrachtung zu komplexeren Definitions- und Beschreibungsversuchen.Die Eigenschaft des Text-Seins bezeichnet man als Textualität, die sprachwissenschaftliche Untersuchung von Texten ist die Textlinguistik. Diese Disziplin stellt verschiedene Textualitätskriterien zur Verfügung. Robert-Alain de Beaugrande und Wolfgang Ulrich Dressler stellten 1981 eine Reihe solcher Kriterien vor:Diese Kriterien beziehen sich einerseits auf die Merkmale des Textes selbst (Kohäsion und Kohärenz), andererseits auf die Merkmale einer Kommunikationssituation, aus der der betreffende Text entsteht bzw. in der er eingesetzt wird (Intentionalität, Akzeptabilität, ematisch orientiert ist, d. h. über einen inhaltlichen Während die oben angeführte Definition eines Textes als abgegrenzte schriftliche oder potentiell zu verschriftlichende Äußerung im Alltag meist ausreichend ist, führt eine genauere, wissenschaftliche Betrachtung zu komplexeren Definitions- und Beschreibungsversuchen.Die Eigenschaft des Text-Seins bezeichnet man als Textualität, die sprachwissenschaftliche Untersuchung von Texten ist die Textlinguistik. Diese Disziplin stellt verschiedene Textualitätskriterien zur Verfügung. Robert-Alain de Beaugrande und Wolfgang Ulrich Dressler stellten 1981 eine Reihe solcher Kriterien vor:Diese Kriterien beziehen sich einerseits auf die Merkmale des Textesselbst (Kohäsion und Kohärenz), andererseits auf die Merkmale einer Kommunikationssituation, aus der der betreffende Text entsteht bzw. in der er
</div>
<!-- Footer Bereich -->
Anhang
<div id="anhang">
<a name="anker_anhang"><span class="hidden"></span></a>
<div id="copyright">
<p>Copyright © Titelname 2008</p>
<ul>
<li>Impressum</li>
<li>Nutzungsbedingungen</li>
<li>Datenschutz</li>
<li>Rechtlicher Hinweis</li>
</ul>
</div>
<div id="validator">
</div>
<div id="bookmark">
</div>
</div>
[/html]