Eure Webseiten #6

**Whiz-zarD** · 03.11.2008 19:03

Hässliches grün auf hässlichem Weiss.

Das Weiss strahl um so heller, wegen dem Giftgrün.
Dann besitzt das Grün einen Verlauf ins Schwarze, was ich persönlich ebenfalls hässlich finde.

**Inius** · 03.11.2008 20:35

Habe den Hintergrund rausgenommen

, aber mal eine Frage...wo ist das Schwarz

.
Nur die Schrift ist Schwarz, sonst nichts!

**Whiz-zarD** · 03.11.2008 21:00

Naja, Schwarz ist vielleicht nicht ganz richtig.
Aber das dunkle Grün geht schon mehr in Richtung schwarz.

**The Best Isaac** · 03.11.2008 21:07

Zitat von Whiz-zarD

Naja, Schwarz ist vielleicht nicht ganz richtig.
Aber das dunkle Grün geht schon mehr in Richtung schwarz.

Also, auf meinem Monitor ist das von dir markierte Grün sehr weit von Schwarz entfernt. oO

@Fansoftware: Mir mag das Design nicht so hundertprozentig zusagen. Ist mir zu viel Grün, das mich irgendwie an die XBox erinnernt, und auch vom Design selbst.
Vielleicht solltest du auch nicht so viel mit Spiegeleffekten arbeiten. Im Header mag das noch ganz nett sein, aber in der Navigation find ich's schon übertrieben.
Achja, "Ohne_Titel_1" ist natürlich auch kein besonders toller Name für eine Seite.

(Und irgendwie sieht mir der Seitenquelltext stark nach Div-Suppe aus. Aber da ich mich im Grunde nicht auskenn, halt ich besser meine Klappe.)

**NPC Fighter** · 03.11.2008 21:07

@ Whiz: Ich weiß nicht, was du hast, aber so schlecht ist's doch gar nicht. Schwarz kann ich da ebenfalls nicht entdecken. Ist halt dunkelgrün. *shrug*

Pluspunkt: Die Formen sehen irgendwie angenehm klar aus.
Was ich aber auf jeden Fall ändern würde, wäre der Hintergrund der kleineren Boxen, weil die dunkle Farbe da irgendwie ziemlich erdrückend wirkt. Ich würde sie genauso halten, wie die große Box, dann sieht das Konzept auch gleich viel konsistenter aus. Zusätzlich solltest du vielleicht noch den vertikalen Abstand zwischen den kleinen Boxen erhöhen, weil so Box B direkt unter der Spiegelung von Box A liegt, was meiner Meinung nach irgendwie ein bisschen merkwürdig aussieht.

Auf jeden Fall solltest du aber am Text in der Navigation arbeiten. Ich muss zwar demnächst eh zum Optiker, aber ich finde es nichtsdestotrotz verdammt schwierig zu lesen. Das mag einerseits am Antialiasing, andererseits an der Spiegelung liegen. Genau beschreiben kann ich's irgendwie nicht, vielleicht kannst du ja mal ein bisschen an den Settings drehen .

Recht unspektakulär ist wie bei deinen vorherigen Seiten allerdings der Header. Irgendwie fehlt da das gewisse Etwas.
Im direkten Vergleich mit den Vorversionen ist das Design aber auch jeden Fall ein riesen Fortschritt. Wenn du hier und da noch ein paar Dinge überarbeitest, kann da sicherlich ne coole Seite bei raus kommen. (=

**Inius** · 04.11.2008 12:32

Ich habe jetzt mal die Abstände größer gemacht!
Ausserdem einen Fehler bei den Texten korrigiert, da Fire Fox im Gegensatz zu IE und Opera das nicht richtig ausführt, sondern nur .
Desweiteren habe ich den Gelbstich raus gemacht, die Buttons leserlicher gemacht und den Titel noch mal überarbeitet!
Aber das mit den Boxen will ich eigentlich so lassen, da der untere Teil sonst zu monoton wirkt!

The Best Isaac:
Das der Style ein wenig nach 360 kommt, war bzw ist absicht!

Aber habe keine Ahnung wie ich den Header besser gestalten kann...

Mir fällt das persönlich nichts anständiges ein!

**treeghost** · 04.11.2008 12:44

Zitat von Fansoftware

Aber habe keine Ahnung wie ich den Header besser gestalten kann...

Mir fällt das persönlich nichts anständiges ein!

Schlichter hallten? Also der untere Text kann wohl weg.

So schlimm mMn sieht die Seite doch gar nicht aus.
Vorallem der grüne Ton gefällt mir.

**Xardas der Dunkle** · 04.11.2008 14:20

Zitat

Ausserdem einen Fehler bei den Texten korrigiert, da Fire Fox im Gegensatz zu IE und Opera das nicht richtig ausführt, sondern nur .

Ist auch logisch. Es heißt und nicht

.
Firefox verhält sich in dem Fall eig. korrekter als IE und Opera.

**Ravana** · 05.11.2008 16:52

Zitat von Xardas der Dunkle

Ist auch logisch. Es heißt und nicht :rolleyes:.
Firefox verhält sich in dem Fall eig. korrekter als IE und Opera.

Jau, ist ein Tag, das kein End-Tag braucht, so wie auch <img>. Normalerweise machst ja dein Eröffnungstag dahin, wos losgeht (, <h1> usw usf), dann den Inhalt und den Endtag ans Ende.

Da img und br nun aber kein Ende haben, sondern nur an genau einer Stelle positioniert sind, macht man korrekterweise Anfang und Ende in nur einen Tag :D <img src="xxx.xxx" width="xxx" height="xxx" /> und . Nur damits korrekt ist. Meiner Erfahrung nach haben die meisten Browser aber auch kein Prob damit, wenn man das Slash am Ende weglässt... Aber korrekter Code ist doch fein.

Btw, finde das grün mit hellem grau sehr schön eigentlich. Nur wie jemand schon sagte sind die Spiegeleffekte fast schon übertrieben, zumindest in der oberen Navigation sieht das irgendwie unaufgeräumt oder übertrieben aus.

**dead_orc** · 05.11.2008 16:59

Zitat von Ravana

Jau, ist ein Tag, das kein End-Tag braucht, so wie auch <img>. Normalerweise machst ja dein Eröffnungstag dahin, wos losgeht (, <h1> usw usf), dann den Inhalt und den Endtag ans Ende.

Da img und br nun aber kein Ende haben, sondern nur an genau einer Stelle positioniert sind, macht man korrekterweise Anfang und Ende in nur einen Tag

<img src="xxx.xxx" width="xxx" height="xxx" /> und . Nur damits korrekt ist. Meiner Erfahrung nach haben die meisten Browser aber auch kein Prob damit, wenn man das Slash am Ende weglässt... Aber korrekter Code ist doch fein.

Wenn du schönen Code schreiben willst, solltest du wenigstens noch drauf hinweisen, dass das nur für XHTML gilt. Der W3C Validator wirft zwar für ein   in HTML 4.01 Strict keinen Fehler aber eine Warnung:

Zitat

NET-enabling start-tag requires SHORTTAG YES.

foo bar

The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.

Warum sie da also ne Warnung statt nem Fehler schmeißen ist mir rätselhaft, da nach Standard das in HTML 4.01 Strict eigentlich implizit zu  /> werden müsste, was zumindest wegen des > statt > einen Error werfen sollte.

**Inius** · 09.11.2008 13:54

Habe noch mal das Design ein wenig ab geändert, wollte noch mal fragen ob das besser aussieht?
Allerdings erst mal nur Test weise als Grafik!

Weil das jetztige Grün langweilig aussieht, da fehlt der Pepp.
Vieleicht hat ja noch jemand einen Tipp, gegen was ich graue tauschen kann!

**OhWeh!** · 10.11.2008 13:28

Ich finde die Farbgebung generell irgendwie unpassend. Kann dir aber leider auch nicht wirklich sagen was man da besser machen kann, an deiner stelle würde ich noch ein wenig rumprobieren, vllt etwas mit blau oder orange.

**Crash-Override** · 11.11.2008 22:38

Da ich gerade in Info eine Homepage bauen muss bzw. daran arbeite dachte ich mir mal ich koennte es hier mal zeigen (Im Prinzip legt unsere Lehrerin keinen Wert darauf das der Quelltext valide ist oder das die Webseite toll aussieht, da die anderen in meinem Kurs es gerade so gerafft haben wie man Frames benutzt und die aller kleinsten Anfaenge in Richtung CSS). Jedenfalls hier ist mein aktuelle Version: V5.
Mit den Farben bin ich mir unsicher. Es soll auf jeden Fall neutral und schlicht sein, also auf keinen Fall so ein haesslich grelles Rot/Guen/Blau oder sowas (Wobei mir gerade auffaellt, das ich die Farben der Schrift im Header wohl lieber nochma aendere, das ist irgendwie dumm geworden).
Die gegebenen Bewertungskriterien duerfte die Seite also schon auf jeden Fall uebertreffen.
Nur bei "Sieht die Seite bei der Betrachtung mit verschiedenen Browsern anständig aus?" gibt es die Einschraenkung das es im IE6 Probleme mit dem alphatransperenten PNG gibt (was natuerlich egal ist, da IE6 und wer den nutzt gehoert eh erschossen), aber fuer Firefox, Opera, Safari und sogar fuer IE7 garantiere ich mal.
Und beim Punkt "Wurden zur Gestaltung Tabellen eingesetzt?" bin ich mir auch unschluessig, da ich nicht weiss ob das jetzt positiv (eine Verbesserung gegenueber Frames) oder negativ (schlechter als CSS) zu verstehen ist, wobei ich denke das die reine CSS Loesung auf jeden Fall besser ankommen wird.

edit: damn ich haette mal ne fertige Seite durch den Validator schicken sollen statt nur das Template. Ignoriert die Fehler die er ausspuckt, das liegt an den Links nicht am Rest des Codes

**Drakes** · 11.11.2008 23:14

Vielleicht zuerst Edit anschauen...
Wenn die Seite so dünn ist, dann zentriere sie bitte.

Div um alles herum (zum Beispiel mit id="page") :

Code:

....
<body>
   <div id="page">

   .....

   </div>
</body>
....

Css:
#page {
   margin: 0 auto;
   width: 642px;
   }

Zitat von Crash-Override

edit: damn ich haette mal ne fertige Seite durch den Validator schicken sollen statt nur das Template. Ignoriert die Fehler die er ausspuckt, das liegt an den Links nicht am Rest des Codes

Das ist aber fehlerhaft, man muss im href-Attribut des a-Elements bei den URL's das wirtschaftliche Und (= & = Ampersand) durch & ersetzen.

Ausserdem sehe ich, dass du einen Editor gebrauchst, der nicht richtige Tabulator-Zeichen einfügt, oder du selber 2 Leerstände machst, naja, trifft nicht ganz meinen Geschmack des Schreibens.

Edit: ich sehe du hast alles absolut positioniert, da muss ich meine Kommentare wohl noch mals korrigieren. ^^

Verwende für den Titel wirklich einen img-Tag und nicht ein div. Das ist nicht Barrierefrei, da du keinen Alternativtext setzten kannst, ausserdem kannst du den Titel als Titel kennzeichnen (einer der Tipps von mitaki, an die ich mich noch gut erinnere

):

Code:

<h1><img src="images/logo.png" width="500" height="100" alt="Patrick's Website" /></h1>

Code:

#middle #content #title

ist normalerweise nicht nötig. (Es gibt die Ausnahme, dass das title in einem anderen Kontext auftreten kann, aber bei wird das kaum auftreten) Da reicht:

Code:

#title

Du darfst die ID ja nur einem Element geben.

Code:

	margin-left: 5px;
	margin-right: 5px;
	margin-top: 20px;
	margin-bottom: 5px;

geht auch mit:

Code:

	margin: 5px;
	margin-top: 20px;

(jaja, müsst jetzt nicht mit margin: 20px 5px 5px 5px; kommen

)

Code:

#content_inner
{
	border: 1px solid #564b47;
	background-color: #e1ddd9;
	color: black;
	min-height: 240px;
	overflow: auto;
	text-align: justify;
	font-size: 0.8em;
	padding: 5px;
}

Für was ist das overflow? Wird doch gar nie passieren oder täusch ich mich da?

Also, so würde ichs ungefähr machen: (» ist nicht perfekt gelöst *räusper* und Achtung, Doctype ist noch abgeändert.)

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"
  xml:lang="en" lang="en">
	<head>
		<title>Mainpage - Patrick's Website</title>
		
		<link rel="stylesheet" media="all" title="Standard" href="style.css" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div id="page">
			<h1><img src="images/logo.png" width="500" height="100" alt="Patrick's Website" /></h1>
			
			<div id="sidebar">
				<dl class="sidebox">
					<dt>Navigation</dt>
					<dd>&raquo; <a href="?lang=en_US&amp;page=mainpage" title="General Stuff">Mainpage</a></dd>
					<dd>&raquo; <a href="?lang=en_US&amp;page=aboutme" title="Take a guess">About Me</a></dd>
					<dd>&raquo; <a href="?lang=en_US&amp;page=myprojects" title="My current and past projects">My Projects</a></dd>
					<dd>&raquo; <a href="?lang=en_US&amp;page=myarticles" title="Stuff I've written and you might find interesting">My Articles</a></dd>
					<dd>&raquo; <a href="?lang=en_US&amp;page=cssguide" title="A nice introduction in CSS">CSS Guide</a></dd>
					<dd>&raquo; <a href="?lang=en_US&amp;page=contact" title="Contact info and legal disclaimer">Contact</a></dd>
				</dl>
				<dl class="sidebox">
					<dt>Links</dt>
					<dd>&raquo; <a href="http://www.multimediaxis.de/" title="My all-time favourite board">Multimediaxis</a></dd>
					<dd>&raquo; <a href="http://www.enviro-space.com/" title="One of my favourite boards">Enviro Space</a></dd>
					<dd>&raquo; <a href="http://betterworld.vndv.com/" title="My personal Blog">Better World</a></dd>
				</dl>
				<dl class="sidebox">
					<dt>Social Networks</dt>
					<dd>&raquo; <a href="http://www.new.facebook.com/profile.php?id=1110727888" title="Friend me on Facebook">Facebook</a></dd>
					<dd>&raquo; <a href="http://www.youtube.com/user/PaddyLerner" title="Watch some of my favourite clips on Youtube (I don't really often fav+ stuff, so there's not much to see)">Youtube</a></dd>
				</dl>
				<div class="sidebox">
					<span class="title">Validator Results</span><br />
					<a href="http://validator.w3.org/check?uri=referer" title="This website is 100% valid XHTML 1.1 Basic"><img src="images/xhtml.png" alt="XHTML Powered" /></a>
					<a href="http://jigsaw.w3.org/css-validator/" title="This website runs with 100% valid CSS 2.1"><img src="images/css.png" alt="CSS Powered" /></a>
				</div>
				<div class="sidebox">
					<span class="title">Languages</span><br />
					<a href="?lang=de_DE&amp;page=mainpage" title="Besuche meine Webseite in Deutsch"><img src="images/flags/de.png" alt="DE" /></a>
					<a href="?lang=en_GB&amp;page=mainpage" title="Visit my website in british english"><img src="images/flags/gb.png" alt="GB" /></a>
					<a href="?lang=en_US&amp;page=mainpage" title="Visit my website in american english"><img src="images/flags/us.png" alt="US" /></a>
				</div>
			</div>

			
			<div id="content">
				<h2>Mainpage</h2>
				<div id="content_inner">
					Howdy!
				</div>
			</div>
			
			
			<span id="footer">Design and Content &copy; 2008 by <a href="mailto://PaddyLerner@gmail.com">Patrick Lerner</a> - Released under the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">Creative Commons Licence</a>.</span>
		</div>
		<!--[if IE]>
			<div style="position: absolute; top: 0; left: 0; border: 1px black solid; background-color: yellow; width: 99%;">You are using Internet Explorer. Please consider updating to a better browser (e.g. Firefox, Mozilla or Safari).</div>
		<![endif]-->
	</body>
</html>

Thema: Eure Webseiten #6

Themen-Optionen

Anzeige

Hybrid-Darstellung

Berechtigungen