john: blaues feld

hey! ich hab das so gemacht, weiß aber auch, dass es falsch ist.
<style> #a1 { background-color:blue; width:33% } </style>
<div id="a1">Hello</div>
wie kann ich das richtig machen? ich will ein blaues feld haben, von dem ich höhe und breite bestimmen kann, und in das ich einen kurzen text schreiben kann. und ich will dann 3 solcher felder mit text nebeneinander stellen...wie kann ich das richtig machen?

  1. Hi,

    wie kann ich das richtig machen?

    was ist denn bisher falsch?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hello out there!

      <style>

      was ist denn bisher falsch?

      ERROR: Required attribute "type" missing. [Cheatah] ;-)

      See ya up the road,
      Gunnar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  2. Soll die Höhe deiner Felder abhängig von der Breite sein?

    Ansonsten :

    <html>
    <head>

    <title>3xBlue</title>

    <style type="text/css" media="screen">

    body,html{
       margin:0;
       padding:0;
    }

    div.column{
       margin:0 0.3% 0 0;
       padding:0;
       float:left;
       width:33%;
       background-color:#0000FF;

    }
    </style>
    </head>
    <body>

    <div class="column">
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    </div>

    <div class="column">
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    </div>

    <div class="column">
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    test, test, test, test, test, test
    </div>

    </body>
    </html>

    cu,
    Ikaros

    1. hey danke hab das jetzt so gemacht....aber jetzt hab ich noch ein problem...mein text is nur einzeilig und ich hab auch eine Höhe des blauen hintergrundes angegeben...ich möchte aber, dass der text rechts unten steht, jetzt steht er links oben. wo kann ich das vertical-align:bottom hineinschreiben damit der text nach unten wandert, und wo das text-align:right (falls das hier überhaupt passt)

      1. Hello out there!

        wo kann ich das vertical-align:bottom hineinschreiben

        Hinschreiben kannst du es überall ...

        damit der text nach unten wandert,

        ... nur wirkt es nicht überall [CSS2]

        See ya up the road,
        Gunnar

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
        1. Und daraus muss ich schlauer werden? vertical-align wird erst ganz zum schluss erwähnt, und da steht net wirklich was drinn was mir hilft, zumindest erkenne ich die Hilfe nicht...

          1. Hello out there!

            Und daraus muss ich schlauer werden? vertical-align wird erst ganz zum schluss erwähnt,

            ?? Am Schluss? Ich hatte den URI doch mit fragment identifier versehen.

            und da steht net wirklich was drinn was mir hilft,

            Es steht aber drin, warum es nicht hilft:

            "'vertical-align' [...] Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente"

            See ya up the road,
            Gunnar

            --
            „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
          2. Hi John.

            Was mich interessiert ist ...

            • ist der Text den du in die Felder packst dynamisch und wenn ja,
                variiert er stark in seinem Umfang?

            • ist ist die Höhe des Textfeldes fix oder darf Sie nach unten erweitert
                werden?

            1. Das is mein gesammter Quelltext bis jetzt...
              rechts steht die schrift schon aber noch nicht unten...die höhe der blauen felder sollte schon ca. so groß sein wie ich sie hier angegeben habe...und cool wär auch, wenn ich dann das ganze feld als link nehmen könnte, nicht nur die Schrift

              <html>
              <head>
              <title>Bauer</title><!--Marques-->
              <link rel="stylesheet" href="form.css" type="text/css">
              <style type="text/css">
               body { background-image:url(back.jpg); margin-left:0px; margin-right:0px }
               #l1 { width:150px; position:relative; margin-top:3px; margin-bottom:3px; margin-left:150px; }
               .b1 { background-image:url(back2.jpg); margin-right:0px; margin-left:0px }
               div.column { margin: 0 0.1% 0 0; text-align:bottom;
                 padding:0; text-align:right;
                 float:left; height:40px;
                 width:33%; background-color:#0000FF; }
               #t1 { font:bold 130% Arial,sans-serif }
              </style>
              </head>
              <body>
              <div class="b1"><img src="logo3.gif" id="l1"></div>
              <font id="t1"><div class="column">Bauer1</div>
              <div class="column">Bauer2</div>
              <div class="column">Bauer3</div></font>
              </body>
              </html>

              1. Hello out there!

                Das is mein gesammter Quelltext bis jetzt...

                Sollte es aber nicht sein, die DOCTYPE-Angabe fehlt.

                rechts steht die schrift schon aber noch nicht unten...

                Das sollte dich nicht verwundern, nachdem ich dir bereits zweimal gesagt habe, dass

                div.column { text-align:bottom; }

                nicht wirkt.

                Du könntest mit 'line-height' herumspielen.

                die höhe der blauen felder sollte schon ca. so groß sein wie ich sie hier angegeben habe...

                Nö, sie sollten sich dem Inhalt anpassen; sonst läuft der Text bei größerer Schrift aus der blauen Box heraus.

                und cool wär auch, wenn ich dann das ganze feld als link nehmen könnte, nicht nur die Schrift

                div.column a { display: block; }

                <font id="t1"><div class="column">Bauer1</div>
                <div class="column">Bauer2</div>
                <div class="column">Bauer3</div></font>

                'font' solltest du nicht nutzen, auch nicht, um etwas selektieren zu können. HTML ist eine Beschreibungssprache für die Struktur einer Webseite; Tags für die Darstellung haben darin nichts zu suchen. Du kannst die Schriftgröße auch für die Elemente der Klasse "column" angeben.

                Das Markup hat Divitis. Warum zeichnest du die Navigations_liste_ nicht als solche aus?

                See ya up the road,
                Gunnar

                --
                „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
      2. Hello out there!

        [CSS2]

        Hat die Forumsoftware was gegen '|' im URI?

        [CSS2]

        Sieht so aus. Und recht hat sie. [RFC3986]

        See ya up the road,
        Gunnar

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  3. Hello out there!

    und ich will dann 3 solcher felder mit text nebeneinander stellen...wie kann ich das richtig machen?

    Mir der 'float'-Eigenschaft.

    Bedenke, dass 33% schon zu breit sein kann, denn zu den widths kommen noch margins und paddings hinzu. (Box-Modell, [CSS2 §8])

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  4. hi,

    hey! ich hab das so gemacht, weiß aber auch, dass es falsch ist.
    <style> #a1 { background-color:blue; width:33% } </style>
    <div id="a1">Hello</div>
    wie kann ich das richtig machen?

    In dem du erst mal überlegst, welches HTML-Element die Struktur der Inhalte/Daten, die du auszeichnen willst, am besten wiedergibt.

    Formatierung kommt immer erst danach.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hi,

      hey! ich hab das so gemacht, weiß aber auch, dass es falsch ist.
      <style> #a1 { background-color:blue; width:33% } </style>
      <div id="a1">Hello</div>
      wie kann ich das richtig machen?

      In dem du erst mal überlegst, welches HTML-Element die Struktur der Inhalte/Daten, die du auszeichnen willst, am besten wiedergibt.

      Formatierung kommt immer erst danach.

      gruß,
      wahsaga

      \                       /
       \                     /
        \ Anstandssimulator /
        /                   \  /                     \ /                       \

      Du solltest dir Gedanken über die Semantik deine
      Auszeichner machen bevor du dir Gedanken über die
      Formatierung machst. Ein DIV-Container ist nicht
      immer die richtige Wahl da man sonst auch schnell
      Gefahr läuft eine semantikfreie Div-Suppe zu
      produzieren.

      MFG
      wahsaga

      1. hi,

        \ Anstandssimulator /

        Wenn du den für nötig hältst -

        MFG
        wahsaga

        • dann betreibe ihn aber bitte unter deiner eigenen Flagge.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Ok sorry.

          Anstandssimmulator ist eigentlich eh Falsch gewählt.
          Es sollte nur als Anregung verstanden werden den
          Informationsgehalt der Posts zu erhöhen.
          Konstruktive Vorschläge und Erklärungen bringen
          dem Fragen deutlich mehr und werten die
          das Forum damit deutlich auf.

          mfg
          Ikaros