Eure Webseiten #6

**dead_orc** · 05.11.2008 15: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 12: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 12: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 21: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 22: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>

**Crash-Override** · 11.11.2008 23:21

Zitat von Drakes

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.

Notepad2 und ist extra so eingestellt weil ich es hasse Tab und Leerzeichen zu mischen und es so einheitlich have. 2 Zeichen Einrueckung bin ich von Delphi gewohnt und wende es auf alle Sprachen an (ausser Python wo ich normalerweise 4 Leerzeichen verwende).

Zitat von Drakes

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

):

Sorry, aber der Validator meint img duerfte man an der Stelle nicht setzen. Evt. mach ich img in div, das duerfte ok sein.

Zitat von Drakes

Code:

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

Das koennte auch gehen, thx.

Zitat von Drakes

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;

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?

Thx fuer die Verbesserungen. Overflow war noch von nem frueherem Design uebernommen, ja das ist in diesem Design ueberfluessig und ich hab es uebersehen.

edit: Vielen Dank auch fuer die Quellcodes. Die dl/dd Tags sind mir noch nie begegnet, werde mich darueber mal informieren.

**Drakes** · 11.11.2008 23:34

Im IE6 wird nicht nur das Titelbild falsch angezeigt sondern auch das Content-Div, da IE6 min-height nicht interpretiert, sondern genau height so wie er eigentlich min-height interpretieren müsste, dafür gibts nen Hack(is nich wirklich einer):

Code:

	min-height: 240px;
	height: auto !important;
	height: 240px;

Und dann klappts auch im IE6, wegen dem Titelbild könntest du dir auch überlegen, die Hintergrundfarbe ins Bild mithinein zu nehmen, dann müsstest du einfach jedesmal das Titelbild neu machen, wenn du die Hintergrundfarbe ändern willst. Wobei dann aber alles korrekt im IE6 angezeigt werden würde. 8)

Zitat von Crash-Override

edit: Vielen Dank auch fuer die Quellcodes. Die dl/dd Tags sind mir noch nie begegnet, werde mich darueber mal informieren.

Jendryschik - Listen
SelfHTML - Listen

Edit: btw. hat meine Version mit Firefox, Opera, Safari und IE 7 richtig ausgesehen.

**Inius** · 13.11.2008 15:48

Habe mal das viele Grau entfernt.
Zudem habe ich jetzt auch nicht mehr so viel Grau drinne!
Das Grün ist außerdem Einheitlicher.

Hoffe es gefällt euch endlich, bin schon am verzweifeln

.

**Crash-Override** · 13.11.2008 16:10

Dies grossen M's wirken imho irgendwie wie ein W, aber ansonsten ist es ziemlich cool.

**Whiz-zarD** · 13.11.2008 19:22

Ich finde Schwarz und Grün passen einfach nicht zusammen.

**OhWeh!** · 13.11.2008 21:30

Ich möchte auch gerne mal wissen was ihr von meinen Arbeiten haltet...

Die Mythos Seite hat es leider nicht in unser Netzwerk geschafft durch Flagships untergang. Ich hoffe das ich das mal irgendwie anders verwursten kann ^^

Die andere Seite ist ein aktuelles Projekt und befindet sich noch in einem frühen Designstadium.

**Whiz-zarD** · 13.11.2008 21:52

zum ersten Design:

Sieht ganz nett aus.
Allerdings missfallen mir dieser riesige log-in und Newsletter bereich.
Ich mag sowas nicht. Ich finde es schöner, wenn man irgendwo einen kleinen Link hat, der einen zum Login führt.
Wenn es ne Seite wird, wo sich auch User anmelden können, hab ich lieber dezent irgendwo rechts oben in der Ecke einen kleinen Bereich.

Für ein Newsletter würde auch nur die E-Mail-Adresse reichen und das würde ich ebenfalls nicht so groß machen, sondern auch eher klein und dezent.

zum zweiten Design:

Ein Standard Design, wie viele andere hier im Netzwerk auch.
Die grafiken sind zwar vielleicht anders aber der Aufbau ist gleich und ich habs schon öfters gesagt: Der Aufbau ist öde.
Wofür braucht man eine POTM Sektion? Umfragen schön und gut aber zu 99% Witzlos.
Naja, ansonsten gibt es da nicht mehr viel zu sagen.

**OhWeh!** · 13.11.2008 22:07

Zitat von Whiz-zarD

zum ersten Design:

Sieht ganz nett aus.
Allerdings missfallen mir dieser riesige log-in und Newsletter bereich.
Ich mag sowas nicht. Ich finde es schöner, wenn man irgendwo einen kleinen Link hat, der einen zum Login führt.
Wenn es ne Seite wird, wo sich auch User anmelden können, hab ich lieber dezent irgendwo rechts oben in der Ecke einen kleinen Bereich.

Für ein Newsletter würde auch nur die E-Mail-Adresse reichen und das würde ich ebenfalls nicht so groß machen, sondern auch eher klein und dezent.

Ist wie gesagt noch nicht fertig, ich bin jetzt ca. 3std dran gewesen.
Ich mache mir generell noch Gedanken um den gesamten Aufbau, ich plane meine Arbeiten vorher kaum, das meiste kommt beim arbeiten selber.
Wird sich noch einiges verändern. Mir ist es generell bei diesem Projekt sehr wichtig, dass das Design soviel Leute wie möglich anspricht, deswegen bin ich dankbar für alles Verbesserungsvorschläge.
Wie findest du die Farbgebung? Kann man es so lassen oder hast du da noch irgendwelche Vorschläge?

Zitat

zum zweiten Design:

Ein Standard Design, wie viele andere hier im Netzwerk auch.
Die grafiken sind zwar vielleicht anders aber der Aufbau ist gleich und ich habs schon öfters gesagt: Der Aufbau ist öde.
Wofür braucht man eine POTM Sektion? Umfragen schön und gut aber zu 99% Witzlos.
Naja, ansonsten gibt es da nicht mehr viel zu sagen.

Nun, genau das sollte es sein, ein Standard Design. Fanpages laufen ohnehin meistens auf genau diese Aufbauten hinaus. Die Seite sollte so Umfangreich wie möglich sein, deswegen die spielereien. Diese Projekt hat sich leider sowieso erledigt.^^"

**Whiz-zarD** · 13.11.2008 23:31

Zitat von OhWeh!

Wie findest du die Farbgebung? Kann man es so lassen oder hast du da noch irgendwelche Vorschläge?

Ansich ist die Farbgebung so nicht schlecht.
Der Screenshot wirkt auf meinem Monitor relativ klein. Man muss halt schauen, wenn das Design per html/css steht.
Texte sehen ja auch meist im Browser wieder etwas anders aus, als in einem Bildbearbeitungsprogramm.

**Inius** · 15.11.2008 13:29

Ok, habe noch ein Versuch gestartet.
Diesmal Grün raus und stattdessen Gelb genommen!
Einmal mit eckigen Boxen und einmal mit abgerundeten Boxen!

Sorry das ich so viel nerve, aber mir ist es wichtig ein Hp zu haben bei der alle User(so gut wie alle) das Design gut finden.

Eckig:

Rund:

**kris** · 16.11.2008 10:59

http://www.juz-bul.de/v3/

Eine kleine Designstudie.

@fansoftware: Das Runde ist wesentlich besser. Das Xbox-Dingens da oben rechts in der Ecke sieht doof aus btw.

**Inius** · 16.11.2008 13:43

@kris: Gefällt mir gut, allerdings solltest das ganze mittig machen und die Navi etwas weniger Transparent!

So ein neues Werk von mir... XD
Hoffe das ist diesmal gut!Wobei ich sagen muss, dass ich mich diesmla ein wenig am 360 Design Orientiert habe

.

**OhWeh!** · 16.11.2008 14:26

Besser!, Allerdings sind die Farben grün und braun meiner Meinung nach noch immer unpassend.

Probier es doch vllt mal mit: #ffcc01, #2da1d0 oder ganz klassisch, schwarz.

**kris** · 17.11.2008 13:26

Und nun in Aktion:

www.juz-bul.de

**Whiz-zarD** · 17.11.2008 18:04

Zitat von kris

Und nun in Aktion:

www.juz-bul.de

Mit Opera ist das Design kaputt

Thema: Eure Webseiten #6

Themen-Optionen

Anzeige

Berechtigungen