[CSS und HTML] Suche Hilfe!

tonikln · 9. September 2007

Hallo zusammen,

ich versuche HTML zu lernen und es ist auch bis jetzt nicht so schwer. Nur ich hab gemerkt, dass wenn man nur einen HTML Code macht, nicht viel mit anfangen kann

Ich versuche jetzt mit CSS Buttons zu erstellen mit auch ein paar effekte nur ich schaff das nicht, ich hab mir auch schon die Befehle angeschaut und hab sie auch angewendet, aber es funzt nicht!!
Meine Frage ist jetzt Wie kann ich in den HTML Code auch noch CSS einbinden und ich will auch noch das die Links angezeigt werden ?!

Hier mein HTML Code:

Code:

<html>
<head>
<title>Hauptseite</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body bgcolor="black">
<font color="white">
<p align="center"><img src="logo1.jpg" width="270" height="150" border="0" alt="Logo">    </p>
<p align="center"><img src="hw-bild.jpg" width="270" height="150" border="0" alt="Willkommen" align="center">  </p>
<br>
<center>
<a href="index.html">Hauptseite</a>
<a href="autos.html">Autos</a>
<a href="kontakt.html">Kontakt</a>
<a href="mail.html">Mail</a>
<a href="anfahrt.html">Anfahrt</a>
<br><br><br><br>
</center>
<center>Herzlich Willkommen auf der Seite Autos Cologne!<br><br>
Auf dieser Seite finden Sie Informationen Ã¼ber Autos.<br>
</center>
</font>
</body>
</html>

Und jetzt mein CSS Code:

Code:

<body bgcolor="black">
a{font-family: arial; text-decoration:none; display: inline
<a href="index.html">Hauptseite</a>
<a href="autos.html">Autos</a>
<a href="kontakt.html">Kontakt</a>
<a href="mail.html">Mail</a>
<a href="anfahrt.html">Anfahrt</a>}

a:hover {font-size: x-large; background-color:white;}
a:visited {color:gray}
a:focus {color:red;}

</body>

Ich bin mir auch unsicher mit BODY ob es wirklich richtig ist...
Ich hoffe ihr könnt mir weiter helfen!!

Danke im Voraus!

Backslash · 9. September 2007

Also bei der css-Datei kommt kein <body> hin. Lies am besten mal ein Wenig auf SELFHTML. Außerdem fehlt ein Semikolon bei a:visited hinter color:gray und es heißt grey nicht gray.

mfg

masterius7 · 9. September 2007

HTML:

a{font-family: arial; text-decoration:none; display: inline}

a:hover {font-size: x-large; background-color:white;}
a:visited {color:grey;}
a:focus {color:red;}

so klappt das!

Backslash · 9. September 2007

Wenn man's in eine CSS-Datei auslagert: Ja. Ist auch sinnvoll.
Man kann das ganze auch mit <style>-Tags direkt in die HTML-Datei packen:

Code:

<style type="text/css">
a{font-family: arial; text-decoration:none; display: inline}

a:hover {font-size: x-large; background-color:white;}
a:visited {color:grey;}
a:focus {color:red;}
</style>

Aber sinnvoller ist, wie bereits gesagt die augelagerte Variante.

mfg

PS: Du solltest immer einen validen DOCTYPE ganz am Anfang deiner HTML-Dateien angeben, zB:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dann aber auch an die Spezifikation des DOCTYPE halten! Alles schön auf SELFHTML erklärt

Bohemund · 9. September 2007

das linkende-tag kannst du entfernen. falsche syntax, das gehört nicht da hin...

tonikln · 9. September 2007

Bis hierhin hab ich das ja schon verstanden!!

Nur schaut ech mal die Links von den HTML CODE an!
Die möchte ich gerne geändert haben und zwar so wie ich das so ungefähr in den CSS Code habe, nur das klappt nicht, ich hab auch schon alles verbessert wie ihr das geschrieben habt.

Bohemund · 9. September 2007

kannst du genauer beschreiben was du an den links ändern möchtest? hab mal einbisschen verbessert und korrigiert, hoffe du hast nichts dagegen...

es ist jetzt etwas übersichlicher.
HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hauptseite</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
    <body class="body">
        <p align="center"><img src="logo1.jpg" width="270" height="150" border="0" alt="Logo" /><br /><br />
            <img src="hw-bild.jpg" width="270" height="150" border="0" alt="Willkommen"/> </p><br />
        <div align="center">
            <a href="index.html">Hauptseite</a>
            <a href="autos.html"> Autos</a>
            <a href="kontakt.html"> Kontakt</a>
            <a href="mail.html"> Mail</a>
            <a href="anfahrt.html"> Anfahrt</a><br /><br /><br /><br />
        </div>
        <div align="center">Herzlich Willkommen auf der Seite Autos Cologne!<br /><br />Auf dieser Seite finden Sie Informationen &uuml;ber Autos.<br />
        </div>
    </body>
</html>

CSS:

Code:

/* CSS Document */
.body{
    background-color:#000000;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    }
a:link{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    display: inline;
    }
a:hover {
    font-size: x-large;
    background-color: #FFFFFF;
    }
a:visited {
    color:#333333;
    }
a:focus {
    color:#FF0000;
    }

Backslash · 9. September 2007

@Bernbaz: Du könntest es noch in code-tags packen

@Threadersteller: hast du jetzt mal auf SELFHTML die CSS-Einführung gelesen? Dann sollten sich solche Fragen garnicht stellen.

mfg

Bohemund · 9. September 2007

@Backslash: das wird er in 3 stunden nicht schaffen, da braucht es etwas mehr zeit um das mit den pseudoformaten und klassen zu blicken...

Zweipunktnull · 9. September 2007

@ Bernbaz's Code

Ähm... Wir leben im Jahre 2007.

Uralt-HTML-Code ist schlimm, aber irgend so ein Mischmasch finde ich ja noch viel unerträglicher...

Also wenn man schon CSS einsetzt, dann doch bitte konsequent.

<div align="center"> <img border="0">
Das sollte heutzutage nicht mehr vorkommen - und erst recht nicht, wenn man sowieso mit Stylesheets arbeitet.

Adagio · 9. September 2007

Schau dich hier ein wenig um: www.css4you.de

tonikln · 10. September 2007

@backslash:

Klar hab ich da rein geschaut, auch schon bevor du hier den link rein gepostet hast

...
Nur ich finde nicht das was ich suche!
Ich Erkläre es nochmal ich glaub ich hab mich falsch usgedrückt, darum versteht ihr nicht was ich meine

sorry mein Fehler !!!!

Wenn ihr schon in den HTML Code geschaut habt, da gibt es Links z.B. Hauptseite, Autos usw.!
Nun möchte ich gerne die Links etwas besser gestalten und das möchte ich gerne mit CSS machen. Nur ich weiß nicht wie ich diese Links in mein CSS Code einbinden kann. Es soll so zu sagen eine mischung aus HTML und CSS sein!

Hoffe ihr könnte mir jetzt weiter helfen

Bohemund · 10. September 2007

Computer Freak schrieb:
@ Bernbaz's Code

Ähm... Wir leben im Jahre 2007.
Uralt-HTML-Code ist schlimm, aber irgend so ein Mischmasch finde ich ja noch viel unerträglicher...

Also wenn man schon CSS einsetzt, dann doch bitte konsequent.

<div align="center"> <img border="0">
Das sollte heutzutage nicht mehr vorkommen - und erst recht nicht, wenn man sowieso mit Stylesheets arbeitet.

hmmm, andere zurechtzuweisen ist immer sehr einfach...

einen vorschlag von dir sehe ich nicht! machs besser.
zu deiner info es ist xhtml-konform und kein uralt-html. würdest du dich auskennen, wüsstest du das. also wenn du es besser kannst hilf ihm und hör auf dich hier zu profilieren...

Adagio · 10. September 2007

zu deiner info es ist xhtml-konform...

Nö, ist es nicht. XHTML-Konform wäre:

<img border="0" alt="Alt-Text />

Zweipunktnull · 10. September 2007

zu deiner info es ist xhtml-konform und kein uralt-html.

Na da kennt sich aber jemand aus. Die Attribute align und border sind beide deprecated, das heißt, dass die Attribute als veraltet angesehen werden und in künftigen HTML-Standards entfallen sollen. Im Übrigen sind sie auch nicht XHTML1.1-konform und auch im XHTML1.0-Standard sind sie nur in der "gnädigen" Transitional-Variante erlaubt. Du siehst, es ist nicht (wirklich) XHTML-konform und es ist offiziell als veraltet eingestuft worden, also mach mal hier ein bisschen langsamer mit deinem Halbwissen.

Ich kann nicht sehen, wo ich mich profiliert haben sollte, ich habe nur einen Verbesserungsvorschlag gebracht. Den CSS-Code habe ich nicht selbst dazugeschrieben, weil ich dachte, dass den sich jeder hier im Thread denken kann, weil das zu den Basics von den Basics gehört.

<div align="center"> => <div style="text-align: left">
<img border="0"> => <img style="border: none">

Adagio · 10. September 2007

<div align="center"> => <div style="align: left">

Ähm, peinlicher Fehler? Es gibt kein align: bei CSS

Ein <div align="center"> allein bringt überhaupt nichts. Ein DIV ist von Hause aus ein Blockelement und daher maximal so groß, wie es Platz hat. Will man es zentrieren, braucht es eine bestimmte Breite und ein margin: 0 auto;

<div style="width: 300px; margin: 0 auto">Ich bin zentriert</div>

Bohemund · 10. September 2007

Computer Freak schrieb:
Na da kennt sich aber jemand aus. Die Attribute align und border sind beide deprecated, das heißt, dass die Attribute als veraltet angesehen werden und in künftigen HTML-Standards entfallen sollen. Im Übrigen sind sie auch nicht XHTML1.1-konform und auch im XHTML1.0-Standard sind sie nur in der "gnädigen" Transitional-Variante erlaubt. Du siehst, es ist nicht (wirklich) XHTML-konform und es ist offiziell als veraltet eingestuft worden, also mach mal hier ein bisschen langsamer mit deinem Halbwissen.

Ich kann nicht sehen, wo ich mich profiliert haben sollte, ich habe nur einen Verbesserungsvorschlag gebracht. Den CSS-Code habe ich nicht selbst dazugeschrieben, weil ich dachte, dass den sich jeder hier im Thread denken kann, weil das zu den Basics von den Basics gehört.

<div align="center"> => <div style="align: left">
<img border="0"> => <img style="border: none">

@ Adagio, Computer Freak:

siehst du in der DOCTYPE irgendwo "Strict"?? wie ich schon sagte, jammert nicht quatscht nicht, erspart mir eure belehrungen und macht es Besser...
schon armselig, wenn man sich an 2 zwei tags und dem css so aufgeilen...

2. ich habe nie behauptet dass ich es perfekt kann. ihr beide anscheinend schon, habt ihr dem threadsteller geholfen, ist mir nicht aufgefallen stattdessen nörgelt ihr an meinem code rum. übrigens ist es nicht der schlechteste wenn man mit html und css anfängt.
@ Adagio: vergiss das 2. Hochkommata beim ALT-Atribut nicht

so ihr lieben ansonsten habt ihr recht und ich meine ruhe... dann viel spaß noch beim jammern, nörgeln und eurer besserwisserei... produktiv wart ihr jedenfalls nicht

Zweipunktnull · 10. September 2007

Ähm, peinlicher Fehler?

Scheiße.

@ Bohemund

wenn man sich an 2 zwei tags und dem css so aufgeilen

Sorry, es war andersrum. Du hast dich an meiner Verbesserung gestört, und ich hab dann lediglich nochmal zurück argumentiert.

Bohemund · 10. September 2007

ähm, sorry hab überhaupt nichts gegen deinen vorschlag gesagt, finde ihn gut und danke dir... hab mich nur gegen deine herablassende art gewehrt mich auf meine fehler hinzuweisen...

das ist hier mein letzer post, scheint den threadsteller nicht zu interessieren

tonikln · 10. September 2007

doch interessiert mich

nur ich kann leider da nicht mit reden, weil ich mich damit nicht auskenne

aber ansonsten hab ich das geschafft mit den Links hab etwas rumprobiert und auch geschafft ich poste einfach den CSS Code hierhin:

Code:

* {background-color:black;font-weight:#FFFF66;font-family:Arial;}
a {font-family: Palatino Linotype; text-decoration:none; display: inline}

a:hover {font-size: x-large; background-color:white;}
a:visited {color:grey;}
a:focus {color:red;}

Also einfacher konnte es nicht sein.

Jetzt sind die Buttons wenn man drauf geht anders

[CSS und HTML] Suche Hilfe!

Lt. Junior Grade

Captain

Cadet 3rd Year

Captain

Bohemund

Gast

Lt. Junior Grade

Bohemund

Gast

Captain

Bohemund

Gast

Commander

Adagio

Gast

Lt. Junior Grade

Bohemund

Gast

Adagio

Gast

Commander

Adagio

Gast

Bohemund

Gast

Commander

Bohemund

Gast

Lt. Junior Grade

Ähnliche Themen