Fireball: CSS-Layout

0 35

CSS-Layout

Fireball
  • css
  1. 0
    Beat
    1. 0
      Fireball
      1. 1
        Gunnar Bittersmann
        1. 0
          Fireball
          1. 0
            Gunnar Bittersmann
            1. 0
              Fireball
              1. 0
                Fireball
                1. 0

                  Update: Der aktuelle Code

                  Fireball
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Fireball
      2. 0
        Der Martin
        1. 0
          Fireball
          1. 0
            Der Martin
      3. 0

        [ungelöst]Neue Frage zur Navigation

        Fireball
        1. 0
          Beat
          1. 0

            Neue Frage zur Navigation - So soll es aussehen

            Fireball
            1. 0
              Beat
              1. 0

                HILFE!

                Fireball
                1. 0
                  Beat
                  1. 0
                    Fireball
                2. 0
                  Der Martin
                  1. 0
                    Fireball
                3. 0
                  Gunnar Bittersmann
                  1. 0
                    Fireball
                    1. 0
                      Struppi
                      1. 0
                        Fireball
                        1. 0
                          Gunnar Bittersmann
                          • menschelei
                          1. 0
                            Fireball
                          2. 0
                            apsel
                            1. 0
                              Fireball
                              1. 0
                                Gunnar Bittersmann
                    2. 0
                      Gunnar Bittersmann
    2. 0
      Fireball
  2. 0
    Gunnar Bittersmann
SELF-Forum

CSS-Layout

Fireball
– Informationen zu den Bewertungsregeln

Hallo,
ich habe ein Seite erstellt:

<html>  
<head><title>Startseite</title>  
<link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">  
</head>  
<body bgcolor="#C0C0C0" >  
<center>  
<div lang="de" id="seite" >  
<a style="text-decoration:none;" href="/index.html"><img border="0" src="grafiken/logo.gif" id="logo" width="150" height="125" align="left"   ></a>  
<div id="schrift" ><h1 style="position: relative; top: 0.6em;">Lore ipsum dolor sit amet</h1> </div>  
<div id="navi"><p>Navigation</p></div>  
</div>  
</center>  
</body>  
</html>

darstellung.css

  
#seite {  
         margin-top:1.5%;  
         margin-bottom: 1%;  
         width:94%;  
         background-color:#FFFFFF;  
         text-align:left;  
         height: 96.2%  
  
  
  
  
  
       }  
  
#logo  { margin-top:0px;  
         margin-bottom: 0px;  
  
  
       }  
#schrift { background-color:#FFFF00;  
  
          font-family:'Courier New', monospace;  
          text-align: center;  
          height: 125px;  
           margin-top:0px;  
         margin-bottom: 0px;  
         }  
  
#navi    { background-color:#C0C0C0;  
           width: 150px;  
           position: relative;  
           margin-top: 0px;  
           top:0px;  
           height: 100%;  
         }

Doch jetzt sieht meine Seite so aus, dass unter dem Logo ein weißer Balken ist, und erst dann meine graue Navigation beginnt.

---------------
'   Logo      '
'             '
'             '
---------------
###############
***************
***************
***************

Legende:
* Graue Navigation

weißer Balken, der weg soll!

Vielen Dank für Antworten schon mal im Voraus!

Gruß,
Fireball

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Layout

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Deine Seite sollte mit einer DOCTYPE Angabe beginnen.

    <html>

    <head>

    Deine Seite sollte als erstes im Head eine charset Angabe als meta Element enthalten.

    <title>Startseite</title>
    <link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">

    Schön dass du ein Stylesheet einbindest.
    Plane auch für ein media=print Stilesheet.

    </head>
    <body bgcolor="#C0C0C0" >

    CSS ist für diese Angabe zuständig

    <center>

    CSS ist dafür zuständig

    <div lang="de" id="seite" >

    Wenn deine Spache für das ganze Dokument gelten soll, dann bringe diesde Angabe im HTML Element unter.
    An dieser Stelle sugerierst du eher, dass deutsch eine sekundäre Sprach insel in deinem Dokument ist.

    <a style="text-decoration:none;" href="/index.html"><img border="0" src="grafiken/logo.gif" id="logo" width="150" height="125" align="left"   ></a>

    nutze deine CSS Datei statt inline Styles.
    Nutze CSS statt align
    img Elemente brauchen zwingend ein alt Attribut.

    <div id="schrift" ><h1 style="position: relative; top: 0.6em;">Lore ipsum dolor sit amet</h1> </div>

    Warum dieses überflüssige div Element?
    Willst du den Titel ausblenden?

    <div id="navi"><p>Navigation</p></div>

    Ich vermute, du möchtest hier eine Liste von Links verwenden. Dann nutz auch eine Liste.

    </div>
    </center>
    </body>
    </html>

    
> darstellung.css  

...  

> Doch jetzt sieht meine Seite so aus, dass unter dem Logo ein weißer Balken ist, und erst dann meine graue Navigation beginnt.  
  
Das kann an dem nicht formatierten <h1> Element liegen.  
Wie gesagt: Zuerst die DOCTYPE definieren. Danach gibt es Rat.  
Und bitte auch validieren.  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Layout

      Fireball
      – Informationen zu den Bewertungsregeln

      Vielen Dank für deine Antwort!
      Also umgesetzt, also meine Seite sieht so aus:
      index.html:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Startseite</title>  
  
<!-- META-Daten -->  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<!-- Styles -->  
  <link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">  
</head>  
  
<body >  
  
  
<div id="Seite">  
  
<!-- Kopf -->  
<div id="kopf">  
<img src="grafiken/logo.gif" width="180px" height="135" align="left" alt="Unser Logo" id="logo" >  
<h1 id="titel">Meine erste Seite</h1>  
</div>  
<!-- Kopf Ende -->  
  
  
<!-- "Zweite Zeile" -->  
<div id="Darunter">  
  
<h2>Navigation</h2>  
<ul id="navi">  
  
  
<li class="nav">Navi1</li>  
<li>Navi2</li>  
</ul>  
  
<div id="Inhalt">  
  
  
</div>  
  
</div>  
  
  
<!-- Ende "Zweite Zeile" -->  
<div id="fuss">  
© Fireball  
  
</div>  
  
  
  
</div>  
  
</body>  
  
  
</html>

      und darstellung.css:

      body              {  
                 color: black; background-color: #C0C0C0;  
                 font-size: 105%;  
                 font-family: Arial,Helvetica,sans-serif;  
  
                 text-align: center;  /* Zentrierung im Internet Explorer */  
                 }  
  
div#Seite        {  
                 text-align: left;    /* Seiteninhalt wieder links ausrichten */  
                 margin: 1% auto;      /* standardkonforme horizontale Zentrierung */  
                 width: 95%;  
                 height: 95.2%;  
                 padding: 0px;  
                 background-color: #ffffff ;  
                 border: 2px ridge black;  
                 }  
  
logo             {  
                margin: 0 0;  
  
  
                 }  
  
h1#titel         {  
  
                 position:relative;  
                 top:0;  
                 left:0;  
                 padding-top:0em;  
                 margin: 0 0;  
                 text-align:center;  
                 font-family: 'Courier New', monospace;  
                 font-weight:normal;  
                  background-color: #FFFF00;  
                   height: 135px;  
                 }  
  
  
div#Darunter     {  
                 position:relative;  
                 top:0px;  
                 left:0px;  
                 padding: 0;  
                 margin: 0 0;  
                 text-align:justify;  
  
                 }  
  
ul#navi          {  
                 background-color:#C0C0C0;  
                 list-style-type:none;  
                 padding: 10px;  
                 margin-top: 5;  
                 margin-bottom: 5px;  
                 margin-left: 3px;  
                 margin-right: 3px;  
                 width: 157px;  
                 color: #000000;  
  
  
  
                 }  
  
li#nav:hover         {  
                 background-color:#FFFF00;  
                 }  
  
div#fuss         {  
                 background-color: #FFFFFF;  
                 font-size: 67%;  
                 width:93.5%;  
                 margin-top: 5;  
                 margin-bottom: 5;  
                 margin-left: 3;  
                 margin-right: 3;  
                 text-align: center;  
                 border: 1px dashed black;  
                 position:absolute;  
                 bottom:4.5%;  
                 }  
  
strong           {  
                 font-weight:bold;  
                 }  
li#nav           {  
                 color: #000000;  
  
                 }  
  
a#nav            {  
                 text-decoration: none;  
                 color: #000000;  
                 }  
br#abs-ocss      {  
                 visibility:hidden;  
                 }

      Doch es treten verschiedene Probleme auf:
      1.   In Firefox wird mein Logo gar nicht angezeigt (Firefox 3.5.6) (IM Internet Explorer dagegen schon
      2.   Ich bekomme beim Validieren folgende Meldung:
      »»Error  Line 27, Column 63: Attribute "ALIGN" is not a valid attribute. »»Did you mean "align"?
      »»
      »»…f" width="180px" height="135" align="left" alt="Unser logo"
      »»
      »»You have used the attribute named above in your document, but the »»document type you are using does not support that attribute for this »»element. This error is often caused by incorrect use of the "Strict" »»document type with a document that uses frames (e.g. you must use the »»"Transitional" document type to get the "target" attribute), or by using »»vendor proprietary extensions such as "marginheight" (this is usually »»fixed by using CSS to achieve the desired effect instead).
      »»
      »»This error may also result if the element itself is not supported in the »»document type you are using, as an undefined element will have no »»supported attributes; in this case, see the element-undefined error »»message for further information.

      Viele Grüße
      Fireball

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Layout

        Gunnar Bittersmann Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        @@Fireball:

        nuqneH

        <div id="Seite">

        Dieses 'div' ist wohl überflüssig.

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. CSS-Layout

          Fireball
          – Informationen zu den Bewertungsregeln

          @@Fireball:

          nuqneH

          <div id="Seite">

          Dieses 'div' ist wohl überflüssig.

          Qapla'

          Nein, denn hättest du dir den Code angeguckt, soll ein weißes "Laken" zentriert werden.

          Fireball

          PS: Lässt sich das align nicht mir CSS ersetzten???

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS-Layout

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Fireball:

            nuqneH

            Nein

            Vorsicht!

            denn hättest du dir den Code angeguckt

            Warum ich deinem Code wenig Aufmerksamkeit schenke, hatte ich bereits gesagt.

            soll ein weißes "Laken" zentriert werden.

            Und dass mit 'html' und 'body' bereits zwei Elemente zur Verfügung stehen, die sich stylen lassen und damit ein allumspannendes 'div' überflüssig machen, auch.

            Qapla'

            --
            Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. CSS-Layout

              Fireball
              – Informationen zu den Bewertungsregeln

              1. Entschuldigung, dass ich so unfreundlich war, du hast recht. Mit html und body kann man die div "Seite" ersetzten

              2. Ich habe eine Lösung für das height-Problem: ~~~css html {height: 100%;}
              body {height: 100%;}

                
Gruß,  
Fireball
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. CSS-Layout

                Fireball
                – Informationen zu den Bewertungsregeln

                Und noch eine Lösung:

                Mit logo { float: left;}
                konnte ich das align="left" im img-Tag ersetzen

                Also aus
                <img src="grafiken/logo.gif" width="180" height="135" alt="Unser Logo" id="logo" align="left">
                #logo { margin: 0 0; }

                wurde
                <img src="grafiken/logo.gif" width="180" height="135" alt="Unser Logo" id="logo">
                #logo { margin: 0 0; float:left; }

                Damit ist das Dokument HTML 4.01 Strict konform.

                Gruß,
                Fireball

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Update: Der aktuelle Code

                  Fireball
                  – Informationen zu den Bewertungsregeln

                  Also ich habe jetzt die Seite gehostet:
                  http://ziegenproblem.ohost.de/testseite.html
                  Sie ist: 401 Valid

                  Die Quelltexte:
                  testseite.html
                  darstellung.txt

                  Und so soll es aussehen:
                  Endergebnis

                  Zu den Problemen:
                  1.   Der graue Navigationsstreifen soll bis unten gehen (und bei Änderung der
                       Fenstergröße mitwachsten/schrupfen)
                  2.   Die (c)-Zeile soll zentriert werden

                  Ein Art "Vorbild", dass so ähnlich ist:
                  http://ago.tanfa.co.uk/css/layouts/flexi_floats/

                  Vielen Dank für Eure Bemühungen schon mal im Voraus:

                  Fireball

                  PS: Ich bitte Euch nur produktive Postings hier zu setzten!

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Update: Der aktuelle Code

                    Gunnar Bittersmann Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    @@Fireball:

                    nuqneH

                    1.   Der graue Navigationsstreifen soll bis unten gehen (und bei Änderung der
                         Fenstergröße mitwachsten/schrupfen)

                    „Faux columns“ ist dein Suchbegriff.

                    2.   Die (c)-Zeile soll zentriert werden

                    Ist sie doch.

                    PS: Ich bitte Euch nur produktive Postings hier zu setzten!

                    Threaddrift überlass mal uns.

                    Qapla'

                    --
                    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Update: Der aktuelle Code

                      Fireball
                      – Informationen zu den Bewertungsregeln

                      Das mit den Faux Columns funktioniert nicht, da ich gerne die Hintergundfarbe nicht durch ein Hintergrundbild ersetzten würde.
                      Viele Grüße
                      Fireball

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

      2. CSS-Layout

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hallo,

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        [...]
        <img src="grafiken/logo.gif" width="180px" height="135" align="left" alt="Unser Logo" id="logo" >

          
abgesehen von der Meldung des Validators: "180px" ist kein gültiger Wert für das width-Attribut in HTML. Merke: Der Wert des width-Attributs wird entweder in Pixel angegeben (dann ohne Einheit!), oder in Prozent. In CSS ist dagegen die Angabe einer Einheit (auch px) notwendig.  
  

> 1.   In Firefox wird mein Logo gar nicht angezeigt (Firefox 3.5.6) (IM Internet Explorer dagegen schon  
  
Möglicherweise stört sich der Firefox am fehlerhaften width-Attribut und interpretiert es als width="0".  
  

> 2.   Ich bekomme beim Validieren folgende Meldung:  
> > Error Line 27, Column 63: Attribute "ALIGN" is not a valid attribute. Did you mean "align"?  
  
Diese Fehlermeldung ist sehr, sehr irreführend; ich halte sie für einen Bug des Validators. Der eigentliche Fehler ist: Der angegebene Strict-DOCTYPE kennt kein Attribut 'align'.  
  

> Noch ein Problem tritt auf:  
> height: 95%; in darstellung.css funktioniert mit doctype nicht mehr?  
  
Doch, und zwar im Gegensatz zum Quirks Mode (ohne DOCTYPE) sogar korrekt: Eine Höhenangabe in Prozent bezieht sich immer auf die Höhe des Elternelements. Ich sehe in deinem CSS aber keine Höhenangabe für die beiden Vorfahrenelemente von div#seite. Also richtet sich deren Höhe nach ihrem Inhalt.  
  

> Mit was ist es zu ersetzten???  
  
Nicht ersetzen. Ergänze die Höhenangabe für das Elternelement von div#seite und für dessen Elternelement.  
  
So long,  
 Martin  

-- 
Ich liebe Politiker auf Wahlplakaten.  
Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.  
  (Loriot, deutscher Satiriker)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS-Layout

          Fireball
          – Informationen zu den Bewertungsregeln

          Ja, aber mit den 95% sind 95% der Höhe des Teils, der im Browser die Webseite anzeigt. Also z.B.: im Vollbildmodus die Höhe des Bildschirm. Und diese möchte ich ja nicht mit Javascript feststellen.

          Gruß,
          Fireball

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS-Layout

            Der Martin
            – Informationen zu den Bewertungsregeln

            Hallo,

            Ja, aber mit den 95% sind 95% der Höhe des Teils, der im Browser die Webseite anzeigt.

            nein, eben nicht. Die Lösung hast du ja, wie du selbst berichtest, inzwischen gefunden.

            Tatsächlich hattest du diese Element-Hierarchie:

            <html>
              <body>
               <div>
               </div>
              </body>
             </html>

            Für das div-Element hattest du eine Höhe von 95% angegeben, das bedeutet: 95% der Höhe von body. Aber body hatte keine Angabe für height, damit gilt als Default height:auto, und das heißt, das Element ist exakt so hoch wie sein Inhalt.

            Nur beim html-Element, das ja kein Elternelement mehr hat, bezieht sich eine Höhenangabe stattdessen auf die Höhe des Browserfensters.

            Also z.B.: im Vollbildmodus die Höhe des Bildschirm.

            Nein. Der Bildschirm ist für dich als Autor sowieso nicht zugänglich; du kannst nur innerhalb des Browserfensters agieren (ja, es gibt das screen-Objekt in JS, es ist aber relativ nutzlos).

            Ciao,
             Martin

            --
            Solange der Nagellack nicht trocken ist,
            ist eine Frau praktisch wehrlos.
              (Burt Reynolds, US-Schauspieler)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      3. [ungelöst]Neue Frage zur Navigation

        Fireball
        – Informationen zu den Bewertungsregeln

        Hallo,
        noch eine Frage zu meinem Code:
        Bis jetzt ist meine Navigation (also die DIV "Darunter") so groß, wie der Inhalt. Wie aber kann ich diese so groß "aufziehen", dass sie bis zum unteren Rand der DIV "Seite" reicht?

        Viele Grüße
        Fireball

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. [ungelöst]Neue Frage zur Navigation

          Beat Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Bis jetzt ist meine Navigation (also die DIV "Darunter") so groß, wie der Inhalt. Wie aber kann ich diese so groß "aufziehen", dass sie bis zum unteren Rand der DIV "Seite" reicht?

          html,body {height:100%}

          mfg Beat

          --
          ><o(((°>           ><o(((°>
             <°)))o><                     ><o(((°>o
          Der Valigator leibt diese Fische
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Neue Frage zur Navigation - So soll es aussehen

            Fireball
            – Informationen zu den Bewertungsregeln

            Bis jetzt ist meine Navigation (also die DIV "Darunter") so groß, wie der Inhalt. Wie aber kann ich diese so groß "aufziehen", dass sie bis zum unteren Rand der DIV "Seite" reicht?

            html,body {height:100%}

            mfg Beat

            Hab ich gemacht, ändert aber nichts!
            Hier mein Code
            index.html

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
          "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Startseite</title>  
<!-- META-Daten -->  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<!-- Styles -->  
  <link rel="stylesheet" media="screen" type="text/css" href="darstellung.css">  
</head>  
<body >  
<!-- Kopf -->  
<div id="kopf">  
<img src="grafiken/logo.gif" width="180" height="135" alt="Unser Logo" id="logo" >  
<h1 id="titel">Startseite</h1>  
</div>  
<!-- Kopf Ende -->  
<!-- "Zweite Zeile" -->  
<div id="darunter">  
<div id="navigation">  
         <h2>Navigation</h2>  
         <ul id="navi">  
                 <li class="nav">Navi1</li>  
                 <li>Navi2</li>  
         </ul>  
</div>  
<div id="Inhalt">  
</div>  
</div>  
<!-- Ende "Zweite Zeile" -->  
<div id="fuss">  
© Fireball  
</div>  
</body>  
</html>

            dastellung.css

            html             {  
                 color: black; background-color: #C0C0C0;  
                 font-size: 105%;  
                 font-family: Arial,Helvetica,sans-serif;  
                 height: 98%;  
                 text-align: center;  /* Zentrierung im Internet Explorer */  
                 }  
  
body              {  
                 text-align: left;/* Seiteninhalt wieder links ausrichten */  
                 margin: 1% auto;/* standardkonforme horizontale Zentrierung */  
                 width: 95%;  
                 height: 95.2%;  
                 padding: 0px;  
                 background-color: #ffffff ;  
                 border: 2px ridge black;  
                  overflow: auto;  
                 }  
  
#kopf            {  
                         background-color: #FFFF00;  
                           height: 135px;  
                         }  
  
#logo             {  
                margin: 0 0;  
                float:left;  
                 }  
  
h1#titel         {  
                 position:relative;  
                 top:0.6em;  
                 left:0px;  
                 padding-top:0em;  
                 margin: 0 0;  
                 text-align:center;  
                 font-family: 'Courier New', monospace;  
                 font-weight:normal;  
                 }  
  
  
div#navigation     {  
                 position:relative;  
                 top: 0px;  
                 bottom: 0px;  
                 left:0px;  
                 text-align:justify;  
                 background-color:#C0C0C0;  
                 height: 100ex;  
                 padding: 10px;  
                 margin-top: 5px;  
                 margin-bottom: 5px;  
                 margin-left: 3px;  
                 margin-right: 3px;  
                 width: 157px;  
                 color: #000000;  
                 }  
  
ul#navi          {  
                 list-style-type:none;  
                 padding: 10px;  
                 margin-top: 5px;  
                 margin-bottom: 5px;  
                 margin-left: 3px;  
                 margin-right: 3px;  
                 width: 140px;  
                 color: #000000;  
                 }  
  
.nav:hover       {  
                 background-color:#FFFF00;  
                 }  
  
div#fuss         {  
                 background-color: #FFFFFF;  
                 font-size: 67%;  
                 width:93.5%;  
                 text-align: center;  
                 border: 1px dashed black;  
                 position:absolute;  
                 bottom:4%;  
                 }  
  
strong           {  
                 font-weight:bold;  
                 }  
li#nav           {  
                 color: #000000;  
  
                 }  
  
a#nav            {  
                 text-decoration: none;  
                 color: #000000;  
                 }  
.abs-ocss        {  
                 visibility:hidden;  
                 }

            Und so soll es aussehen:
            http://www.imgbox.de/?img=m23636x122.png

            Vielen Dank für Eure bisherige Mühe und auch schon mal 'Danke' im Vorraus!
            Fireball

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Neue Frage zur Navigation - So soll es aussehen

              Beat Homepage des Autors
              – Informationen zu den Bewertungsregeln

              html,body {height:100%}
              Hab ich gemacht, ändert aber nichts!

              Doch das tut es, und zwar gegenüber dem Code, den welcher im Parent-Posting deiner Frage stand.

              Tut mir leid. habe anderes zu tun...

              mfg Beat

              --
              ><o(((°>           ><o(((°>
                 <°)))o><                     ><o(((°>o
              Der Valigator leibt diese Fische
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. HILFE!

                Fireball
                – Informationen zu den Bewertungsregeln

                html,body {height:100%}
                Hab ich gemacht, ändert aber nichts!

                Doch das tut es, und zwar gegenüber dem Code, den welcher im Parent-Posting deiner Frage stand.

                Tut mir leid. habe anderes zu tun...

                mfg Beat

                Tut mir Leid. Ich verstehe das nicht.
                Wenn ich nun sage
                div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
                wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?

                Gruß,
                Fireball

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. HILFE!

                  Beat Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Wenn ich nun sage
                  div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
                  wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?

                  Du missverstehst position:relative;
                  Du willst offenbar position:absolute; nutzen.

                  mfg Beat

                  --
                  ><o(((°>           ><o(((°>
                     <°)))o><                     ><o(((°>o
                  Der Valigator leibt diese Fische
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. HILFE!

                    Fireball
                    – Informationen zu den Bewertungsregeln

                    Wenn ich nun sage
                    div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
                    wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?

                    Du missverstehst position:relative;
                    Du willst offenbar position:absolute; nutzen.

                    mfg Beat

                    Jein. Ich will sozusagen den top-Punkt als relative (automatisch unter dem Logo), da ich ihn nicht anders angeben kann (Abstand von der Viewport-Oberkante zum Header: relative; Höhe der Grafik: fest (px) ==> wenn absolute-Angabe, dann gemischt ???),
                    den bottom-Punkt als absolute, da ich ihn genau festlegen kann (Abstand unterer Rand bis Viewport-Unterkante: relativ ==> absolute-Angabe relativ)

                    Vielen Dank für deine Bemühungen!

                    Fireball

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                2. HILFE!

                  Der Martin
                  – Informationen zu den Bewertungsregeln

                  Hallo,

                  Wenn ich nun sage
                  div#navigation {position: relative; top: 0px; bottom 0px; width 135px; }
                  wird meine DIV trotzdem nicht aufgezogen. Was mache ich falsch?

                  du verwendest position:relative, hast aber offensichtlich nicht verstanden, was das genau bedeutet und meinst anscheinend etwas anderes. Der obige CSS-Code bedeutet:
                   "Verschiebe die Oberkante und die Unterkante um 0px gegenüber
                    der Lage, die sie ohne Positionsangaben hätten."

                  Wobei ich mir im Moment nicht einmal sicher bin, ob die Angabe von top *UND* bottom im Zusammenhang mit relativer Postionierung überhaupt definiert ist.

                  Möglicherweise meinst du position:absolute anstatt relative, und möchtest relative stattdessen dem Elternelement geben, damit div#navigation sich daran ausrichten kann. Das ist aber nur meine Vermutung ...

                  So long,
                   Martin

                  --
                  Zwei Stammtischbrüder:
                  Hier steht, dass laut Statistik über 60 Prozent aller Ehefrauen fremdgehen.
                  Was soll ich mit dieser Information? Ich brauche Namen, Fotos, Telefonnummern ... !
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. HILFE!

                    Fireball
                    – Informationen zu den Bewertungsregeln

                    Also der Inhalt (im Bild lore ipsum) ist mit overflow:scroll; versehen.
                    Die graue Navigation soll also so lang sein:
                    Ganze Bildschirmhöhe
                     - Oberer Rand (1%)
                     - Grafikhöhe (135px)
                     - Fußzeile (relative Angabe)
                     - Unterer Rand (1%)
                    ----------------------------------
                     = Höhe Navigation

                    Gruß,
                    Fireball

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                3. HILFE!

                  Gunnar Bittersmann Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  @@Fireball:

                  nuqneH

                  Was mache ich falsch?

                  Das sagte ich doch schon. Mehrfach. (Falls du auf meine Hilfe wert legst.)

                  Qapla'

                  --
                  Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. HILFE!

                    Fireball
                    – Informationen zu den Bewertungsregeln

                    Das mit dem Hosten mach ich gleich morgen. Aber nur mal so:
                    Ich habe das hier gefunden: http://ago.tanfa.co.uk/css/layouts/flexi_floats/
                    Das ist so ähnlich wie meins (left-content). Doch wie machen die das??

                    Fireball

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. HILFE!

                      Struppi Homepage des Autors
                      – Informationen zu den Bewertungsregeln

                      Ich habe das hier gefunden: http://ago.tanfa.co.uk/css/layouts/flexi_floats/
                      Das ist so ähnlich wie meins (left-content). Doch wie machen die das??

                      Steht doch im Quelltext.

                      Struppi.

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. HILFE!

                        Fireball
                        – Informationen zu den Bewertungsregeln

                        Steht doch im Quelltext.

                        Struppi.

                        Doch der ist rießig und ich verstehe ihn nicht!

                        Fireball

                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. HILFE!

                          Gunnar Bittersmann Homepage des Autors
                          – Informationen zu den Bewertungsregeln

                          @@Fireball:

                          nuqneH

                          Doch der ist rießig

                          Ein weiser Rieße.

                          Qapla'

                          --
                          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln

                          1. HILFE!

                            Fireball
                            – Informationen zu den Bewertungsregeln

                            Ich komm echt nicht weiter.
                            Kann mir niemand mal erklären was ich an meinem Code ändern muss?

                            Fireball

                            Beitrag melden
                            –
                            Informationen zu den Bewertungsregeln

                          2. HILFE!

                            apsel Homepage des Autors
                            – Informationen zu den Bewertungsregeln

                            Om nah hoo pez nyeetz,

                            Ein weiser Rieße.

                            der weiße Helge.

                            Matthias

                            --
                            Beitrag melden
                            –
                            Informationen zu den Bewertungsregeln

                            1. HILFE!

                              Fireball
                              – Informationen zu den Bewertungsregeln

                              Om nah hoo pez nyeetz,

                              Ein weiser Rieße.

                              der weiße Helge.

                              Matthias

                              Ich glaube ich mache mal eine Neue Nachricht aus, das versandet hier total!

                              Fireball

                              Beitrag melden
                              –
                              Informationen zu den Bewertungsregeln

                              1. HILFE!

                                Gunnar Bittersmann Homepage des Autors
                                – Informationen zu den Bewertungsregeln

                                @@Fireball:

                                nuqneH

                                Ich glaube ich mache mal eine Neue Nachricht aus, das versandet hier total!

                                Ich glaube nicht.

                                Qapla'

                                --
                                Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                                Beitrag melden
                                –
                                Informationen zu den Bewertungsregeln

                    2. HILFE!

                      Gunnar Bittersmann Homepage des Autors
                      – Informationen zu den Bewertungsregeln

                      @@Fireball:

                      nuqneH

                      Doch wie machen die das??

                      Unflexibel. Wenn drei Boxen nicht nebeneinander in den Viewport passen, werden sie nicht untereinander dargestellt, sondern horizontales Scrollen erzwungen.

                      Vielleicht sind die A-List-Apart-Artikel Multi-Column Layouts Climb Out of the Box und In Search of the Holy Grail was für dich.

                      Qapla'

                      --
                      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

    2. CSS-Layout

      Fireball
      – Informationen zu den Bewertungsregeln

      Nachtrag:
      Noch ein Problem tritt auf:
      height: 95%; in darstellung.css funktioniert mit doctype nicht mehr? Mit was ist es zu ersetzten???

      Fireball

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. CSS-Layout

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Fireball:

    nuqneH

    weißer Balken, der weg soll!

    Ich vermute, „Unterlänge“ ist dein Suchbegriff. Ich hab aber keine Lust, dein Problem nachzubauen.

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln