dani: <H1> ausrichten

SELF-Forum

<H1> ausrichten

dani
– Informationen zu den Bewertungsregeln

Einen schönen Sonntag Abend!

Die Webseite, die ich baue hat folgenden (groben Aufbau):

--------haupt-container---------------
|hauptnavi  |subnavi |   content      |
|           |        |    <H1></H1>   |
|           |        |                |
|           |        |                |
|           |        |                |
|           |        |                |
|           |        |                |
|           |        |                |
---------------------------------------

arbeiten tue ich in dem Fall mit divs. der haupt-container umschließt die inneren drei div-container für hauptnavi, subnavi, content.

Jetzt zu meiner Frage: wenn ich im content-container ganz normal eine Überschrift mit H1 (etc.) einfüge, kann ich dieses H1-Tag mit margin-left/top/... ausrichten? Und an welches übergeordnete Element ist die Ausrichtung geknüpft?

Ich war der Meinung, da H1 im content-container ist, dass es sich auch an diesem ausrichtet (z.B. mit margin-left), aber das tut es nicht.
Hat H1 überhaupt so ein (margin) Attribut? Konkret wollte ich versuchen einen Abstand von 10px zum linken Rand (von content) zu erhalten, ich muss aber 310px angeben, damit es ~ 10px Abstand hat. (also richtet es sich doch vom linken Rand des Browsers (nicht von content) aus, oder???

Vielen Dank schon mal für eure Antworten am Sonntag-Abend! :-)

LG,

Dani

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. <H1> ausrichten

    Bio
    – Informationen zu den Bewertungsregeln

    Sup!

    Hast Du mal einen Test-Case?

    Gruesse,

    Bio

    --
    Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs, and the
    Universe trying to produce bigger and better idiots. So far, the
    Universe is winning.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. <H1> ausrichten

      dani
      – Informationen zu den Bewertungsregeln

      Hi Bio,

      hier der html-code:

      <html>
      <head>
       <title></title>
       <link rel="stylesheet" type="text/css" href="http://localhost/daniela/main.css">
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      </head>
      <body>
      <div id="container">
       <div id="mainnavi">

      <a class="mmenu" href ="http://localhost/daniela/index.php?lang=de">STARTSEITE</a>
       </div>

      <div id="subnavi">
        <a class="langselected" href="index.php?lang=de">DE</a>
        <a class="lang" href="index.php?lang=en">EN</a>
        <a class="lang" href="index.php?lang=es">ES</a>

      <!-- weitere untermenüs hier -->
       </div>

      <div id="content">
        <h1>ÜBERSCHRIFT</h1>
       </div>
      </div>
      </body>
      </html>

      und css:

      html, body { height:100%; width:100%; }

      body
      {
       margin-top:5px; margin-left:5px;
       font-family:Arial,sans-serif;
       font-size:14px; color:#000000;
       background-color:#ffffff; letter-spacing:1px;
      }

      #container
      {
       height:100%; width:800px;
       top:0px; left:0px; display:inline;
      }

      #mainnavi
      {
       height:100%; width:160px;
       float:left; background-color:#808080;
       color:#ffffff;
      }

      #subnavi
      {
       height:100%; width:150px;
       background-color:#c0c0c0;
       color:#000000; float:left;
      }

      #content
      {
       top:0px; left:0px; width:480px; height:100%;
       padding:10px;
      }

      h1 { font-size:21px; margin-left:310px; width:480px; }

      ---

      Ich hab jetzt im h1 margin-left mit 310px angegeben! Problem: im Mozilla 1.6 richtet mir die h1 mit 10px Abstand vom linken Rand des content-container aus, im IE (ich weiß, der macht immer Probleme oder was er nicht soll... *grrrrr*) ist h1 310px vom linken Rand des content-container entfernt. Darum die Frage, an welchem übergeordneten Element sich h1 denn nun tatsächlich ausrichten _sollte_!

      Danke!

      MfG,

      Dani

      PS: hab leider keine URL zur Vorschau, da ich lokal arbeite.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. <H1> ausrichten

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        #container
        {
        height:100%; width:800px;
        top:0px; left:0px; display:inline;
        }

        das ist mehrfacher Unsinn:
        height und width gibt es nicht bei inline-elementen
        und top und left ohne position gibt es auch nicht

        #content
        {
         top:0px; left:0px; width:480px; height:100%;
         padding:10px;
        }

        auch hier sind die positionsngaben sinnlos.
        gebe #content _keine_ width aber ein margin-left entsprechend dem gewünschten abstand zum linken rand von #container.

        freundliche Grüße
        Ingo

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. <H1> ausrichten

          dani
          – Informationen zu den Bewertungsregeln

          Hallo Ingo,

          Danke für Deine Antwort, werd es gleich ändern und gucken was bei rauskommt.

          Im IE stimmt der Abstand zum linken Rand vom div-container, in allen anderen Browsern nicht. Entwickeln tu ich mit Mozilla 1.6 und da muss ich den Abstand vom linken Rand des Browser-Fensters angeben.

          Jetzt ändere ich das mal und gib Rückmeldung.

          Gruß,

          Dani

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. <H1> ausrichten

          dani
          – Informationen zu den Bewertungsregeln

          Hi,

          wie kann ich es denn erreichen, dass die div´s genauso hoch sind wie das Browser-Fenster? Ich hab jetzt alles Positionsangaben und Breiten-/Höhenangaben rausgenommen. Ist auch alles geblieben wie es vorher war, außer --> die Div´s sind nur noch so hoch wie der Inhalt der in den Div´s steht.

          Das sieht jetzt z.B. so aus:

          #container
          {
            margin-right:10px; margin-bottom:0px;
            margin-top:0px; margin-left:0px;
            display:inline;
          }

          #mainnavi
          {
            margin:0px;
            float:left; background-color:#808080;
            color:#ffffff;
          }

          Und wieso gibt trotzdem jeder eine Höhe u. Breite in DIV-Elementen an? So z.B. hier:
          http://www.css4you.de/wsboxmodell/inhalt.htm
          (hoffe das ist Ok, wenn ich kurz darauf verweise...)
          Müsste der CSS-Validator da nicht meckern, wenn das nicht erlaubt ist?
          Danke für die Geduld und Antworten! ;-)
          Viele Grüße,

          Dani

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. <H1> ausrichten

            Ingo Turski Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            Und wieso gibt trotzdem jeder eine Höhe u. Breite in DIV-Elementen an? So z.B. hier:
            http://www.css4you.de/wsboxmodell/inhalt.htm

            verstehe bitte, was INLINE bedeutet: Das Element "fügt sich in die Zeile ein" (ganz grob und bestimmt nicht ganz korrekt übersetzt). Dadurch hat es nur die Höhe und nur die Breite, die sein Inhalt benötigt und explizite Angaben hierzu können nicht berücksichtigt werden.

            Außerdem würde ich nie auf die Idee kommen, ein blocklevel-Element in ein inline-Element zu setzen, auch wenn dies durch Änderung der Display-Eigenschaft eines DIVs valide ist.

            Verzichte also auf die inline-Eigenschaft und versuche es auf dem üblichen Weg:
            div hauptcontainer -> ggfls. width definieren
            div navi1 -> width und float definieren, evtl. margin-left zum hauptcontainer
            div navi2 -> width und float definieren, evtl margin-left zur navi1
            div content -> margin-left definieren (weite der beiden navis zzgl. deren evtl. margins zzgl. eigenmem margin)
            die weite des content-divs geht dann über den restlichen platz im hauptcontainer.

            freundliche Grüße
            Ingo

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. <H1> ausrichten

              dani
              – Informationen zu den Bewertungsregeln

              Hallo Ingo,

              Außerdem würde ich nie auf die Idee kommen, ein blocklevel-
              Element in ein inline-Element zu setzen, auch wenn dies durch
              Änderung der Display-Eigenschaft eines DIVs valide ist.

              Verzichte also auf die inline-Eigenschaft und versuche es auf dem

              ^^^                  !!^^^^^^!!
              Jetzt hab ich verstanden was Du meinst! Also werd ich mich an die Arbeit machen :-) und mein Quelltext genauer unter die Lupe nehmen und lernen. ;-)

              Vielen Dank, viele Grüße,

              Dani

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

            2. <H1> ausrichten

              dani
              – Informationen zu den Bewertungsregeln

              Hallo,

              ich hab es jetzt so gemacht:

              CSS

              html, body { width:100%; height:100%; }

              body
              {
               margin-left:10px; margin-top:10px;
               font-family:Arial,sans-serif;
               font-size:12px; color:#000000;
              }

              #container { width:800px; height:100%; margin:0px; padding:0px; border-style:solid; border-width:1px; }

              #sitemap { width:100%; padding:3px; margin:0px; border-style:solid; border-width:1px; }

              #mainnavi { width:200px; float:left; padding:10px; border-style:solid; border-width:1px; }

              #subnavi { width:150px; float:left; padding:10px; border-style:solid; border-width:1px; }

              #content
              {
               margin-left:350px; margin-right:0px;
               maring-bottom:0px; margin-top:0px;
               padding:10px;
               border-style:solid; border-width:1px;
              }

              h1 { font-size:19px; }

              HTML

              <html>

              <head>
               <title>Dani´s private Homepage</title>
               <link rel="stylesheet" type="text/css" href="./main.css">
              </head>

              <body>

              <div id="container">

              <div id="sitemap">sitemap</div>

              <div id="mainnavi">Hauptmenü</div>

              <div id="subnavi">Untermenüs</div>

              <div id="content"><h1>der content kommt hier rein</h1></div>

              </div>

              </body>

              </html>

              ---
              Sieht schon besser aus! Da kommen natürlich noch DOCTYPE, etc. rein und die Borders kommen weg (Veranschaulichung). ;-)
              Vielen Dank für Deine Hilfe!

              Viele Grüße,

              Dani

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

    2. <H1> ausrichten

      dani
      – Informationen zu den Bewertungsregeln

      Hi,

      in den CSS-Angaben muss bei #content noch display:inline rein, ansonsten, wird es unterhalb angezeigt. Sorry! :-)

      Dani

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln