• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

css, erstellen?

E

egi

Neues Mitglied
Hallo Ihr lieben Experten,
wie genau erstelle ich nun ein css?
Bisher habe ich umständlich mit dem HTML Editor meine Websites erstellt, nun will ich erstmals css verwenden.
Habe nun einen css Ordner innerhalb der WS angelegt, darin die css-Datei "schrift.css" mit folgendem Inhalt:

<style type="text/css">
<!--h1{
font-family: Polo;
font-size:xx-large;
font color: #EFEFEF;
}

body{
background:URL('gal/kopfsteinpflaster1.gif') fixed;
}


p {
background-image:url(gal/kopfsteinpflaster1.gif
);
}

basicfont{color:#EFEFEF;}

a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#0000FF; text-decoration:none;}
a:hover {font-size:20; color:#00FF00; text-decoration:underline;}
a:active {color:#FF00FF; text-decoration:underline;}

</style>

abgelegt.

Als nächsten Schritt habe ich den seitenübergreifenden link
<link rel="stylesheet" href="css/schrift.css" type="text/css">

in den headbereich jeder einzelnen Seite meiner Webspace eingefügt.
Trotzdem funzt es nicht. Seit Tagen arbeite ich an diesem Problem und finde einfach nicht die Lösungs. Über eine Hilfestellung wäre ich überaus dankbar. :(
LG traudl (egi)
 
Nehm mal die Kommentarzeile raus aus dem css. also das <!--
basicfont ist mir unbekannt. Ansonsten scheint es ok zu sein, aber ich sehe schon, dass nicht wirklich Ahnung hast was du da machst. Ich nehme einfach mal an du hast wo kopiert und abgeändert (sorry wen ich falsch liege).
Du solltest dir eventuell mal ein Tutorial zu css anschauen. Das dauetr auch nicht all zu lang. Wenn du das Prinzip einmal verstanden hast, geht das relativ zügig.
Ich verweise da immer gerne auf CSS 4 You - The Finest in Stylesheets :)

Edit:
Ach nebenbei. Wenn du weitere "Codes" posten solltest verwende bitte den CODE- oder HTML-Tag des Forums. [*CODE] und [*/CODE] (* entfernen damit es so aussieht)

Code: 
Mein Code :D
 
Code: 
h1{
 font-family: Polo;
 font-size:xx-large;
font color: #EFEFEF;
 }

Hex-Zahlen sollten klein geschrieben werden, in deinem Fall: '#efefef'. Du kannst dies auch noch zusätzlich abkürzen, indem du nur 3 Zahlen/Buchstaben der Hex-Zahlen nimmst, Beispiel: '#555'. 'font-size' würde ich an deiner Stelle so machen, dass du die Grösse durch absolute oder relative Größenangaben anpasst. Absolute sind wohl sinnvoller, Beispiel: 'font-size: 40px', 'px' ist Pixel, und ist das geläufigste. Oft findet man auch 'em' dies ist eine relative Größeneinheit. 'font-family' -> Du solltest die Nicht-Standard-Webschriften in Anführungszeichen schreiben. In disem Fall: 'font-family: "Polo"'.

Code: 
body{
background:URL('gal/kopfsteinpflaster1.gif') fixed;
}

Es wird empfohlen zwischen z.B 'background' und die nachfolgende Definition ein Leerzeichen zu setzen. 'url' wird klein geschrieben.
HTML: 
<link rel="stylesheet" href="css/schrift.css" type="text/css">
Wenn du das noch perfekter machen möchtest, kannst du mit verschiedenen CSS-Dateien verschiedene Medien ansprechen, z.B: screen, projection etc. Link: HTML4 - CSS - Media Types (Nicht erschrecken, das Design ist nicht gerade das Wahre, Inhaltlich aber zum Thema korrekt) ;)
 
Auf die Gefahr hin, dass du mich prügelst, aber mal ne ganz naive Basicfrage (ist der Stecker drin?):

Hat deine Seite auch einen HTML-Teil, in dem die in CSS definierten Elemente aufgerufen werden?

Die Schriftart Polo ist nicht sehr verbreitet. Deshalb kann es sein, dass sie bei manchen Benutzern nicht angezeigt wird.
 
Hey,
ich hatte so in etwa das gleiche Problem. Ich habe es so gelöst

Code: 
<link rel="stylesheet" href="/css/schrift.css" type="text/css">
das du bei dem href="/css/schrift.css".... noch ein slash hinzufügst.

Ich hoffe es hilft

LG Kevin
 
Danke für die Vielen Tipps,
konnte leider nicht früher antworten, aber jetzt.
Ja Gilles, du liegst richtig, nachdem Frust, habe ich zunächst mal einen Code hergenommen + entspr.geä. Wenn man 60 + ist, dazu noch eine Frau + aufm bayr.Dorf lebt, tut man sich schwer Hilfe zu finden. Da kommt mir das Forum gerade recht. Das Tutorial werde ich mir auf jeden Fall anschauen.
Silar: auch Dir Dank. prm: nein ich verprügel keinen, bin ja froh Hilfe auf meine wirklich blöden Anfängerfragen zu erhalten. Also ich habe den 'link rel' im head Bereich jeder html Seiten eingegeben, wenn du das meinst. Oder muss ich eigens eine html-Seite erstellen in der das css eingefügt wird und als html Datei ( css.html) abspeichern? Meinst du das? Ich habe doch die css als Quelldatei im gleichen Ordner und den Verweis darauf im head. Müsste reichen.
Kevin: werde das mal ausprobieren, aber eigentlich ist es schon der Ordner nur eine Stufe höher. Jedenfalls werde ich alle Änderungen mal einbauen, komme allerdings erst am Die. dzu. Ich werde mich melden, wenn es funzt oder noch fehlerhaft ist. Einstweilen Dank. Ihr seid lieb!!
Gruß egi
 
Silar schrieb:
'font-size' würde ich an deiner Stelle so machen, dass du die Grösse durch absolute oder relative Größenangaben anpasst. Absolute sind wohl sinnvoller, Beispiel: 'font-size: 40px', 'px' ist Pixel, und ist das geläufigste. Oft findet man auch 'em' dies ist eine relative Größeneinheit.
Zum Vergrößern anklicken....
Und "em" ist auch die besser und sicher geläufigere. Denn ältere IEs haben mit "px" ein Problem und erlauben da kein Ändern der Schriftgröße. Das ist aber für manch sehschwächeren ein Problem. Deswegen sollte man auf "px" verzichten. Mit "em" kann man ohnehin besser auf die im Browser voreingestellte Schriftgröße referenzieren, man weiß, dass "1em" immer die richtige Schriftgröße für Fließtext ist. Jemand, der kleinere Schrift bevorzugt oder größere benötigt, der stellt das in seinem Browser ein und bei allen ist dann "1em" das Optimum.
 
Liebe Experten,
nu habe ich die empfohlenen änderungen gemacht und trotzdem ist das Ergebnis nicht wie gewünscht. Ich habe ein dunkles Straßenpflaster Hintergrundbild, welches auf jeder html Seite fix stehen bleiben soll, während nur die Schrift scrollbar ist.
Die Schrift allgemein auf allen Seiten soll weiß sein, damit sie sich vom Hintergrundbild abhebt. Die Überschrift soll in Font 'Polo' und ebenfalls weiß sein. Die Links soll bei schon besuchten link rot sein und beim drüberfahren grün werden und beim aktiven link weiß unterstrichen sein.
Ich habe das im .css jetzt so gemacht:
Code: 
<style type="text/css">
h1 {font-family:"Polo";
font-size:40px;
font color:#efefef;}

body {background image: url('gal/kopfsteinpflaster1.gif')fixed;}

font {color:#efefef;}

a:link {color:#efefef;text-decoration:none;}
a:visited {color:#df0000;text-decoration:none;}
a:hover {font-size:20;color:#00ff00;text-decoration:underline;}
a:active {color:#efefef;text-decoration:underline;}

</style>

Dann habe ich in den head-Bereich jeder einzelnen html-Seite eingefügt:
HTML: 
<head>

<Base target="_parent">

<title>acryl</title>


<link rel="stylesheet" href="css/schrift.css" type="text/css">

<style type="text/css"><!--
h1 {font-family:"Polo";
font-size:40px;
color:#efefef;}

body {background image: url('gal/kopfsteinpflaster1.gif')fixed;}

font {color:#efefef;}

a:link {color:#efefef;text-decoration:none;}
a:visited {color:#df0000;text-decoration:none;}
a:hover {font-size:20;color:#00ff00;text-decoration:underline;}
a:active {color:#efefef;text-decoration:underline;}

//--></style>

</head>
muss ich die font-Angaben und Hintergrundangaben nun im Body trotzdem noch machen, oder kann ich die jetzt weglassen?

Mir ist das nicht klar! Im CSS 4 u ist nur von einer zu erstellenden css. die Rede, die im gleichen Ordner wie die html Seiten abgespeichert werden soll und die verlinkung auf den einzelnen html Seiten mit der css.
@prm: Meine Webspace besteht insgesamt aus bisher 14 html-Seiten, die alle den Verweis auf die css. im Head haben. Trotzdem funzt es bisher leider nicht. Wo ist der Fehler? Ohne css kriege ich alles hin, will mir aber die Arbeit sparen, da die Webspace ja auch künftig erweitert wird.
Danke für Eure Tipps
 
Wenn die Schriftfarbe grundsätzlich gleich sein soll, dann reicht es, wenn du sie (außer bei den Links) einmal im body hinterlegst.
Ergänze also:
body {background image: url('gal/kopfsteinpflaster1.gif')fixed; color: #efefef;}
Zum Vergrößern anklicken....

Zur Einbindung der CSS-Angaben:

Diesen Teil im head-Bereich kannst du auf allen Seiten löschen:

Code: 
<style type="text/css">
h1 {font-family:"Polo";
font-size:40px;
font color:#efefef;}

body {background image: url('gal/kopfsteinpflaster1.gif')fixed;}

font {color:#efefef;}

a:link {color:#efefef;text-decoration:none;}
a:visited {color:#df0000;text-decoration:none;}
a:hover {font-size:20;color:#00ff00;text-decoration:underline;}
a:active {color:#efefef;text-decoration:underline;}

</style>

Wenn du das bereits eingebunden hast
Code: 
<link rel="stylesheet" href="css/schrift.css" type="text/css">
dann schreibe die CSS-Angaben ohne den style-Tag in deine Datei schrift.css und speichere diese Datei ab. Sie sollte dann folgenden Inhalt haben:

h1 {font-family:"Polo";
font-size:40px;
}

body {background image: url('gal/kopfsteinpflaster1.gif')fixed; color: #efefef; }

a:link {color:#efefef;text-decoration:none;}
a:visited {color:#df0000;text-decoration:none;}
a:hover {font-size:20px;color:#00ff00;text-decoration:underline;}
a:active {color:#efefef;text-decoration:underline;}
Zum Vergrößern anklicken....

Zwecks einheitlicher Browserdarstellung solltest du im body auch noch eine font-size hinterlegen. Achte darauf, dass du auch die Einheiten angibst.

Danach sollte alles auf alle Seiten durchschlagen wo der Verweis auf die CSS-Datei hinterlegt ist.

Ich würde die Datei umbenennen, z.B. in "style.css". Denn du kannst darein ja auch alle anderen CSS-Angaben hineinschreiben und nicht nur die Schrift.

Sieh dir mal hier insbes. die Ziffer 2 an. Da ist das nochmal erklärt:
CSS-Styleangaben einbinden

Noch ein weiterer Hinweis:
Damit die Hintergrundgrafik angezeigt wird, muss auch der Pfad zu dieser Datei stimmen. Dieser Pfad geht vom "Standort" der CSS-Datei aus.
Wenn du also zwei Ornder "gal" und "css" hast, die sich beide im gleichen Verzeichnis befinden, dann muss der Pfad in der CSS-Datei so lauten:

body {background image: url('../gal/kopfsteinpflaster1.gif')fixed; color: #efefef;}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Background image funzt net

Nu bin ichs nochmal.
Habe alle Änderungen berücksichtigt.prm vielen Dank!!
Bis auf das Hintergrundbild funzt nun alles. So blöd kann ich doch net sein. Ich habe den Ordner mit den html Seiten. Darunter 2 Ordner ( 1 x 'gal' mit allen Bildern, 1 x 'css' mit der style.css.)
HTML
css
gal

Die einzelnen html Seiten greifen einwandfrei auf die .css zu, sonst würde es bei der Schrift ja auch nicht funktionieren. Aber irgendwie ist es absolut gleich ob ich
body {background image: url('../gal/kopfsteinpflaster1.gif')fixed; color: #efefef; }
oder
body {background image: url('gal/kopfsteinpflaster1.gif')fixed; color: #efefef; }
Kein Bild erscheint!! Habe alle Möglichkeiten schon ausprobiert, leider ohne Ergebnis. Es ist bestimmt nur eine Kleinigkeit, aber in meinm Kopf dreht sich schon alles. Es ist zum Mäusemelken. Findet Ihr den Fehler?
LG egi
 
Hallo,

versuchs mal ohne Apostroph und lass 'image' weg. Also:
body { background: url(../gal/kopfsteinpflaster1.gif) fixed; color: #efefef; }
Zum Vergrößern anklicken....
ps: bin auch noch Anfänger, ist also nur ein Lösungsansatz von mir - einfach mal ausprobieren. :)


Grüße,
Quabbe
 
Sorry, egi, war mein Fehler, und selbst Efchen hat ihn nicht entdeckt :-(.
Da fehlte bei background-image noch der Bindestrich zwischendrin:
background-image
Zum Vergrößern anklicken....
.

So wie bei Quabbe sollte es aber auch klappen, ist die Kurzschreibweise.
 
Ich hab nicht aufmerksam mitgelesen, weil ich dachte, Du hättest das voll im Griff, prm! ;-)

P.S.: Kommt der Name eigentlich von "prima"? ;-)
 
Manchmal eben doch nicht.
Der Name "prm" kommt nicht von "prima", sondern hat eine andere Story als Hintergrund, aber das tut hier nichts zur Sache.
 
Hallo prm und alle anderen Ratgeber,
ES GEEEEHTTTT. Yipieyeh.:lol:
Endlich. DANKE euch allen. Schön dass es Euch gibt.
Dann kann ich ja allmählich anfangen, alle meine erstellten Webseiten unter Einbindung von css umzubauen. Werd mich vorher aber noch ein wenig einlesen, damit ich Euch nicht unnötigerweise in Beschlag nehme.
Dann habe ich natürlich noch das Problem, dass ich sie alle mittels Frames erstellt habe. Eigentlich verstehe ich die ganze Aufregung über die Frames nicht, denn funzen tut es doch gut damit. Naja mal sehen, wie sich das alles anläßt. Bin ja in Rente jetzt.:grin:
LG egi
 
egi schrieb:
Eigentlich verstehe ich die ganze Aufregung über die Frames nicht, denn funzen tut es doch gut damit.
Zum Vergrößern anklicken....
Nö, eigentlich überhaupt nicht.

Wie deeplinkst/bookmarkst Du denn bei Frames eine ganz bestimmte Unterseite? Geht nicht.
Was machst Du, wenn jemand über Suchmaschine auf eine Deiner Unterseiten kommt? Er bekommt dann das Menü nicht mit angezeigt. Und jetzt? Er wird wieder gehen. Ziel verfehlt.
Wie kann man das lösen? Mit JavaScript! Nur damit! Und wenn der Nutzer JS abgestellt hat? Tja, Site wieder unbenutzbar.

Was "funzt" daran jetzt gut?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben