Text auf Header positionieren
0 0 
Felix Riesterer
0
Text auf Header positionieren
Hi,
gemäß diesem Beispiel auf selfhtml: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Möchte ich auf dieser seite: http://onlinespiele.spielendverdienen.de/startseite.html
den Text im Header ("Onlinespiele") entsprechend ausrichten, so dass er gleich neben dem | steht und in etwa der selben höhe ist, leider funktioniert dies weder mit position relative, absolute, noch mit spacer-grafiken (zumindest nicht in nicht-ie-browsern)...
<div class="header">
<div style="color: #9dd30a; font-size: 17pt; position:absolute; left:430px; top:20px; padding:0px;">
<h1 style="maring:0px;">Onlinespiele</h1>
</div>
</div>
Hat jemmand vielleicht einen Vorschlag was ich da machen könnte?
-
Hi,
Möchte ich auf dieser seite: http://onlinespiele.spielendverdienen.de/startseite.html
den Text im Header ("Onlinespiele") entsprechend ausrichten, so dass er gleich neben dem | steht und in etwa der selben höhe ist
Warum willst du dafuer ueberhaupt irgendeine Art von position-ierung verwenden?
margin/padding/ggf. line-height eines im normalen Fluss befindlichen Elementes anzupassen sollte doch vollkommen ausreichen (einigermassen sinnvollen HTML-Code vorausgesetzt).MfG ChrisB
-
Lieber Manfred,
Deine <div>-Suppe ist zwar absolut verbesserungswürdig, aber um Deinem Problem schnell zu helfen:
<div class="header">
<div style="color: #9dd30a; font-size: 17pt; position:absolute; left:430px; top:20px; padding:0px;">Hier habe ich im Firefox folgendes geändert und es scheint Deiner Vorstellung zu entsprechen:
<div style="color: #9dd30a; font-size: 17pt; position:relative; left:430px; top:15px; padding:0px;">Du solltest aber generell weniger <div>s in Deinem Code verwenden, denn für <div id="trenner"> gibt es absolut keinen Grund, ebensowenig, ein <div> um eine <table> zu setzen (gib doch der <table> die ID, anstatt dem umgebenden <div>!), und als Navi solltest Du sowieso keine <table> verwenden. SELFHTML <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=weiß da eine bessere Lösung>.
Mach Deinen Code semantischer, und Du wirst mit CSS besser zurecht kommen. Deine Überschrift braucht übrigens dieses umgebende <div> ebensowenig, wie Deine Navi!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hier habe ich im Firefox folgendes geändert und es scheint Deiner Vorstellung zu entsprechen:
<div style="color: #9dd30a; font-size: 17pt; position:relative; left:430px; top:15px; padding:0px;">Dankeschön, aber jetzt passt es im ie leider nicht mehr :\ Außerdem ist die seite zu weit nach unten verschoben (ohne div-h1 element im header ist der große weiße abstand oben über dem header nicht (siehe auch ie, wo er nicht angezeigt wird))
-
Lieber Manfred,
aber jetzt passt es im ie leider nicht mehr :\
das liegt daran, dass Du mit inline-styles arbeitest. Würdest Du ausschließlich ein externes Stylesheet verwenden, dann könntest Du für den jeweiligen IE ein gesondertes Stylesheet einbinden, das dessen Schwächen behebt. Mit vernünftigem HTML ist das dann auch wesentlich leichter, als mit Deinem bisherigen Code!
Ich habe mir mal die Mühe gemacht, deine DIV-Suppe etwas zu entwirren und semantischer zu gestalten. Der nachfolgende Code hat diese Hauptstruktur:
[body]
+-- [div id="alles"]
+-- [div id="header"]
+-- [div id="seiteninhalt"]
+-- [div id="navi"]
+-- [ul id="footer"]Hier der Code dazu:
<body> <div id="all"> <div id="header"><span></span></div> <div id="seiteninhalt"> <h1>Onlinespiele</h1> <h2>Willkommen zum Onlinespiele Bereich!</h2> <p>von <a href="/startseite.html">Spielenverdienen</a>.</p> <p>Allen die gerade etwas mehr Zeit haben...</p> <div id="kategorien"> <h2>Kategorien</h2> <ul> <li><a href="/actionspiele.html">Actionspiele</a></li> <li><a href="/kartenspiele.html">Kartenspiele</a></li> <li><a href="/spieleklassiker.html">Klassiker</a></li> </ul> </div> <div id="neue_spiele"> <h2>Neue Spiele</h2> <ul> <li><a href="/klassiker/splatman.html">Splatman</a></li> <li><a href="/kartenspiele/freecell.html">Freecell</a></li> <li><a href="/actionspiele/tank-2007.html">Tank 2007</a></li> </ul> </div> </div> <div id="navi"> <h2>Navigation</h2> <ul> <li><a href="/startseite.html" id="active_menu-nav">Onlinespiele</a></li> <li><a href="/onlinespiele-anbieter.html">Anbieter</a></li> <li><a href="/startseite.html">Geld Gewinnen</a></li> <li><a href="/onlinegames-ubersicht.html">Übersicht</a></li> <li><a href="/component/option,com_mkpostman/Itemid,52/">Newsletter</a></li> </ul> </div> <ul id="footer"> <li><a href="/impressum.html">Impressum</a></li> <li><a href="/sitemap.html">Sitemap</a></li> </ul> </div> </body>Jetzt kann man mit CSS alles schön layouten. Für den IE gibt es dann <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=ein spezielles Stylesheet>, damit auch er schön alles so macht, wie er es soll.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Ich habe mir mal die Mühe gemacht, deine DIV-Suppe etwas zu entwirren und semantischer zu gestalten.
Danke :)
-
-
-