Auf Thema antworten 2026

JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Beitrag: <blockquote data-quote="hellemon" data-source="post: 1719976" data-attributes="member: 56762">AW: [CSS] CSS-Contest 2011 - WIPsHallo 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. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile    :)" loading="lazy" data-shortname=":)" /> Gefällt mir sehr gut <img src="/styles/default/xenforo/smilies/icon_daumenhoch.gif"  class="smilie" loading="lazy" alt=":daumenhoch" title="Daumen hoch    :daumenhoch" data-shortname=":daumenhoch" />: Echt Sauber gearbeitet. <img src="/styles/default/xenforo/smilies/zwinker.gif"  class="smilie" loading="lazy" alt=";)" title="Wink    ;)" data-shortname=";)" />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; }[/CODE]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:* htmlbodyheadernavicontent1content2footerusw.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 {...}[/CODE]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 einsetzenheight:100.01%;height:100%; margin-bottom:1px;[FONT=monospace][/FONT]height:100.01%; margin-bottom:1px;overflow-y:scroll; //CSS3overflow:-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.[/CODE]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;}[/CODE]Wenn du noch fragen hast dann Frag, bin kein Meister aber ein bisschen was kann ich dir schon erzählen.Gruß Helle</blockquote> Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung: Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?