• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fixierten Header verschönern

Akoya

Neues Mitglied
Guten Morgen,
ich bin Akoya, 17 Jahre jung und komme aus Niedersachsen. Ich habe mich hier angemeldet weil ich dieses Forum schon des öfteren gelesen habe, und nun doch ein paar Problemchen habe, die ich gemeinsam mit euch lösen möchte. Ich fange einfach mal an zu schreiben, was mein Problem ist.

Damit ihr erstmal sehen könnt, wie weit ich bin, habe ich hier schon die Codes aus der index.html und layout.css gepostet. Ich möchte die fixierte Head-Leist so gestalten, wie auf 9GAG - Just for Fun! - Nicht vom Inhalt her, sondern vom Aussehen. Nur leider bekomme ich die Gestaltungen nicht hin.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><title>Mein Titel</title><link rel="stylesheet" href="layout.css" type="text/css"><style type="text/css"> body{  margin:0;  padding:100px 0 0 0; }  div#header{  position:absolute; top:0;  left:0;  width:100%;  height:55px; } @media screen{  body>div#header{   position:fixed;  } } * html body{  overflow:hidden; }  * html div#content{  height:100%;  overflow:auto; }</style><div id="header"> <p><body>
<table style="width: 850px; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">  <tbody>    <tr>      <td style="width: 850px;">Name & Slogan</td>    </tr>  </tbody><body style="background-color: rgb(167, 0, 0);"></table>
</div><div id="content"><h1>Blindtext</h1> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>

layout.css
PHP:
body{ font:80%/1.3 Arial,sans-serif;}h1{ margin:0; padding:1em; font-size:1.5em; font-weight:bold;}h1 span{ font-size:.667em;}h2{ margin:0; padding:1em 1.25em; font-size:1.2em; font-weight:bold;}h3{ margin:0; padding:1em 1.5em; font-size:1em; font-weight:bold;}pre{ margin:.5em 1.5em; padding:.3em; color:#000; background:#fff;}pre,pre code,pre var{ font:1em/1 "courier new",monospace;}pre var{ font-style:oblique;}pre code.markup.comment{ font-style:oblique; color:#222222;}pre code.markup.doctype{ font-style:oblique; color:#ff0000;}pre code.markup.element-name{ font-weight: bold; color:purple;}pre code.markup.attribute-name{ font-weight: bold; color:black;}pre code.markup.attribute-value{ font-weight:normal; color:blue;}p{ margin:0; padding:.5em 1.5em;}div#header{ background:#222222; color:#ffffff;}div#left-sidebar{ background:yellow; color:black;}div#right-sidebar{ background:#222222; color:black;}div#footer{ background:olive; color:black;}

Ich würde mich sehr freuen, wenn ihr mir helfen würdet.

Grüße
Akoya :)
 
Werbung:
Sorry, aber dein (kurzer) HTML-Code strotzt vor Fehlern:

- du hast kein head-Bereich (Dort kommen u.a. dein -Tag und deine CSS-Styles hinein)

- Du hast gleich mehrere body -Tags aufgemacht. Dieses gibt es nur einmal. Ausserdem ist es nicht erlaubt, einen body-Tag innerhalb eines anderen Elementes aufzumachen. In deinem Fall einmal ein div und eine table

- Du hast sowohl eine externe CSS-Datei eingebunden, als auch Styles im (nicht vorhandenen)head -Bereich und inline-styles in der Tabelle. Entscheide dich für eins (am besten Ersteres). Bei dem kurzen Code macht es wenig Sinn, alle 3 Möglichkeiten zu verwenden, das wird nur unübersichtlich.

- Eine Tabelle für Layout-Funktionalitäten zu missbrauchen ist "pfui".

- brs benutzt man nicht, um größere Abstände herzustellen. Dafür gibt es die CSS-Angabe "margin".

Was dein eigentliches Problem betrifft: Räume erstmal deinen HTML-Code auf, schau dir den Code der verlinkten Seite an (mit Firebug für Firefox oder den Chrome-Developer-Tools) und prüfe, welches Element der Kopfleiste welche CSS-Styles zugewiesen hat. Die kannst du dann weitestgehend übernehmen.
 
Zuletzt bearbeitet:
Dein html ist mit Fehlern übersäht. Unteranderem fehlen <html> und <head> tags und auch der <body> tag wird nicht mehr geschlossen.
Greez Stryke

Edit: Banana war schneller :D
 
Werbung:
Zurück
Oben