|
|||
Layout Probleme
Hallo ihr,
ich habe eien Problem! Ich habe nen Layout was mit Tabellen ohne große Probleme realisierbar ist. Nun würd ich gerne das selbe in ein css layout umsetzten und stoße da auf große probleme. Weil es nicht so will wie ich will. Könntet ihr mir helfen? Ich habe eine Grafik eingefügt in welcher ihr mein Layout seht und wie ich mir das vorgestellt habe. Ich bin jedes mal daran gescheittert bitte helft mir (genaue angaben auf dem bild. Der schwarze rand stellt das browser fenster da.): Bitte helft. Danke schön Grüße SchwarzerMagier |
Sponsored Links |
Sponsored Links |
|
|||
Problem
Hallo nochmal,
ich habe nun was gefunden was so auch funktioniert wie ich es möchte jetzt gibt es doch noch ein Problem der Text in #left wird im Internet Explorer angezeigt so wie es sich gehört und im Firefox sieht man vom text nicht. Meine CSS: Code:
/* CSS Document */ body { min-width: 550px; background-color:#e6e6e6; /* 2x LC width + RC width */ } #header {height:188px; background-image:url(../image/header.jpg); } #container { padding-left: 150px; /* LC width */ padding-right: 150px; /* RC width */ } #container .column { position: relative; float: left; } #center { width:100%; background-color:#FFFFFF; } #left { width: 150px; /* LC width */ right: 200px; /* LC width */ margin-left: -100%; background-color:#e6e6e6; } #right { width: 150px; /* RC width */ margin-right: -150px; background-color:#e6e6e6 /* RC width */ } #footer { clear: both; background-image:url(../image/footer.gif); height:30px; } /*** IE6 Fix ***/ * html #left { left: 170px; /* RC width */ } .rmenu { color:#FFFFFF;} Grüße SchwarzerMagier |
|
||||
Mir fällt so erstmal auf, daß Du #left zu weit nach links schiebst (der Wert von "right" muß der Breite von #left entsprechen, und im IE verschiebst Du übrigens auch falsch), aber das dürfte noch nicht der Grund sein. Kannst Du mal das Markup dazu posten und/oder einen Link?
|
|
|||
Link
Also ich habe es mal unter http://www.derkleinewebmaster.de/css/index.html hochgeladen....
Grüße SchwarzerMagier |
|
||||
Sieht erstmal okay aus, kann man aber erst richtig sagen, wenn Du mal probeweise Fülltext hineinschreibst, damit man das Verhalten bei verschiedenen Spaltenhöhen überprüfen kann (alternativ testweise Höhen zuweisen).
Und falls die Headergrafik nicht eh nur ein Provisorium ist, unbedingt überarbeiten, denn einige Bilder fallen total raus. Du solltest die Bilder unbedingt bzgl. Kontrast, Helligkeit, Schärfe und Farbintensität etc. so einheitlich wie möglich hinbekommen. Geändert von heiko_rs (31.07.2006 um 17:43 Uhr) |
|
|||
Hi, hier haste mal eines meiner eigenen Vorlagen:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>layout</title> <style type="text/css"> * { padding: 0px; margin: 0px; } .cleaner { clear: both; } /* HIER IST DAS HINTERGRUNDBILD FÜR DIE LINKE SPALTE DEFINIERT */ #container { margin: 0px auto; width: 100%; height: 100%; background-image: url(left.gif); background-position: left; background-repeat:repeat-y; } #container[id] { height: auto; min-height: 100%; margin: 0px auto; } html { height: 100%; } #container { min-height: 100%; position: relative; margin: 0px auto; } #header { position: relative; height: 188px; background-color: #000; } #left { position: relative; width: 150px; float: left; } #center { position: relative; float:left; background-color: #fff; } #right { position: relative; width: 180px; float: right; } #footer { position: absolute; bottom: 0px; height: 30px; background-color: #000000; width: 100%; } /* HIER IST DAS HINTERGRUNDBILD FÜR DIE RECHTE SPALTE DEFINIERT */ body { width: auto; height: 100%; background-color: #fff; background-image: url(right.gif); background-position: right; background-repeat:repeat-y; } </style> </head> <body> <div id="container"> <div id="header"> </div> <div id="left"> </div> <div id="center"> x </div> <div id="right"> </div> <div id="footer" class="cleaner"> </div> </div> </body> </html> left.gif: http://img352.imageshack.us/img352/7152/leftub7.gif right.gif: http://img352.imageshack.us/img352/7237/rightxb8.gif Einfach als left.gif und right.gif in dein Rootverzeichnis speichern. Viel Spass damit, SB |
|
||||
Stimmt, ich hatte mir die CSS noch gar nicht angesehen; Du mußt natürlich noch dafür sorgen, daß die Farben bis unten "durchgehen". Falls #center immer höher ist als #left und #right, brauchst Du keine faux columns, andernfalls binde die Grafiken ein wie im Vorposting beschrieben (aber bitte background zusammenfassen!). Dafür muß #container allerdings noch die 3 Floats einschließen (siehe FAQ).
Geändert von heiko_rs (31.07.2006 um 18:26 Uhr) |
Sponsored Links |
|
|||
Hallo heiko_rs,
Zitat:
Gruß, SB |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layout Probleme!!! | Silverhawk1988 | CSS | 15 | 21.12.2008 15:12 |
paar Probleme mit dem CSS Layout | SimonK. | CSS | 6 | 05.10.2008 14:57 |
Probleme mit Layout | kruemelchen26 | CSS | 0 | 15.05.2007 22:40 |
Positionierung und Layout Probleme | dabidu | CSS | 9 | 22.10.2006 09:57 |
Probleme mit Mehrspaltigem Layout | RalfEggert | CSS | 0 | 27.09.2004 16:39 |