HTML - CSS Problem Rahmen/Bilder

[hks]

Hey Leute. Ich beschäftige mich seit einem Jahr intensiver mit HTML. CSS war immer nur so Nebensache. Nun habe ich jedoch eine Page erstellt, jedoch bin ich auf ein Problem gestoßen. Ich möchte gerne durch einen <img class"..."> bestimmen das manche Bilder einen Orangen Rand haben. Nun habe ich das dann auch laut Buch und Internet alles so gemacht. Ich habe das Design aus Bildern zusammengesetzt und möchte jetzt einfach ein Bild in den Text mit einem orangen Rand defninieren. Und was macht das Ding. NICHTS. Nicht mal wenn ich <img border=2> einstelle kriege ich keinen Rand. Ich habe hier mal die Quelltexte und hoffe mir kann jemand helfen. Bin echt am Verzweifeln.


CSS:

body { background-image: url("bg/bg.gif"); font-family: Arial; }

/*Formatierung der Links*/

a:link { text-decoration:none; color:none; }
a:visited { text-decoration:none; color:none ; }
a:hover { text-decoration:none; background-color: none; }
a:active { text-decoration:none; background-color:none; }
a:focus { text-decoration:none; background-color:none; }

/*Kein blauer Rand um die Bilder*/

img {border-width:0;}
.rand {border-color: #feb25d; border-width:3;}


/*Formatierung Tabelle = Tabelle1:Überschrift Tabelle2:Textfeld*/


HTML:

<img class="rand" src="thumbs/rul.jpg">


table.tabelle1{ position: absolute; top: 250px; left: 277px; text-align:center; font-size: 30;}

table.tabelle2 { position: absolute; top: 400px; left: 230px; text-align:justify;}


/*Tabellen zentriert*/

div.tdc
{text-align: center;}



/*Layout*/

#header
{position: absolute;}

#header1
{position: absolute; top: 164;}

#startseite {position: absolute; top: 266px; }
#ueberuns {position: absolute; top: 300px; }
#ferienwohnung {position: absolute; top: 334px; }
#tierf {position: absolute; top: 367px; }
#angebote {position: absolute; top: 425px; }
#galerie {position: absolute; top: 458px; }
#kontakt {position: absolute; top: 493px; }
#anreise {position: absolute; top: 523px; }
#links {position: absolute; top: 558px; }
#impressum {position: absolute; top: 586px; }

 

[thuemmy]

Ich will nur mal schnell auf die Bordergeschichte eingehen.
1. Gib dem border-width noch eine Einheit mit
2. Solltest Du auch sagen, was für einen border-style Du haben willst.

.rand  {border-color: #feb25d; border-width:3px; border-style:solid;}

Oder kurz geschrieben:

.rand  {border: 3px solid #feb25d;}

Gruß thuemmy

 

[Efchen]

Hey Leute. Ich beschäftige mich seit einem Jahr intensiver mit HTML. CSS war immer nur so Nebensache.

Es ist wahrscheinlich nicht Deine Schuld, aber ich finde es schade, dass man noch in 2008 nicht lernt, dass CSS keine Nebensache ist, sondern die eine Hälfte beim Erstellen von Websites ausmacht. Daraus, und auch aus einigen Deiner Kommentare, schließe ich, dass Du auch noch niemanden gefunden hast (Tutorial), der Dir sagt, was HTML eigentlich ist.

Eine Webseite besteht aus zwei Komponenten: HTML und CSS.
HTML ist für die logische Auszeichnung des Inhalts. Hier wird festgelegt, was der Inhalt bedeutet, was Textabsätze sind, was Überschriften sind, wo wichtige Textpassagen sind, Zitate, Adressen, tabellarische Daten, Listen usw. Was man in HTML macht, macht man aufgrund des Inhalts, niemals aber aufgrund des gewünschten Aussehens. Demzufolge sollte man alle Tags und Attribute, die für Layout/Design da sind, nicht mehr benutzen.
Layout und Design macht man ausschließlich mit CSS.

Macht man z.B. ein Menü, zeichnet man das als Liste aus, weil das der Bedeutung "Menu" am nächsten kommt. Will man ein horizontales Menü, ist man versucht zu sagen, man könne keine Liste nehmen, weil die vertikal dargestellt wird. Aber so denkt man in HTML nicht. Man nimmt eine Liste, weil das die Bedeutung des Inhalts ist: Eine Liste von Links. Wie das ohne CSS im Browser aussieht, ist irrelevant. Man kann die Liste mit Hilfe von CSS ganz leicht horizontal darstellen.

Ich möchte gerne durch einen <img class"..."> bestimmen das manche Bilder einen Orangen Rand haben.

In so einem Falle gibt man den entsprechenden Bildern am besten eine Klasse und definiert für die Klasse einen orangenen Rahmen.
HTML:

<img src="image1.jpg" alt="Alternativtext" class="Klasse1" />
<img src="image2.jpg" alt="Alternativtext" />
<img src="image3.jpg" alt="Alternativtext" class="Klasse1" />

CSS:

img.Klasse1 {
  border:1px solid orange;
}

Damit bekommen nur image1 und image2 aus obigem Code einen oragefarbenen Rahmen.
Den Klassenname sollte man übrigens gemäß der Semantik (der Bedeutung) wählen und nicht nach dem Layout/Design. Denn wenn Du das jetzt "rahmenorange" nennen würdest und den Rahmen später gelb haben willst, hast Du den Salat.

Nicht mal wenn ich <img border=2> einstelle kriege ich keinen Rand.

Nein, denn da kriegst Du einen Rand. Oder war das "k" vor "einen" ein Tippfehler? ;-)
Sowas solltest Du aber eigentlich nicht machen (s.o.), den Rahmen solltest Du mit CSS einstellen. Das nennt man dann übrigens "Trennung von Inhalt und Layout".

Ich habe hier mal die Quelltexte und hoffe mir kann jemand helfen. Bin echt am Verzweifeln.

Deinen Fehler hat Dir thuemmy ja schon aufgezeigt, die fehlende Einheit.

Ich sehe übrigens viele "position:absolute". Ich wette die brauchst Du eigentlich gar nicht. Das ist für Anfänger eine gefährliche Sache. Besser kann ohnehin der Browser selbst die Elemente positionieren.

Grüße und viel Erfolg,
-Efchen