|
|||
CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 DIV's
Hallo,
ich beschäftige mich seit kurzem mit CSS und bin (noch) ziemlich begeistert von dessen neuen Möglichkeiten. Beim rumprobieren bin ich jetzt leider auf ein Problem gestoßen, das ich leider (noch) nicht hinbekomme. Ich möchte eine Seite aufbauen, welche vom Aufbau dieser Grafik entspricht: Beim Umsetzen der Idee musste ich bei diesem Status kapitulieren: http://dvd-datenbank.com/_test/dvd_neu/test_2.php Es sind bisher folgende Probleme aufgetreten: Internet Explorer 6 - Im linken DIV fügt er links 10 anstatt 5 Pixel ein - Im rechten DIV fügt er rechts 10 anstatt 5 Pixel ein FireFox 1.5 - Der Content Rahmen und Content Hintergrund wird nicht auf die Länge der inneren DIVs (links, mitte, rechts) angepasst, sondern endet einfach mitten im Content. Hier die CSS-Datei für die Seitenaufteilung: Code:
/* Logo und Banner */ #head { height: 142px; width: 100%; } /*Logo*/ #logo { float:left; clear: right; } #logo a, #logo a:hover { display: block; height: 142px; width: 430px; cursor: pointer; background-image: url(../img/logo_430px.gif); background-repeat: no-repeat; text-decoration: none; } /*Banner*/ #banner { float:right; margin-top:40px; width:487px; height:68px; background-image: url(../img/banner_bg.gif); background-repeat: no-repeat; } /* Content */ #content { border:1px solid #000000; background-color: #7695C3; height: 100%; width: 100%; } /* Content - Links */ #links { float: left; clear: right; margin-top: 5px; margin-left: 5px; width: 175px; } /* Content - Mitte */ #mitte { float: left; clear: right; margin-top: 5px; margin-left: 5px; width: 628px; } /* Content - Rechts */ #rechts { float: right; margin-top: 5px; margin-right: 5px; width: 175px; } /* Content - Footer */ #footer { clear: both; text-align: center; line-height: 30px; } Meine Fragen sind folgende: - Ist der Aufbau einigermaßen sinnig ? - Welche Verbesserungsvorschläge habt ihr ? - Wie schaffe ich es, das die Seite in den aktuellen Browsern gleich dargestellt wird ? Gruß Nico[/b] |
Sponsored Links |
|
|||
sind eine menge fragen die alle zu beantworten den rahmen sprengen würde.
der ie führt eine andere berechnung für margin, padding im einsatz mit border aus. (suchfunktion nutzen) dein aufbau kann man nehmen, float left kann allerdings zu einer ruckelshow führen wenn das für ein portal geplant ist. boxmodelle (ein paar wenige, ist noch alpha die seite) http://www.xoops-design.com/listing+index.htm probiers mal damit aus.
__________________
Wie ich am schnellsten Hilfe bekomme... 1. Beschreibung des Problems 2. HTML Case mit eurem Code 3. CSS Case mit eurem Code 4. evtl. einen Screenshot oder einen Demo Link Bsp: http://www.xhtmlforum.de/viewtopic.php?t=6613 |
Sponsored Links |
|
|||
Re: CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 D
Zitat:
Zitat:
Das solltest du zuerst ändern. 2. height in % bezieht sich immer auf die height-Angabe des Elternelements. Wenn dort keine height-Angabe steht, kommt "auto" raus (im Moment machen die Browser das unterschiedlich, weil sie im Quirks-Modus sind.) Und: height:100% heißt genau 100%, nicht mehr. Der IE macht das falsch. An dieser Stelle würde sich min-height eignen. 3. Wie kommst du auf min-height für body? 4. Wer floatet braucht auch clear. Das clearende Element muss innerhalb des Containers liegen, der auch die floats enthält. Grundsätzlich: beschäftige dich mit semantischem Markup. Es gibt noch mehr Elemente in HTML als nur div und a. Verwende sie ihrer Bestimmung gemäß (Listen für Menüs, hx für Überschriften, p für Textabsätze...) Und bitte lass den onfocus-Kram bleiben. Dieser Rahmen hat eine Funktion - für Tastaturnavigation. Zitat:
edit: aber bitte nicht wieder so eine abenteuerliche Theorie! Grüße fricca |
|
|||
Hallo,
vielen Dank für die Tipps. Ich habe die Test-Seite bei diesen Punkten modifiziert: - Doctype - IE-Fix für double-margin - height 100% vom Body in den Content (ohne sichtbaren Erfolg) Offene Punkte: - Automatische Rahmenhöhe und Hintergrund des Content im FireFox und im Opera - Durch den Doctype wechsel, Probleme mit Formular Feldern (input type text). Die Breite und Höhe variiert zwischen den Browsern. - Verständnissfrage zum floating. Wenn ich floating: left mache, brauche ich dann einen clear: left oder clear: right ? Die aktuelle page.css: Code:
/* Logo und Banner */ #head { height: 142px; width: 100%; } /*Logo*/ #logo { float: left; clear: right; display: inline; /* Fix fuer IE wegen float und margin */ } #logo a, #logo a:hover { display: block; height: 142px; width: 430px; cursor: pointer; background-image: url(../img/logo_430px.gif); background-repeat: no-repeat; text-decoration: none; } /*Banner*/ #banner { float: right; margin-top:40px; width:487px; height:68px; background-image: url(../img/banner_bg.gif); background-repeat: no-repeat; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content */ #content { border:1px solid #000000; background-color: #7695C3; width: 998px; /* -2 Pixel fuer den border links und rechts */ } /* Content - Links */ #links { float: left; clear: right; margin-top: 5px; margin-left: 5px; width: 175px; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content - Mitte */ #mitte { float: left; clear: right; margin-top: 5px; margin-left: 5px; width: 628px; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content - Rechts */ #rechts { float: right; clear: right; margin-top: 5px; margin-right: 5px; width: 175px; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content - Footer */ #footer { clear: both; text-align: center; line-height: 30px; } Gruß Nico |
|
||||
Zitat:
Benutz auch die Suchfunktion zum Thema "Höhe immer 100%"! Außerdem: wolltest du nicht, das sich der #content der Höhe seines Inhalts anpasst? Zitat:
Was ist eine "automatische Rahmenhöhe"? Vermutlich suchst du "faux columns" (Suchfunktion, Google) Zitat:
Zitat:
http://www.css4you.de/clear.html |
|
|||
Hallo,
ich lese mir deine Tipps durch, kann diese aber nicht auf mein Problem anwenden. Da ich nicht weiter komme, stelle ich hier jetzt nochmal die kompletten Quellcodes rein: php 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"> <html> <head> <title>TEST TEST TEST TEST</title> <link rel="STYLESHEET" type="text/css" href="css/page.css"> <link rel="STYLESHEET" type="text/css" href="css/main.css"> </head> <body style="text-align:center;"><div style="width:1000px; height: 100%; min-height: 100%; margin:0px auto; text-align:left;"> <div id="head"> <div id="logo"></div> <div id="banner">[img]img/banner_test.gif[/img]</div> </div> <div id="content"> <div id="links"> <? require ('snippets/navigation.inc.php'); ?> <? require ('snippets/search_titel.inc.php'); ?> <? require ('snippets/login.inc.php'); ?> <? require ('snippets/shopping.inc.php'); ?> </div> <div id="mitte"> <div class="box_weiss"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div> </div> <div id="rechts"> <div class="box_weiss">Rechts</div> </div> </div> <div id="footer">Footer</div> </div></body> </html> page.css Code:
/* Logo und Banner */ #head { height: 142px; width: 100%; } /*Logo*/ #logo { float: left; clear: right; display: inline; /* Fix fuer IE wegen float und margin */ } #logo a, #logo a:hover { display: block; height: 142px; width: 430px; cursor: pointer; background-image: url(../img/logo_430px.gif); background-repeat: no-repeat; text-decoration: none; } /*Banner*/ #banner { float: right; margin-top:40px; width:487px; height:68px; background-image: url(../img/banner_bg.gif); background-repeat: no-repeat; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content */ #content { border:1px solid #000000; background-color: #7695C3; width: 998px; /* -2 Pixel fuer den border links und rechts */ height: 100%; min-height: 100%; } /* Content - Links */ #links { float: left; margin-top: 5px; margin-left: 5px; width: 175px; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content - Mitte */ #mitte { float: left; margin-top: 5px; margin-left: 5px; width: 628px; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content - Rechts */ #rechts { float: right; margin-top: 5px; margin-right: 5px; width: 175px; display: inline; /* Fix fuer IE wegen float und margin */ } /* Content - Footer */ #footer { border-top:1px solid #000000; clear: both; text-align: center; line-height: 30px; } main.css Code:
body { margin: 0%; padding: 0%; background-color: #FFFFFF; } body, td, p, div, form, span, select, input, textarea { font-family:arial, helvetica, sans-serif; font-size:12px; font-weight:normal; color:#000000; } form, select, input, textarea { margin: 0px; } input.rahmen { margin: 0px 0px 5px 0px; padding: 2px 0px 2px 2px; background-color: #FFFFFF; border: 1px solid #CCCCCC; vertical-align: middle; } input.image { margin: 0px 0px 5px 0px; vertical-align: middle; } a:link { color:#0347BF; text-decoration: none; } a:visited { color:#0347BF; text-decoration: none; } a:aktiv { color:#0347BF; text-decoration: none; } a:hover { color:#09246B; text-decoration: underline; } a.nav { background-position: 0px; background-repeat: no-repeat; padding-left: 16px; line-height:20px; } a.nav:link { color:#000000; background-image: url(../img/pfeil_rechts_inaktiv_16px.gif); } a.nav:visited { color:#000000; background-image: url(../img/pfeil_rechts_inaktiv_16px.gif); } a.nav:aktiv { color:#000000; background-image: url(../img/pfeil_rechts_aktiv_16px.gif); } a.nav:hover { color: #FF7200; text-decoration: underline; background-image: url(../img/pfeil_rechts_over_16px.gif); } a.boxed { background-position: 2px; padding-left: 14px; background-repeat: no-repeat; } a.boxed:link { color:#FFFFFF; background-image: url(../img/square_whitegrey.gif); } a.boxed:visited { color:#FFFFFF; background-image: url(../img/square_whitegrey.gif); } a.boxed:aktiv { color:#FFFFFF; background-image: url(../img/square_whitegrey.gif); } a.boxed:hover { color: #FF7200; background-image: url(../img/square_blackorange.gif); } .headercontainer { font-weight:bold; color:#FFFFFF; padding-top: 3px; padding-bottom: 2px; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000; background-position: 0px; background-repeat: repeat; } .header_orange { background-image: url(../img/header_orange.gif); } .header_blau { background-image: url(../img/header_blau.gif); } .header_grau { background-image: url(../img/header_grau.gif); } .header_schwarz { background-image: url(../img/header_schwarz.gif); } .navcontainer { line-height: 20px; } .nav_rubrik_inaktiv { padding-left: 0px; } .nav_rubrik_aktiv { background-image: url(../img/pfeil_unten_aktiv_16px.gif); background-position: 0px; background-repeat: no-repeat; padding-left: 16px; } .nav_seite_inaktiv { padding-left: 10px; } .nav_seite_aktiv { background-image: url(../img/pfeil_rechts_aktiv_16px.gif); background-position: 10px; background-repeat: no-repeat; padding-left: 26px; font-weight: bold; text-decoration: underline; } .box_trans { border: 1px solid #000000; margin-bottom: 5px; } .box_shopping { border: 1px solid #000000; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 10px; } .box_shopping_header { background-color: black; font-size:11px; font-weight:bold; text-align: center; color:#FFFFFF; padding: 2px; } .box_shopping_mitte { } .box_shopping_footer { background-color: black; font-size:11px; font-weight:bold; color:#FFFFFF; padding: 2px; } .box_weiss { background-color: #FFFFFF; border: 1px solid #000000; margin-bottom: 10px; } .box_content { margin-left: 4px; margin-top: 2px; margin-right: 4px; margin-bottom: 2px; } .ueberschrift1 { color: black; font-weight: normal; margin-top: 5px; } |
|
|||
Zitat:
Du willst zu viel auf einmal. Beschäftige dich der Reihe nach mit den genannten Stichpunkten - nur "lesen" genügt nicht. Benutze dafür die Suchfunktion und Google. Du musst nichts neu erfinden. BTW: und wirf alle inline-styles raus. Benutze nur das externe Stylesheet. |
|
|||
OK, dann der Reihe nach.
Ich möchte, das der Rahmen und die Hintergrundfarbe von meinem <div id="content"> sich mit der Höhe der in diesem div enthaltenen Inhalte verändert. Das funktioniert im IE 6 Das funktioniert NICHT im Opera 8.5, Firefox 1.07, 1.5 Wenn das klappen würde, wäre mir schon geholfen. Mit HTML und Tabellen ist das irgendwie schon einfacher |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Rahmen mit Grafik mit css erstellen | snoopy984 | CSS | 5 | 17.01.2012 09:37 |
DIV Layout mit CSS: Zentrieren eines Divs und links und rechts auffüllen. | darkwave | CSS | 5 | 07.04.2011 14:11 |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Im Opera tuts und im IE nicht <- CSS Anfänger | theSaintHell | CSS | 13 | 13.07.2004 16:23 |
nur bestimmte divs mit css formatieren | tricky | CSS | 2 | 05.03.2004 11:19 |