|
|||
Reines CSS Layout macht Probs
hi@all
ich versuche mich gerade nen bissel mit css. Ich hab ein einfaches Seitenlayout was ich vorher mal mit Tabellen gemacht habe und wollte dies nun mal rein mit css machen. zu Großen Teilen funktionierte dies auch bis auf ein paar kleinigkeiten. +--+----------------+ |.1.|........2.............| 1&2=Banner +--+----------------+ 3=Menue |...|.......................| 4=Content |...|.......................| |.3|..........4............| |...|.......................| |...|.......................| +--+----------------+ Hier die seite Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>test</title> <link rel="stylesheet" href="testff.css" type="text/css" /> </head> <body> <div id="logo"> logo </div> <div id="banner"> banner </div> <div id="navigation"> <br /> <a class="menu" href="search.php" >Suchen</a> <a class="menu" href="search.php" >Suchen</a> <a class="menulast" href="search.php" >Suchen</a> <a> <!-- --></a><br /> <a class="menu" href="search.php" >Suchen</a> <a class="menulast" href="search.php" >Suchen</a> <a> </a><br /> <a class="menuonly" href="search.php" >Suchen</a> </div> <div id="body"> body </div> </body> </html> Code:
body { background-color: #000000; margin-top: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } #logo { float: left; border: 1px solid #66FF00; width: 150px; height: 75px; background-color: #000000; color: #FFFFFF; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-top: 1px solid #66FF00; border-left: 1px solid #66FF00; border-right: 1px solid #66FF00; border-bottom: 1px solid #66FF00; } #banner { border: 1px solid #66FF00; height: 75px; background-color: #000000; color: #FFFFFF; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-left: 0px solid #66FF00; border-right: 1px solid #66FF00; border-top: 1px solid #66FF00; } #body { position: relative; text-align: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; color: #FFFFFF; border-bottom: 1px solid #66FF00; border-right: 1px solid #66FF00; border-left: 1px solid #66FF00; border-top: 0px solid #66FF00; height: 100%; width: 100%; } #navigation { position: relative; float: left; width: 150px; height: 100%; border: 1px solid #66FF00; background-color: #000000; color: #66FF00; border-top: 0px solid #66FF00; border-left: 1px solid #66FF00; border-bottom: 0px solid #66FF00; } #right { position: static; float: right; width: 1px; border: 0px solid #66FF00; margin: 0px; padding: 0px; height: 100%; } #foot { position: static; clear: both; border-top: 0px solid #66FF00; } a.menu { display: block; background-color: #000000; float: left; width: 140px; height: 16px; text-decoration: none; text-align: left; font-size: 11px; font-family: Arial, sans-serif; color: #66FF00; border-color: #66FF00; border-top: 1px solid; border-left: 0px solid; border-right: 0px solid; border-bottom: 0px solid; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 3px; padding-left: 10px; padding-right: 0px; padding-bottom: 3px; cursor: pointer; } a.menu:hover { background-color: #66FF00; color: #000000; } a.menulast { display: block; background-color: #000000; float: left; width: 140px; height: 16px; text-decoration: none; text-align: left; font-size: 11px; font-family: Arial, sans-serif; color: #66FF00; border-color: #66FF00; border-top: 1px solid; border-left: 0px solid; border-right: 0px solid; border-bottom: 1px solid; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 3px; padding-left: 10px; padding-right: 0px; padding-bottom: 3px; cursor: pointer; } a.menulast:hover { background-color: #66FF00; color: #000000; } a.menuonly { display: block; background-color: #000000; float: left; width: 140px; height: 16px; text-decoration: none; text-align: left; font-size: 11px; font-family: Arial, sans-serif; color: #66FF00; border-color: #66FF00; border-top: 1px solid; border-left: 0px solid; border-right: 0px solid; border-bottom: 1px solid; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 3px; padding-left: 10px; padding-right: 0px; padding-bottom: 3px; cursor: pointer; } a.menuonly:hover { background-color: #66FF00; color: #000000; } .nav { background-color: red; } das zweite Problem ist das im IE die anordnung mit float einen zwischenraum zwischen den div´s verursacht. Der Firefox zeigt es aber richtig an. Kann man das irgendwie verhinder? gruß & thx BB Geändert von BigBoss (09.11.2007 um 13:04 Uhr) |
Sponsored Links |
|
||||
Also erst einmal hast du Probleme mit dem Boxmodell. Denn 100% + 2px sind mehr als 100%. Lies dazu hier: Cascading Style Sheets { Grundlegendes : Box-Modell }
Dann machst du noch Fehler mit "float". Sowas wie "float:middle" gibt es nicht. Lies dazu FAQ Punkt 2: http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html und hier: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT } Dann solltest du dringend einen Doctype verwenden. Aktuell wäre wohl XHTML 1.0 Strict angebracht. Zusätzlich fehlt dir eine "content-type". Deine Seite hat sechs Fehler im HTML-Code und weitere fünf im CSS-Code. Teste deine Seite hier mit: The W3C Markup Validation Service und dein CSS damit: The W3C CSS Validation Service
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
so ich habe jetzt die dateien bereinigt und validieren lassen
(Quelltext is oben getauscht) jetzt stellt sich mir aber immer noch die frage wie ich die div´s dazubekomme das sie die 100% des browserfensters einnimmt? Gruß & thx BB |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Css 3 Seiten Layout will net so :) | nova_rs | CSS | 1 | 30.03.2010 16:54 |
Joomla und CSS Layout ohne Tabellen ... | MoYo | CSS | 2 | 15.02.2007 11:19 |
CSS Layout - ist das so möglich? | berlina | CSS | 18 | 12.02.2007 22:55 |
Layout: Tabelle -> CSS | ohne Schönheitsfehler? | Knickedi | CSS | 20 | 05.08.2006 03:18 |
CSS Layout mit abgerundeten Ecken | dimension | CSS | 3 | 17.04.2005 19:05 |