[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:
(4770 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: 5103

26. Feb 2007, 13:08
Beitrag # 2 von 12
Beitrag ID: #278397
Bewertung:
(4759 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:
(4749 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:
(4748 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>
Gruß Sabine


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:
(4731 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:
(4727 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:
(4722 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: 1961

26. Feb 2007, 16:17
Beitrag # 8 von 12
Beitrag ID: #278450
Bewertung:
(4719 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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:
(4712 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:
(4707 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: 1961

26. Feb 2007, 17:31
Beitrag # 11 von 12
Beitrag ID: #278478
Bewertung:
(4701 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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:
(4683 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

Aktuell

Web / SEO / Blockchain / Betriebssystem
unsplash_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
29.09.2022

IDUGS#85 Press2id

Zoom Meeting
Donnerstag, 29. Sept. 2022, 19.00 - 21.00 Uhr

Vortrag

Kennst du WordPress? Vielleicht. Verwendest du WordPress? Ja, klar! WordPress ist das am weitesten verbreitete System für die Erstellung von Webseiten. Um Webseitenbau soll es auf dieser IDUG aber nicht gehen. Gregor zeigt press2id (github.com/grefel/press2id). Seine Open-Source-Lösung für die Verbindung von Web und InDesign. Richtig gelesen: InDesign liest mithilfe von press2id die Inhalte der WordPress-Webseiten und generiert daraus Zeitschriften, Kataloge, Programmhefte oder Bierdeckel (das zeigen wir natürlich auch!). So wird die „Content First“ Theorie zu einer konkret anwendbaren Praxis, ohne gleich die ganz großen Räder zu drehen. Versprochen: Jeder kann nach der IDUG innerhalb kürzester Zeit Daten von WordPress nach InDesign importieren. Aber Achtung: Prinzipiell kann press2id aus jeder Website, oder besser Contentmanagementsystem (CMS) Daten auslesen und nach InDesign importieren! Spannend, oder? Danach geht es in die Praxis: Stefan hat die Webseite des Parktheater Iserlohn (parktheater-iserlohn.de) gestaltet. Die gedruckten Spielpläne (parktheater-iserlohn.de/interaktive-spielplaene) werden mit press2id realisiert. Wir schauen in den Maschinenraum und zeigen, wie die Lösung des Projekts realisiert wurde.

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs85.eventbrite.de/

Von Wordpress nach InDesign
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022