zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verflixter Rahmen um ein Bild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.07.2007, 11:18
Benutzerbild von Webelix
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 15
Webelix befindet sich auf einem aufstrebenden Ast
Frage Verflixter Rahmen um ein Bild

Moin moin,

ich weiß nicht genau, ob es sich bei meinem Problem um ein css- oder html-Problem handelt.
Ich habe eine Seite mit einem Text erstellt, in dem einige Bilder eingefügt wurden. Ich wollte nun um die Bilder einen 0815 Rahmen haben (border: 1px solid white; ). Da ich aber unter dem Bild noch eine Bildunterschrift hingesetzt gabe, wollte ich den Rahmen nicht nur um das Bild herum haben, sondern um das Bild incl. Bildunterschrift. Sollte eigendlich ja kein Problem sein, Bild und Schrift in einen Kontainer und um den Kontainer meinen Rahmen. Das ganze sollte dann auch zentriert auf der Seite dargestellt werden.

1. Versuch beides in einen div-Kontainer. Dabei wird der Rahmen nicht genau im das Bild gezeichnet, sondern hat in einigen Browsern die Breite der ganzen Seite. Sonst aber in allen Browsern (FF,O,IE) alles OK.

2. Versuch beides in eine span-Kontainer. Der IE und Opera zeigen es auch so an, wie ich mir das vorstelle, nur der FF macht 1. je einen Rahmen um das Bild und um die Bildunterschrift und 2. ist der Rahmen um das Bild viel zu klein.

Wie bekomme ich es nun hin, das es auf allen Brosern so aus schaut, wie von mir gewünscht?

Wer sich das mal anschauen möcht hier der Link zur Seite (Bitte nach unten scrollen auf dieser Seite) :

Martinsuniverse

Vielen Dank schon mal im Voraus.

PS. Warum muss immer alles zu inkompatiebel sein
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.07.2007, 13:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Webelix Beitrag anzeigen
ich weiß nicht genau, ob es sich bei meinem Problem um ein css- oder html-Problem handelt.
Vermutlich weder noch, sondern ein Fehlen von Grundlagenwissen.

Zitat:
1. Versuch beides in einen div-Kontainer. Dabei wird der Rahmen nicht genau im das Bild gezeichnet, sondern hat in einigen Browsern die Breite der ganzen Seite. Sonst aber in allen Browsern (FF,O,IE) alles OK.
DIVs sind Blockelemente, also ist es völlig normal, denn standardmäßig (also ungefloatet und unpositioniert) füllen sie die ganze zur Verfügung stehenden Breite aus. Wenn ein Browser es nicht tut, dann
a) hast du es irgendwie verhindert (z.B. durch Floaten, Positionierung oder width-Angabe)
b) ist der Browser eventuell im Quirksmode durch fehlenden, falschem oder fehlerhaft angegebenem DOCTYPE (siehe FAQ und/oder Google)

Zitat:
2. Versuch beides in eine span-Kontainer. Der IE und Opera zeigen es auch so an, wie ich mir das vorstelle, nur der FF macht 1. je einen Rahmen um das Bild und um die Bildunterschrift und 2. ist der Rahmen um das Bild viel zu klein.
Ein SPAN ist ein Inline-Element. Bilder standardmäßig auch. Die Box (und somit der Rahmen) eines Inline-Element ist wie wenn man mit einem Marker gedurckten Text zeilenweise markiert: Einzelne Rechtecke für jede Zeile.

Zitat:
Wie bekomme ich es nun hin, das es auf allen Brosern so aus schaut, wie von mir gewünscht?
In dem du dir Grundlagenwissen aneignest und wenn duu weisst was du tust (und was du willst) sauberen Code schreibst.

Durch den XML-Prolog ist der IE6 im Quirksmode. Außerdem stimmt die Angabe "UTF-8" nicht.

Schließlich enthält die Seite mehrere Fehler:

Result for http://martinsuniverse.de/projekte/new/projekte/navinachruestung/navinachruest.html - W3C Markup Validator
W3C CSS Validator results for http://martinsuniverse.de/projekte/new/projekte/navinachruestung/navinachruest.html

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.07.2007, 17:55
Benutzerbild von Webelix
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 15
Webelix befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Zitat:
Vermutlich weder noch, sondern ein Fehlen von Grundlagenwissen.
Dann formoliere ich meine Frage halt anders :
ich weiß nicht genau, ob mein Problem eher mit mein unzureichendem Wissen in CSS oder HTML zu tun hat, deswegen poste ich es einfach mal in die Sektion CSS. Grundlagenwissen habe ich bestimmt. Nur leider muss ja immer rumgetrixt werden, damit es in allen Browser zu annehmbaren Ergebnissen führt. Außerdem bin ich hier in diesem Forum, um mein Grundlagenwissen zu erweitern bzw. auszubauen.

2. Den div-Kontainer, den ich probiert habe habe ich natürlich als "inline" definiert. Ok, das hatte ich vorher nicht erwähnt.

Zitat:
Ein SPAN ist ein Inline-Element. Bilder standardmäßig auch. Die Box (und somit der Rahmen) eines Inline-Element ist wie wenn man mit einem Marker gedurckten Text zeilenweise markiert: Einzelne Rechtecke für jede Zeile.
Dann interpretieren das halt der IE und Opera falsch, und der FF richtig.

Zitat:
In dem du dir Grundlagenwissen aneignest und wenn duu weisst was du tust (und was du willst) sauberen Code schreibst.
100% Sauber kann der Code erst dann werden, wenn alle Browser den Code gleich interpretieren, solange dies nicht der Fall ist ist das ein Ding der Unmöglichkeit. Desegen behaupte ich einfach mal, dass auch deine Seiten nicht 100% Sauber sind, ausser du hast wirklich nur eine 0815 Seite.

Zitat:
W3C CSS Validator results for Martinsuniverse
Mit CSS2.1 wurde "inline-block" neu eingeführt.

Durch den Rest arbeite ich mich jetzt mal durch.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.07.2007, 22:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Webelix Beitrag anzeigen
Nur leider muss ja immer rumgetrixt werden, damit es in allen Browser zu annehmbaren Ergebnissen führt.
Ich weiß nicht was du da genau gemacht hast, aber es hört sich an, als entstehen die Probleme eher *durch* das herumtricksen, als anderes herum.

Zitat:
2. Den div-Kontainer, den ich probiert habe habe ich natürlich als "inline" definiert. Ok, das hatte ich vorher nicht erwähnt.
Dann ist deine Erklärung noch konfuser, denn ein DIV mit display: inline ist von einem SPAN vollkommen ununterscheidbar.

Zitat:
Dann interpretieren das halt der IE und Opera falsch, und der FF richtig.
IE6 (und ich vermute Opera) sind wegen dem XML-Prolog im Quirksmode. Schmeiss es raus.

Zitat:
100% Sauber kann der Code erst dann werden, wenn alle Browser den Code gleich interpretieren, solange dies nicht der Fall ist ist das ein Ding der Unmöglichkeit.
Hmm, es ist anderes herum. Nur 100% sauberer Code hat überhaupt eine Chance von allen Browsern gleich interpretiert zu werden.

Zitat:
Desegen behaupte ich einfach mal, dass auch deine Seiten nicht 100% Sauber sind, ausser du hast wirklich nur eine 0815 Seite.
Meine Seiten sind nicht 100% sauber, da ich für einen großen Konzern arbeite, welches lieber auf teuere Agenturen, als kleine Rädchen hört

Zitat:
Mit CSS2.1 wurde "inline-block" neu eingeführt.
Das ist keine Garantie, das auch alle Browser es unterstützen. Mozilla und co verstehen es gar nicht und IE nur sehr unvollständig.

Fast da

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
  #5 (permalink)  
Alt 22.07.2007, 12:01
Benutzerbild von Webelix
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 15
Webelix befindet sich auf einem aufstrebenden Ast
Standard

Moin,

Zitat:
Zitat:Result for Martinsuniverse - W3C Markup Validator

Fast da
Angekommen!?

Zitat:
Nur 100% sauberer Code hat überhaupt eine Chance von allen Browsern gleich interpretiert zu werden.
Wenn ich mir aber diverse Tutorial durchlese, stoße ich immer wieder auf in der Art "Das macht man so und, aber das ist noch zu beachten, der oder der Brower das anders interpretiert, un deswegen muss man hier und da noch was verändern".
Naja, das soll aber nicht die Diskusion hier sein.

Nun zurück zu meinem Problem. Ein div-Kontainer soll also die Wahl der Mittel sein ... OK. Nun muss ich also 1. dem Kontainer sagen, dass er nicht die volle Breite einnehmen soll und zum 2. das er zentriert sein soll.

Ich könnte also mein div-Kontainer als float definieren, dann bekomme ich aber Probleme mit der Zentrierung, der Rahmen währe aber OK.

Ich könnte aber auch dem div-Kontainer eine feste Breite geben, die Breite des Bildes. Das Ergebniss sieht so aus wie ich es haben möchte. Mich stört nur eine Kleinigkeit. Wenn ich das Bild, durch ein Bild mit einer anderen Größe ersetzte muss ich immer die Breite des div-Kontainers mit anpassen.

Gibt es noch andere Möglich keinen dies zu erreichen?

Vielen Dank schon mal für deine/eure Hilfe

ciao
Martin

Geändert von Webelix (22.07.2007 um 12:53 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 22.07.2007, 12:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Webelix Beitrag anzeigen
Wenn ich mir aber diverse Tutorial durchlese, stoße ich immer wieder auf in der Art "Das macht man so und, aber das ist noch zu beachten, der oder der Brower das anders interpretiert, un deswegen muss man hier und da noch was verändern".
Leider ist das in diesem Fall auch so.

Zitat:
Nun zurück zu meinem Problem. Ein div-Kontainer soll also die Wahl der Mittel sein ... OK. Nun muss ich also 1. dem Kontainer sagen, dass er nicht die volle Breite einnehmen soll und zum 2. das er zentriert sein soll.
Genau: das Problem liegt darin, eine shrink-to-fit-Breite mit einer Zentrierung zu kombinieren.
In standardkonformen Browsern erreichst du diese Darstellung mit display:table und auto-margins.
Dabei spielt der IE nicht mit; dort lässt sich dieser Effekt mit der speziellen Quasi-Inline-Block-Darstellung des IE erreichen.
Bruno Fassino hat ein Beispiel dafür parat:
Image and caption shrink-wrap and center

BTW: es wäre unheimlich hilfreich für die Helfenden hier, wenn du in solchen Fällen einen auf das Problem reduzierten Testcase zur Verfügung stellen würdest.
Mit Zitat antworten
  #7 (permalink)  
Alt 22.07.2007, 13:32
Benutzerbild von Webelix
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2007
Beiträge: 15
Webelix befindet sich auf einem aufstrebenden Ast
Standard

So, vielen Dank nachmal, so wie die Seite jetzt ist lasse ich sie einfach. Der Link von dir, Fricca ist auch sehr informativ.

Zitat:
BTW: es wäre unheimlich hilfreich für die Helfenden hier, wenn du in solchen Fällen einen auf das Problem reduzierten Testcase zur Verfügung stellen würdest.
Werde ich das nächste Mal beachten.

Neben bei bemerkt, der IE6 ist total witzig. Ruf man meine Seite einmal auf sieht alles ganz normal aus. Ruft man die Seite ein zweites oder drittel mal auf, ändert sich die Breite des Mittelteils, was am Hintergrund und an der Position der obersten Überschrift zu sehen ist.
Das brauch hier aber nicht weiter diskutiert zu werden, die Leute sollen lieber einen vernümpftigen Browser benutzen.

ciao
Martin

Geändert von Webelix (22.07.2007 um 13:35 Uhr)
Mit Zitat antworten
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
Bild mit Rahmen aus Bild Holger (HMR) CSS 3 21.05.2008 13:55
IE7- & IE6-Probleme bei Bild und Rahmen... Ragnaroek CSS 2 21.04.2008 16:02
Rahmen mit Abstand um ein Bild butterhead CSS 11 07.12.2005 18:48
Rahmen um ein Bild (jpg, png, gif) ziehen Don Stefano CSS 8 30.07.2005 22:42
Bild im Rahmen eines div grml CSS 2 12.05.2005 02:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:51 Uhr.