[CSS] Bild und Text darstellen

[Yheeky]

Hi,

ich habe eine HTML-Datei, welche ich mit einer CSS-Datei ausstatten muss. Wie es auch Sinn der Sache ist, soll die HTML-Datei natürlich nicht verändert werden, sondern nur die CSS-Datei.
Ich möchte nun im Titel der Webseite anstatt eines Textes, ein kleines Icon und ein Text darstellen lassen. Ich habe es mit folgendem Code probiert, aber das Icon wird immer abgeschnitten und auch vom Text überlagert:

Code:

#header #title headerTitle
{
    padding: 5px 0;
    margin: 0px;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
}

#header headerGraphic
{
   background-image : url('/Graphics/Title.ico');
}

Der HTML-Code sieht wiefolgt aus:

Code:

<div id="title">
<headerGraphic />
<headerTitle>Webseitentitel</headerTitle>
</div>

Wie kann ich es hinbekommen, dass ich ein Icon und einen Text nebeneinander sehe?

[fkerber]

Hi!

Du könntest den margin-left-Wert des Textes setzen / vergößern.
Damit solltest du den Text nach rechts verschieben können.
Evtl. würde es auch schon reichen, wenn du beim Image Größen angibst und dann relative Positionierung nutzt (schau vllt. mal nach float)

Ciao, Frederic

[Yheeky]

Okay, mit dem Margin habe ich den Text jetzt wenigstens verschoben. Jetzt ist das Bild allerdings immer noch nicht komplett sichtbar. Ich habe Width und Height schon auf 500px gesetzt (um sicher zu gehen), es wurde aber trotzdem nicht angezeigt. Auch folgendes hilft nicht:

Code:

#header #title headerGraphic
{
   background-image : url('/Graphics/Title.ico');
   background-repeat:no-repeat;
   background-position: 0 -50;
}

Leider ist das Icon immer noch abgeschnitten, wie man im Anhang sehen kann.

PS: Warum auch immer, aber ich kann nur Icons und Bitmaps anzeigen lassen...PNGs funktionieren nicht :-(

[SimStar001]

Hallo, gibt es denn nicht andere Foren für dein Problem :gruebel:

Auch wenn hier Programmieren allgemein steht, ich denke CSS ist in einem Delphi Forum nicht gerade gut aufgehoben? oder :gruebel:

LG Marco

[fkerber]

Hi!

Das sehe ich gänzlich anders!

Natürlich gibt es auch andere Foren, aber wir haben hier ja extra diese Rubrik, um auch solche Fragen stellen zu können. Und ich verlasse mich auch lieber auf eine Community wie die DP, die ich schon länger kenne und wo ich weiß, ich bekomme schnelle und gute Antworten.

Warum siehst du das anders? (Antwort gerne per PN, damit dieser Thread nicht ins OT abdriftet)


Ciao, Frederic

[Meflin]

Zitat:

Zitat von Yheeky

Code:

#header #title headerGraphic
{
   background-image : url('/Graphics/Title.ico');
   background-repeat:no-repeat;
   background-position: 0 -50;
}

Da fehlt bei der 50 auch die Einheit ;) Abgesehen davon, lass das background-position mal ganz weg. mir ist nicht ganz klar wozu du das drin hast :gruebel:

Zitat:

PS: Warum auch immer, aber ich kann nur Icons und Bitmaps anzeigen lassen...PNGs funktionieren nicht :-(

Welcher Browser? Icons und Bitmaps sind NICHT die geeigneten Formate fürs Web! Solange man keine Transparenz braucht, ist vermutlich JPEG die erste Wahl, ansonsten noch PNG oder auch GIF ;)

[Yheeky]

Also, ich habe jetzt noch "float: left;" hinzugefügt und jetzt kann ich das Bild auch platzieren. Habe nun auch ein GIF genommen, weil ich kein Icon verwenden wollte ;)

[Pfoto]

Hallo Christian,

ich verwende gewöhnlich folgendes:

Delphi-Quellcode:

#title {
  background: url(img/Titelgrafik.gif) no-repeat left top;
  padding-left: 20px; /* rückt den Text nach rechts, schafft Platz für das Bild */  
}

So sparst du auch einiges an Auszeichnungen.
Die Hochzeichen bei url() sind übrigens nicht notwendig.



Gruß
Jürgen

[Yheeky]

Zitat:

Zitat von Pfoto

Die Hochzeichen bei url() sind übrigens nicht notwendig.

Danke, Jürgen! Nun geht auch die Anzeige von PNGs (lief vorher irgendwie nicht) :)