Probleme mit holygrail layout - background-image

chrishilli · #1 (**permalink**) 26.01.2010, 15:24

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 möchte nun in den blauen und roten Div´s (links/rechts) jeweils eine Hintergrundgrafik einfügen. Alle meine Versuche endeten damit, dass ich entweder nur eine Grafik angezeigt bekam, oder sich eine (meist die Rechte) nicht richtig positionieren lies. Da ich nicht will das sich die Grafiken wiederholen versuchte ich "background-repeat: no-repeat;" zu verwenden, woraufhin gar keine grafik mehr sichtbar war. Auch die Darstellung der Hintergrundgrafiken war in den Browsern unterschiedlich! Steh voll auf dem Schlauch

!

Ich komm dabei nicht mehr weiter und bitte um eure Hilfe.

Cocoon · #2 (**permalink**) 26.01.2010, 15:33

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;

oder

Code:

background: #fff no-repeat top center;

background - CSS-Referenz auf CSS 4 You

chrishilli · #3 (**permalink**) 26.01.2010, 15:44

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;
	}

und für das linke Bild hier:

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;
    }

Leider klappt es so nicht und schon gar nicht identisch beim IE & Firefox, auf welche ich das Hauptaugenmerk lege.

Cocoon · #4 (**permalink**) 26.01.2010, 15:50

Schau dir meinen Post nochmal genau an.

Entweder du trennst, oder du fasst zusammen. Mischen ist keine gute Idee.

Versuche das:

Code:

.holygrail {
        background: url(etc. etc.) red top-center no-repeat;
	}

.holygrail .colleft {
        background: url(etc. etc.) blue top center no-repeat;
        }

Alle anderen background-Angaben löschen.

chrishilli · #5 (**permalink**) 26.01.2010, 15:53

Ok, werde ich morgen ausprobieren. Muss jetzt los, aber hoffe das deine Lösung der holy grail für mein Problem ist.

lg

EvT · #6 (**permalink**) 26.01.2010, 16:01

Zitat:

Zitat von chrishilli

Leider klappt es so nicht und schon gar nicht identisch beim IE & Firefox.

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.

etux · #7 (**permalink**) 26.01.2010, 21:31

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.

chrishilli · #8 (**permalink**) 27.01.2010, 13:36

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.

etux · #9 (**permalink**) 27.01.2010, 20:01

Zitat:

Zitat von chrishilli

DANKE etux

Bitte, gerne.

Zitat:

Zitat von chrishilli

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!).

Alles, was im Quelltext steht und mit der Vorlage nicht direkt zu tun hat, solltest Du entfernen: TYPO3-Komentar, meta-AUTHOR, Back-Link am Anfang der Seite etc. Die CSS-Datei solltest Du dagegen auslagern.
Ich hätte aber nichts dagegen

, wenn irgendwo auf Deiner Website einen Link zeigt, wo das Basis-Template her kommt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
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