Bilder innerhalb Tabellen einrahmen

[QUEERmdb]

Wie kann man Bilder innerhalb einer Tabelle mit einem Rahmen versehen? Ich benutze den WYSIWYG-Editor Expression. Im Programm kann ich das wie gewünscht formatieren, es wird richtig angezeigt - aber nicht im Browser.

Ein Beispiel:

http://www.queermdb.de/serien/glee-2009.html

Sowohl das obigen Seitenmenü (und das ist noch nicht einmal in einer Tabelle) als auch die 8 Filmposter unter "Könnte Dir auch gefallen ..." rechts Mitte sind in Expression mit einem 2px-dicken Rahmen versehen. In den Browsern - NICHT. Nicht einmal beim IE. :(

Die Filmposter sind mit dem auto-style 100 formatiert, dieser legt oben im Head fest: .auto-style100 {border-width: 2px;}. Warum zeigt kein Browser diese Rahmen an???

Danke + Gruß + Kuss

ANKE

[Matthias Scharwies]

Die Filmposter sind mit dem auto-style 100 formatiert, dieser legt oben im Head fest:
.auto-style100 {border-width: 2px;}. Warum zeigt kein Browser diese Rahmen an???

  
.auto-style76 {  
   border-style: solid;  
   border-width: 2px;  
}  
  .auto-style100 {  
    border-width: 2px;  
}  

Immer vergleichen, was man gegenüber dem Funktionierenden anders gemacht hat! Die Eigenschaft border braucht auch noch eine Angabe http://wiki.selfhtml.org/wiki/Border-style

am Besten wäre eine eigene Klasse

  
img.wichtig {  
  border: 2px solid rgb(255, 153, 255);  

Einige Anmerkungen zu Deinem Code:

Du sparst Dir viel Arbeit, wenn Du Stile für die einzelnen Elemente definierst und diese um einige HTML-Klassen erweiterst.

Ich habe mir den Textabsatz mit der Überschrift Inhalt im firebug angeschaut

Alt (viele verschiedene spans und Klassen):

  
.auto-style4 {  
    color: #FF0;  
}  
.auto-style66 {  
    text-align: left;  
}  
Element {  
    font-family: Bookman Old Style;  
    text-align: left;  
}  
.auto-style21 {  
    border-collapse: collapse;  
}  
Element {  
    color: #F9F;  
}  
Element {  
    direction: ltr;  
}  

Neu:

  
body {  
  font-family: Bookman Old Style;  
}  
  
h2{                /*Unterüberschrift  */  
  font-size:large;  
}  
  
.inhalt {         /* gilt für alle Elemente, also hier für h2,p */  
  color: #FF0;  

Der Wysiwig-Generator erzeugt viel überflüssigen Code  (z.B direction: ltr; und text-align:left; sollten in der westlichen Welt selbsverständlich sein, kannst du also komplett weglassen ,außer wenn du es irgendwann anders [zentriert] haben willst.), der dir später hinderlich wird:

• bei der Wartung Deiner Seite
• bei der Platzierung bei Google (Du wirst nur schwer gefunden werden)

Generell ist ein Tabellen-Layout nicht mehr zeitgemäß. Du solltest mal nach
responsiven (Auf für Handys geeignete) HTML5-Layouts googlen, die den Inhalt
sinnvoll ordnen.

-Überschriften sind z.B h1,h2,h3, brauchen dann im Allgemeinen keine Klasse und werden von google gefunden.

• Die Navigation ist einfach eine Liste <ul> von Links <a>, sieht viel übersichtlicher aus als die Usemap, die Du verwendest.

hier ist ein HTML Tutorial in der WIKI

LG Matthias