zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit holygrail layout - background-image

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.01.2010, 15:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 10
chrishilli befindet sich auf einem aufstrebenden Ast
Standard Probleme mit holygrail layout - background-image

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.

Geändert von chrishilli (26.01.2010 um 15:27 Uhr) Grund: Zusatzinformationen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.01.2010, 15:33
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.01.2010, 15:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 10
chrishilli befindet sich auf einem aufstrebenden Ast
Standard @ cocoon

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.01.2010, 15:50
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 26.01.2010, 15:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 10
chrishilli befindet sich auf einem aufstrebenden Ast
Standard

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

lg
Mit Zitat antworten
  #6 (permalink)  
Alt 26.01.2010, 16:01
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von chrishilli Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.01.2010, 21:31
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 27.01.2010, 13:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.03.2009
Beiträge: 10
chrishilli befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 27.01.2010, 20:01
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von chrishilli Beitrag anzeigen
DANKE etux
Bitte, gerne.
Zitat:
Zitat von chrishilli Beitrag anzeigen
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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
background-image, positionieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:10 Uhr.