|
|||
Lücken wenn Inhalt eines DIVs zu groß
Hallo erstmal an alle,
ich habe ein Problem. Mir wurde geraten endlich doch mal Abstand von meinen Tabellenlayouts auf meiner Webseite zu nehmen. Also habe ich mich mal daran versucht, mein Design ohne Tabellen unterzubringen. Ich hatte vorher meine Webseite "mitwachsen" lassen, wenn im Hauptteil mal ein längerer Text war. Dies hatte ich dann mit background-repeat gemacht. Allerdings habe ich jetzt bei den DIVs das Problem, dass wenn überhaupt die Divs mit der sich wiederholenden Grafik sich unterhalb des Inhalts befinden. Ich habe das ganze mal hochgeladen, ich denke damit wird klarer was ich meine: http://takeliner.de/problem/new/index.html Ich hätte gerne, dass die divs leftrepcol und rightrepcol jeweils links und rechts nebem dem hauptteil sind und dort von oben nach unten sich über 100% strecken und das background-image wiederholen. Könnt ihr mir helfen? Mir fällt es schwer nachzuvollziehen warum die dinger darunter sind und nicht daneben. Hier meine CSS: Code:
html, body{ margin:0; padding:0; text-align:left; } #pagewidth{ width:684px; text-align:left; } #header{ width:684px; height: 41px; background-image: url(../website/jpg/top.jpg); width:100%; } #leftcol{ width:206px; height:382px; float:left; position:relative; background-image: url(../website/jpg/links.jpg); } #maincol{ text-align: left; width:434px; background-color: #FFFFFF; float: left; position: relative; } #rightcol{ width:44px; height:382px; float:left; position:relative; background-image: url(../website/jpg/rechts.jpg); } #leftrepcol{ width:206px; float:left; position: relative; background-image: url(../website/jpg/wiederhol_links.jpg); background-repeat: repeat-y; } #centerrepcol{ width:434px; float:left; background-color:FFFFFF; } #rightrepcol{ width:44px; float:left; position:relative; background-image:url(../website/jpg/wiederhol_rechts.jpg); background-repeat:repeat-y; } #footerl{ height:56px; width:206px; float:left; background-image:url(../website/jpg/unten_links.jpg); } #footerm{ height:56px; width: 434px; float: left; background-image: url(../website/jpg/unten.jpg); } #footerr{ height:56px; width: 44px; float: left; background-image: url(../website/jpg/unten_rechts.jpg); } 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="en" lang="en" > <head> <title>CssCreator-->XHTML 1.0 Strict standard template </title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="www.csscreator.com" /> <link rel="stylesheet" href="201746331.css" type="text/css" /> </head> <body> <div id="pagewidth" > <div id="header" ></div> <div id="leftcol" ></div> <div id="maincol" > INHALT </div> <div id="rightcol" ></div> <div id="leftrepcol" ></div> <div id="centerrepcol" ></div> <div id="rightrepcol" ></div> </div> <div id="footerl" ></div> <div id="footerm" ></div> <div id="footerr" ></div> </body> </html> Mit Freundlichem Gruß André |
Sponsored Links |
|
|||
Einen druchgehenden Hintergrund bekommst du, wenn du in das alles einschließende Element #pagewidth *eine* gekachelte Hintergrundgrafik legst.
Siehe CSS-FAQ Punkt 1. Damit der alles umgebende Container mit seinem Inhalt wächst braucht dein Gefloate noch ein clear. Siehe FAQ Punkt 2. -- Leere Elemente für Hintergrundgrafiken brauchst du überhaupt nicht - entferne sie. Zeichne zuerst deine Inhalte mit semantisch sinnvollem Markup aus. Bsp: Welchen Inhalt bekommt "header"? Ist das nicht eher eine h1-Überschrift. usw. Wenn du das hast, dann überleg dir, in welchen der vorhandenen Elemente du deine Hintergrundbilder unterbringst. Die Zerschnipseleien in rechts/links/mitte sind unnötig. Du denkst in Tabellenzellen - das musst du dir abgewöhnen. Bsp: warum hast du den footer in drei Teile zerschnipselt? |
Sponsored Links |
|
|||
Ich habe versucht mich vom dem Tabellengedanken zu lösen. Ich weiss dass es mir noch lange nicht gelungen ist und ich noch einen weiten Weg vor mir habe, aber ich wollte mal erfragen, ob ich wenigstens auf dem richtigen Weg bin.
Zumindest im IE sieht die Webseite jetzt wie gewollt aus, im Firefox allerdings noch nicht. Soweit ich recherchiert habe, hängt es mit dem clear: zusammen, nur habe ich (noch) nicht begriffen wie/wo/weshalb ich da was einsetzen muss.(Das wird also eine seeeehr lange Nacht ) Hier mal mein derzeitiger Stand: http://www.takeliner.de/problem/0/ Die jetzige Version habe ich durch recherchen und größtenteils durch simples ausprobieren hinbekommen. Wie gesagt im IE sieht es bei mir aus wie gewünscht. Nur im Firefox schießt der Text über den Footer hinaus und auch das Menü ist noch etwas unpässlich. Mein derzeitiger wissenstand ist, dass ich entweder den code 100% validieren muss oder mit einem CSS Wechsel je nach Browser arbeiten muss. Ich möchte mich nochmal bei fricca für die Denkanstöße bedanken! Edit: Im Firefox sieht die Seite jetzt auch wie gewollt aus! CyA Takeliner Geändert von Takeliner (16.09.2006 um 19:21 Uhr) |
|
|||
Absolute Positionierung und float beim selben Element geht nicht - float ist dann wirkungslos.
Wenn du die Navigation abs. positionierst, dann brauchst du auch kein clear. Es ist so aber *nicht* möglich, dass sich #pagewidth mit der Navigationsleiste ausdehnt, wenn diese länger ist als der Inhaltsbereich. Du darfst keine festen Höhen angeben (#maincol!), wenn du möchtest, dass sich ein Element mit seinem Inhalt ausdehnt. Der IE macht das falsch. Wenn du eine Mindesthöhe willst, dann nimm min-height (height *nur* für IE). Die absolute Positionierung von html, body ist völlig unnötig. Weg damit. Wenn du einen Abstand von links willst, dann gib z.B. body ein padding. Zitat:
Zitat:
Schau dir an, wie Listen aufgebaut sind (SELFHTML!). Sonderbehandlung des IE ist mit CSS-Hack oder Conditional Comment möglich (Suchfunktion!). |
|
||||
wie schon in der FAQ steht kannst du für solche problemlösungen entweder http://www.yaml.de, oder das beispiel auf a list apart oder das hier benutzen... da musst du dich halt etwas mit beschäftigen.
http://www.css-tutorials.de/css/onem...umnlayout.html
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da... |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS-Layout der Browsergröße anpassen | Jen | CSS | 3 | 14.11.2008 09:39 |
Problem mit position:relative; | McCoRmIcK | CSS | 0 | 08.04.2007 17:23 |
dreispaltiges layout, footer soll immer mitwandern | sirrpa | CSS | 14 | 24.11.2005 19:57 |
div box bekomme ich nett zentriert??? | Hard@Bowl | CSS | 1 | 23.05.2005 12:22 |
height: 100% beim IE | [M.o.C]Co | CSS | 3 | 12.05.2005 13:58 |