• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage zu relativen und absoluten Positionen

Status
Für weitere Antworten geschlossen.
S

snooze7

Neues Mitglied
Hallo zusammen,

ich habe eine Frage zu relativen und absoluten Positionen:

Bei meiner Seite habe ich alle Elemente festen Positionen gegeben. Jetzt würde ich dem #Footer aber keine absolute Position geben (es soll sich ja automatisch unter den Inhalt klemmen).

Hinweis zu meiner Homepage:Meine Seite ist was die Breite angeht in der Mitte und 1010px Breit; in der Vertikalen soll sie aber scrollbar sein.

Ist es möglich einer Ebene (position: relative) "zu sagen" (Verweis?), dass sich diese direkt unter eine absolute Ebene (hier der Inhalt mit einer variablen Höhe) positioniert?

Mir ist klar, dass es am Einfachsten wäre die Ebenen ineinander zu verschachteln, jedoch wollte ich fragen ob es auch anders Möglich ist (da es sonst meinen Homepageaufbau in der Logik verhaut).


Mfg Snooze7
 
Werbung:
Was du möchtest geht nicht. Ein absolut positioniertes Element ist aus dem Fluss genommen, d.h. das andere Elemente es gar nicht beachten. Verzichte auf absolute Positionierung um glücklich zu werden.
 
Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout.
Zum Vergrößern anklicken....
Demnach lautet deine Antwort, nein.

Beste Lösung, lass die absoluten Positionierungen weg, die sind meistens nicht nötig und lassen sich auch mit margin und float realisieren, dann passt sich auch dein footer automatisch der Seitenhöhe an, ohne, dass du noch etwas dafür machen musst.

2 dumme, ein Gedanke ;)
 
Werbung:
mhhh... das ist aber mit meinem Layout schwierig.

Von der html Reihenfolge sieht meine Seite in etwa so aus:

Logobild

<!-- Navigationen-->
Hauptnavigation
Unternavigation
Nochmal eine Schnellnavigation

<!-- Inhalt -->
Inhalt mit Text und Überschriften
Inhaltsnavigation

<!-- Footer -->
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 <body> 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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Versicherungsstelle Veronika Cramer</title>

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

</head>


<body>

<!-- Kopfbereich -->

<h1>Versicherungsstelle Veronika Cramer</h1>

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


<h2>Navigation</h2>

    <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 &uuml;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>


<!-- Content Bereich -->

<h2>Inhalt</h2>

    <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
</p>

    </div>
    
    <!-- Footer Bereich -->

<h2>Anhang</h2>

    <div id="anhang">
    <a name="anker_anhang"><span class="hidden"></span></a>

        <div id="copyright">
        <p>Copyright &copy; 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>

</body>

</html>
 
Du könntest auch einfach den Link zu deiner Seite posten, dann brauchen wir es uns nicht vorzustellen. Eine feste Breite erhälst du mit
Code: 
body {
  width: 1010px;
  min-width: 1010px;
}
Allerdings ist eine feste Breite nicht vorteilhaft, es gibt noch genug User, die mit 800x600 unterwegs sind, mal ganz abgesehen von den ganzen mobilen Geräten, die vielleicht nur 320x280 haben.

So wie ich das verstanden habe, wäre dein Layout nicht wirklich schwer mit CSS, ohne absolute Positionierung zu reallisieren.
 
Versicherungsstelle Veronika Cramer

Das ist der Link von der Testdatei, die ich im Moment bearbeite...

Ist es so einfach, auch wenn ich meine Homepagelogik mit den H-Ebenen beibehalten will? Das wäre klasse.

Dein Gegenargument mit der festen Breite ist mir bewusst. Allerdings habe ich mich auch mal in Internet schlau gemacht und der Großteil der User nutzt heutzutage mindestens diese Breite. Notebooks nutzen ja 16:10 bzw. 16:9 mitlerweile, daher sehe ich in der Breite weniger das Problem. Über kurz oder lang, werde ich auch noch eine Handyseite erstellen, daher sind PDA und Mobilfunkgeräte kein Problem.

Vielen Dank für deine Mühen... ist echt ein klasse Forum.
 
Werbung:
Das Design ist kein großes Problem ohne absolute Positionierungen.

Welche Tags du verwendest, hat auf das Layout keinen Einfluss, allerdings hat es Einfluss auf die Semantik deiner Seite. Du solltest Tags verwenden, die den Ihnalt deiner Seite am besten wiedergeben, nicht, weil dir der Code dann besser gefällt.
 
Schon, aber ich finde neben dem Äußeren die Seite wie ich sie aufgebaut habe sehr logisch und die Suchmaschinen (auch blinde User) finden sich damit sehr gut zurecht. Du kennst ja das Plugin für Mozilla um nachzusehen, wie google die Seite durchcrawlt.... Ich glaube ich weiß wie ich vorgehe... Das Ergebnis poste ich dann heute Nacht rein.

Ich nehm einfach noch 3 Ebenen dazu, dann wirds easy:

#header
- Logo
- Unternavigation (Sitemap, Impressum, etc.)

#content
- Navigation
- Inhalt
- Inhaltsnavigation

#footer
- Copyright
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben