AW: [CSS] CSS-Contest 2011 - WIPs
Hallo zusammen. Ich wollte mich zunächst einmal vorstellen. Ich bin 47 Jahre alt, komme aus Hamburg und beschäftige mich nebenberuflich und aus Spaß an der Sache mit Webdesign. Kenntnisse in Photoshop sind vorhanden.
Ebenso beherrsche ich, mehr oder minder, HtmL, CSS, PHP und SQL. Ich habe schon diverse Webseiten für Freunde (gewerblich) und Firmen erstellt. Komplett eigene Programmierungen und Anpassungen von z.B. Joomla.
Der Contest hat mich sehr neugierig gemacht. Ich habe mich am So. mal für ein paar Stunden an den Rechenknecht gehockt und etwas gebastelt.
Meint ihr, ich kann mit meinem Design am Contest teilnehmen?
Klick mich
Naja, eigendlich ist schon alles fertig programmiert. Aber nicht CSS3, davon halt ich nicht soooviel. Spielerein mit CSS gab es schon vor 20 Jahren, da liefen sie eben nur im IE und nirgends anders. Deswegen habe ich mich auf klassisches CSS level 2.1 beschränkt.
Gruzz aus HH, Eric
Hallo Eric, erst einmal herzlich Willkommen bei PSD, schön das du hier bist, wenn ich mir dein Design jetzt so ansehen, denke ich das du gute Chance auf einen der vorderen Plätze hast.
Gefällt mir sehr gut
: Echt Sauber gearbeitet.
Helle, da ist alles mit position:absolute drin. Weiß leider nicht wie ich das für andere Auflösungen formulieren soll.
Vlt. weiß jemand Rat. Mit container ist es gegangen, aber im html steht ja nix von container oder wrapper.
jacky
CSS ist ziemliches Neuland für mich.
Hallo Jacky,
ist doch kein Problem, mir geht es nicht anders, nur das ich Grundlegend CSS kenne, aber noch nie auf diese Art und weise eingesetzt habe.
Code:
* { }
html { }
body {
background: #fff url('images/bodybg2green.jpg') repeat-x scroll top left;
margin:auto;
padding-top:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#444;
width:960px;
height:100%; }
*{
margin:0;
padding:0;
}
p{margin-bottom: 1px;}
a{color:red;
text-decoration:none;}
a:hover{color:#033;}
a:focus{}
/*kopf*/
#head {
position:absolute;
padding:0;
margin:auto;
height:108px;
width:960px;
height:540px;
background:transparent url('images/core2green.jpg') no-repeat;
}
Was mir jetzt Spontan an deinem Code auffällt sind zum einen die beiden * und html Deklarationen. In diesen beiden steht nichts drin also könntest du sie löschen, werden nicht benötigt und geben so keinen Sinn.
Zweite was mir auffällt ist ein paar Zeilen weiter unten hast du wieder eine * Deklarationen definiert, diesmal steht was drin.
Ich persönlich fange ein CSS Dokument immer wie folgt an:
*
html
body
header
navi
content1
content2
footer
usw.
Ganz am Schluss meistens die Text Formatierung wie h1, h2, a, p span, usw.
Außer die Vererbung funzt nicht wie ich das wünsche, dann gehe ich noch mal einen Schritt nach oben und füge den Tag den ich explizit formatieren möchte noch mal extra ein wie z:B.
Code:
header {
...
}
header, h1 {
...
}
header, p, span {
...
}
Wenn du was festnageln willst wie du jetzt in deinen Beispiel dann solltest du das Design entweder links, mittig oder rechts ausrichten.
Das würde jetzt wie folgt funktionieren:
Code:
* {
magin:0; /* margin 0 und padding 0 richtet alles links/oben am Rand aus */
padding:0;
/* Wenn du unbedingt einen Scrollbalken in FF setzen möchtest kannst du folgendes der fünf Varianten einsetzen
height:100.01%;
height:100%; margin-bottom:1px;[FONT=monospace]
[/FONT]height:100.01%; margin-bottom:1px;
overflow-y:scroll; //CSS3
overflow:-moz-scrollbars-vertical; //CSS3
*/
}
body {
background: #fff url(images/bodybg2green.jpg) no-repeat;
width:960px; /* Breite der Headergrafik */
height:200px; /* Höhe der Headergrafik */
margin:0 auto; /* Zentriert die Headergrafik */
padding-top:10px; /* Hier würdest du wieder die Headergrafik 10 Pixel vom oberen Rand nach unten verschieben */
}
usw.
Noch ein Tipp, entweder du verwendest px,em,pt,mm als Breite/Höhe Angabe oder das % Zeichen, aber niemals beides zusammen. in einer Deklarationen. Ist nicht schön und spart dir später unnötige Fehlersuche.
Des weiteren solltest du am Anfang deiner CSS Datei alle Globalen Einstellungen vornehmen (Schriftgröße/Font Farbe/Schriftart usw.) und in deinen einzelnen Deklarationen die passenden Abweichungen der einzelnen Tags. Global zählt immer das was unter * definiert ist und rest erst dann wenn du es explizit definierst.
Code:
* {
color:#000000;
font:1.2em Verdana,Tahoma,Geneva;
text-transform:uppercase;
text-decoration:none;
text-align:center;
}
p {
color:#ff0000;
font:.9em Helvetica,Arial,sans-serif;
text-transform:lowercase;
font-style: italic;
text-decoration:underline;
text-align:left;
}
Wenn du noch fragen hast dann Frag, bin kein Meister aber ein bisschen was kann ich dir schon erzählen.
Gruß Helle
sehr geil! Aber wieso machst du nicht: body { background: white; color: #fff; } a, a:hover, a:visited, a:active { color: #fff; } ?? schaut doch viel schöner aus =P
:uhm:
Trotzdem habe ich jetzt noch ein paar grobe Anpassungen gemacht und fange morgen mit der Navi an. --> 
