CSS-Styles könnte man in eine externe Datei auslagern, so wie du es mit der navigations-CSS schon gemacht hast.

Was mich wundert:
Wenn ich mir den Quelltext anschaue, sehe ich irgendwie keinen body und auch keinen endenden head und html tag?
Kann mir da mal jemand auf die Sprünge helfen?
Valide scheints dennoch zu sein? Ich bin verwirrt ^^

Jonas

wrz

Du solltest den Text mit weiß oder einer anderen farbe hinterlegen, damit man den Text besser lesen kann. Außerdem hätte ich oben im Menü dieses kleine Bild transparent gemacht.

Gut finde ich das die Seite sehr übersichtlich ist

weiter so wird bestimmt gut!

cocomilka

Zitat:

Zitat von argox

CSS-Styles könnte man in eine externe Datei auslagern, so wie du es mit der navigations-CSS schon gemacht hast.

Was mich wundert:
Wenn ich mir den Quelltext anschaue, sehe ich irgendwie keinen body und auch keinen endenden head und html tag?
Kann mir da mal jemand auf die Sprünge helfen?
Valide scheints dennoch zu sein? Ich bin verwirrt ^^

Jonas

Ist mir selber noch garnicht aufgefallen!
Aber ich hatte die Seiten mit Dramweaver gemacht und nur Container verwendet.
Da ich selber geschaut hatte,ob die Seiten Valide sind und das sind sie, habe ich keinen Blick mehr darauf geworfen!
Komisch ist es aber schon....

http://www.validome.org/lang/ge/get/http://cocomilka.de

Die Navi gefällt mir garnnicht.....da muß was anderes hin, aber ich habe noch keine richtige Idee!
Vielleicht fällt Dir was ein?

cocomilka

Ach noch etwas, eine Frage an den Webmaster vom Forum hier!

Mir ist aufgefallen, daß sich die Google-Anzeigen in der Navi links Unten immer dem Thema anpasst. (in meinem Thema dann Katzen)

Wie geht das denn??

prepassenger

Nimm doch bei deinen Textboxen mal einen farbigen Hintergrund, das erleichtert die Lesbarkeit.

k-b

Zitat:

Zitat von cocomilka

Ach noch etwas, eine Frage an den Webmaster vom Forum hier!

Mir ist aufgefallen, daß sich die Google-Anzeigen in der Navi links Unten immer dem Thema anpasst. (in meinem Thema dann Katzen)

Wie geht das denn??

Das ist bei Google Adsense immer so

aNtiCHrist

Zitat:

Wenn ich mir den Quelltext anschaue, sehe ich irgendwie keinen body und auch keinen endenden head und html tag?
Kann mir da mal jemand auf die Sprünge helfen?
Valide scheints dennoch zu sein?

In HTML sind noch viel seltsamere Konstrukte zulässig, siehe z. B. http://dodabo.de/html+css/tests/shorttag.html oder http://de.wikipedia.org/wiki/SGML-Element. In XHTML sind diese ganzen fehleranfälligen Freiheiten entfallen, dort wäre sowas nicht zulässig.

Die Seite sieht insgesamt noch recht anfängerhaft aus, dafür ist der HTML-Code aber schon recht ordentlich, auch wenn ich das Weglassen der optionalen Elemente nicht empfehlen würde. Sehr unprofessionell wirken die verzerrten Bilder, das sollte nicht passieren. Auch sollte man Pixelbilder immer in ihrer nativen Auflösung in Webseiten einbinden, sonst hat man je nach Browser immer unschöne Alias-Effekte oder total vermatschte Bilder.

In der Navigation irritiert, dass nicht die gesamten Buttons als Link funktionieren. Weder das Bild davor, noch der Bereich über dem Text sind Bestandteil der Links. Absolute Positionierung ist hier völlig unnötig, das kann man sehr viel besser über float realisieren. Das ist ein typisches Problem, wenn man sich eine Seite im Dreamweaver zurechtklickt. Siehe http://css.maxdesign.com.au/listamatic/ für Beispiele für gute Navigationsleisten.

Ein böser Stilfehler ist die Schriftart Comic Sans MS, es gibt kaum eine schlimmere Schrift, der man im Web begegnet, sie erzeugt automatisch zu einem unprofessionellen Eindruck, da sie praktisch nur von Anfängern auf privaten Websites verwendet wird. Nimm lieber eine schlichte serifenlose Schrift wie die Verdana, oder bei nicht zu kleiner Darstellung die Trebuchet MS oder ggf. eine bildschirmoptimierte Serifenschrift wie die Georgia Das Unterdrücken des Pointer-Cursors ist eine Usability-Katastrophe, wie sollen die Nutzer erkennen, dass das Links sind?

Das Hintergrundbild mit dem Pfotenabdruck solltest du wenn nur dem body-Element zuweisen, dann hast du auch nicht mitten auf der Seite abgeschnittene Pfoten. Auch solltest du das Bild etwas kontrastärmer gestalten, bisher lenkt das etwas stark vom Lesefluss ab. Wenn du Rahmen um Textblöcke legen möchtest, solltest du diesen Elementen ausreichend padding geben, sonst sieht das sehr seltsam aus.

cocomilka

Hallo Leute,

erstmal danke für die vielen Antworten....
da ich jetzt erst mal ins Geschäft muss, habe ich jetzt leider keine Zeit für die Änderungen.

Sobald ich geändert habe, werde ich Euch nochmal nerven

Übrigens muß ich ein großes Lob an Euch Alle aussprechen!
Ich war schon mal in einen anderen Forum (keine Namen) und da hat man mich fast zerfleischt und angegriffen, weil die Seite halt noch nicht so perfekt ist und anstatt mir anständige Tips zu geben, hat man mich nur angemault.

Das ist hier nicht so....und darum DANKE!

cocomilka

Hallo und erstmal
GUTES NEUES!

Ich habe mal auf die Schnelle die Seiten geändert....
Wie siehts jetzt aus?
Ich muss aber noch was dran tun....
- die CSS auslagern (nur wie?)
- den HTML Code richtig machen, nach Standart (Hilfe!)
Aber sonst.....
Euere Meinung!

44 69 56 69

Das ist einfach.

Du erstellst eine neue Datei Namens layout.css (ob du es nun layout.css oder anders.css nennst ist egal)

Nun suchst du kurz deine CSS Befehle, und kopierst diese dann in die layout.css.

HTML-Code:

<style type="text/css">
<!--
<body>
}
.Stil47 {
	font-size: medium
}
#eingang {
	position:absolute;
	width:1030px;
	height:892px;
	z-index:2;
	left: 120px;
	top: 58px;
	background-image: url(paws_grau.gif);
}
.Stil49 {
	color: #529C21;
	font-size: medium;
}
.Stil56 {
	font-size: xx-large;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #529C21;
	font-weight: bold;
}

}
a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: large;
}

-->
</style>

Dort entfernst du dann noch die <script> Tags davor und dahinter.

Am ende erstellst du wo einst in deiner HTML Seite der CSS Code war mit folgenden Befehl eine Verknüpfung zu deiner CSS. (natürlich kannst du die CSS auch in einen anderen Ordner packen, du musst dann halt nur /ordername/ angeben.

HTML-Code:

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

Und fertig, die CSS Befehle werden immer noch geladen. Nur von der CSS Datei aus, so musst du die CSS Befehle nicht immer wieder neuschreiben, sondern nur die Datei verknüpfen.

Das gleiche kannst du mit den Java Scripts machen (<script type="text/javascript"></script>) nur lautet hier dann die Endung js und nicht CSS.

CSS hat den Vorteil das du so im Grunde deinen Inhalten IDs und Co. geben kannst. Was den Vorteil hat das die HTML Dateien übersichtlicher werden. (dreamweaver macht das automatisch wie du sicher bemerkt hast, schreibt neue aber nicht selbstständig in die CSS Datei)

wrz

Zitat:

Zitat von cocomilka

Übrigens muß ich ein großes Lob an Euch Alle aussprechen!
Ich war schon mal in einen anderen Forum (keine Namen) und da hat man mich fast zerfleischt und angegriffen, weil die Seite halt noch nicht so perfekt ist und anstatt mir anständige Tips zu geben, hat man mich nur angemault.

Das ist hier nicht so....und darum DANKE!

Ich nehme mal an diese Seite ist eine deiner ersten Homepages und das gulli Forum ist ja ->

Du musst auf jeden Fall die Farben der Links ändern, da dieses Standart blau nicht besonders schön ist. Zu deinem Quellcode muss man erst einmal nichts sagen, der geht nicht schlechter

Die Seite hast du bestimmt mit Dreamweaver erstellt, damit der Quellcode auch sauberer wird kannst du für den Anfang auch eine Vorlage von Dreamweaver nehmen. Gehe dazu auf Datei -> Neu ->Seitendesign (CSS) -> Zweispaltiges Layout link
Diese Vorlage kommt deiner Seite zimlich nahe.
Wenn die seite eine Private sein soll, dann hätte ich die Google werbung nicht auf die Homepage gesetzt.

corsab

Zitat:

Zitat von cocomilka

Übrigens muß ich ein großes Lob an Euch Alle aussprechen!
Ich war schon mal in einen anderen Forum (keine Namen) und da hat man mich fast zerfleischt und angegriffen, weil die Seite halt noch nicht so perfekt ist und anstatt mir anständige Tips zu geben, hat man mich nur angemault.

Das ist hier nicht so....und darum DANKE!

Der Unterschied darin das wir dich hier nicht zerfleischen ist, dass wir erkennen ob es jmd. ernst mit seiner Homepage meint oder einfach nur ein Angeber im Sinne von "Ich habe mir eine HP bei Homepagebaukasten zusammengeklickt bewertet mal" ist. Man kann bei dir erkennen das du was du tust richtig machen möchtest und zumindest ansatzweise versuchst es alles selber zumachen, und dafuer gibt es dem entsprechend auch Lob und Tipps von uns.

Aber nun mal zur Seite sonst quatsche ich noch wieder Stunden weiter...

Also wie viele hier schon gesagt und festgestellt haben ist die seite in HTML geschrieben, was ich erstmal garnicht so schlimm finde. Die Seite macht auf mich einen gut sortierten Eindruck und ist recht Übersichtlich, was ja schonmal ein Vorteil gegenüber den Baukasten HPs ist.
Desweiteren würde ich aber auch vorschlagen einige Fotos auszutauschen da diese verpixelt und unschön anzusehen sind, einfach nochmal das original Foto vernünftig verkleinern ohne Kompression oder Verlust. Und auch von mir noch ein letzter Tip entferne die Google Werbung wirst eh nichts damit verdienen.

Ansonsten bleibt mir nur zu sagen, mach weiter so es ist zwar noch nicht perfekt aber auf einem guten Weg.

corsab

cocomilka

Irgendwie will das nicht klappen.
Wo liegt nur der Fehler?
Hier mal der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Coco Milka Honey</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="icon" href="home.ico" type="image/ico" >
<link rel="SHORTCUT ICON" href="home.ico" >
<meta name="keywords" content="Daniela, Kalathenos, Cocomilka, Honey, Milka, Coco, www.cocomilka.de, www.coocmilka.com, Katzen, Fun, Bilder, Shiva, Fucker, Tiere, ">
<meta name="description" content="Milka erzählt aus ihrem Leben mit Honey und Coco. Die Seite für Katzenfreunde. Mit viel Fun und ganz vielen Bildern von uns.">
<meta name="author" content="Kalathenos Daniela">
<meta name="page-topic" content="Tiere">
<meta name="generator" content="Microsoft FrontPage 5.0">
<meta name="Content-language" content="de">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="revisit" content="1 days">
<meta name="pagerank" content="1">
<meta name="copyright" content="Kalathenos Daniela">
<meta name="publisher" content="Arcor">
<meta name="page-type" content="Private Homepage">
<meta name="audience" content="Alle">
<meta name="expires" content="never">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="Navi">
<img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="home.htm">Home</a>   <img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="wir.htm">Über uns</a>   <img src="pfeil.gif" alt="p" width="10" height="10" border="0"><a href="bilder.htm"> Bilder von uns</a>    <img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="funseite.htm">Funseite</a>    <img src="pfeil.gif" alt="p" width="10" height="10" border="0"><a href="zum_nachdenken.htm"> Nachdenkliches </a>   <img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="besuch.htm">Besuch</a>   <img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="urlaub2007_Bilder1.htm">Urlaub</a>  
 <img src="pfeil.gif" alt="p" width="10" height="10" border="0"><a href="gaestbuch.htm"> Gästebuch</a>   <img src="pfeil.gif" alt="p" width="10" height="10" border="0"><a href="awards.htm"> Awards</a>   <img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="links.htm">Links</a> <img src="pfeil.gif" alt="p" width="10" height="10" border="0"> <a href="impressum.htm">Impressum</a>     
</div>
</div>
<div id="home">
Herzlich Willkommen bei
<img src="Start.png" alt="start" width="890" height="214">
                                            Coco           &nbs p;            & nbsp;           &nbs p;             Milka           &nbs p;            & nbsp;           &nbs p;               Honey      
die etwas andere Katzenseite<img src="schn.gif" alt="schnecke" width="366" height="100">
 
Wir wünschen allen unseren Besuchern
ein Gutes Neues Jahr!
Auf unserer Seite findet Ihr auch 2008
immer wieder viel Neues!
Besucht uns einfach öfter mal!</div>
<body>
<html>

Hilfe!

Kirby

HTML-Code:

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

Dieses Stylesheet existiert nicht.

Du kannst deine HTML-Quelltexte und Stylesheets übrigens auch auch in [html][/html] bzw. [code][/code] einbetten.
Dann sind sie etwas übersichtlicher für uns.

edit:
@unter mir:
Jemand mit diesem Avatar sollte sich nicht als Katzenliebhaber outen

*scnr*

Als Katzenliebhaber mag ich solche Seiten immer.

Schön gemacht!!!

cocomilka

[quote=Kirby
@unter mir:
Jemand mit diesem Avatar sollte sich nicht als Katzenliebhaber outen

*scnr*[/QUOTE]
Was sind Avatare (englisch: avatars)? Laut Duden ist ein Avatar eine Darstellung, Animation oder eine Karikatur, mit der sich der Benutzer im Cyberspace eine virtuelle Identität schafft. Dabei ist der Begriff Avatar wohl abgeleitet von avatara, was soviel bedeutet wie das Herabsteigen, Herabkunft; Inkarnation, dies steht für die Verkörperungen eines Gottes auf Erden in den indischen Religionen. Vereinfacht würde das bedeuten, das ein Avatar ein Abbild des Menschen sein soll, der diesen Avatar benutzt. Sehr gut gefällt mir auch diese Beschreibung: Avatare sind virtuelle Doppelgänger im Cyberspace.

Das ist die Beschreibung, aber ich versteh den Sinn, den Du meinst nicht ganz??

Entschuldige, ich hatte den Code kopiert, aber nicht auf den Server geladen, da ich nur erst testen wollte.
Jetzt ist es auf dem Server und ich bin immer noch ratlos.
Aber habe mir heute in der Arbeit schon viele Seiten bezüglich xhtml und css ausgedruckt und vielleicht habe ich jetzt endlich mal nen Durchblick!
Aber keine Angst:
Ich werde sicher noch ein paar Mal nerven müssen, wenn ich nicht weiter komme

aNtiCHrist

Es war offenbar der Avatar mit dem Drehspießakrobaten von arnoldrimmer gemeint.

Was konkret funktioniert denn nicht so, wie du es dir vorstellst? Ich würde jedenfalls folgende Dinge anders machen:

die unnötige Splashseite weglassen
das Bild auf der Homepage als JPEG speichern. PNG eignet sich für Fotos eher nicht so gut, die Datei ist über 500 kiB groß
Die Bildunterschriften jeweils mit einem der Fotos als separate Bilddatei in einen eigenen Container packen und dann diese Container floaten lassen. Dann kannst du den  -Missbrauch weglassen und die Positionen stimmen dann auch.
den Inhalt entweder innerhalb des Viewports oder aber innerhalb einer gemeinsamen Box zentrieren, aber nicht die Navigation und den Rest verschieden.

Die Klassen solltest du sinnvoll benennen, das vereinfacht den Überblick doch erheblich, Stilxx ist praktisch nichtssagend. Zu den Elementen mit mehreren Klassen: Hat der olle IE da nicht einen Bug? Sicher, dass du die überhaupt benötigst?

cocomilka

Zitat:

Zitat von aNtiCHrist

die unnötige Splashseite weglassen
das Bild auf der Homepage als JPEG speichern. PNG eignet sich für Fotos eher nicht so gut, die Datei ist über 500 kiB groß
Die Bildunterschriften jeweils mit einem der Fotos als separate Bilddatei in einen eigenen Container packen und dann diese Container floaten lassen. Dann kannst du den  -Missbrauch weglassen und die Positionen stimmen dann auch.
den Inhalt entweder innerhalb des Viewports oder aber innerhalb einer gemeinsamen Box zentrieren, aber nicht die Navigation und den Rest verschieden.

1. was ist das?
2. das Bild ändere ich.Denn das gefällt mir eh nicht so recht
3. floten lassen??? Ich bin absoluter Anfänger...was ist das?
4. das Zentrieren will ich ja haben...aber es klappt nicht

Also ich möchte die Navi in der Schrift #666666 haben.
Ich finde aber nicht die richtigen Angaben um die Links zu bearbeiten.
Das hier ist der Code:
}
#Navi {
position:absolute;
width:803px;
height:80px;
z-index:1;
left: 102px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCCCCC;
top: 22px;
color: #666666;
font-weight: normal;
a:link
color: #666666;
a:visited
color: #666666;
a:hover
color: #666666;
a:active
color: #666666;

Ich kapiere es garnicht mehr!

So wie es auf der Seite "bilder.htm" aussieht....so will ich es haben....
Nur ist da die css noch drin und da sind auch noch Container beschrieben, die garnicht vorhanden sind!

Oggy96

Ich finde die Seite ziemlich einfach gestaltet aussehend. Fast sogar karg. Aber ich hab von sowas auch keine Ahnung. Ist jetzt nur mal meine Meinung ganz Objektiv

corsab

Setz doch bitte deine Codes immer in [html][/HTML ] oder [code][/CODE ] oder aber [php][/PHP ]

PHP-Code:


		
			
}

#Navi {

position:absolute;

width:803px;

height:80px;

z-index:1;

left: 102px;

font-family: Geneva, Arial, Helvetica, sans-serif;

font-size: 14px;

background-color: #CCCCCC;

top: 22px;

color: #666666;

font-weight: normal;

a:link

color: #666666;

a:visited

color: #666666;

a:hover

color: #666666;

a:active

color: #666666;

corsab

Kirby

Zitat:

Zitat von cocomilka

1. was ist das?

Ich vermute, dass er die sinnlose ENTER-Seite meint. Kannst du mir erklären, warum du sie hast? Diese Seiten sind absolut unnötig!

Zitat:

Zitat von cocomilka

3. floten lassen