kostenloser Webspace werbefrei: lima-city

Zeileninhalt nebeneinander anzeigen lassen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   siteplayer

   siteplayer hat kostenlosen Webspace.

   13:21, 29.12.2010

   Wie kann ich diese Zeile auch als eine Zeile tag/anzeigen">anzeigen lassen? Momentan wird alles nur untereinander angezeigt.
   CSS:
   

   #girl {
   	background: url('/style/standard/image/icon-girl.png');
   	background-repeat: no-repeat;
   	display: block;
   	height: 50px;
   	width: 50px;
   }

   
   Html:
   

   <h1>Jason</h1> (30) <span id="girl">&emsp;</span>

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tom-moeller

   

   tom-moeller hat kostenlosen Webspace.

   13:36, 29.12.2010

   siteplayer schrieb:
   Wie kann ich diese Zeile auch als eine Zeile anzeigen lassen? Momentan wird alles nur untereinander angezeigt.
   CSS:

   
   
   Das Zauberwort heißt floaten:
   

   float:left;

   
   Wenn Du aber den selben CSS-Selektor verwenden willst, darfst Du das Element nicht als ID verwenden (Mehrfache ID-Namen nicht valide) sondern als Klasse.
   
   Beitrag zuletzt geändert: 29.12.2010 13:37:15 von tom-moeller
4. Autor dieses Themas

   siteplayer

   siteplayer hat kostenlosen Webspace.

   13:41, 29.12.2010

   Ich habe das schon mit float ausprobiert, dadurch hat sich aber nur das nächste Element dran gehangen, der Inhalt der Zeile ist weiterhin auf drei Zeilen verteilt gewesen. Diese ID wird nur einmal pro Seite angezeigt.
   
   Meine Versuche mit float:
   

   <div style="float:left;"><h1>Jason</h1> (30) <span id="girl">&emsp;</span></div>

   
   
   

   <div style="float:left;">
   	<div>
   		<h1>Jason</h1> (30) <span id="girl">&emsp;</span>
   	</div>
   </div>

5. metalmachine

   

   metalmachine hat kostenlosen Webspace.

   14:11, 29.12.2010

   <h1> ist ein sog. Block-Element, d.h. es füllt immer eine ganze Zeile aus. Um das zu ändern, musst du <h1> als Inline-Element deklarieren (Breite passt sich an den Inhalt an).
   Das geht dann so:

   <h1 style="display: inline;">...</h1> <span>...</span>

   Der Inhalt des <span>-Tags sollte nun in einer Zeile mit dem <h1>-Tag sein.
   
   Alternatiev bietet CSS noch die Eigenschaft inline-block. Sie verählt sich wie inline, allerdings lässt sich die Breite mit dem width-Attribut anpassen.
   
   Nachlesen kannst du das zB. auf SelfHTML
6. Autor dieses Themas

   siteplayer

   siteplayer hat kostenlosen Webspace.

   15:04, 29.12.2010

   So wird alles nun endlich nebeneinander Angezeigt. =)
   

   #girl {
   	background: url('/style/standard/image/icon-girl.png');
   	background-repeat: no-repeat;
   	display: inline-block;
   	height: 50px;
   	width: 50px;
   }

   <h1 style="display: inline;">Jason</h1> (30) <span id="girl">&emsp;</span>

   Nur habe ich das Problem das das Bild nicht wirklich auf einer Linie ist sondern "etwas herab hängt". Wie kann ich es richtig positionieren?
   
   Problem (KLICK)

7. metalmachine

   

   metalmachine hat kostenlosen Webspace.

   18:00, 29.12.2010

   Du musst den Hintergrund vertikal zentrieren:

   ...
   background-position: left center;
   ...

   Auch hier verweise ich wieder auf die Erläuterung von SelfHTML. Du kannst das ganze auch etwas verkürzen, indem du die Eigenschaft backgroung verwendest.

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?