Autor |
Nachricht |
bluespoon
Threadersteller
Dabei seit: 10.11.2006
Ort: Hannover
Alter: 41
Geschlecht:
|
Verfasst Mi 26.11.2008 12:49
Titel [Erledigt] Float-Problem bei XHTML |
|
|
Erledigt
Hallo,
ich habe ein kleines Problem beim Floaten. Ich möchte folgendes darstellen ... und das gleich mehrere hundert Mal - deshalb so unkompliziert wie möglich.
Code: | | DIV Container |
| Eins | Zwei | |
In einem DIV habe ich ein paar Zeilen Text, der links ausgerichtet ist (Eins). Einige Zeilen sollen aber zusätzlich noch eine kleine Info bekommen, die rechts ausgerichtet ist (Zwei). Eine Tabelle möchte ich nicht nutzen. Nun funktioniert folgender Code dafür:
Code: | <html>
<head>
<style type="text/css">
#Container
{
width: 300px;
}
#Container a
{
display: block;
}
#Container a span
{
float: right;
}
</style>
</head>
<body>
<div id="Container">
<a href="#">Eins
<span>Zwei</span></a>
<a href="#">Drei
<span>Vier</span></a>
</div>
</body>
</html> |
Logisch, alles was im span liegt wird rechts ausgerichtet. Füge ich aber einen Doctype XHTML Transitional hinzu habe ich das Problem, dass es im IE und im Fux nicht mehr funktioniert, im Safari & Opera aber schon. In den beiden ersten Browsern müsste ich ein negatives margin-top einbauen, was ich nicht möchte.
Dort sieht das ganze nämlich so aus ...
Code: | | DIV Container |
| Eins |
| Zwei | |
Was mache ich falsch? Hier noch einmal mit Doctype ...
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>
<style type="text/css">
#Container
{
width: 300px;
}
#Container a
{
display: block;
}
#Container a span
{
float: right;
}
</style>
</head>
<body>
<div id="Container">
<a href="#">Eins
<span>Zwei</span></a>
<a href="#">Drei
<span>Vier</span></a>
</div>
</body>
</html> |
Zuletzt bearbeitet von bluespoon am Mi 26.11.2008 15:12, insgesamt 3-mal bearbeitet
|
|
|
|
|
Benutzer 80255
Account gelöscht
Ort: -
|
Verfasst Mi 26.11.2008 13:14
Titel
|
|
|
// sorry, war quatsch
Zuletzt bearbeitet von am Mi 26.11.2008 14:25, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
bluespoon
Threadersteller
Dabei seit: 10.11.2006
Ort: Hannover
Alter: 41
Geschlecht:
|
Verfasst Mi 26.11.2008 14:20
Titel
|
|
|
Hmm ... dankeschön. Aber so habe ich ja die Strings "Zwei" und "Vier" aus meinem Beispiel nicht auf der rechten Seite. Die Länge der Strings variiert leider. Sonst würde ich mit einer Art Spalte arbeiten. Also dem linken und dem rechten Teil eine feste Breite zuweisen.
Effektiv sollte es dann so aussehen:
Edit:
Mit der festen Breite würde ich Probleme bei folgendem Beispiel bekommen:
Zuletzt bearbeitet von bluespoon am Mi 26.11.2008 14:27, insgesamt 2-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
|
|
|
|
bluespoon
Threadersteller
Dabei seit: 10.11.2006
Ort: Hannover
Alter: 41
Geschlecht:
|
Verfasst Mi 26.11.2008 14:41
Titel
|
|
|
So. Ich bin mir nicht sicher, ob es wirklich eine elegante Lösung ist, aber ich habe nun einfach einfach ein clear hinzugefügt (jedes Mal br möchte ich nicht) und die spans gegen Container getauscht.
Funktioniert auf jeden Fall schon einmal:
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>
<style type="text/css">
#Container
{
width: 300px;
}
#Container a
{
display: block;
float: left;
clear: right;
}
#Container div
{
float: right;
}
</style>
</head>
<body>
<div id="Container">
<a href="#">Eins</a>
<div>Zwei</div>
<a href="#">Drei</a>
<div>Vier</div>
</div>
</body>
</html> |
Edit:
Gerade noch eine bessere Lösung gefunden, bei der die komplette "Zeile" beim Hovern als Link genutzt werden kann. Links floaten und rechts anordnen ... manchmal kommt man eben net auf die einfachsten Dinge Danke nochmal.
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>
<style type="text/css">
#Container
{
width: 300px;
}
#Container a
{
display: block;
text-align:right;
}
#Container a span
{
float: left;
}
</style>
</head>
<body>
<div id="Container">
<a href="#"><span>Eins</span>
Zwei</a>
<a href="#"><span>Drei</span>
Vier</a>
</div>
</body>
</html> |
Zuletzt bearbeitet von bluespoon am Mi 26.11.2008 15:47, insgesamt 3-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] Gleich "float" ich aus! (erledigt)
Float-Problem?
float problem
float Problem
IE float problem?
img ul float problem
|
|