zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text umfließt Bild - Probleme mit Aufzählungszeichen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.02.2009, 16:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.02.2009
Beiträge: 6
andionline befindet sich auf einem aufstrebenden Ast
Standard Text umfließt Bild - Probleme mit Aufzählungszeichen

Hallo,
ich poste mein Problem mal hier, mit der Hoffnung, dass mir wer weiterhelfen kann - ich suche den Fehler schon ewig, aber komm einfach nicht dahinter:

Ich habe auf meiner Seite ein Bild, das von Text umflossen wird. Funktioniert alles ganz gut, nur im Firefox 3 ragen die Aufzählungszeichen bei der Verwendung von Listenelementen aus dem div herraus in das Bild.

Mein Code:

HTML-Code:
<div class="rubrik_pic"><img alt="sunflower.jpg" src="http://www.falschparken.at/webknecht/allgemein/imgLoader.php?id=1379"/></div>
<div class="rubrik_text"><ul>
<li><strong>Februar 2008:</strong> die <span style="text-decoration: underline;">erste Version</span> von traumhoefe.at geht online</li>
<li><strong>Juni 2008:</strong> <span style="text-decoration: underline;">108 Salzburger Orte</span> wurden <span style="text-decoration: underline;">erfasst</span>: Jeder Eintrag enthält ein Ortsfoto, eine detaillierte Beschreibung (Geschichte, Wirtschaft, Fremdenverkehr,...) sowie lokale Sehenswürdigkeiten.</li>
</ul></div>
und das dazugehörige CSS:

HTML-Code:
#content table {style.css (Linie 266)
border-collapse:collapse;
font-size:100%;
text-align:left;
}

.rubrik_pic {style_we...necht.css (Linie 227)
float:left;
margin:5px;
}
Zu sehen ist das Problem unter http://www.traumhoefe.at/historie

Bitte um Hilfe!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.02.2009, 16:49
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Code:
ul {
list-style-position: inside;
}
sollte helfen. (Wenn das alles ist...) Hilft übrigens auch beim IE 8.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (19.02.2009 um 16:53 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.02.2009, 17:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.02.2009
Beiträge: 6
andionline befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Antwort.

List-style-position rückt zwar die Punkte ein, aber bei mehr als einer Zeile wird der Text nicht mehr eingerückt (ist so gewünscht).

Gibts dafür auch eine Lösung?
Mit Zitat antworten
  #4 (permalink)  
Alt 19.02.2009, 19:25
Benutzer
neuer user
 
Registriert seit: 19.02.2009
Beiträge: 50
manhunter__ befindet sich auf einem aufstrebenden Ast
Standard

hallo..

hab mir den source mal auf der website die du gepostet hast angesehen.

probiers mal so:

.rubrik_test {
float: left;
}

denn du hast vergessen das du den den text floatest. oder hab ich da was falsch verstanden?
Mit Zitat antworten
  #5 (permalink)  
Alt 19.02.2009, 20:47
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von andionline Beitrag anzeigen
Vielen Dank für die Antwort.

List-style-position rückt zwar die Punkte ein, aber bei mehr als einer Zeile wird der Text nicht mehr eingerückt (ist so gewünscht).

Gibts dafür auch eine Lösung?
Nicht so einfach.

Code:
<ul style="list-style-type: none;">
hilft dagegen, dann aber fehlen die Bullets.
Wenn die gewünscht sind: Lass es so wie es bisher war und vergib dem floatenden div picture eine Breite von 220 px. Eine definierte Breite für floatende Elemente zu vergeben ist sowieso immer eine gute Idee....
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #6 (permalink)  
Alt 19.02.2009, 21:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.02.2009
Beiträge: 6
andionline befindet sich auf einem aufstrebenden Ast
Standard

Hallo, nein leider. Das bewirkt, dass der Text unter dem Bild dargestellt wird.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.02.2009, 21:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.02.2009
Beiträge: 6
andionline befindet sich auf einem aufstrebenden Ast
Standard

Hallo.

Naja, list-style-type: none; hilft mir leider nicht weiter, denn ich möchte ja die Bullets behalten. Ich hab selbst schon früher darüber nachgedacht, list-style-type: none zu benutzen und dann selbst definierte buttons über background-images einzufügen, aber das erschien mir zu kompliziert.

Der Ansatz, dem Bild eine fixe Breite zu geben, ist nicht optimal, da ich ein CMS realisiert habe und die Bildbreiten beliebig variieren können.

Es muss für dieses Problem doch irgendeine "einfache" Lösung geben!?
Mit Zitat antworten
  #8 (permalink)  
Alt 19.02.2009, 22:17
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
ragen die Aufzählungszeichen bei der Verwendung von Listenelementen aus dem div herraus in das Bild.
Versuch dem UL mehr margin (links) zu geben.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #9 (permalink)  
Alt 19.02.2009, 23:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.02.2009
Beiträge: 6
andionline befindet sich auf einem aufstrebenden Ast
Standard

Alles schon probiert. Bringt leider auch nichts
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.02.2009, 23:33
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

... oder margin-right für "rubrik_pic"
Code:
.rubrik_pic {
	float:left;
	margin:5px 40px 5px 5px; /* Beispielwert */
}
Grüße: Emil
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Float:right fehler im IE6 gertnaster CSS 9 04.01.2011 21:59
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
Grafik in einer Tabellenzelle rechts unten ausrichten ? Worance CSS 1 19.11.2006 15:09
Text Position barca CSS 14 10.05.2006 11:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:37 Uhr.