Eure Webseiten #6

**Inius** · 04.11.2008 11: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 11: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 13: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 15: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 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

.

Thema: Eure Webseiten #6

Themen-Optionen

Anzeige

Hybrid-Darstellung

Berechtigungen