[CSS] Text ist nicht auf Hintergrundbild?

Dieses Thema im Forum "Webdesign" wurde erstellt von Characticl D, 29. Juni 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. Juni 2009
    Text ist nicht auf Hintergrundbild?

    Hi Leute,

    habe das Problem, dass der Text nicht auf meinem Hintergrundbild sitzt.
    Hier mal die CSS und die HTML:

    Code:
    body {
 background-color:#744d1a;
 background-image:url('../images/bg.jpg');
 background-repeat:repeat-x;
 font-family:Verdana,Arial, Helvetica, sans-serif;
 font-size:11pt;
 color:#FFFFFF;
}

#copyright {
 width:800px;
 height:15px;
 margin-top:65px;
 margin-left:auto;
 margin-right:auto;
 font-family:Verdana,Arial, Helvetica, sans-serif;
 font-size:9pt;
 color:#000000;
 text-align:right;
}

#header {
 width:800px;
 height:180px;
 margin-left:auto;
 margin-right:auto;
}

#navibar {
 background-image:url('../images/navibg.png');
 width:800px;
 height:26px;
 top:;
 margin-left:auto;
 margin-right:auto;
}

#body {
 background-image:url('../images/textfeld.png');
 background-attachment:fixed;
 width:800px;
 height:492px;
 margin-left:auto;
 margin-right:auto;
 font-family:Verdana,Arial, Helvetica, sans-serif;
 font-size:9pt;
 color:#000000;
}

#abschluss {
 background-image:url('../images/abschluss.png');
 width:800px;
 height:8px;
 margin-left:auto;
 margin-right:auto;
}

.heading {
 font-family:Verdana,Arial, Helvetica, sans-serif;
 font-size:14pt;
 color:#000000;
 text-align:center;
 text-decoration:bold;
}
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Home</title>

<meta content="" name="keywords" />
<meta content="" name="description" />

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="copyright"><p>© 2009</p></div>
<div id="header"><img src="images/banner.jpg" width="800" height="180"/></div>
<div id="navibar"></div>
<div id="body"><p class="heading">Herzlich Willkommen!</p></div>
<div id="abschluss"></div>







</body>

</html>

    Zur Info: Das Hintergrundbild ist nur 1x1px. Kann es damit zusammenhängen?


    LG
     
  3. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Ein Screenshot wäre vielleicht hilfreich.
    Wenn dein Hintergrundbild nur 1*1px groß ist, kann es sich doch nur um eine Farbe handeln. Warum benutzt du dann ein Bild und gibst nicht stattdessen einen Farbwert als Hintergrund an?


    Ich sehe in deinem Quellcode, dass du nur repeat-x gesetzt hast für das Wiederholungsverhalten des Hintergrundbildes. Sollte da nicht womöglich auch eher nur "repeat" stehen, damit es sich entlang beider Achsen wiederholt?

    Edit: Mir fällt gerade auf, dass du mehrere Hintergrundbilder nutzt. Welches meinst du denn? Das im Body? Das in der Navigation?
     
  4. 29. Juni 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Text ist nicht auf Hintergrundbild?

    Ich beziehe mich auf den Body-Div, also der Div, in dem der Text steht.
    Mit <p></p> macht er folgendes:

    Download: Zwischenablage01.jpg | xup.in

    Wenn ich nur den Text, ohne <p></p> nutze, funktioniert es.
    Aber dann kann ich keine Stile mehr verwenden.
     
  5. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Und wo sollte der Text deiner Meinung nach eigentlich sein?
     
  6. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Ist vielleicht ein bisschen komisch formuliert gewesen, aber eigentlich sollte der Text direkt anfangen und nicht einen Abstand erzeugen wie auf dem Bild.

    Der Text wird schon auf dem Hintergrundbild dargestellt, aber der Bereich wird um sagen wir mal 10px nach unten verschoben, obwohl er nahtlos anknüpfen sollte.
     
  7. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Du könntest dem Body-Div einfach "margin-top: -10px;" hinzufügen.
     
  8. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Funktioniert auf jedenfall mal.
    Dafür auch 'ne BW, danke dir.

    Aber warum passiert das?
    Kann man das nicht auch irgendwie anders lösen?

    MfG
     
  9. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Ich bin mir nicht ganz sicher. Ich vermute folgendes: Das p-Tag bezeichnet einen Absatz, fügt daher vorher und nachher einen Zeilenumbruch ein. Um das zu vermeiden, könntest du entweder in deinem Stylesheet p das Attribut "display: inline;" hinzufügen, oder du könntest statt <p> einmal versuchen <span> zu nutzen. Ist zwar vom Markup nicht ganz so sinnvoll, da <p> eigentlich schon dazu da ist, einen Absatz semantisch als solchen zu Kennzeichnen, aber ich bin mir nicht sicher, ob man es tatsächlich hinbekommt, diese Zeilenumbrüche bei <p> zu unterdrücken.
     
  10. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Mit <span> klappt es
    Nur das mit dem Attribut für "p" vergeben habe ich nicht ganz verstanden.
     
  11. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Ist das gleiche, wie wenn du "body" ein Attribut hinzufügst...
    Mit dem display:inline sähe das so aus:
    Code:
    p { display:inline; }
    Das wird dann aber auf alle p deiner Seite angewendet!
    Eine Alternative wäre, dem ersten Absatz eine Klasse/ID zuzuweisen!
     
  12. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    Funktioniert wie?
     
  13. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    CSS:
    Code:
    #ersterAbsatz { display:inline; }
    HTML:
    Code:
    <p class="heading" id="ersterAbsatz">Herzlich Willkommen!</p>
    Musst du allerdings ausprobieren, ich weiß nicht ob es funktioniert... Wenn Characticl D recht hat, sollte es aber
     
  14. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    <p> hat einen default-margin nach oben und unten.
    Ein
    Code:
    p#heading{margin: 0;}
    sollte das Gewünschte bewirken.
     
  15. 29. Juni 2009
    AW: Text ist nicht auf Hintergrundbild?

    p.heading zwar, aber das wars
    Super, vielen Dank euch allen.

    BWs sind raus.
     
  16. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.