Der Kampf mit den Layern

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • prego
    antwortet
    Ich kann dir noch folgenden Link empfehlen. Dort werden die lustigen IE Probleme mit Styles näher behandelt....

    http://www.positioniseverything.net/

    Einen Kommentar schreiben:

  • Gandalf_the_Grey
    antwortet
    Okay, ich stelle fest, das so wie ich es gerne hätte es nicht funktioniert bzw. aufgrund des nicht überall unterstützen min-height tags es nicht möglich ist diverse div Elemente auf einer mindest Größe zu halten. Schade eigentlich. Na ja, dann muss ich wohl das Design umbauen.

    Danke für eure Hilfe!

    Einen Kommentar schreiben:

  • richtsteiger
    antwortet
    Hi,

    mit 'footer' legst du direkt eine Höhe von 8% fest, was aber bei größerem Fenster zum tragen kommt. Also kannst du mit height:100% auch nur auf 8% Bezug nehmen. Wenn das Fenster aber kleiner wird, dann erzwingt 'footerleft' durch den vielen Text eine Höhe, die größer als die 8% von 'footer' sind. Und mit height:100% von 'footerright' würdest du dann aber auch nur Bezug auf die 8% von 'footer' nehmen. Demzufolge kommt dein weißes Kästchen zum tragen (was eigentlich kein Kästchen ist, sondern der Seitenhintergrund). Also habe ich einen div rum gepackt, der für den Fall, dass die Höhe von 'footerleft' über den 8% des angezeigten Fensters liegt, die Hintergrundfarbe erzwingt. Und meines Erachtens ändern sich 'footerleft' und 'footerright' auch weiterhin gleich.

    Einen Kommentar schreiben:

  • Gandalf_the_Grey
    antwortet
    Original geschrieben von richtsteiger
    Hi,

    ich hab's gesehen. Das liegt daran, dass die Klasse 'footer' eine Höhe von 8% hat. Wenn das Fenster kleiner wird, werden nur die 8% mit der Hintergrundfarbe gefüllt. Der Text in 'footerleft' nimmt dann aber mehr Platz ein. Und 'footerright' ist halt nur so groß wie sein Inhalt. Ich hab das mal gelöst, indem ich mal noch ein div rumgelegt habe, dass dann bei kleinerem Fenster die Hintergrundfarbe erzwingt Hab's mit Firefox, IE6 und Opera getestet.
    Danke @richtsteiger auf die Idee wäre ich nie gekommen. Ich verstehe nur trotzdem nicht wieso z.B. mein vorheriger Versuch footerright und footerleft jeweils ein height 100% zu verpassen so kläglich gescheitert sind.

    Wieso allerdings deine Lösung jetzt funktioniert versteh ich nicht so ganz. Mir fehlt der logische Grund wieso es noch eines weiteren Div braucht, das er das Fenster von seiner Größe nicht verändert. Oder färbst du damit einfach nur den Hintergrund gleich ein? Denn das war nicht Sinn der Sache. Ich will verhindern das sich footerleft und footerright ungleich verändern. Sie sollen also beide permanent die maximal mögliche Höhe haben.

    Einen Kommentar schreiben:

  • Titus
    antwortet
    hier (FF 0.9.3) auch kein weißes kästchen ... nur scrollbalken.

    letzterer könnte durch body { height=99% } statt 100% vermieden werden

    Einen Kommentar schreiben:

  • richtsteiger
    antwortet
    Hi,

    ich hab's gesehen. Das liegt daran, dass die Klasse 'footer' eine Höhe von 8% hat. Wenn das Fenster kleiner wird, werden nur die 8% mit der Hintergrundfarbe gefüllt. Der Text in 'footerleft' nimmt dann aber mehr Platz ein. Und 'footerright' ist halt nur so groß wie sein Inhalt. Ich hab das mal gelöst, indem ich mal noch ein div rumgelegt habe, dass dann bei kleinerem Fenster die Hintergrundfarbe erzwingt Hab's mit Firefox, IE6 und Opera getestet.

    Hier der Code (css hab ich mal in <style>-Tag gepackt):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
<meta content="Ren&eacute; Charbonneau" name="author" />
<title>Ren&eacute; Charbonneau - Pers&ouml;nliche Webseite</title>
<style type="text/css">
html
{
    height: 100%;
}

body
{
    margin: 0%;
    text-align: center;
    height: 100%;
}

img
{
    background-color: #aacccc;
    border: 1px dashed #000000;
}

p
{
    margin: 0%;
    padding: 0%;
}

#main
{
    width: 760px;
    margin: 0px auto;
    text-align: left;
    background-color: #aacccc;
    height: 100%;
}

#navi
{
    width: 100%;
    margin: 0px auto;
    text-align: center;
    background-color: #aaaccc;
    height: 5%;
}

#content
{
    width: 100%;
    margin: 0px auto;
    text-align: left;
    background-color: #aaaaaa;
    height: 87%;
    
}


.footer
{
   margin: 0px auto;
   background-color: #aaaccc;
	 height:8%;
}
#foot {
   background-color: #aaaccc;
	 float:left;
	 width:100%;
}

#footerleft
{
   background-color: #aaaccc;
   width: 80%;
   text-align: left;
   font-size: 0.8em;
   float: left;
}

#footerright
{
   background-color: #aaaccc;
	 height: auto;
   width: 20%;
   text-align: center;
   float: right;
}
</style>
</head>
<body>
<div id="main">

<div id="navi">
<a href="#">Startseite</a> | 
<a href="#">Lebenslauf</a> | 
<a href="#">Projekte</a> | 
<a href="#">Publikationen</a> | 
<a href="#">Fotos</a> | 
<a href="#">Kontakt</a> |
<a href="#">Impressum</a> |
<a href="#">Disclaimer</a>
</div> <!-- schliessendes div f&uuml;r navi -->

<div id="content">
<p>Hallo Welt</p>
</div> <!-- schliessendes div f&uuml;r content -->

<div class="footer">
<div id="foot">
  <div id="footerleft">
    <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/">
Einige Rechte vorbehalten. </a>&copy; 2005 Ren&eacute;
 Charbonneau<br />
Optimiert f&uuml;r 
<a href="http://validator.w3.org/check?uri=referer">
XHTML 1.0 Strict 
</a>und <a href="http://jigsaw.w3.org/css-validator/">CSS 2</a><br />
Letzte &Auml;nderung: 07.06.2005 14:40 GMT +1.00
</div> <!-- schliessendes div f&uuml;r footerleft -->
<div id="footerright">
<a href="#">Seitenanfang</a>
</div> <!-- schliessendes div f&uuml;r footerright -->
</div> <!-- schließendes div für foot -->
</div> <!-- schliessendes div f&uuml;r footer -->

</div> <!-- schliessendes div f&uuml;r main -->
</body>
</html>

    Einen Kommentar schreiben:

  • Kropff
    antwortet
    Im IE läuft alles "richtig" bzw. so wie ich es erwartet hatte. Im Opera und im Firefox entsteht beim verkleinern unten rechts in der Ecke ein weißes Kästchen, zumindest bei mir unter Windows XP!
    also bei mir (firefox 1.0, winxp) sieht alles einwandfrei aus.

    peter

    Einen Kommentar schreiben:

  • Gandalf_the_Grey
    antwortet
    Online Beispiel, kannst du haben:

    http://www.gandalfthegrey.de/upload/test.html

    Schaut euch die Seite mal bei voller Browserfenstergröße im IE, im Firefox und im Opera an.

    Dann fangt an das Browserfenster zu verkleinern.

    Im IE läuft alles "richtig" bzw. so wie ich es erwartet hatte. Im Opera und im Firefox entsteht beim verkleinern unten rechts in der Ecke ein weißes Kästchen, zumindest bei mir unter Windows XP!

    Einen Kommentar schreiben:

  • richtsteiger
    antwortet
    Also ich hab's mal getestet und kann den Fehler nicht nachvollziehen. Im Firefox 1.0.4, Opera 8 und IE 6 hab ich nicht den besagten Fehler ausfindig machen können, egal, wie groß mein Fenster war.

    Funktioniert einwandfrei.

    PS: hab alles mal in eine Datei reinkopiert und CSS in <style>-Tag gepackt. Aber daran wird's sicherlich nicht liegen. Würd ich demzufolge gerne auch mal sehen.

    Einen Kommentar schreiben:

  • derHund
    antwortet
    hmm,

    ohne online-beispiel kann ich nur raten - deine beschreibung ist auch recht nichtssagend für leute, die genau das problem noch nicht gesehen haben ... wenn du die höhenangaben nicht wirklich brauchst, laß sie weg ...

    Einen Kommentar schreiben:

  • Gandalf_the_Grey
    hat ein Thema erstellt Der Kampf mit den Layern.

    Der Kampf mit den Layern

    Hallo zusammen,

    ich habe mich seit Ewigkeiten mal wieder ein wenig um das Thema
    Webdesign gekümmert und bin darauf gestoßen das derzeit bei vielen
    Webdesignern aus unterschiedlichsten Gründen eine Abkehr von
    Tabellen hin zu Layern geht.

    Als ich ein wenig über dem Thema gebrütet habe, wurde ich mehr und
    mehr Interessiert und wollte selbst mal ein wenig spielen. Dafür hatte
    ich mich eine kleine Testseite in XHTML 1.0 Strict entworfen und in
    Verbindung mit CSS versucht ein Design aus Layern aufzubauen.

    Funktionierte eigentlich wie es auf den ersten Blick schien ganz gut.
    Wie gesagt auf den ersten Blick.

    Ich habe folgenden Quellcode:

    HTML:
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
     Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"    >
    <    html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    <    head>
    <    meta content="text/html; charset=ISO-8859-1"
         http-equiv="content-type" />
    <    meta content="Ren&eacute; Charbonneau" name="author" />
    <    title>Ren&eacute; Charbonneau - Pers&ouml;nliche Webseite</title>
    <    link rel="stylesheet" type="text/css" href="./renecharbonneau.css" />
    </    head>
    <    body>
    <    div id="main">

    <    div id="navi">
    <    a href="#">Startseite</a> | 
    <    a href="#">Lebenslauf</a> | 
    <    a href="#">Projekte</a> | 
    <    a href="#">Publikationen</a> | 
    <    a href="#">Fotos</a> | 
    <    a href="#">Kontakt</a> |
    <    a href="#">Impressum</a> |
    <    a href="#">Disclaimer</a>
    </    div> <!-- schliessendes div f&uuml;r navi -->

    <    div id="content">
    <    p>Hallo Welt</p>
    </    div> <!-- schliessendes div f&uuml;r content -->

    <    div class="footer">
      <    div id="footerleft">
        <    a href="http://creativecommons.org/licenses/by-nc-nd/2.0/">
    Einige Rechte vorbehalten. </a>&copy; 2005 Ren&eacute;
         Charbonneau<br />
    Optimiert f&uuml;r 
    <a href="http://validator.w3.org/check?uri=referer">
    XHTML 1.0 Strict 
    </a>und <a href="http://jigsaw.w3.org/css-validator/">CSS 2</a><br />
    Letzte &Auml;nderung: 07.06.2005 14:40 GMT +1.00
    </div> <!-- schliessendes div f&uuml;r footerleft -->
    <    div id="footerright">
    <    a href="#">Seitenanfang</a>
    </    div> <!-- schliessendes div f&uuml;r footerright -->
    </    div> <!-- schliessendes div f&uuml;r footer -->

    </    div> <!-- schliessendes div f&uuml;r main -->
    </    body>
    </    html> 
    CSS:
    PHP-Code:
    html
    {
            height: 100%;
    }

    body
    {
            margin: 0%;
            text-align: center;
            height: 100%;
    }

    img
    {
            background-color: #aacccc;
            border: 1px dashed #000000;
    }

    p
    {
            margin: 0%;
            padding: 0%;
    }

    #main
    {
            width: 760px;
            margin: 0px auto;
            text-align: left;
            background-color: #aacccc;
            height: 100%;
    }

    #navi
    {
            width: 100%;
            margin: 0px auto;
            text-align: center;
            background-color: #aaaccc;
            height: 5%;
    }

    #content
    {
            width: 100%;
            margin: 0px auto;
            text-align: left;
            background-color: #aaaaaa;
            height: 87%;
        
    }


    .    footer
    {
           margin: 0px auto;
           background-color: #aaaccc;
           height: 8%;

    }

    #footerleft
    {
           width: 80%;
           text-align: left;
           background-color: #aaaccc;
           font-size: 0.8em;
           float: left;
    }

    #footerright
    {
           width: 20%;
           text-align: center;
           float: right;
    } 
    Die Grundlagen dazu hatte ich mir aus einem Tutorial von CSS4YOU erarbeitet.

    Nun habe ich folgendes Problem. Die Seite an sich wird im Vollbild Modus bei mir sauber angezeigt, und zwar sowohl im IE6 wie auch im Opera 8 und im Firefox 1.0.4.

    Wenn ich aber beginne das Fenster zusammen zu schieben (soll ja auch vorkommen das bei jemandem das Browserfenster nicht den vollen Bildschrim aufüllt) dann bekomme ich im Firefox und im Opera unten rechts ein andersfarbiges Kästchen. Außerdem "schwappt" der Text unten rechts irgendwann aus dem Kasten heraus in den "neu" entstanden weißen kasten hinein.

    Ich sitze jetzt schon seit 1 Tag dran und verstehe nicht woher dieser Kasten kommt wenn ich das Fenster zusammen schiebe. Ich habe schon mehrfach den Code umgestellt ohne sichbaren Erfolg.

    Kann mir jemand nen Tipp geben woran es hängen könnte?! Ist es vieleicht tatsächlich ein Bug oder bin ich nur mal wieder zu blöd das gescheit hin zu bekommen?
    Stichworte: -
Vorherige template Weiter
Lädt...
X