unveu-ost,
das Seitenlayout und speziell der header sollte aber schon Themen bezogen sein. Deine Screens lassen nur schwer erahnen um was es geht. Bei Deinem Thema steht doch Fußball,Rasen, Vereinslogo usw. ganz oben auf der Liste und die Seitenfarbe (Rasen - grün) oder die Farben des Vereinlogos (rot-weiß-gelb-schwarz) zwingen sich einem ja gerade auf.
marco563,
Du hast keine Geduld und unterschiedlich breite Leisten (sponsor und ticker).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center; background-color:#ccc;}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header{width: 923px;height: 139px;background: url(http://schnell.sp02.ab-webspace.de/v1/img/header.jpg) no-repeat;}
div#container{text-align:left;width: 923px;margin:0 auto;}
div#re_spalte{float:right;width:352px; background-color:#fff;}
div#li_spalte{width : 561px;}
div#extra{clear:both;background-image : url(http://schnell.sp02.ab-webspace.de/v1/img/news.jpg);width : 100%;
height : 280px;}
div#footer{background-image: url(http://schnell.sp02.ab-webspace.de/v1/img/bottom.jpg);width : 100%; height:207px;}
div#footer p{margin:0;padding:5px 10px}
#pic{ margin-top:5px;}
#leiste { margin-top:5px;}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="re_spalte">
[b]1) Content here.[/b] column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
</div>
</div>
<div id="li_spalte">
<div id="pic">[img]http://schnell.sp02.ab-webspace.de/v1/img/sponsor.jpg[/img]</div>
<div id="leiste">[img]http://schnell.sp02.ab-webspace.de/v1/img/ticker.jpg[/img]</div>
</div>
<div id="extra">
[b]3) More stuff here.[/b] very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer">
Here it goes the footer</p></div>
</div>
</body>
</html>Hmm, schade das hier die Wellen so hoch schlagen. Ich sah nichts verkehrtes darin, auch wenn hier nichts bewertet werden sollte, die Punkte anzusprechen die eine Präsentation nach außen ausmachen und die die Seite abrunden würden. Schließlich fällt das auch den Kunden ins Auge und trägt zum Vertrauen bei einen Auftrag an den Mann zu bringen.
synaptic,
ja die Formulierung war auch zu schön und der IE naja, ist halt die Spucke nicht wert... 
marco563,
etwa so
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center; background-color:#ccc;}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header{width: 923px;height: 139px;background: url(http://schnell.sp02.ab-webspace.de/v1/img/header.jpg) no-repeat;}
div#container{text-align:left;width: 923px;margin:0 auto;}
div#content{float:right;width:613px; background-color:#fff;}
div#navigation{width : 300px; background-color:#fff;padding:5px;}
div#extra{clear:both;background-image : url(http://schnell.sp02.ab-webspace.de/v1/img/news.jpg);width : 100%;
height : 280px;}
div#footer{background-image: url(http://schnell.sp02.ab-webspace.de/v1/img/bottom.jpg);width : 100%; height:207px;}
div#footer p{margin:0;padding:5px 10px}
#pic{ height:100px; background-color:#999; padding:5px;}
#leiste { height:50px; background-color:#336666; margin-top:5px;}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="content">
[b]1) Content here.[/b] column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
</div>
</div>
<div id="navigation">
<div id="pic">Deine Bilder</div>
<div id="leiste">Deine Leiste</div>
</div>
<div id="extra">
[b]3) More stuff here.[/b] very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer">
Here it goes the footer</p></div>
</div>
</body>
</html>Das ist jetzt nur ein Bsp. für die linke Spalte, rechts geht es genauso. Wiederholen sich container in der Gestaltung werden die Klassen wegen der Codeersparnis benutzt.
Zitat von synaptic....
diese beta-version soll uns entwicklern helfen unsere webites auf den nächsten proprietären griff ins klo vorzubereiten.......
Besser und prägnanter kann man es nicht ausdrücken. Den IE8 würde ich erst mal außen vorlassen.
marco563,
naja, so einfach ist es nicht. Ich halte es außerdem für problematisch einen Screen zu zerschnippeln und nur seine Inhalte einzubauen. Das ist nicht flexibel genug und wird durch ein mehr an Inhalten gesprengt. Andersherum wird ein Schuh daraus: Code erstellen und dann nach gusto mit Grafiken ausschmücken.
Etwas corrigierter Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header{width: 923px;height: 139px;background: url(http://schnell.sp02.ab-webspace.de/v1/img/header.jpg) no-repeat;}
div#container{text-align:left;width: 923px;margin:0 auto;}
div#content{float:right;width:60%}
div#navigation{width : 35%;}
div#extra{clear:both;background-image : url(http://schnell.sp02.ab-webspace.de/v1/img/news.jpg);width : 100%;
height : 280px;}
div#footer{background-image: url(http://schnell.sp02.ab-webspace.de/v1/img/bottom.jpg);width : 100%; height:207px;}
div#footer p{margin:0;padding:5px 10px}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="content">
[b]1) Content here.[/b] column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
</div>
</div>
<div id="navigation">
[b]2) Navigation here.[/b] long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="extra">
[b]3) More stuff here.[/b] very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer">
Here it goes the footer</p></div>
</div>
</body>
</html>
Das Layout ist auch nur eine grobe Vorgabe eines 2Spaltenlayoutes. Der header linke und rechte Spalte, sowie ein container über die ganze Breite und der footer sind gegeben. Eine Navileiste horizontal fehlt völlig und müsste noch erstellt werden. Einzelne "Abschnitte" für Themen in den Spalten müssen noch erzeugt werden. Das Layout soll auch nur als Anreiz dienen und als Einstieg um schneller ein sauberes Layout zu erzeugen.
marco563,
hmmm, Design by Maxwurm....??? Hast Du die Seite von Maxwurm und dann selber zerschossen? Das ist ein klassisches 2Spaltenlayout, was im Code allerdings nicht zu erkennen ist. Setze es mal neu an, das geht schneller.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 38</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#content{float:right;width:500px}
div#navigation{float:left;width:200px}
div#extra{clear:both;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="wrapper">
<div id="content">
[b]1) Content here.[/b] column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
</div>
</div>
<div id="navigation">
[b]2) Navigation here.[/b] long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="extra">
[b]3) More stuff here.[/b] very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer">
Here it goes the footer</p></div>
</div>
</body>
</html>Milleadaskaefa,
Hast Du bei Bloomstreet.net volle Kontrolle über die erstellte Seite? Ohne Anmeldung kommt man ja an keine Informationen. "Erstelle Deine eigene Hp" ist zu wenig. Wenn ja dann wirst Du etwas HTML und CSS lernen müssen, was mit Learning by Doing am schnellsten geht: http://www.andreas-kalt.de/webdesign/tuto…ayout-erstellen
nevio83,
dieser "gebogene" Effekt entsteht durch die Verlaufsüberlagerung. Der Rest entsteht durch "Reflektion". Hier ein Tut zum selber probieren: http://www.24-psd.de/tut_details.222+M50e9ff70981.0.html
Mc-Fresh.com,
naja , eine Mischung aus Tabellenlayout und CSS-Layout halte ich Code - seitig für keine gute Referenz. Der Inhalt klatscht irgendwie links und der Text kann auch Font - seitig noch formatiert werden. Das, was mir als erstes negativ aufgefallen war ist die Navi. Sie passt irgendwie gar nicht und wirkt billig. Das angestrebte Grunge Design sollte sich auch hier wiederspiegeln. Das trifft genauso für die Merkzettel zu, die Du hier recht lieblos aneinandergereiht hast. Schau mal http://www.sahanya.perun.net/archiv/2005/05/07/post-it/ und dann mit einem Pin/Nagel oder Klebestreifen an die Wand gebracht. Vielleicht findest findest Du hier noch Anregungen zur konsequenten Umsetzung: http://www.cssaddict.com/blog/15-great-…-design-styles/
nize,
animeup suggeriert eher ein Forum für Leute die sich für Anime (Animationsfilme und Zeichnungen) ínteressieren. Das kommt aber erst im letzten Teil zum tragen. Andererseits erzwingt Dein Titel geradezu eine grafische Umsetzung des Titels im Forum (header/Rahmen/Avatar/Linkgrafik ).
Alienx,
ja ich würde es besser finden, wenn es nicht so aufgesetzt wirken würde. Schwarzer Hintergrund mit grünem Gerippe und dann das aufgesetzte schwarze Forum. Wie wäre es den Forumteil durchscheinend zu gestalten und/oder ihn zumindest in den grünen Hintergrund grafisch zu implementieren. Deine keywords finde ich für ein Avp -Forum merkwürdig. Sie haben nichts mit AvP zu tun.
blu3s,
yep, nicht schlecht. Die "UPLOADET BY SPYKID!!" - Pics würde ich aber einzeln als Thumbnails bringen. Diese jetzige "gequetschte" Fassung ist unschön - Texte der Bilder sind nicht lesbar und eine Vorschau der Bilder vermisse ich. Die kann man ja mit einem Wasserzeichen versehen um sich zu schützen.
Macrosdesign,
bei dem Link, den Du im ersten posting angeben hast : http://www.macrosdesign.de.ms/ --- ups --- sorry, war ja nur ne vorgeschaltete Frameseite. Mein Fehler 
Macrosdesign,
wenn die Seite Ton in Ton wäre, würde es mir gefallen. Der header (schwarz-grau-weiß) steht nicht harmonisch zu dem Rest. Im content würde ich mit der Schrift auch Ton in Ton arbeiten. Das sieht dann gediegener aus. Der header wirkt so zum content protzig und wirkt wie ein Fremdkörper. Dezentere Navi und eine dezentere Sprachen Umschaltung runden das ganze dann ab.
Der Code - naja - altes Thema: Die Mischung Tabellen- und Container - sprich CSS-layout ist Schrott. Tabellen der Tabelle usw........
Zitat von -Bambino-*push*
Bekomme ich vielleicht noch ein paar Kritiken?!
yep, bekommst Du. Ok, da die Seite noch relative Inhaltslos ist kann man das Zusammenspiel Inhalte und Optik schlecht vergleichen - ist halt eine recht einfache BLOG-Optik, die erstmal einen sauberen Eindruck macht. Dieser Eindruck hört aber beim Code auf. Dabei stör mich noch nicht mal das Tabellenlayout sondern Dein offenbar ineinanderkopierter Code.
</table></td>
<td align="left" valign="top" class="content"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3%" height="354"></td>
<td align="left" valign="top"><!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.text_start {font-family: Verdana;font-size: 12px; color: #4a4a4a;}
.hervorhebung_start {font-family: Verdana; font-size: 12px; color: #0099FF;}
-->
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left" valign="top"><p class="text_start"><span class="hervorhebung_start">TeeeX.de</span> ist ein 2008 gegründetes Internetprojekt.</p>
<p class="text_start">Auf unseren Seiten werden wie Sie zuk
Wenn der stimmt sehen wir weiter. Siehe http://de.selfhtml.org/html/allgemein/grundgeruest.htm
jafob,
geh`mal zu "studienzwecken" zu einem Juwelier und lass Dir die edlen Stücke mal darbieten. Du wirst merken das die Klunker auf Samt in edlen Holzladen liegen. Das Ambiente der Räumlichkeiten kann man dann ebenfalls in das Design einfließen lassen. Lass Dich da mal inspirieren. Deine Seite ist eher nüchtern und macht keine Lust auf mehr. Ein Juwelier als Online-Shop ist schon sehr ungewöhnlich. Maximal würde ich hier auf Präsentation setzen um auf Kundenfang zu gehen und nicht online verkaufen zu wollen.
Macrosdesign,
naja HOME geht über 100% Breite, der Rest ist linksbündig und fluchtet nicht mit dem header - Bild. Das sieht dann irgendwie unfertig aus. Außerdem würde ich bei wenig Inhalten pro Seite eher auf eine feste Breite setzen, da der Inhalt sich sonst verliert, die Augen schweifen über den Schirm und suchen den Text. Das kann nicht erwünscht sein. Erst bei mehr Inhalte macht dann auch das Liquid Layout Sinn, kann aber etwas tricky werden. Dann wäre da noch die "Spalte" zwischen header und navi - ist das beabsichtigt? Sicher nicht.
Ach ja, vom Thema her. Es fehlt die Individualität der Firma in der Seite. Erst hatte ich den Eindruck Berlin sucht einen Winterdienst. Die Firma als solche kommt hier gar nicht zur Geltung und das ist hier für mich der Kardinalfehler.
Krusty,
Hmm.. macht eher den Eindruck eines CMS-Templates und eine nicht existierende Seite nur mit einem Screenshot als Referenz zu benutzen ist meines Erachtens nicht praktikabel und wird als solches auch nicht angesehen. Ein Miniscreenshot als Vorschau mit einem Link auf die Originalseite ist da etwas anderes.