Wie positioniert man in CSS?

[Ombra]

Hallo

Ich habe ein Logo und unter diesem Logo soll ein weiteres Bild (eine Verzierung) sein. Diese soll sich repeat-x wiederholen.
Quasi eine Leiste mit 10px Höhe unter dem Logo... Sowas wie ein Trennstrich nur als Bild...

Wie füge ich so eine Leiste (Bild mit repeat-x) unter ein Logo ein? Ich weiß nicht genau wie man in CSS positioniert.

Um den CSS Code wäre ich auch dankbar!

Danke

 

[MyBad]

Hi Ombra,

zeig uns mal deinen aktuellen Quelltext. Wie so oft führen mehrere Wege nach Rom. Aber im Prinzip geht das so:

<div class="logo">DEIN LOGO</div>
<div class="leiste"></div>

.leiste{
   background: url('dein-muster.gif') repeat-x;
   height: 10px;
}

Gibt noch zig weitere Möglichkeiten, je nachdem, wie dein Markup aussieht oder du es haben möchtest.

 

[cebito]

Leere div für Designzwecke @MyBad ? Eine eher schlechte Lösung! Denkbar wären eher border-img oder :after, aber dazu müsste @Ombra mal ein Bild einstellen, wie es denn ihrer Vorstellung nach am besten aussehen sollte um da genauere Tipps zu geben.

 

[Myhar]

MyBads Lösung ist zwar nicht so schön, aber sie funktioniert.
Prinzipiell hast du aber Recht cebito, ::after oder border-image ist hier bestimmt die bessere Wahl. Falls das "Trennbild" lediglich ein Verlauf ist, würde sich dieser dann noch ohne zusätzliches Bild realisieren lassen.

 

[Jormungand]

Kann man aber auch in einen Container stopfen.
Gibt man dem logo-Container das Muster der Leiste als backgound-image mit repeat-x und setzt das Logo als Bild in den Container, braucht man den Abstand nur noch mit padding zu regeln.

<div class="logo"><img src="logo.jpg"></div>

.logo{
   background: url('dein-muster.gif') repeat-x;
  padding-bottom: 10px;
}