jam00: Überschrift breitet sich zu weit aus

Hallo Leute,

Ich habe ein Problem mit HTML und CSS. Ich habe eine Überschrift und eine Box. Die Überschrift soll Zentriert sein, und die Box in der GLEICHEN Zeile Rechts sein. Dies Funktioniert aber nicht, denn die Überschrift breitet sich über die ganze Breite aus wodurch die Box nicht nach oben kann.

Gibt man dem Text ein float:left dann geht es zwar aber dann ist der Text nichtmehr zentriert.
Gibt man dem Text eine feste größe geht es auch aber dann ist das ganze ja nicht variabel zu benutzen und man muss die größe immer verändern.

  1. Hi

    Gibt man dem Text eine feste größe geht es auch aber dann ist das ganze ja nicht variabel zu benutzen und man muss die größe immer verändern.

    Nicht ganz sicher was du willst, aber klingt nach einem Fall für position:inline-block;

    1. »»klingt nach einem Fall für position:inline-block;

      Sorry, habe das zentriert anscheinend überlesen.

      Eine Möglichkeit wäre, die Box im html vor die Überschrift zu schieben, also

      <div id="main">  
      			<div id="box"></div>  
      			<h1>Hallo Welt!</h1>  
        
      			  
      		</div>
      

      Und dann der box ein float:right; zu verpassen.

      Der div#text ist nicht notwendig, das text-align:center; kannst du auch dem h1 verpassen.

      Gruss

    2. »»klingt nach einem Fall für position:inline-block;

      Sorry, habe das zentriert anscheinend überlesen.

      Eine Möglichkeit wäre, die Box im html vor die Überschrift zu schieben, also

      <div id="main">  
      			<div id="box"></div>  
      			<h1>Hallo Welt!</h1>  
        
      			  
      		</div>
      

      Und dann der box ein float:right; zu verpassen.

      Der div#text ist nicht notwendig, das text-align:center; kannst du auch dem h1 verpassen.

      Gruss

      1. Auf den ersten blick sah das wunderbar aus, doch dann habe ich bemerkt das sich die Überschrift dann verschiebt. Sie geht in die mitte zwischen links und dem Block anstadt Links un Rechts :(

        Um es zu verdeutlichen habe ich die Webseite http://www.2light.org/test/ nochmal geändert.

        1. Sie geht in die mitte zwischen links und dem Block anstadt Links un Rechts :(

          Natürlich, ich nahm an das wäre beabsichtigt. Welches Verhalten bezweckst du denn? Du sprichts ja auch davon, dass das ganze variabel sein soll. Was variiert denn? Und was soll wo stehen bleiben?

          1. Also die Überschrift soll immer in der Mitte der Kompletten Webseite bleiben. Der Text der Überschrift kann Variieren und damit die Größe des Textes. Der Kasten soll immer ganz rechts sein und kann auch vaiieren, zur not dann ich diesen aber auch festlegen

            1. Der Kasten soll immer ganz rechts sein und kann auch vaiieren, zur not dann ich diesen aber auch festlegen

              Was für Inhalt kommt denn da rein? Wird das eine Art kleine "Info-Box"?

              1. Nein, in den Kasten sollen Nochmal kleine Farbie Kästchen die Verlinkt werden und mit denen man die Farbe der Webseite auswählen kann

                1. Nein, in den Kasten sollen Nochmal kleine Farbie Kästchen die Verlinkt werden und mit denen man die Farbe der Webseite auswählen kann

                  Okay, also wirds keine Spalte oder ähnliches. Dann positioniere die Box doch einfach absolut, das ist am einfachsten. (position:absolute;right:0px;top:0px;)

                  1. aber dann ist der Kasten ja links und nicht rechts und wenn ich ihn mit left nach rechts machen würde, dann würde er sich ja nur bei einer bestimmten Browserfenstergröße an der richtigen Posi sein.

                    1. aber dann ist der Kasten ja links und nicht rechts und wenn ich ihn mit left nach rechts machen würde, dann würde er sich ja nur bei einer bestimmten Browserfenstergröße an der richtigen Posi sein.

                      Was? Nein nichts da, der klebt dann wunderschön immer in der rechten oberen Ecke. Probiers aus.

                      1. Oh ja stimmt super, vielen dank :)