[Editor] Test-Design mal durchschecken

[rexini]

Hy,
Da ich ja in CSS nur sehhhr leicht bewandert bin wollt ich mal fragen wie ihr meinen Versuch findet...Nur vom Aufbau her...farbe sieht sch**** aus ich weiß :razz:

Test-Design

Danke

EDIT: Validator gerade bemüht...*werkel,werkel...*

EDIT²: So It's Valid!

 

[Frank]

Naja wie du schon selbst sagtest, Kontrast und Farbe ist sehr schlecht (aber immerhin wird man nicht grün verstrahlt wie bei manch anderen seiten xD).

Zum Aufbau:

Die Navigation finde ich etwas klein, da bekommt man das Gefühl als wäre die nicht vorgesehen und später im wahrsten Sinne des Wortes "hineingequetscht" worden.

Der Schrift zug "Die Seite über Mich" im "Header" sollte unbedingt ein padding bekommen! Sieht aus als fiele es gleich aus dem Rahmen raus.

Wozu ist die Sitebar? Vielleicht hier eher die Navigation anlegen.

Generell sollten alle diene Texte noch ein padding bekommen.

 

[gola-noga]

Passt jetzt nicht so zum Aufabu, aber ich muss es loswerden.

Unter deiner Überschrift hast du eine Spiegelung angebracht. Das ist OK.

Aber schraub' mal die Deckkraft runter und mache es so, dass die Schrift ab der Hälfte mit der Hintergrunfarbe übergeht...

Sonst zum Design:

Gut, du sagst zwar, du würdest dich mit CSS nicht so ut auskennen, aber das was mir jetzt nicht so gefällt liegt eher an den Grafiken. Bspw. Finde ich, dass der Farbverlauf des Header nicht Wirklich ins Gesamtkonzept passt, gleiches für de Sonne (nenns einfach mal so..) im Contentbereich...

 

[prm]

Die Farben sollten nicht bewertet werden (sind zu dunkel, Schrift deshalb kaum leserlich).

Die Tabelle "die Seite über mich" ist sicher nicht erforderlich. Das kann man mit einer entsprechenden CSS-formatierung einer Überschrift ebenso lösen.

Die Navi kann man zwar so machen; üblicherweise verwendet man hierzu jedoch eine Listen-Navi. Code-Beispiele hierzu gibt's zum Beispiel auf dieser Seite:Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Der Text klebt zu sehr an den Rändern. Da sollte ein padding-Wert Abhilfe schaffen. Beachte jedoch: dieser vergrößert die Gesamtbreite.

Du verwendest ein flexibles (prozentuales) Layout. Kann man machen.
Sei dir dabei jedoch im klaren, dass bei sehr breiten Viewports auch die Textzeilen sehr lang werden und deshalb erhöhte Konzentration beim Lesen erfordern. Auch bei einbindung von Grafiken kann dies zu äußerst unterschiedlichen Darstellungen führen.
Aus diesen Gründen bevorzuge ich deshalb zunehmend fixe Layouts.

[FONT=Arial]position: absolute;[/FONT]

ist in jedem div absolut unnötig und kann zu Porblemen führen. Bei #inner kannst du die Positionierung ebenso und besser über margin-Angaben erreichen.

 

[Maxi]

Ich finde, ein bisschen padding wäre schön.
Und die Spiegelung sollte nicht so stark sein.

 

[rexini]

Die Tabelle "die Seite über mich" ist sicher nicht erforderlich. Das kann man mit einer entsprechenden CSS-formatierung einer Überschrift ebenso lösen.

Ich währe dir sehr verbunden wenn du mir eine brauchbare Lösung präsentieren würdest, also ich hab das nich hinbekommen, nur oben rechts aber nicht wie es jetzt ist, so nur mit tabelle :(

@All: Danke für eure Tipps, werde mich mal nachher dransetzen ;)

EDIT: So ne neue Version ist online, zwar nicht perfekt, aber ettwwwas besser find ich :)

 

[Maxi]

Das Blau gefällt mir jetzt nicht su gut, und jetzt find ich auch, dass die "Sonne" nicht mehr so gut reinpasst.

 

[rexini]

*return*

So besser?

 

[Maxi]

Ja - bis auf die Schriftart.

 

[rexini]

Was hättest den gern? Arial?

 

[Maxi]

Was hättest den gern? Arial?

egal, aber kein TNR.

 

[rexini]

So gut?

Bin für weiter Tipps offen ;Jump

 

[_Thor_]

Für Überschriften verwende ich gerne

  font-family: georgia;
  font-style: italic;
  letter-spacing: 1pt;

und für den Inhalt vielleicht

  font-family: verdana;

 

[rexini]

Hab ich dann mal verwnde...wie findestes

 

[_Thor_]

Ich finde es ok, vielleicht die h3 im content auch noch so wie dein #über, muss aber nicht.

 

[rexini]

Dankeschön :)

Nochmal eine frage:

gibt es eine möglichkeit um den Border vom Div abzurunden?

 

[_Thor_]

div abgerundete ecken - Google-Suche

 

[rexini]

uuupps, sry nich nachgedacht ;ugl

Google ist dein Freund - ;ugl

 

[Maxi]

Die Links finde ich noch etwas zu groß (ein Hover-Effekt wäre schön).

Und in dem unteren kleineren Bereich klebt mir die Schrift noch zu weit rechts.

 

[prm]

Ich habe denCode mal etwas abgespeckt und die Tabelle entfernt.
Überflüssig und in der CSS gelöscht werden können:
#banner1, table, .unten, #ueber. Was davon benötigt wird, ist in h1 hinterlegt.

Da lässt sich sicher noch mehr verbessern, hab jetzt allerdings keine Zeit dazu.
Evtl. musst du vor dem Schließen von #content nochmal clearen.

body{
background: #555;
}
h4{
    color: #ffffff;
    font-family: georgia;
    font-style: italic;
    letter-spacing: 1pt;
}
h3{
    font-family: georgia;
    font-style: italic;
    letter-spacing: 1pt;
}
#outer{
    width: 98.5%;
    background: #111;
}
#inner{
    width: 90%;
    height: 90%;
    background: #111;
    margin: 5% auto;
}
#banner{
    width: 100%;
    height: 90px;
    background: #888888;
    font-size: 25px;
    font-family: Arial;
    background-image: url(banner.png);
    background-repeat: no-repeat;
}
[B]h1{
    float: right;
    height: 90px;
    color: #fff;
    font-family: georgia;
    font-style: italic;
    letter-spacing: 1pt;
    font-size: 25px;
    margin-top: 60px;
}[/B]


#navi{
    width: 100%;
    height: 27px;
    background: #111;
    text-align: center;
    color: #fff;
}
#content{
    background: #666;
    background-image: url(sun.png);
    background-position: 100% 0%;
    background-repeat:no-repeat;
    width: 83%;
    height: 79.3%;
    float: left;
    border:1px solid #ffffff;
    left:200px;top:50px;
    -moz-border-radius:10px;
    -khtml-border-radius:30px;
    color: #ffffff;
    padding-left: 10px;
    font-family: verdana;
}
#rand{
    background: #999;
    width: 14%;
    height: 79.3%;
    float: right;
    border:1px solid #ffffff;
    left:200px;top:50px;
    -moz-border-radius:10px;
    -khtml-border-radius:30px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
    font-family: Arial;
}
a:link{
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-family: arial;
}
a:visited{
    color: #c0c0c0;
    text-decoration: none;
    font-size: 17px;
    font-family: arial;
}
a:hover{
    color:#87ceeb;
}
#footer{
    width: 82%;
    height: 20px;
    background: #555;
    color: #fff;
    position: absolute;
    top: 100%;
    border: 1px solid #ffffff;
}

[B].clear {clear: both;}[/B]
</style>

</head>
<body>
<body>
    <div id="outer">
        <div id="inner">
            [B]    <div id="banner">

                <h1>Die Seite über mich!</h1>
                </div>
                <div class="clear"></div>[/B]
                <div id="navi"><a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a></div>

                <div id="content">
            <h3>Lorem ipsum</h3>
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
            <div id="footer" class="schatten">Test</div>
                </div>
                <div id="rand">
                <h4>Sidebar</h4>

                Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deshalb ein schlechter Text? Ich weiss, dass ich nie die Chance haben werde, im Stern zu erscheinen.
                </div>
        </div>
        </div>

</body>
</html>