Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Raphale" data-source="post: 2256896" data-attributes="member: 594271">Hi crephix,ich würde die <a href="http://www.css4you.de/beforeafter.html" target="_blank">CSS 3 Psydoelemente</a> vorschlagen. Kommt dann aber darauf an ob es Abwärtskompatible sein soll oder nicht.Hab gerade gesehen das dein Code nicht gerade sauber ist hier ein paar kleinigkeiten überarbeitet..:[HTML]&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;title&gt;Unbenanntes Dokument&lt;/title&gt;&lt;!--/*hier kommt inline css, kannste wieder extern einbinden */--&gt;&lt;style&gt;* {&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;}body {&nbsp; &nbsp; background-color: #e9e9e9;&nbsp; &nbsp; }#wrapper {&nbsp; &nbsp; color: #fff;}.greyBar {&nbsp; &nbsp; background: url(../img/headBg.png) repeat-x;&nbsp; &nbsp; min-width: 1000px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin-top: 40px;&nbsp; &nbsp; height: 160px;}.pageHead {&nbsp; &nbsp; background: url(../img/logo.png) no-repeat 19px 40px;&nbsp; &nbsp; width: 1000px;&nbsp; &nbsp; height: 160px;&nbsp; &nbsp; margin: 0 auto;}#wrapper .pageHead ul.navi{&nbsp; &nbsp; width: 925px;&nbsp; &nbsp; font-family: Times New Roman;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; float: left;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 56px 0px 0px 75px;}#wrapper .pageHead li a{&nbsp; &nbsp; color: #ececec;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; float: left;&nbsp; &nbsp; font-size: 23pt;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; margin-left: 72px;&nbsp; &nbsp; text-shadow: 0 -1px #222222, 1px 0 #222222, 0 1px #222222, -1px 0 #222222;}#wrapper .pageHead li a:hover{&nbsp; &nbsp; color: #e5b93e;}/* aktive Seite gelb markieren */#wrapper .pageHead li.active a{&nbsp; &nbsp; color: #e5b93e;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;greyBar&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;pageHead&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul class=&quot;navi&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Tutorials&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Client&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot;&gt;Downloads&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]du hast auf deine &lt;a&gt; tags soviel CSS gehauen das du Theoretisch keine liste mehr brauchst <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /> Bei den Klassen und IDs ist zu beachten das du IDs nur einmal vergibst und classen kannste so oft wie du willst mit der gleichen Einstellung. Wichtig du musst auf das hier achten class=&quot;deinclassName&quot; !. Klassen solltest du dir aufheben für andere Dinge <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" /> du kannst einfach so css schreiben:[CODE].navi {..}.navi ul {..}.navi ul li {..}.navi ul li a {..} [/CODE]viel Erfolg und LG <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />apropro genau das ist hier im <a href="http://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/" target="_blank">Video </a>8:25 nochmal schön semantisch erklärt (einfaches englisch) :lol:</blockquote>

[QUOTE="Raphale, post: 2256896, member: 594271"] Hi crephix, ich würde die [URL="http://www.css4you.de/beforeafter.html"]CSS 3 Psydoelemente[/URL] vorschlagen. Kommt dann aber darauf an ob es Abwärtskompatible sein soll oder nicht. Hab gerade gesehen das dein Code nicht gerade sauber ist hier ein paar kleinigkeiten überarbeitet..: [HTML] <!doctype html> <html> <head> <meta charset="utf-8"> <title>Unbenanntes Dokument</title>  <style> * { padding: 0; margin: 0; } body { background-color: #e9e9e9; } #wrapper { color: #fff; } .greyBar { background: url(../img/headBg.png) repeat-x; min-width: 1000px; width: 100%; margin-top: 40px; height: 160px; } .pageHead { background: url(../img/logo.png) no-repeat 19px 40px; width: 1000px; height: 160px; margin: 0 auto; } #wrapper .pageHead ul.navi{ width: 925px; font-family: Times New Roman; list-style: none; float: left; padding: 0; margin: 56px 0px 0px 75px; } #wrapper .pageHead li a{ color: #ececec; text-decoration: none; float: left; font-size: 23pt; font-weight: bold; margin: 0; margin-left: 72px; text-shadow: 0 -1px #222222, 1px 0 #222222, 0 1px #222222, -1px 0 #222222; } #wrapper .pageHead li a:hover{ color: #e5b93e; } /* aktive Seite gelb markieren */ #wrapper .pageHead li.active a{ color: #e5b93e; } </style> </head> <body> <div id="wrapper"> <div class="greyBar"> <div class="pageHead"> <ul class="navi"> <li> <a href="#">Home</a> </li> <li> <a href="#">Tutorials</a> </li> <li> <a href="#">Client</a> </li> <li> <a href="#">Downloads</a> </li> </ul> </div> </div> </div> </body> </html> [/HTML]du hast auf deine <a> tags soviel CSS gehauen das du Theoretisch keine liste mehr brauchst :) Bei den Klassen und IDs ist zu beachten das du IDs nur einmal vergibst und classen kannste so oft wie du willst mit der gleichen Einstellung. Wichtig du musst auf das hier achten class[COLOR=Red]="[/COLOR]deinclassName[COLOR=Red]"[/COLOR] !. Klassen solltest du dir aufheben für andere Dinge ;) du kannst einfach so css schreiben: [CODE] .navi {..} .navi ul {..} .navi ul li {..} .navi ul li a {..} [/CODE]viel Erfolg und LG ;) apropro genau das ist hier im [URL="http://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/"]Video [/URL]8:25 nochmal schön semantisch erklärt (einfaches englisch) :lol: [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?