Zum Inhalt springen

Div-Verschachtelung fehlerhaft

PieDie

Von PieDie
in Webdesign

 Teilen

Empfohlene Beiträge

PieDie

PieDie

Geschrieben
Geschrieben

Hi,

ich habe ein Problem mit der Ausrichtung einer Fußzeile am Seitenende und der entsprechenden Verschachtelung von Div-Elementen:

Die Seite soll, wenn nicht genug Content vorhanden ist, immer das ganze Browserfenster füllen. Die Fußzeile (für einen Copyright-Text) klebt dabei immer einige Pixel über dem Seitenende. Das schaut etwa so aus: BILD

Geht der Content (col2_content, im Bild "user anlegen") über die Größe des Browsers wird die Fußzeile nach unten geschoben - im Prinzip das selbe Ergebnis wie im obigen Bild, bloß mit Scrollbars. Alles wie gewünscht.

Wird jedoch der Inhalt von col1_content (die Navigation) zu groß fürs Fenster und der Content (col2_content) reicht nicht an col1_content (navi) heran, so bleibt die Fußzeile am Endevon col2_content kleben, und col1_content geht einfach drüber: BILD

Folgendermaßen wird das ganze aufgebaut:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>


   <head>

   <title>DEK Hamburg AKD Desktop</title>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

   <link rel="stylesheet" type="text/css" href="css/start.css">

   <script type="text/javascript">var dmWorkPath="scripts/";</script>

   <script type="text/javascript" src="scripts/dmenu.js"></script>


   </head>


   <body>

      <div class="outer">

         <div class="inner">

            <div class="header">

               <div class="title" id="title">

                  <h6>Insert Scary Title here</h6>

               </div>             <!-- Title Ende -->


               <div class="nav_top">

                  <script type="text/javascript" src="scripts/data-deluxe-menu.js"></script>

               </div>             <!-- Nav_top Ende -->

            </div>                <!-- Header Ende -->

            <div class="content">

               <div id="col1">

                  <div id="col1_content">


                     col1_content

                  </div>          <!-- col1_contentEnde -->

               </div>             <!-- col1 Ende -->

               <div id="col2">

                  <div id="col2_content">

                     col2_content<br/>

                  </div>          <!-- col2_content Ende -->


               </div>             <!-- col2 Ende -->


            </div>                <!-- content Ende -->

           Content Fake


      </div>                   <!-- inner Ende -->

     <div class="footer_holder">

            <div class="footer" id="footer">

               <h5>Die pöse pöse Fußzeile</h5><br />


            </div>                   <!-- Ende footer-->

         </div>                     <!-- Ende footer_holder -->

    </div>                   <!-- Ende outer -->


   </body>



</html>

Das Ganze funktioniert so: Ich spanne ein großes Div "outer"auf, das die gesamte Seite trägt (der graue Rand in den Bildern ist der Hintergrund von <HTML>) Dann kommt "inner", welches die Kopfzeile, die horziontale Navigation und den Content trägt. Die Fußzeile "footer_holder" steht in der Hierarchie auf derselben stufe wie "inner", weil sich das "am Browserende-ausrichten" sonst nicht machen ließ.

An CSS dürfte es eigentlich nicht liegen, weil der footer sich ja bei großem Content richtig ausrichtet.

Ich denke mal, dass es nur ein Logikproblem ist, komme aber einfach auf keine Lösung - irgendwo hakt es immer

Sieht jemand den Fehler?

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
  • Autor
Geschrieben
Dein zweites Bild wird nicht angezeigt.

Und IMO sind die Einstellungen der CSS schon wichtig, da hier die Eigenschaften der Divs definiert werden.

Das Bild ist da - 3 Browser und ein zweiter Rechner zeigen das Bild an :)

CSS:



html,body {

   background: #9fa9b3;

}


div.outer { /* Grund-Div, auf dem die gesamte Seite liegt*/

   width:100%;

   height: 95%;

   background:#fff;

   border-top: 1px #888899 solid;

   border-left: 1px #888899 solid;

   border-right: 1px #888899 solid;

}


div.inner{ /* Parent-Div von "header" und "content" (outer.inner) */

   width:auto;

   min-height:100%;

   background: #fff; /*#B0C6DD*/

   background-image: url(../images/dots.png);  /* Malt eine Punktlinie zwischen die Divs "col1" und "col2", was durch border nicht zu lösen ist */

   background-repeat: repeat-y;

   background-position: 148px;                 /* Schiebt das Hintergrundbild 148px nach rechts*/

   padding: 0px;

   border-bottom: 0px white solid;

}


div.header { /*Parent-Div von "title" und "nav" (outer.inner.header) */

   width:auto;

   height: 100px;

}


div.title { /*Div fuer die Seitenüberschrift (outer.inner.header.title) */

   width:auto;

   height: 55px;

   text-align: center;

   color: white;

   background: #004578;

   padding-top: 15px;

}


div.nav_top { /* Div mit der oberen Navigation (outer.inner.header.nav) */

   width:auto;

   height: 30px;

   background: #004578;

   padding-left: 148px;

   padding-top: 4px;

}


div.content { /* Parent-Div fuer "col1" und "col2" (outer.inner.content) */

   width:auto;

   min-height: 75%;

   padding-top: 2px;

   padding-bottom: 2px;


   background: #fff;

   background-image: url(../images/dots.png);

   background-repeat:repeat-y;

   background-position:148px;                /* Schiebt das Hintergrundbild 148px nach rechts*/

}


div.footer_holder { /* Parent-Div fuer Footer an outer angehängt */

   width:100%;

   background: #fff;

   border-left: 1px #888899 solid;

   border-right: 1px #888899 solid;

   border-bottom: 1px #888899 solid;

   margin-left: -1px;

}


div.footer { /* Div, das den footer enthaelt, gleiche Stufe wie "inner" (outer.footer) */

   width:auto;

   height: 25px;

   background: #fff;

   padding-top: 7px;

   text-align: center;

   border-top: 1px #ddd solid;

   margin-left: 1em;

   margin-right: 1em;

}


#col1{ /* Linke Spalte-Grundgeruest, Parent-Div von "col1_content" (outer.inner.content.col1) */

   width: 148px;

   float: left;

   background: #fff;

}


#col1_content{ /* Inhalt linke Spalte, Navigation (outer.inner.content.col1.col1_content) */

   width: 146px;

   background: #fff;

}


#col2{ /* Rechte Spalte-Grundgeruest, Parent-Div von "col2_content" (outer.inner.content.col2) */

   margin-left: 152px;

   background: #fff;

}


#col2_content{ /* Inhalt rechte Spalte, Seiteninhalt (outer.inner.content.col2.col2_content) */

   background: #fff;


}

Nicht von den Kommentaren verwirren lassen, die stimmen nicht unbedingt mehr so ganz, weil ich da halt sehr viel dran rumgebaut habe und da noch nicht korrigierend eingegriffenhabe (macht bei halebn Sachen ja auch keinen Sinn ;))

BTW:

Die Bilder sind in FireFox gemacht. IE und Opera ziehen den Outer-Div so, wie es sein soll ganz nach unten an den Seitenrand (mit Borders getestet). FF macht da aber dicke Backen. Der Footer hängt bei allen gleich an der falschen Stelle.

EDIT:

Diese überhängende Navigation kann man nachbauen, indem man in das Div "col1_content" einfach irgendwelchen Kram einfügt (bla <br /> ).

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
  • Autor
Geschrieben

Noch was: Wenn man ordentlich Pseudonavi einbaut, mag es aussehen, als würde alles passen. Den grauen Block, überm Footer kann man ja mit nem weißen Div ausfüllen - von wegen. Ist der Inhalt von "col2_content" größer als die Seite, bleibt der Footer steif an seiner Position und ragt in den inhalt rein, was ziemlich bescheiden aussieht, und dem Sinn des Footers geradezu spottet ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

Wird jedoch der Inhalt von col1_content (die Navigation) zu groß fürs Fenster und der Content (col2_content) reicht nicht an col1_content (navi) heran, so bleibt die Fußzeile am Endevon col2_content kleben, und col1_content geht einfach drüber:

[...]

Sieht jemand den Fehler?

col1 hat die Eigenschaft float:left.

Wenn du ein Element "floatest", dann wird es aus dem eigentlichen Textfluss genommen und "darüber" gelegt. Seine Ausdehnungen wirken sich damit also nicht mehr auf andere Boxen aus.

Stell dir einen Schuhkarton vor, in den du einen Ball legst. Karton zu und Ball aufpumpen -> Karton dehnt sich aus (naja... aber klar was ich meine, denk ich mal).

Jetzt leg mal den Ball auf den Karton. Dann kannst du Pumpen bis der Ball platzt, und dem Karton macht es nichts aus.

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

Das float:left hab ich drin, damit col1 und col2 nebeneinander liegen. Ohne diese Eigenschaft liegen sie halt untereinander. Lässt sich das Nebeneinanderlegen der beiden cols anders lösen?

Ein div ist standardmäßig ein Block-Element. Block-Elemente erzeugen einen Zeilenumbruch im Textfluss. Inline-Elemente (z.B. span) tun das nicht, allerdings kann man denen keine Höhe oder Breite mitgeben (mit wenigen Ausnahmen, z.B. img).

Des Rätsels Lösung: Inline-Block. Allerdings versteht das nur Opera, in CSS2.1 soll das drin sein (aber wie gesagt kann Opera das schon länger).

Wenn du deinen Footer immer unten haben willst und falls mehr Inhalt ist der Footer nach unten Rücken soll... Nein, ich wüßte keine Möglichkeit (aktuell).

Stu Nicholls | CSSplay | CSS Layouts Listing

Da ist das 'fixed' Layout Version 3 fast das was du machen willst, allerdings bleibt der Footer immer unten zu sehen.

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
  • Autor
Geschrieben

Da ist das 'fixed' Layout Version 3 fast das was du machen willst, allerdings bleibt der Footer immer unten zu sehen.

position:fixed ist mir auch schon begegnet. Aber das wirkt etwas albern für einen Footer. Als Statusleiste dynamischer Inhalte oder eine permanent sichtbare Navigation vielleicht ganz spielig, aber für einen simplen Footer ein wenig zuviel des Guten ;)

Naja, wenn nichtmal JesterDay eine Lösung parat hat - dann muss ich es wohl aufgeben oder das Naviations-Design umwerfen :beagolisc Naja, Javascript-Menüs ftw :D

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
position:fixed ist mir auch schon begegnet.

Das ist nicht mit position:fixed. Schau es dir einfach mal an. Wenn deine 2 "Spalten" mehr Inhalt haben als sichtbar, bekommen sie jeweils eine Scrollbar.

Das Anzupassen ist n bissl hakelig, also ich hab das schon 2mal versucht. Geht, nur kommt es immer irgendwie zu komischen Effekten (bei mir :D)

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
  • Autor
Geschrieben
Das ist nicht mit position:fixed. Schau es dir einfach mal an. Wenn deine 2 "Spalten" mehr Inhalt haben als sichtbar, bekommen sie jeweils eine Scrollbar.

Jo, hast recht, ich hatte ein anderes gesehen und das vertauscht. Dort lief der Footer immer mit der Seite beim Scrollen mit - sorry :)

Link zu diesem Kommentar
Auf anderen Seiten teilen
FMG

FMG

Geschrieben
Geschrieben

Zuerst einmal: Die Umstellung auf ein CSS-Layout, bedeutet, die Elemente so zu benutzen, wie sie vorgesehen sind und nicht alles in div's zu packen!

Zu deinem Problem:

Dein outer-div hat 95% Höhe, dein inner-div soll davon 100% einnehmen. Logisch, dass der Browser dann nicht weiß, wohin mit dem footer...

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
  • Autor
Geschrieben
Zuerst einmal: Die Umstellung auf ein CSS-Layout, bedeutet, die Elemente so zu benutzen, wie sie vorgesehen sind und nicht alles in div's zu packen!

Dann leg mal los ;) Wenn du dir mal Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework anschaust - dort wird das auch so gemacht. Davon habe ich dieses Layout "abgeleitet", weil die Umsetzung des "Footer immer ans Ende"-Problem hier nicht ansatzweise zu lösen war. Und mir scheint, der Mensch, der das Yaml entwickelt hat, (auch mit divs en masse) scheint sein Handwerk zu verstehen.

Dein outer-div hat 95% Höhe, dein inner-div soll davon 100% einnehmen. Logisch, dass der Browser dann nicht weiß, wohin mit dem footer...

Das ist Jacke wie Hose... Der Footer hat schon auf den verschiedensten Ebenen geparkt. Auch mit den Höhen habe ich schon reichlich herumgebastelt. Das ist nicht das Problem. Außerdem hat JesterDay schon gesagt, dass es so nicht funktioniert, weil die Browser per CSS damit nicht zurecht kommen. Mit Ausnahme von Opera. Dort hab ich ein ansehnliches Ergebnis hinbekommen, was aber ungefähr gar nicht hilft.

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
Und das heisst?

Kann FMG nur zustimmen!

Das heißt: HTML-Tags haben eine Bedeutung, und du solltest sie dazu verwenden, wofür sie gedacht sind. Und die Tags selbst kannst du auch stylen.



<div>

  <ul>

    <li>bla</li>

    <li>bla</li>

  </ul>

</div>

Wäre z.B. sinnlos (wenn mit dem Div nicht was ganz besonderes gemacht wird. Kann mir zwar im Moment nicht vorstellen was, aber ausschließen will ich es auch nicht., deswegen dieser "Disclaimer" :D )

Bei CSS sind alle Elemente eine Box, und du musst eine Box nicht in eine andere packen, wenn sie da nicht hin muss.

Mir ist auch schon aufgefallen, dass viele in CSS einfach nur eine Anhäufung von Divs sehen, und diese Divs werden dann gestylt und haben einfache Tags drin.

Wobei ich mir das Beispiel hier nicht unter dem Aspekt angesehen habe. Und nur weil der YAML das tut, muss es noch nicht gut oder richtig sein, PieDie.

Es gibt ne Menge Leute die haben (und machen vielleicht immer noch) alles mit Tabellen. Damit geht dann auch "alles", aber richtig ist es deswegen nicht unbedingt :D

Link zu diesem Kommentar
Auf anderen Seiten teilen
Der Kleine

Der Kleine

Geschrieben
Geschrieben

Wäre z.B. sinnlos (wenn mit dem Div nicht was ganz besonderes gemacht wird. Kann mir zwar im Moment nicht vorstellen was, aber ausschließen will ich es auch nicht., deswegen dieser "Disclaimer" :D )

Nicht alle Elemente lasen sich auf die Seite positionieren?

Für diese exakte Positionierung nutze ich die Divs, also Abstand von oben etc.

Oder ist meine Weltanschauung falsch?

Ich habe nämlich ähnlich dem obigen Beispiel eine Footer Seite unten positioniert, die dort feststehen sein sollte.

Siehe auch hier.

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
Nicht alle Elemente lasen sich auf die Seite positionieren?

Für diese exakte Positionierung nutze ich die Divs, also Abstand von oben etc.

Unterschied: Block und Inline ;) (Wobei man über CSS auch das ändern kann, also den Defaultwert)

Es geht nur darum, dass du nicht alles mit Divs machen musst, nicht dass du keine Divs verwenden sollst.

Link zu diesem Kommentar
Auf anderen Seiten teilen
PieDie

PieDie

Geschrieben
  • Autor
Geschrieben
Es gibt ne Menge Leute die haben (und machen vielleicht immer noch) alles mit Tabellen. Damit geht dann auch "alles", aber richtig ist es deswegen nicht unbedingt :D

Das hatten wir ja auch schon mal...

Es geht, ob man es nun in Divs usw. macht oder alles in einer Table baut, ist eine Gewissensfrage. Man kommt mit beidem zum Ziel. Solange es W3C Konform ist, ist alles in Ordnung :D

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
Man kommt mit beidem zum Ziel. Solange es W3C Konform ist, ist alles in Ordnung :D

W3C konform ist eine Tabelle dann, wenn sie zum Anzeigen tabellarischer Daten verwendet wird, nicht als blinde Tabelle um die Daten im Browser auf eine bestimmte Art darzustellen :D

Ok, wird eh nur OT hier... ich klinke mich aus :old

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...