[GastForen Web allgemein HTML und CSS / Stylesheets SPAN oder DIV {display:inline;} mit width?

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

SPAN oder DIV {display:inline;} mit width?

DNS
Beiträge gesamt: 227

26. Feb 2007, 12:37
Beitrag # 1 von 12
Bewertung:
(4990 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Schönen Wochenstart allerseits!

Zuerst wurde das hier gelöst:
http://www.hilfdirselbst.ch/...i?post=278181#278181

Jetzt kommt daraus resultierend das nächste Problem:
Ich möchte den Text einheitlich in der Breite begrenzen. Ursprünglich habe ich ihn per <span class="..."> fromatiert, aber das passt ja eigentlich nicht mit "width" zusammen - obwohl es der IE anstandslos akzeptiert. Der FF gibt sich jedoch definitionstreu und ignoriert die width-Eigenschaft des <span>. Wenn ich den Text mit <div> formatiere, dann rutscht er mir allerdings immer unter das Bild (FF), was nicht passieren darf. Wenn ich den <div> wieder mit "display:inline" zu einem Inline-Element erkläre, landet der Text zwar wieder schön neben dem Bild, aber wiederum ignoriert FF die width-Eigenschaft. 8-(

Hier mal ein Testcode:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//D HTML 4.01 transitional//EN"> 
<html>
<head>
<style type="text/css">

body {
font-size: 100.01%;
font-family: Tahoma,Helvetica,Arial,sans-serif;
margin: 0;
padding: 1em;
}

.container {
float:left;
border: 1px solid #CFCFCF;
margin: 10px 10px 0 0;
padding: 10px;
background-color: #eee;
}

.bild {
margin-right:10px;
}

.text {
font-size: 1em;
width: 5em;
}

div.text {
display: inline;
}
</style>
</head>

<body>

<div class="container">
<img class="bild" src="sr2.jpg" width="210" height="300" alt="" align="left">
<span class="text">MINOLTA SR-2<br>
SINGLE LENS REFLEX SYSTEM<br>
<br>
10 pages<br>
<br>
code: <br>
CAT. #SR-101
</span>
</div>

<div class="container">
<img class="bild" src="sr2.jpg" width="210" height="300" alt="" align="left">
<div class="text">MINOLTA SR-2<br>
SINGLE LENS REFLEX SYSTEM<br>
<br>
10 pages<br>
<br>
code: <br>
CAT. #SR-101
</div>
</div>

</body>
</html>

Im ersten Container habe ich den Text mit SPAN formatiert, und im zweiten mit DIV. Beidesmal wird in FF die "width:5em" ignoriert (was ja wohl auch eigentlich korrekt ist), der IE macht es so, wie ich will (allerdings wohl eigentlich falsch). Wie kann ich denn nun *korrekt* die Breite des Textes bestimmen?

Ratlos,
Dennis.
X

SPAN oder DIV {display:inline;} mit width?

Bernhard Werner
Beiträge gesamt: 5131

26. Feb 2007, 13:08
Beitrag # 2 von 12
Beitrag ID: #278397
Bewertung:
(4979 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dennis,

wenn du dem Doctype wieder eine DTD zuweist, machts der IE auch richtig falsch. Häh? ;-)

Was spricht dagegen, der Klasse .container eine feste Breite zuzuweisen?

Gruß
Bernhard


als Antwort auf: [#278386]
(Dieser Beitrag wurde von Bernhard Werner am 26. Feb 2007, 13:09 geändert)

SPAN oder DIV {display:inline;} mit width?

DNS
Beiträge gesamt: 227

26. Feb 2007, 13:25
Beitrag # 3 von 12
Beitrag ID: #278403
Bewertung:
(4969 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Bernahrd!

Antwort auf [ Bernhard Werner ] wenn du dem Doctype wieder eine DTD zuweist, machts der IE auch richtig falsch. Häh? ;-)


Lies mal im oben verlinkten thread nach, ganz am Ende. Das mit der ollen DTD habe ich da nämlich schon festgestellt. Das Blöde ist nur, dass dann erst mal der Text zusammgebrochen wird, und wenn's ganz dumm läuft sogar noch unter das Bild rutscht - was dann ganz besonders dämlich aussieht. Wenn ich die DTD weglasse, dann bricht der IE die Container um, und lässt den Inhalt in seiner gesollten Breite - so will ich's ja haben. Der FF macht's ja eigentlich richtig, nämlich dass der auch den Container umbricht, aber nicht seinen Inhalt. Nur leider ist da der Text immer so breit, wie er will...

Zitat Was spricht dagegen, der Klasse .container eine feste Breite zuzuweisen?


Die Tatsache dass die Bilder zwar alle 300 px hoch sind, aber dafür eben in der Breite unterschiedlich. Aus optischen Gründen möchte ich aber, dass der Text daneben einheitlich breit ist.

Wenn ich den Text als Block-Element definiere, dann schmeißt mir FF den immer unter das Bild. Definiere ich ihn als Inline-Element, dann kann ich die Breite nicht bestimmen. Doofes Spiel. 8-(

Danke und Gruß,
Dennis.


als Antwort auf: [#278397]

SPAN oder DIV {display:inline;} mit width?

SabineP
Beiträge gesamt: 7586

26. Feb 2007, 13:32
Beitrag # 4 von 12
Beitrag ID: #278407
Bewertung:
(4968 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dennis,

inline-Elemente haben keine Breite.

Du kannst dem Div eine Breite geben.
Die Divs bekommt man wiederum mit float nebeneinander.


Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//D HTML 4.01 transitional//EN">
<html>
<head>
<style type="text/css">

body {
font-size: 100.01%;
font-family: Tahoma,Helvetica,Arial,sans-serif;
margin: 0;
padding: 1em;
}

.container {
float:left;
border: 1px solid #CFCFCF;
margin: 10px 10px 0 0;
padding: 10px;
background-color: #eee;
}

.bild {
margin-right:10px;
float:left;
}

.text {
font-size: 1em;
width: 5em;
float:left;
}


</style>
</head>

<body>

<div class="container">
<img class="bild" src="sr2.jpg" width="210" height="300">
<div class="text">MINOLTA SR-2<br>
SINGLE LENS REFLEX SYSTEM<br>
<br>
10 pages<br>
<br>
code: <br>
CAT. #SR-101
</div>
</div>


</body>
</html>


als Antwort auf: [#278386]

SPAN oder DIV {display:inline;} mit width?

DNS
Beiträge gesamt: 227

26. Feb 2007, 15:37
Beitrag # 5 von 12
Beitrag ID: #278441
Bewertung:
(4951 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine!

Danke für Deine Antwort, aber soweit war ich ja schon mal: Das klappt zwar einwandfrei im FF, aber dafür zickt dann der IE wieder rum, weil er im rechtesten Container den Text unter das Bild bricht. Kopiere mal den Container aus Deinem Code noch zwei oder dreimal rein, und verkleinere dann das Browserfenster.

Also, entweder ich baue den Container so auf:

<div class="container">
<img src="..." align="left">
<span class="text">...</span>
</div>

und lasse nur die Container links floaten, dann habe ich zwar keine Probleme mit dem Umbruch (Text unters Bild), kann aber die Breite des Textes nicht bestimmen (dank eines Bugs im IE allerdings doch).

Oder ich baue den Container so auf:

<div class="container">
<img class="bild" src="...">
<div class="text">...</div>
</div>

und lasse außer den Containern auch die Klassen "bild" und "text" links floaten, dann kann ich zwar (über DIV) die Breite des Textes bestimmen, habe dafür aber das Problem, dass mir der IE am Rand im Container den Text unter das Bild bricht.

Menno, geht das denn nicht irgendwie?

Danke und Gruß,
Dennis.


als Antwort auf: [#278407]

SPAN oder DIV {display:inline;} mit width?

SabineP
Beiträge gesamt: 7586

26. Feb 2007, 15:53
Beitrag # 6 von 12
Beitrag ID: #278446
Bewertung:
(4947 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Der IE unterstützt CSS eben nur sehr mangelhaft.

>> habe dafür aber das Problem, dass mir der IE am Rand im Container den Text unter das Bild bricht.

Versuch mal den IE damit zu überreden (ungetestet)

.container
{white-space: nowrap}

Gruß Sabine


als Antwort auf: [#278441]

SPAN oder DIV {display:inline;} mit width?

DNS
Beiträge gesamt: 227

26. Feb 2007, 16:01
Beitrag # 7 von 12
Beitrag ID: #278447
Bewertung:
(4942 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ SabineP ] Versuch mal den IE damit zu überreden (ungetestet)

.container
{white-space: nowrap}


Nö, klappt auch nicht. Herrjeh, dann werde ich den Kram doch wohl wieder in eine Tabelle verfrachten. Sch... IE - und dabei benutze ich den noch nicht mal. 8-(

Danke soweit und Grüße,
Dennis.


als Antwort auf: [#278446]

SPAN oder DIV {display:inline;} mit width?

FSt
  
Beiträge gesamt: 1965

26. Feb 2007, 16:17
Beitrag # 8 von 12
Beitrag ID: #278450
Bewertung:
(4939 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dennis

Was spricht denn gegen eine Tabelle? Die sind weder verboten noch allergieauslösend? Aber für gewisse Probleme ganz nützlich. Sicher wäre es manchmal "schöner" ohne Tabellen aus zukommen, manchmal steht man sich aber so absichtlich und freiwillig auf die Schuhbändel und versucht einen 100-m-Sprint hin zulegen.

Gruss
Martin


als Antwort auf: [#278447]

SPAN oder DIV {display:inline;} mit width?

DNS
Beiträge gesamt: 227

26. Feb 2007, 16:46
Beitrag # 9 von 12
Beitrag ID: #278461
Bewertung:
(4932 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin!

Antwort auf [ FSt ] Was spricht denn gegen eine Tabelle? Die sind weder verboten noch allergieauslösend?


Nö, ist nur schicker, wenn man alles in DIV-Container packen kann :-)

Ich wollte möglichst viel vom Layout nach CSS verlagern, und einen möglichst schlanken Code haben. Nur macht mir hier anscheinend der IE einen Strich durch die Rechnung. Es ist wohl eindeutig weniger missverständlich, wenn ich Bild und Text in zwei Zellen einer zweispaltigen Tabelle packe. So habe ich ja auch angefangen, es ist halt ein wenig frustrierend, nach ein paar Tagen genau dort wieder anzukommen...

Gruß,
Dennis.


als Antwort auf: [#278450]

SPAN oder DIV {display:inline;} mit width?

SabineP
Beiträge gesamt: 7586

26. Feb 2007, 17:08
Beitrag # 10 von 12
Beitrag ID: #278471
Bewertung:
(4927 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> es ist halt ein wenig frustrierend, nach ein paar Tagen genau dort wieder anzukommen...

Ist mir auch schon oft passiert und habe dann einfach eine Tabelle genommen.

Viele <div>s mit zahlreichen CSS-Angaben für verschiedene Browser
blähen den Quellcode oft mehr auf als eine Tabelle.

Gruß Sabine


als Antwort auf: [#278461]

SPAN oder DIV {display:inline;} mit width?

FSt
  
Beiträge gesamt: 1965

26. Feb 2007, 17:31
Beitrag # 11 von 12
Beitrag ID: #278478
Bewertung:
(4921 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ich schliesse mich Sabine voll und ganz an und versichere Dir mein tiefstes Mitgefühl ...

Gruss
Martin


als Antwort auf: [#278471]

SPAN oder DIV {display:inline;} mit width?

DNS
Beiträge gesamt: 227

26. Feb 2007, 21:23
Beitrag # 12 von 12
Beitrag ID: #278538
Bewertung:
(4903 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Danke, Ihr zwei! :-)

Dann werd' ich jetzt mal meine Tabellen etwas aufpimpen gehen...

Danke und gruß,
Dennis.


als Antwort auf: [#278478]
X