|
|||
![]()
Hallo liebe Community,
ich benutze das 3 colum layout von Matthes James Taylor. Siehe hier! Anbei noch mein Sourcecode: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> * { margin: 0; padding: 0; } html { margin:0px; font-family:verdana, sans-serif; font-size: 12px; } body { margin:0; padding:0; text-align:center; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; background:#fff; min-width:600px; /* Minimum width of layout - remove line if not required */ background: #fff; background-repeat: no-repeat; background-position: top center; } #fixed { margin:0 auto; width:900px; /* you can use px, em or % */ text-align:left; } a { color:#369; } a:hover { color:#fff; background:#369; text-decoration:none; } h1, h2, h3 { margin:0 0 0 0; padding:0; } p { margin:0 0 0 0; padding:0 0 15px 0; font-size:12px; } img { margin:0 0 0 0; } /* Header styles */ #header { clear:both; float:left; width:100%; height: 178px; background: yellow; background-repeat: no-repeat; background-position: top center; margin-top:0px; text-align:center; } /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* holy grail 3 column settings */ .holygrail { background: red; /* Right column background colour */ } .holygrail .colmid { float:left; width:200%; margin-left:-200px; /* Width of right column */ position:relative; right:100%; background:#fff; /* Centre column background colour */ } .holygrail .colleft { float:left; width:100%; margin-left:-50%; position:relative; left:400px; /* Left column width + right column width */ background:blue; /* Left column background colour */ } .holygrail .col1wrap { float:left; width:50%; position:relative; right:200px; /* Width of left column */ padding-bottom:10px; /* Centre column bottom padding. Leave it out if it's zero */ } .holygrail .col1 { margin:0 215px; /* Centre column side padding: Left padding = left column width + centre column left padding width Right padding = right column width + centre column right padding width */ position:relative; left:200%; overflow:hidden; } .holygrail .col2 { float:left; float:right; /* This overrides the float:left above */ width:170px; /* Width of left column content (left column width minus left and right padding) */ position:relative; right:15px; /* Width of the left-had side padding on the left column */ } .holygrail .col3 { float:left; float:right; /* This overrides the float:left above */ width:170px; /* Width of right column content (right column width minus left and right padding) */ margin-right:45px; /* Width of right column right-hand padding + left column left and right padding */ position:relative; left:50%; } /* Footer styles */ #footer { clear:both; float:left; width:100%; height:20px; background: #333; text-align:center; margin-top:0px; } </style> </head> <body> <body> <div id="fixed"> <div id="header"> header </div> <div class="colmask holygrail"> <div class="colmid"> <div class="colleft"> <div class="col1wrap"> <div class="col1"> <!-- Column 1 start --> content <!-- Column 1 end --> </div> </div> <div class="col2"> <!-- Column 2 start --> Untermenü <!-- Column 2 end --> </div> <div class="col3"> <!-- Column 3 start --> suche <br /> <br /> news <!-- Column 3 end --> </div> </div> </div> </div> <div id="footer"> footer </div> </div> </body> </html> ![]() Ich komm dabei nicht mehr weiter und bitte um eure Hilfe. Geändert von chrishilli (26.01.2010 um 15:27 Uhr) Grund: Zusatzinformationen |
Sponsored Links |
|
||||
![]()
Ich vermute mal, da kommen sich mehrere background-Angaben in die Quere, wenn ich mir deinen Quelltext so ansehe.
Entweder du schreibst Code:
background-color: #fff; background-image: url... background-repeat: no-repeat; background-position: top center; Code:
background: #fff no-repeat top center; |
Sponsored Links |
|
|||
![]()
Hi Cocoon,
ich habe schon alle möglichen Varianten ausprobiert. Vermutlich hast du recht, jedoch mache ich zusätzlich noch irgendetwas falsch. Wichtig ist, denke ich, auch wo ich diese Einträge mache. Für das rechte Bild hier: HTML-Code:
.holygrail { background: red; /* Right column background colour */ background: url(etc. etc.); background-position: top center; background-repeat: no-repeat; } HTML-Code:
.holygrail .colleft { float:left; width:100%; margin-left:-50%; position:relative; left:400px; /* Left column width + right column width */ background:blue; /* Left column background colour */ background: url(etc. etc.); background-position: top center; background-repeat: no-repeat; } |
|
|||
![]()
Das von dir verlinkte Template schaltet IE in den Quirksmodus. In diesem Modus sind zum Teil erhebliche Unterschiede in der Darstellung zwischen IE und standardskonformen Browsern vorprogrammiert, deshalb verwendest du besser seine strict-Variante. Der Link auf dieses Layout befindet sich am Ende der von dir verlinkten Seite.
|
|
||||
![]()
Für jede Spalte ein Hintergrundbild und/oder eine Hintergrundfarbe zu notieren ist auch möglich. Dabei überlappen sich weder die Spalten selbst noch deren Hintergrundbilder und -farben. Es ist sogar möglich pro Spalte jeweils zwei Bilder und zwei Farben zu notieren.
Hier hatte ich es das erste Mal gepostet: http://xhtmlforum.de/57601-equal-hei...umns-gibt.html Und hier ein Drei-Spalten-Layout (nur Spalten) : Demo-Layout : Gleich hohe Spalten (Drei-Spalten-Layout) :: emil-webdesign.net Drei-Spalten-Layout mit Header, Navigation und Footer (Inhalt-Spalte an erster Stelle im Quellcode) : Demo-Layout : Inhalt zuerst, drei Spalten, elastisch :: emil-webdesign.net Im Quirksmode sind die alten IEs noch leichter zu kontrollieren und mit weniger Code. Empfehlen tue ich es aber nicht. Daher ist es wichtig, mit welchem Browser man unterwegs ist, wenn man sich den Quellcode der Beispiele kopiert. Bei IE < 7 erscheint kein xml-Prolog, bei allen anderen Browser schon. Den TYPO3-Kommentar im „head“ kann man (und sollte man) einfach löschen. Ich werde demnächst dafür sorgen, dass er gar nicht mehr im Quelltext erscheint. |
|
|||
![]()
DANKE etux,
da ich das CSS deines Beispiels viel besser durchschaue werde ich für mein Projekt deine Vorlage verwenden (Deine Erwähnung im Sourcecode bleibt natürlich erhalten!). Nochmals vielen Dank für die schnelle Hilfe und meine Problem kann als gelöst angesehen werden. |
|
||||
![]()
Bitte, gerne.
Zitat:
Ich hätte aber nichts dagegen ![]() |
Sponsored Links |
![]() |
Stichwörter |
background-image, positionieren |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsprobleme im IE | lea11011989 | CSS | 17 | 05.11.2010 10:44 |
CSS für Firefox, IE, Opera Probleme - Browserweiche | talkuvit | CSS | 4 | 31.10.2009 19:07 |
Float - Probleme | wolf1985 | CSS | 5 | 19.08.2008 09:14 |
Footer left und right Probleme... | wolf1985 | CSS | 2 | 14.08.2008 14:04 |
Probleme mit Background Image | Flo01 | CSS | 3 | 16.04.2005 10:36 |