Will einfach nicht richtig zentriert

[Karl das kahle Moorhuhn]

:-( :evil: RAAAAHH regt es mich auf. CSS will einfach nicht wie ich will.

im angehängten Bild richtig.jpg, seht ihr wie es sein soll, im anderen bild, wie es angezeigt wird. Ich will innerhalb des unteren grünen Balken ein Feld haben, mit variablen Inhalt, der zufällig generiert wird. Da es zufällig ist, kann ich auch nicht vorher sagen, wie lang es werden soll, d.h. das weiße Teil soll eine variable Breite haben und sich dem Inhalt anpassen. Damit das weiße Feld nicht kantig ist, soll es jedoch abgerundete Ecken haben, also kleb ich an beide Seite kleine bilder dran. Aber es will einfach net so aussehen wie gewollt, obwohl ich schon alles mögliche probiert habe.

Mein größtes Problem ist, dass man ein blockelement nur mit margin zentrieren kann, margin funktioniert jedoch nur mit einer Breitenangabe, die es jedoch nicht gibt, da variabler Inhalt. Vielleicht kann jemand da tricksen und mir verraten wie man es mit KORREKTEM CSS macht.

Hier noch der Code:

    <div id="bottom">
    
      <div id="info">
      
        <div id="infopicleft">
        
        </div> 
        
        <p id="infocontent">
        
          Schon gewusst???:
        
        </p>
      
        <div id="infopicright">
        
        </div>
    
      </div>
    
    </div>

und der css code:

#bottom {
  background-image:url(green.gif); 
  position:absolute; bottom:0px; left: 0px; 
  height: 15px; width:100%; padding: 10px;}

#info {
  background-color: #999999; margin: auto; 
  font-size: 10px; 
  padding-left: 5px; padding-top: 1px; 
  height: 17px; width: 200px;}

#infopicleft {
  background-image:url(left.gif); 
  height: 17px; width: 8px; 
  position:absolute; top: 0px; left: 0px;}

#infocontent {
  text-align: center; background-color: #ffffff; 
  height: 17px; margin: auto; 
  position:absolute; top: 0px; left: 8px;}

#infopicright {
  background-image:url(right.gif); 
  height: 17px; width: 8px; 
  position:absolute; top: 0px; right: 0px;}

das graue feld zeigt, wo der inhalt angezeigt werden sollte. Wieso sind denn die unter info liegenden elemente nicht in dem Bereich von info angezeigt???

 

[JumperII]

Ich weiß nicht, was Du willst, #info besagt, dass der Inhalt linksbündig (abgeleitet von davor und davor von den Browser) ausgegeben werden soll. Der Inhalt Deiner weißen Box (#infocontent) wird zwar zentriert, aber da die weiße Box keine Größe größer dem Text hat, wirkt es nicht. Die Box selber wird durch #info Vorgaben nicht zentriert.

Ergo .. CSS ist Unschuldig ... :twisted:

Gruß,
Jumper, the II.

 

[Karl das kahle Moorhuhn]

wie würdest du denn die info box zentrieren. Denn wie ich es gelernt hab, kann man ein blockelement durch margin: auto plus breite zentrieren

#info {margin: auto; width: ???px;}

text-align: center ist nur für inline elmente gedacht und nicht für blockelemente. Das info zentriert wird, beweist ja auch der graue kasten in der mitte von falsch.jpg. Aber die unter info angeordneten elemente werden komischerweise außerhalb angezeigt, was unlogisch ist, aber mal nun so ist

 

[JumperII]

Ok, jetzt verstehe ich erst, was Du willst ;-) Am einfachsten, die Seitenbegrenzer per float links und rechts positionieren und den Text-Inhalt normal nehmen .... ansonsten hast Du immer die Bilder durch die absolute Positionierung links und rechts am Rand kleben ...

Gruß,
Jumper, the II.

 

[Karl das kahle Moorhuhn]

du siehst diesen grauen kasten in der mitte? Ja? Gut, darein soll: LinkeBegrenzung+Text+RechteBegrenzung. Wollen Sie aber nicht. Außerdem hat float bei mir nicht richtig funktioniert, hab schon probiert, hebt aber irgendwie das Zentralisieren auf. Aber vielleicht meinst du ja das richtige und ich steh auf dem Schlauch. Poste mal bitte den Code, wie du meinst, wie es gehen sollte.

Ok, bin inzwischen einen Schritt weiter. Das weiße Feld wie es später aussehen soll, habe ich bereits, nur ein Problem: Es weigert sich bis jetzt erfolgreich sich zentrieren zu lassen. Sowohl auf margin: auto, wie auch auf text-algin: center spricht es nicht an, jemand ne idee?

#info { 
width: auto; height:17px; 
margin: auto; text-align: center;
position: absolute;
}

#infopicleft { 
float: left; 
}

#infocontent { 
float: left;
height: 15px; font-size: 10px; 
background-color: #ffffff; 
margin-right: -3px; padding-top: 2px;
}

#infopicright 
{
display: inline; 
}

Bilder sind nun normal eingebunden und nicht als hintergrundbilder wie oben

 

[JumperII]

Hallo, ungefähr so:

<html>
 <head>

<style>
#bottom {
  background-image:url(green.gif); 
  position:absolute; bottom:0px; left: 0px; 
  height: 15px; width:100%; padding: 10px; margin:0;
  text-align: center;
}

#info {
  background-color: #999999; margin: auto; 
  font-size: 10px; 
  height: 17px; width: 200px;
  padding: 0; margin: 0;
}

#infopicleft {
  background-image:url(left.gif);
  height: 17px; width: 8px; 
  float: left;
  padding: 0; margin: 0;
}
#infopicright {
  background-image:url(right.gif); 
  height: 17px; width: 8px; 
  float: right;
  padding: 0; margin: 0;
}

#infocontent {
  text-align: center; background-color: #ffffff; 
  height: 17px; width: 200px;
  padding: 0; margin: 0;
}


</style>
 </head>
 <body style="width: 100%"> 
   
    <div id="bottom">
    
      <div id="info">             
       <div id="infocontent">  
        <div id="infopicleft"></div> 
        <div id="infopicright"></div>
    
          Schon gewusst???:

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

Eine grundsätzliche Alternative wäre dazu das :-)

<html>
 <head>

<style>
#bottom {
  background-image:url(green.gif); 
  position:absolute; bottom:0px; left: 0px; 
  height: 15px; width:100%; padding: 10px; margin:0;
  text-align: center;
}

#info {
  background-color: #999999; margin: auto; 
  font-size: 10px; 
  height: 17px; width: 200px;
  padding: 0; margin: 0;
}

#infopicleft {
  height: 100%; width: 8px; 
  float: left;
  padding: 0; margin: 0;
}
#infopicright {
  height: 100%; width: 8px; 
  float: right;
  padding: 0; margin: 0;
}

#infocontent {
  text-align: center; background-color: #ffffff; 
  height: 17px; width: 200px;
  padding: 0; margin: 0;
}
.img_full {
  width: 100%; height: 100%
}
</style>
 </head>
 <body style="width: 100%"> 
   
   <div id="bottom">
    
     <div id="info">             
       <div id="infocontent">
         <div id="infopicleft"><img class="img_full" src="left.gif"></div>
         <div id="infopicright"><img class="img_full" src="right.gif"></div>
         Schon gewusst???:
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0
        </div>
      </div>
    </div>  
  </body>
</html>

Gruß,
Jumper, the II.

 

[Karl das kahle Moorhuhn]

Erstmal vielen Dank für die Mühe, die du dir gemacht hast, aber leider muss ich dir trotzdem sagen, dass es nicht war, was ich suchte, denn wie schon in meinen vorherigen Posts zu lesen, hat das Inhaltsfeld keine feste Breite und ich hatte fälschlicherweise die version gepostet, wo ich zu testzwecken 200px angegeben hatte, um überhaupt was zu bekommen.

Ich habe nach stundenlangem googlen eine Möglichkeit gefunden, wie man es lösen kann, bei der ich jedoch ein bisschen bauchweh hab, da es nicht ganz korrektes css ist. Ich setze einfach den body auf text-align: center; und schon hab ich das gewünschte ergebnis. Den Rest muss ich dann einzelnd wieder anpassen. Wenn noch jemand ne bessere Lösung einfällt, bitte sagen.

EDIT: Leider musste ich feststellen, dass das Ergebnis doch nicht wie erwünscht ist. Die weiße Box ist nicht zentriert ausgerichtet, sondern STARTET nur in der mitte des bildschirms. Ich bin also weiterhin auf eure Hilfe angewiesen

 

[JumperII]

Ich hätte jetzt nur noch ne PHP-Lösung im Kopf ... Einfach die anzuzeigende Fläche unten als Bild zusammenrechnen und ausgeben .....

Gruß,
Jumper, the II.

 

[Karl das kahle Moorhuhn]

Wie meinst du das mit PHP. Mit PHP kann man doch nicht die Breite des Browserfensters bestimmen

 

[JumperII]

Aber Du kannst die Weise Fläche mit den abgerundeten Seitenteilen und der Schrift drinnen als Bild erstellen. Die notwendige Größe des Bildes kann man ausrechnen anhand des Textes selber .... Ergo hast Du aus HTML Sicht nur noch ein Bild, welches Du problemlos zentriert bekommen solltest.

Gruß,
Jumper, hte II.

 

[Karl das kahle Moorhuhn]

Dazu braucht man aber eine Schriftart mit gleichmäßigem Zeichenabstand, und die sind alle hässlich. Oder ich muss vorher schauen, wieviel es braucht und dementsprechen eingeben, dann kann ich aber z.B. nicht mehr per RSS dynamisch einbinden

Ich scheiß jetzt einfach auf zentriert und mach einen Abstand von 35% von rechts. Sieht ungefähr zentral aus.