mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:33 Benutzername: Passwort: Auto-Login

Thema: [Erledigt] Float-Problem bei XHTML vom 26.11.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [Erledigt] Float-Problem bei XHTML
Autor Nachricht
bluespoon
Threadersteller

Dabei seit: 10.11.2006
Ort: Hannover
Alter: 41
Geschlecht: Männlich
Verfasst Mi 26.11.2008 12:49
Titel

[Erledigt] Float-Problem bei XHTML

Antworten mit Zitat Zum Seitenanfang

Erledigt Lächel

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 80255
Account gelöscht


Ort: -

Verfasst Mi 26.11.2008 13:14
Titel

Antworten mit Zitat Zum Seitenanfang

// sorry, war quatsch * Ich bin ja schon still... *

Zuletzt bearbeitet von am Mi 26.11.2008 14:25, insgesamt 1-mal bearbeitet
 
Anzeige
Anzeige
bluespoon
Threadersteller

Dabei seit: 10.11.2006
Ort: Hannover
Alter: 41
Geschlecht: Männlich
Verfasst Mi 26.11.2008 14:20
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 26.11.2008 14:23
Titel

Antworten mit Zitat Zum Seitenanfang

am besten ist es du setzt dich mit den Float Regeln auseinander.

http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.5%C2%A0


@stardiver: sorry, das ist quatsch.


Zuletzt bearbeitet von Kash am Mi 26.11.2008 14:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
bluespoon
Threadersteller

Dabei seit: 10.11.2006
Ort: Hannover
Alter: 41
Geschlecht: Männlich
Verfasst Mi 26.11.2008 14:41
Titel

Antworten mit Zitat Zum Seitenanfang

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 *ha ha* 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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Gleich "float" ich aus! (erledigt)
Float-Problem?
float problem
float Problem
IE float problem?
img ul float problem
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.