my site

hidingmyfame · 07. Aug. 2008

Hallo an alle,

da ich im Moment dabei bin, mich etwas näher mit Barrierefreiheit und natürlich validem (X)HTML sowieso CSS zu beschäftigen, und ich sowieso gerade eine Website für einen Kunden erstellen muss, würde ich gerne bevor ich die restlichen Seiten erstelle ein Feedback bezüglich des Quelltextes (dem Aufbau der Seite) und natürlich des Designs selbst von euch einholen.

Meine persönlichen Vorraussetzungen/Ziele waren/sind:

- Möglichst auf Tabellen zu verzichten (ausser natürlich dort wo ich Sie für unverzichtbar halte)
- valider (X)HTML Strict & CSS Quellcode

Um nicht der Werbung beschuldigt zu werden, wie der andere Thread in diesem Forum und natürlich aus Datenschutzgründen gegenüber dem Kunden, habe ich alle Texte durch "Lorem ipsum" ersetzt und alle wichtigen Bilder unkenntlich gemacht.
Auch aus diesem Grunde ist im Quelltext die meta robots angabe auf "noindex, nofollow" gesetzt (was natürlich im späteren Quelltext geändert wird).

Zu sehen ist die erste Seite hier: feedback

Danke schonmal an alle die helfen!

Edit:

Es sieht so aus als wenn der Quelltext nicht valide ist, das liegt aber an der .de.be Domain, also bitte nicht wundern!

dkdenz · 07. Aug. 2008

Du hast da ein unnötiges Wirr-Warr an Div's und Tabellen produziert.
Das kann man um einiges eleganter erledigen.
Im Prinzip brauchst Du für dieses Layout keine einzige Tabelle.
Und wenn Du die Div's geschickt fließen lässt, reduziert sich der Quältext auch noch.
Aber das wird schon noch...

hidingmyfame · 07. Aug. 2008

Hi dkdenz,

danke für deine Antwort.

Was genau kann ich denn verbessern?

dkdenz · 07. Aug. 2008

Du brauchst z.B. keine alles umschließende Tabelle.
Das Zentrieren kriegt man genauso gut mit CSS hin.
Für die Navi solltest Du eine Liste nehmen.
Das wären mal so die ersten zwei Tipps bezüglich XHTML/CSS-Layout.

hidingmyfame · 07. Aug. 2008

Ja das mit dem vertikalen Zentrieren hab ich auch per CSS versucht, allerdings funktionierte dieser Workaround lediglich im Firefox und Opera, der IE hat sich nicht bemüht.

So sieht es in allen Browsern gleich aus..

bug13 · 07. Aug. 2008

Das zentrieren per CSS müsste in etwas so aussehen:

Code:

<html>
<head>
<title>Test</title>
</head>
<body>
<div style="width:500px; height:400px; margin:0 auto; border:1px solid #000;"></div>
</body>
</html>

dkdenz · 07. Aug. 2008

bug13 schrieb:
Das zentrieren per CSS müsste in etwas so aussehen:

Code:

<html> <head> <title>Test</title> </head> <body> <div style="width:500px; height:400px; margin:0 auto; border:1px solid #000;"></div> </body> </html>

Der IE benötigt ein body{text-align:center;}, denn mit margin:0 auto; kann er nix anfangen...

anna55 · 07. Aug. 2008

dkdenz schrieb:
Der IE benötigt ein body{text-align:center;}, denn mit margin:0 auto; kann er nix anfangen...

Der 6er IE und höher kapiert mittlerweile die margin-Angabe. Kommt also drauf an, ob man die 5.5er Leute noch zufriedenstellen möchte.

Edit: Kann keinen IE auf dem Mac testen.

bug13 · 07. Aug. 2008

Der IE benötigt ein body{text-align:center;}, denn mit margin:0 auto; kann er nix anfangen...

Ok, dann eben so:

Code:

<div style="text-align: center">
<div style="width:500px; height:400px; margin:0 auto; border:1px solid #000;">
Test
</div>
</div>

dkdenz · 07. Aug. 2008

Irgendwie ist es für mich grade nicht nachvollziehbar, aber ihr habt Recht!!!
Ich habe für den IE6 schon Seiten versucht zu optimieren, und da hatte dieses Szenario keinen Erfolg.
Darüber muss ich jetzt erstmal nachdenken, welche Faktoren da ein Hinderniss für die korrekte Realisation waren...

Halt Halt Halt!!!
Ganz so blöd bin ich nun auch nicht.
Ich habe auf meinem Windoofs-Rechner dieses Multiple-IE installiert, um eben solche Dinge zu checken.
Wenn ich aber unter HELP gucke, erscheint immer die Notation, das es sich um den 7er handelt.
Im Büro weiß ich genau, das ich für den 6er immer dieses body{text-align:center;} einarbeiten muss.

Bin nun etwas verwirrt und beschließe, die Heia aufzusuchen...

anna55 · 07. Aug. 2008

Würde mich echt interessieren, wie der "echte" 6er reagiert. Ich kann's auch nur in dem aufgesetzten testen.

anna55 · 07. Aug. 2008

dkdenz schrieb:
Irgendwie ist es für mich grade nicht nachvollziehbar, aber ihr habt Recht!!!
Ich habe für den IE6 schon Seiten versucht zu optimieren, und da hatte dieses Szenario keinen Erfolg.
Darüber muss ich jetzt erstmal nachdenken, welche Faktoren da ein Hinderniss für die korrekte Realisation waren...

Vielleicht gings darum, dass Du Seiten optimieren musstest, die im Quirksmode waren? Da braucht der 6er anscheinend die center-Angabe.

dkdenz · 07. Aug. 2008

anna55, ich kann Dir echt nur schwören, das ich vor etwa drei Wochen eine Site für ein Veranstaltungstechnikunternehmen gemacht habe und bei den Folgeseiten das body{text-align:center} vergessen hatte und die mich angerufen hatten, das der Content links am Browserfenster klebt.
???

dkdenz · 07. Aug. 2008

anna55 schrieb:
Vielleicht gings darum, dass Du Seiten optimieren musstest, die im Quirksmode waren? Da braucht der 6er anscheinend die center-Angabe.

Möglich!
Das zu checken, schaffe ich heute aber nicht mehr, denn ich bin mit Arbeit überschüttet...und schlafen muß ich auch noch irgendwie.

hidingmyfame · 08. Aug. 2008

Hallo an alle,

danke für die zahlreichen Antworten.

Das mit dem body { text-align: center; } werde ich direkt einmal versuchen.

Ich bin übrigens weiterhin an konstruktiver Kritik interessiert!

hidingmyfame · 08. Aug. 2008

anna55 schrieb:
Würde mich echt interessieren, wie der "echte" 6er reagiert. Ich kann's auch nur in dem aufgesetzten testen.

Der IE6 im Multiple IE Pack ist schon der richtige 6er, allerdings wird dort jeder Browser wie der neuste in diesem Pack deklariert, was aber nicht heisst das er auch so reagiert wie die neueste.

Das habe ich gestern gerade noch bei dem Thema "Conditional Comments" gelesen, weil man diese mit dem Multiple IE Paket nicht testen kann.

Jetzt zur vertikalen Zentrierung der Seite.
Folgendes habe ich versucht:

2 divs:

Code:

#table { display: table; height: 100%; width: 100%; }
#table-cell { display: table-cell; vertical-align: middle; }

Funktioniert in jedem Gecko-basierten Browser gut, nur im IE sieht es so aus:

Klick mich!

hidingmyfame · 08. Aug. 2008

dkdenz schrieb:
Du brauchst z.B. keine alles umschließende Tabelle.
Das Zentrieren kriegt man genauso gut mit CSS hin.
Für die Navi solltest Du eine Liste nehmen.
Das wären mal so die ersten zwei Tipps bezüglich XHTML/CSS-Layout.

So die Teile hätte ich jetzt (nach langem Tüfteln bezüglich der vertikalen Zentrierung) gelöst.

Lösung sieht jetzt letzten Endes wie folgt aus:

Code:

Für alle "Browser":

#table { display: table; height: 100%; width: 100%; margin: 0; padding: 0; }
#table-cell { display: table-cell; vertical-align: middle; }

Für den IE:

<!--[if IE]>
	<style type="text/css">        
        #table { position: relative; overflow: hidden; }
        #table-cell { position: absolute; top: 50%; }
        #content { position: relative; top: -50%; }
    </style>
<![endif]-->

Die Tabellen habe ich auch durch Listen ersetzt.

Einsehbar ist das ganze hier: Klick mich!

Jetzt kann es an die nächsten Verbesserungen gehen.
Was würdet ihr an der Umsetzung im Quelltext noch ändern?

Falls jemand nicht die Möglichkeit hat, dass CSS über die FF Webdeveloper Toolbar einzusehen hier das gesamte CSS:

Code:

@charset "utf-8";

body, html {
	font-family: Calibri, Arial, Tahoma, Verdana;	
	font-size: 12px;
	
	background-image: url("../images/wood2.jpg");
	
	height: 100%;
	
	margin: 0;
	padding: 0;
}

#table { display: table; height: 100%; width: 100%; margin: 0; padding: 0; }
#table-cell { display: table-cell; vertical-align: middle; }

.float_left {
	float: left;
}

#background {
	width: 100%;
	height: 512px;
	
	background-image: url("../images/wood3.jpg");
		
	z-index: 0;
	
	position: absolute;
	top: 0;
	left: 0;
}

#shadow {	
	z-index: 0;
	
	position: relative;
	top: 0;
	
	width: 720px;
	height: 100%;
	padding-bottom: 10px;

	margin-right: auto;
	margin-left: auto;
	
	background-image: url("../images/shadow.png");
	background-repeat: no-repeat;
	background-position: bottom left;
}

#border {
	height: 100%;
	width: 700px;
	
	background-color: #FFFFFF;
	
	margin-left: auto;
	margin-right: auto;
	
	position: relative;
}

#top {
	width: 100%;
	height: 60px;
	
	background-color: #ffffff;
}

#logo {
	height: 43px;
	width: 190px;
	
	margin-left: 10px;
	margin-top: 10px;
	
	float: left;
	display: inline;
}

#navigation {
	font-family: Arial, Tahoma, Verdana;
	color: #8ab54a;
	font-weight: bold;
	font-size: 12px;
	
	height: 100%;
	width: 50%;
	
	float: right;
}

#navigation a {
	width: 101px;
	height: 29px;	
}

.mainmenu {
	display: block;
	
	text-align: center;
	
	position: absolute;
	right: 0;
	top: 31px;
	
	margin: 0;
	padding: 0;
	
	list-style: none;
	line-height: 250%;
}

.mainmenu a:link, a:visited, a:active {
	display: block;
	
	text-decoration: none;
	color: #8dc73f;
}

.mainmenu a:hover {
	display: block;
	
	text-decoration: none;
	color: #ffffff;
	
	background-color: #8dc73f;	
}

.trennstrich {	
	width:1px;
	float:left;
}

#green_stripe_bright {
	height: 2px;
	width: 100%;
	
	margin-bottom: 1px;
	
	background-color: #8dc73f;
}

#head_gradient {
	background-image: url("../images/head_gradient.png");
	background-repeat: repeat-x;
	
	height: 200px;
}

#slogan {
	font-family: Cambria, Arial, Tahoma, Verdana;
	font-size: 26px;
	font-weight: bold;
	color: #fbffc5;
	z-index: 100;
	position: absolute;
	top: 90px;
	left: 20px;
	width: 380px;
}

.slogan_text {
	font-size: 16px;
	
	padding-right: 20px;
	
	z-index: 100;
}

#slogan2 {
	font-family: Cambria, Arial, Tahoma, Verdana;
	font-size: 26px;
	font-weight: bold;
	color: #000000;
	
	z-index: 99;
	
	position: absolute;
	top: 91px;
	left: 21px;
	
	width: 380px;
}

.slogan_text2 {
	font-size: 16px;
	padding-right: 20px;
	z-index: 99;
}

#head_form_left {
	margin-top: 18px;
	
	background-image: url("../images/head_form_left.png");
	background-repeat: no-repeat;
	
	height: 182px;
	width: 170px;
	
	float: left;
	
	z-index: 0;
}

#head_form_right {
	background-image: url("../images/head_form_right.png");
	background-repeat: no-repeat;
	
	height: 199px;
	width: 371px;
	
	float: right;
	
	margin-right: 10px;
}

#head_bild {
	z-index: 2;
	
	height: 268px;
	width: 295px;
	
	position: absolute;
	right: 20px;
	top: 80px;
}

.clear {
	clear: both;
}

#green_stripe_dark {
	height: 2px;
	width: 100%;
	
	margin-top: 1px;
	
	background-color: #017342;
}

#content_area {
	height: 360px;
	width: 100%;
	
	background-color: #ffffff;
}

#content_left {
	width: 460px;
	height: 360px;
	
	padding: 20px;
	
	float: left;
}

#content_box_1 {
	height: 160px;
	width: 100%;
	
	position: relative;
}

#content_box_1_image {
	width: 138px;
	height: 140px;
	
	margin-right: 20px;
	
	float: left;
}

#content_box_1_text {
	float: left;
	width: 300px;
}

#unterschrift {
	float: right;
	
	position: absolute;
	bottom: 0;
	right: 0;
}

#content_box_2 {
	height: 160px;
	width: 100%;
	
	background-color: #e0f7b3;
}

#content_box_2_text {
	width: 330px;
	
	float: left;
	
	margin-top: 5px;
	margin-left: 5px;
	
	display: inline;
}

#content_box_2_menu {
	width: 120px;
	height: 160px;
	
	color: #ffffff;
	
	float: right;
}

#content_box_2_menu ul {
	list-style: none;
	margin:0;
	padding:0;
	
	line-height: 170%;
}

.zelle {
	font-size: 12px;
	
	height: 22px;
	border-bottom: 1px solid #ffffff;
	padding-left: 5px;
}

.zelle2 {
	font-size: 12px;
	
	height: 22px;
	padding-left: 5px;
}

.zelle a {
	color: #ffffff;
	text-decoration: none;
}

.zelle a:hover {
	text-decoration: underline;
}

.zelle2 a {
	color: #ffffff;
	text-decoration: none;
}

.zelle2 a:hover {
	text-decoration: underline;
}

#content_right {
	width: 200px;
	height: 360px;
	
	background-color: #f6f7e9;
	
	float: right;
}

#content_right_text {
	margin-top: 90px;
	margin-left: 20px;
	margin-right: 20px;
}

#team {
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
}

#team a { text-decoration: none; display: inline; }

#grey_stripe {
	height: 2px;
	width: 100%;
	
	margin-bottom: 1px;
	
	background-color: #333333;
}

#footer {
	height: 100px;
	width: 100%;
	background-color: #333333;
	
	position: relative;
}

#anschrift1 {
	width: 140px;
	height: 80px;
	
	font-family: Cambria, Arial, Tahoma, Verdana;
	font-size: 11px;
	color: #8e8f93;
	
	position: absolute;
	top: 10px;
	left: 20px;
}

#anschrift2 {
	width: 140px;
	height: 80px;
	
	font-family: Cambria, Arial, Tahoma, Verdana;
	font-size: 11px;
	color: #8e8f93;
	
	position: absolute;
	top: 10px;
	left: 200px;
}

#anschrift3 {
	width: 140px;
	height: 80px;
	
	font-family: Cambria, Arial, Tahoma, Verdana;
	font-size: 11px;
	color: #8e8f93;
	
	position: absolute;
	top: 10px;
	left: 380px;
}

#anschrift1 a, #anschrift2 a, #anschrift3 a {
	color: #8e8f93;
	text-decoration: none;
}

#anschrift1 a:hover, #anschrift2 a:hover, #anschrift3 a:hover {
	color: #8e8f93;
	text-decoration: underline;
}

#footermenu {
	float: right;
	
	font-family: Arial, Calibri, Tahoma, Verdana;
	font-size: 11px;
	color: #FFFFFF;
	
	margin-right: 20px;
	
	display: inline;
}

#footermenu ul {
	list-style: none;
	
	margin:0;
	padding:0;
	
	line-height: 175%;
}

#footermenu a {
	color: #FFFFFF;
	text-decoration: none;
}

#footermenu a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

#footermenu a:link.current {
	color: #8ab54a;
}

.zellenabstand {
	padding-left: 10px; 
	padding-right: 10px;
	
	float: left;
}

#copyright {
	width: auto;
	
	color: #8e8f93;
	font-size: 12px;
	
	float: right;
	
	position: absolute;
	bottom: 16px;
	right: 20px;		
}

/* Textformatierungen */

.heading {
	font-family: Cambria, Arial, Tahoma, Verdana;
	font-size: 16px;
	font-weight: bold;
	color: #8ab54a;
}

p {
	padding-top: 5px;
	margin: 0;
}

.bold {
	font-weight: bold;
}

* a,img { border: none; }

anna55 · 08. Aug. 2008

hidingmyfame schrieb:
Das habe ich gestern gerade noch bei dem Thema "Conditional Comments" gelesen, weil man diese mit dem Multiple IE Paket nicht testen kann.

Das bestreite ich. Du kannst das ja jeweils gegenprüfen, indem Du verschiedene IE Versionen in den CCs angibst. Außerdem gibt es noch andere IE-Prüfseiten wie
IE NetRenderer - Browser Compatibility Check -

Im IE 6 und 7 fehlen oben und unten Teile der Seite. Im FF2 sehe ich unten einen kleinen Rand, während die Seite oben klebt. Das läuft nicht wirklich richtig. Bisher wir nicht bekannt, dass Du auch vertikal zentrieren willst. Wenn Du das mit CSS machen willst, dann schau mal hier:
CSS TEMPLATE 11

hidingmyfame · 08. Aug. 2008

anna55 schrieb:
Im IE 6 und 7 fehlen oben und unten Teile der Seite. Im FF2 sehe ich unten einen kleinen Rand, während die Seite oben klebt. Das läuft nicht wirklich richtig. Bisher wir nicht bekannt, dass Du auch vertikal zentrieren willst. Wenn Du das mit CSS machen willst, dann schau mal hier:
CSS TEMPLATE 11

Oh das ist natürlich blöd, weil ich nur die Möglichkeit habe es auf einem 22" Widescreen zu testen. Da sieht natürlich alles wunderbar aus.

Ich ändere gleich mal in 4:3 Auflösungen.

Das Problem ist allerdings das die Höhe der Seite 100% beträgt und damit eben leider nicht fix ist, was die vertikale Ausrichtung zusätzlich erschwert.

Danke für den Hinweis!

anna55 · 08. Aug. 2008

Hab mal nen IE6 Screenshot gemacht mit ein paar Bemerkungen. Im FF beträgt mein Viewport 1098x557. Die Höhe ist im 6er geringer, da eine Symbolleiste fehlt.

my site

New member

New member

New member

New member

New member

New member

New member

Moderator

New member

New member

Moderator

Moderator

New member

New member

New member

New member

New member

Moderator

New member

Moderator