Ergebnis 1 bis 7 von 7

Thema: Grafik richtig auf Text positionieren

  1. #1
    Teeny
    Registriert seit
    25.04.2007
    Beiträge
    23
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Grafik richtig auf Text positionieren

    Hallo,
    vielleicht könnte sich jemand mal den folgenden Code anschauen und mir auf die Sprünge helfen, was da falsch ist.
    Beim vergrössern/verkleinern des Fensters im Browser
    bleibt der Text "Herzlich Willkommen bla bla
    bla bla. bla bla:"
    einfach an der gleichen Stelle stehen

    Die Bilder head/bg/fuss sind immer schön zentriert in der Mitte.

    Das hätte ich auch gerne mit dem Text ...

    Was bekomme ich das hin???? Bin am Verzweifeln hier ...

    Danke schonmal vorab an die Profis ...


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Unbenanntes Dokument</title> 
    <style type="text/css"> 
    <!-- 
    body { 
     background-image: url(images/Back.jpg); 
     position: inherit; 
    } 
    #box2 { 
     position: absolute; 
     top:249px; 
     left:538px; 
     width:402px; 
     height:127px; 
     z-index:0; 
     font:Arial; 
     font-size:10px; 
    } 
    
    
    --> 
    </style></head> 
    
    
    
    <body> 
    <div id="box2"> 
    <div align="left">Herzlich Willkommen bla bla <br /> 
        bla bla. 
    
          <br /> 
          <br /> 
        bla bla:</div> 
    </div> 
    
    
    
    <table width="914" border="0" align="center"> 
      <tr> 
        <td width="970" height="602" align="center" valign="middle"><div align="center"><img src="images/Head.jpg" alt="head" width="800" height="110" align="absmiddle" /><br /> 
            <img src="images/bild.jpg" alt="bg" width="800" height="400" align="absmiddle" /><br /> 
        <img src="images/Fuss.jpg" alt="fuss" width="800" height="90" align="absmiddle" /></div></td> 
      </tr> 
    </table> 
    <br /> 
    </body> 
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Grafik richtig auf Text positionieren

    also zuerst ist es immer wünschenswert, wenn man die bilder auch zur verfügung gestellt bekommt...
    ist zwar hier nicht zwingend nötig, aber eben doch wünschenswert.
    ansonsten lass die finger von position:absolute, wenn du nicht damit umgehen kannst.
    dann stell ich mir die frage was du mit der tabelle bezwecken willst...

    mit divs is des um längen einfacher.. musste lediglich dein css-wissen erweitern
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Unbenanntes Dokument</title> 
    <style type="text/css"> 
    <!-- 
    body { 
     background-image: url(images/Back.jpg); 
     position: inherit; 
    } 
    #box2 { 
    border:1px solid black;
     width:402px; 
     height:127px; 
     font:Arial; 
     font-size:10px; 
    margin: 110px auto 0 auto;
    } 
    #text{
    width:200px;
    margin: 35px auto 0 auto;
    border:1px solid red;
    }
    #oben{
    width:800px;
    height:110px;
    display:block;
    background:url(images/Head.jpg);
    margin:0 auto;
    border:1px solid blue;
    }
    #mitte{
    width:800px;
    height:400px;
    display:block;
    background:url(images/bild.jpg);
    margin:0 auto;
    border:1px solid green;
    }
    #unten{
    width:800px;
    height:90px;
    display:block;
    background:url(images/Fuss.jpg);
    margin:0 auto;
    border:1px solid blue;
    }
    --> 
    </style></head> 
    
    
    
    <body> 
    
    <div id="oben">
    
    </div>
    <div id="mitte">
    <div id="box2"> 
    <div id="text">
    Herzlich Willkommen bla bla <br /> 
        bla bla. 
    
          <br /> 
          <br /> 
        bla bla:</div> 
    </div>
    </div>
    <div id="unten">
    
    </div>
    
    </body> 
    </html>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Unregistriert
    Gast

    Standard AW: Grafik richtig auf Text positionieren

    Super diese Layout passt ja echt klasse.
    Eines jedoch könntest Du mir noch versuchen zu erklären.
    Was hat es damit auf sich
    -------------------------------------------
    #box2 {
    border:1px solid black;
    width:402px;
    height:127px;
    font:Arial;
    font-size:10px;
    margin: 110px auto 0 auto;
    }
    -------------------------------------------

    Würde es nicht reichen - für Texteingaben, das folgende zu benutzen?
    -------------------------------------------
    #text{
    width:200px;
    margin: 35px auto 0 auto;
    border:1px solid red;
    }

    Wäre nett, wenn Du mir das noch näher bringen könntest ...

    Danke vorab

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Grafik richtig auf Text positionieren

    na des eine is deine box und des andere der darin positionierte text
    wenn du die box nich brauchst lass se weg
    musste danach nur nochma neu die textbox positionieren
    und die ganzen border waren nur zur veranschaulichung...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Unregistriert
    Gast

    Standard AW: Grafik richtig auf Text positionieren

    Klar, das mit den Borders hab ich schon kapiert.

    Könnte ich z.B. auch noch weitere Grafiken in die #box positionieren?
    Das wäre nämlich schon das nächste Thema?....

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Grafik richtig auf Text positionieren

    kannste als hintergundbuild machen...
    http://css4you.de
    oder machste eben ganz normal die bilder rein wie gewohnt...
    positionierung und sowat machste dann wieder via css
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    25.04.2007
    Beiträge
    23
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Grafik richtig auf Text positionieren

    Hallo nochmal und schönes Weihnachtsfest

    ich bin jetzt fast am Ziel, das layout sieht im Internet-Explorer gut aus, in Firefox dagegen nicht ...
    Also muss da noch irgendwas faul sein ...
    Insbesondere der Abschnitt
    #arrow1
    bis
    #text2_orange4
    Ist in Firefox verschoben ...

    Könnte man das eigentlich in einen Abschnitt zusammenfassen mit identischer Positionsangabe? Dann wäre das Problem doch gelöst, oder?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Unbenanntes Dokument</title> 
    <style type="text/css"> 
    <!-- 
    body {
        background-image: url(images/Rahmen.jpg);
        position: inherit;
        font-style: arial;
    } 
    #box2 {
        width:400px;
        height:127px;
        font:Arial;
        font-size:10px;
        margin: 110px auto 0 auto;
    } 
    #text1{
        width:400px;
        margin: -285px auto 0 372px;
        font: arial;
        font-size: 10px;
        color: #FFFFFF;
        font-family: Arial;
    }
    
    #arrow1 {
        width:35px;
        margin: -27px auto 0 350px;
        color: #F08D00;
    }
    
    #text2_orange1{
        width:94px;
        margin: 10px auto 0 372px;
        font: arial;
        font-size: 10px;
        color: #F08D00;
        font-family: arial;
    }
    
    #arrow2 {
        width:35px;
        margin: -32px auto 0 474px;
        color: #F08D00;
    }
    
    #text2_orange2 {
        width:80px;
        margin: -26px auto 0 496px;
        font: arial;
        font-size: 10px;
        color: #F08D00;
        font-family: arial;
    }
    
    #arrow3 {
        width:35px;
        margin: -32px auto 0 573px;
        color: #F08D00;
    }
    
    #text2_orange3 {
        width:95px;
        margin: -26px auto 0 595px;
        font: arial;
        font-size: 10px;
        color: #F08D00;
        font-family: arial;
    }
    
    #arrow4 {
        width:35px;
        margin: -32px auto 0 687px;
        color: #F08D00;
    }
    
    #text2_orange4 {
        width:90px;
        margin: -26px auto 0 708px;
        font: arial;
        font-size: 10px;
        color: #F08D00;
        font-family: arial;
    }
    
    #text3{
        width:400px;
        margin: 15px auto 0 372px;
        font: arial;
        font-size: 10px;
        color: #FFFFFF;
        font-family: Arial;
    }
    
    #text4{
        width:400px;
        margin: 15px auto 0 372px;
        font: arial;
        font-size: 10px;
        color: #FFFFFF;
        font-family: Arial;
    }
    
    #oben{
        width:800px;
        height:110px;
        display:block;
    /*    background:url(images/Head.jpg); */
        margin:0 auto;
    }
    #mitte{
        width:800px;
        height:400px;
        display:block;
    /*    background:url(images/bild.jpg); */
        margin:0 auto;
    }
    #unten{
        width:800px;
        height:90px;
        display:block;
    /*    background:url(images/Fuss.jpg); */
        margin:0 auto;
    }
    
    --> 
    </style>
    </head> 
    
    
    
    <body> 
    
    <div id="oben">
        <img src="images/Head.jpg" width="800" height="110" /></div>
    <div id="mitte">
        <img src="images/Back.jpg" width="800" height="400" />
      <!--             <div id="box2">       -->
    <div id="text1">
    Herzlich Willkommen bla bla.<br /><br />
    
    bla:</div> 
    
    
    <div id="text2_orange1" style="width: 92px">
    text1<br />
    111
      </div> 
    
    <div id="text2_orange2" style="width: 60px">
    text2<br />
    222
      </div> 
    
    <div id="text2_orange3" style="width: 92px">
    text3<br />
    333
      </div> 
    
    <div id="text2_orange4" style="width: 89px">
    text4<br />
    444 
      </div> 
    
    
    <!--
    -->
    <div id="arrow1" style="width: 16px">
        <img src="images/Menu_pfeil.png" width="18" height="28" /> 
      </div> 
    
    
    <div id="arrow2" style="width: 16px">
        <img src="images/Menu_pfeil.png" width="18" height="28" /> 
      </div> 
    
    <div id="arrow3" style="width: 16px">
        <img src="images/Menu_pfeil.png" width="18" height="28" /> 
     </div> 
    
    <div id="arrow4" style="width: 16px">
        <img src="images/Menu_pfeil.png" width="18" height="28" />
      </div> 
    
    
    <div id="text3">
    Test-Text<br />
    Test-Text!
    </div> 
       
    
    <div id="text4">
    Rufen Sie uns an
    </div> 
    
    
    </div>
    <div id="unten">
    
        <img alt="" height="90" src="images/Fuss.jpg" width="800" /></div>
    
    </body> 
    </html>

Ähnliche Themen

  1. Antworten: 9
    Letzter Beitrag: 03.08.2008, 00:56
  2. grafik positionieren...?!?
    Von im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 07.05.2008, 19:50
  3. CSS Text Positionieren
    Von newbie im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.09.2006, 18:04
  4. Grafik frei positionieren.
    Von Bob im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 21.08.2005, 14:00
  5. Grafik innerhalb eines CSS-Layers positionieren
    Von rothom im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 27.05.2004, 12:53

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •