l34d: übereinanderlegen

hi,
Ich bekomme irgendwie den Text nicht richtig ausgerichtet. Ich will diesen genau über eine blaue Fläche platzieren, genau das der Text dort reinpasst. Die Blaue Fläche habe ich per Klasse eingefügt:

.BUhrDat {background-image: url(DatumUhrzeitK.png); background-repeat: no-repeat; margin-top: 80px; margin-left: 575px; width:104px; height:35px; z-index:2;}

Ich hab also die Klasse mit div... aufgerufen. In dem Div hab ich dann einen Text mit bestimmten Ausrichtungswerten angegeben. (Beispielwerte bei Margin, hab noch nicht die perfekten Werte raus da ich es eben  noch nicht ausprobieren kann)

<div class="BUhrDat">  
<p style="margin-top:700px margin-left:150px">05.03.2010  
3:30pm</p>  
</div>

Ich hab vorher mit Z-Index rumgewerkt und versucht zwei Klassen (die eine mit Text und die andere Klasse mit der Blauen Fläche) übereinanderzulegen mit wenig erfolg.

Bleibt mir nur die Möglichkeit die Blaue Fläche zu vergrößern, sodass der Text reinpasst?

  1. Hallo,

    Ich bekomme irgendwie den Text nicht richtig ausgerichtet. Ich will diesen genau über eine blaue Fläche platzieren, genau das der Text dort reinpasst.

    das hört sich an, als wolltest du einfach nur einem Textabsatz eine blaue Hintergrundfarbe geben. Aber so ganz werde ich aus deiner "Erklärung" nicht schlau.

    .BUhrDat {background-image: url(DatumUhrzeitK.png); background-repeat: no-repeat; margin-top: 80px; margin-left: 575px; width:104px; height:35px; z-index:2;}

    Ein Hintergrundbild? Okay ...

    <div class="BUhrDat">

    <p style="margin-top:700px margin-left:150px">05.03.2010
    3:30pm</p>
    </div>

      
    Nenee, das sieht nicht gut aus. Dein div-Container ist nur 104px breit und 35px hoch, und der darin befindliche Textabsatz soll 700px Rand nach links und 150px nach oben haben? Die Maße passen doch überhaupt nicht zusammen. Außerdem ist das div-Element vermutlich überflüssig.  
      
    
    > Ich hab vorher mit Z-Index rumgewerkt und versucht zwei Klassen (die eine mit Text und die andere Klasse mit der Blauen Fläche) übereinanderzulegen mit wenig erfolg.  
    > Bleibt mir nur die Möglichkeit die Blaue Fläche zu vergrößern, sodass der Text reinpasst?  
      
    Ich hab eine bessere Idee: Versuche nochmal, dein Anliegen ganz einfach zu beschreiben. Und zwar IN WORTEN, ohne irgendwelchen Code zu erwähnen. Mach meinetwegen eine Skizze. Mir ist nämlich nicht klar, was du eigentlich willst.  
      
    So long,  
     Martin  
    
    -- 
    Die letzten Worte des Fallschirmspringers:  
    ELENDE SCHEISSMOTTEN!!  
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    
    1. Hallo,

      Ich bekomme irgendwie den Text nicht richtig ausgerichtet. Ich will diesen genau über eine blaue Fläche platzieren, genau das der Text dort reinpasst.

      das hört sich an, als wolltest du einfach nur einem Textabsatz eine blaue Hintergrundfarbe geben. Aber so ganz werde ich aus deiner "Erklärung" nicht schlau.

      .BUhrDat {background-image: url(DatumUhrzeitK.png); background-repeat: no-repeat; margin-top: 80px; margin-left: 575px; width:104px; height:35px; z-index:2;}

      Ein Hintergrundbild? Okay ...

      <div class="BUhrDat">

      <p style="margin-top:700px margin-left:150px">05.03.2010
      3:30pm</p>
      </div>

      
      >   
      > Nenee, das sieht nicht gut aus. Dein div-Container ist nur 104px breit und 35px hoch, und der darin befindliche Textabsatz soll 700px Rand nach links und 150px nach oben haben? Die Maße passen doch überhaupt nicht zusammen. Außerdem ist das div-Element vermutlich überflüssig.  
      >   
      > > Ich hab vorher mit Z-Index rumgewerkt und versucht zwei Klassen (die eine mit Text und die andere Klasse mit der Blauen Fläche) übereinanderzulegen mit wenig erfolg.  
      > > Bleibt mir nur die Möglichkeit die Blaue Fläche zu vergrößern, sodass der Text reinpasst?  
      >   
      > Ich hab eine bessere Idee: Versuche nochmal, dein Anliegen ganz einfach zu beschreiben. Und zwar IN WORTEN, ohne irgendwelchen Code zu erwähnen. Mach meinetwegen eine Skizze. Mir ist nämlich nicht klar, was du eigentlich willst.  
      >   
      > So long,  
      >  Martin  
      
      »»  
        
      Ok ich hab hier mal ein Bild gemacht. Die Blauefläche wird per Klasse aufgerufen, den Text hab ich so hingeschrieben. Ich will jetzt das ich den Text der blauen Fläche anpassen kann. Ich will ihn zentrierter.  
        
      ![Bild Überlappung](http://s7.directupload.net/file/d/2938/c52w2duo_jpg.htm)  
        
      http://s7.directupload.net/file/d/2938/c52w2duo\_jpg.htm
      
      1. Hi,

        Hallo,
        [...]
        So long,
        Martin

        bitte zitiere nicht das ganze Vorposting, sondern nur das, was für den Zusammenhang notwendig ist.

        Ok ich hab hier mal ein Bild gemacht. Die Blauefläche wird per Klasse aufgerufen, den Text hab ich so hingeschrieben. Ich will jetzt das ich den Text der blauen Fläche anpassen kann. Ich will ihn zentrierter.

        Ja, dann mach das doch. Gib dem p-Element eine feste Größe, nämlich die des Bildes, gib ihm außerdem das Bild als Hintergrund. Setze den Text dann zentriert (text-align:center), und justiere die vertikale Position mit padding-top. Das div-Element als Container braucht du dann tatsächlich nicht.

        Bedenke aber, dass die Schrift nicht bei jedem Betrachter in der gleichen Größe und mit den gleichen Proportionen erscheinen muss wie bei dir. Dein Bild zeigt, dass schon mit den von dir gewählten Proportionen der blaue Fleck im Hintergrund zu klein ist.

        Bild Überlappung

        Wenn du schon ein Bild einbindest, solltest du auch ein Bild verlinken, und nicht ein vollständiges HTML-Dokument:

        Ciao,
         Martin

        --
        Lieber blau machen, als sich schwarz ärgern.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(