Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

M!ch! · 19-02-2010, 13:15

Hallo zusammen,

ich habe eine Frage bezüglich HTML/CSS. Ich bin noch recht neu in dem Thema und habe per Forensuche und Google nichts gefunden.

Ich habe eine Internetseite bei der der eigentliche Inhalt in der Mitte angezeigt wird. Header, Menü, Inhalt, Footer, so soll die Seite aufgebaut werden. In der Mitte wird ein Hintergrundbild per CSS angezeigt und vertikal wiederholt. Ich möchte jetzt dass dieses Hintergrundbild immer bis zum Browserende wiederholt wird.

Ich habe einen Screenshot mit angehangen. In der Mitte ist ein schwarzes Feld (mit leichtem Glow-Effekt (was man hier schlecht erkennt), daher ist das ein Bild) und das soll bis zum Browserende gehen. Mit dem CSS-Befehl "padding" und 100% klappt es leider nicht.

Könnt Ihr mir weiter helfen?

Vielen Dank im voraus!
Viele Grüße, Michi

webxvideo · 19-02-2010, 14:12

Ich verstehe noch nicht so ganz welcher Teil Deiner Grafik das zu wiederhohlende Hintergrundbild ist.
Und in welchem Element setzt Du den Hintergrund ein.

M!ch! · 19-02-2010, 14:29

Hi,

der schwarze Hintergrund in der Mitte. Dieser ist 800px breit und 50px hoch und wird nach unten (y) wiederholt. Aber nur soweit wie Inhalt vorhanden ist (in diesem Fall habe ich ein paar <br>'s und den Text "this is a test" eingefügt). Die Grafik soll aber bis zum Browserende ganz unten wiederholt werden, egal wie viel Inhalt vorhanden ist. Wenn natürlich mehr Inhalt vorhanden ist als der Browser anzeigen kann (also noch unten hin) soll die Grafik natürlich entsprechend weiter laufen.

Ich setze die Grafik in der ID "site" ein. Ich häng mal den HTML-Code dran. Habe hier mit mehreren DIVs gearbeitet. Das äußerste DIV hat die ID "site" und darin wird die Grafik eingesetzt.

HTML-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>
    <title>Home</title>
    <link media="screen" rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="shortcut icon" href="" type="image/x-icon">   
</head>
<body>
	<div id="site">
    	<div id="header"><img src="images/header_home.jpg" alt="home" /></div>
        
        <div id="menu">
        	<ul id="navi">
                <li><a href="" class="menu1"></a></li>
                <li><a href="" class="menu2"></a>
                    <ul>
                        <li><a class="menu21" href=""></a></li>
                        <li><a class="menu22" href=""></a></li>
                        <li><a class="menu23" href=""></a></li>
                    </ul>
       	    	</li>
                <li><a href="" class="menu3"></a>
                    <ul>
                        <li><a class="menu31" href=""></a></li>
                        <li><a class="menu32" href=""></a></li>
                        <li><a class="menu33" href=""></a></li>
                        <li><a class="menu34" href=""></a></li>
                        <li><a class="menu35" href=""></a></li>
                        <li><a class="menu36" href=""></a></li>
                    </ul>
           	  	</li>
                <li><a href="" class="menu4"></a>
                    <ul>
                        <li><a class="menu41" href=""></a></li>
                        <li><a class="menu42" href=""></a></li>
                        <li><a class="menu43" href=""></a></li>
                    </ul>
                </li>
            </ul>
        </div>
        
    	<div id="content">
    		<!--
            <iframe src="home.htm" name="contentFrame" width="760px" height="100%" align="middle">
            	this is a test!            
            </iframe>
            -->
            <br /><br /><br /><br />
            dies ist ein test
            
            <div id="footer">
            	<!-- <p>&copy; 2010 pixel-Productions</p> -->
            </div>
    	</div>
	</div>
</body>
</html>

Und hier das CSS:

Code:

/***************** Import ******************/
@import url( "navi.css" );

/*************** Allgemeines ***************/
* {
	padding: 0px;
	margin: 0px;
}

body {
	background:url("../images/background_pattern2.jpg") repeat scroll 0 0 #000;
	z-index:1;
	
	font-family: Verdana,Arial,Helvetica,Geneva,sans-serif;
	font-size: 11px;
	line-height: 17px;
	color: #fff;
	text-align: center; /* Damit die Seite im IE zentriert dargestellt wird! */
}

label, table, tr, td {
	font-family: Verdana,Arial,Helvetica,Geneva,sans-serif;
	font-size: 11px;
	line-height:17px;
}

p {margin-bottom: 10px;}

img {border: 0px;}

.left {float: left;}

.right {float: right;}

.clear {clear: both;}

#site {
	background:url(../images/background_center.jpg) repeat-y scroll 0 0;
	position:fixed;
	width: 800px;
	height:auto;
	margin: 0px auto;
	
	text-align: left;
	position: relative;
	z-index:1;
}

#footer {
	border-top: 1px solid #fff;
	bottom:20px;
	padding: 80% 50px 2px 15px;
}

#content {
	text-align: left;
	margin: 20px 20px 0px 20px;
	z-index:2;
}

pilzebub · 19-02-2010, 14:49

gebe mal: html, body und der #site eine höhe von 100%, dann dürfte es
funktionieren(wenn ich dich richtig verstanden habe

)

wenn der inhalt aber über den content drüber raus geht, wird das
hintergrundbild am browserende abgeschnitten...

für den IE reicht die angabe von 100% und für den rest nimmst du min-height:100%;

M!ch! · 19-02-2010, 15:11

Super, das hat geklappt!
Hätte nicht gedacht dass es so einfach ist. oO

Vielen Dank!

M!ch! · 19-02-2010, 18:16

Hallo zusammen,

habe noch eine Frage und möchte keinen extra Thread aufmachen:
ich möchte auf meiner Seite ein iFrame einbauen, in dem die entsprechende HTML-Dateie aufgerufen/angezeigt wird, wenn man auf einen Link klickt. Leider habe ich bereits per Google herausgefunden dass ein iFrame keine variable Größe hat; also sich die Größe nach dem Inhalt anpasst.

Nun meine Frage: gibt es eine andere Möglichkeit meinen Inhalt darzustellen? Ich möchte ungern immer wieder die Seite von neuem aufbauen. Da muss es doch eine Möglichkeit geben. Vielleicht mit einem <div>?

Könnt Ihr mir auch hier weiterhelfen?

Vielen Dank nochmal im voraus!
Viele Grüße, Michi

pilzebub · 19-02-2010, 22:27

eine möglichkeit wäre mit jquery:
.load() – jQuery API

grüße

M!ch! · 20-02-2010, 14:42

danke, das schaue ich mir mal an.

Gruß, Michi

19-02-2010, 14:12	#2 (permalink)
webxvideo Neuer Benutzer Registriert seit: Nov 2003 Ort: berlin Beiträge: 899	Ich verstehe noch nicht so ganz welcher Teil Deiner Grafik das zu wiederhohlende Hintergrundbild ist. Und in welchem Element setzt Du den Hintergrund ein. __________________ ° OutScout.org - camps for trekking people \| Partyspinne.de

19-02-2010, 15:11	#5 (permalink)
M!ch! about nothing Registriert seit: Mar 2002 Ort: Borken Beiträge: 724	Super, das hat geklappt! Hätte nicht gedacht dass es so einfach ist. oO Vielen Dank! __________________ piXel-productions

19-02-2010, 18:16	#6 (permalink)
M!ch! about nothing Registriert seit: Mar 2002 Ort: Borken Beiträge: 724	Hallo zusammen, habe noch eine Frage und möchte keinen extra Thread aufmachen: ich möchte auf meiner Seite ein iFrame einbauen, in dem die entsprechende HTML-Dateie aufgerufen/angezeigt wird, wenn man auf einen Link klickt. Leider habe ich bereits per Google herausgefunden dass ein iFrame keine variable Größe hat; also sich die Größe nach dem Inhalt anpasst. Nun meine Frage: gibt es eine andere Möglichkeit meinen Inhalt darzustellen? Ich möchte ungern immer wieder die Seite von neuem aufbauen. Da muss es doch eine Möglichkeit geben. Vielleicht mit einem <div>? Könnt Ihr mir auch hier weiterhelfen? Vielen Dank nochmal im voraus! Viele Grüße, Michi __________________ piXel-productions

20-02-2010, 14:42	#8 (permalink)
M!ch! about nothing Registriert seit: Mar 2002 Ort: Borken Beiträge: 724	danke, das schaue ich mir mal an. Gruß, Michi __________________ piXel-productions

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

19-02-2010, 14:49	#4 (permalink)
pilzebub · Registriert seit: Oct 2003 Ort: ·· Beiträge: 742	gebe mal: html, body und der #site eine höhe von 100%, dann dürfte es funktionieren(wenn ich dich richtig verstanden habe ) wenn der inhalt aber über den content drüber raus geht, wird das hintergrundbild am browserende abgeschnitten... für den IE reicht die angabe von 100% und für den rest nimmst du min-height:100%;

19-02-2010, 22:27	#7 (permalink)
pilzebub · Registriert seit: Oct 2003 Ort: ·· Beiträge: 742	eine möglichkeit wäre mit jquery: .load() – jQuery API grüße

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Flash CS3] Das Bild unregelmäßig von Oben nach Unten erscheinen lassen?	bigtail	Flash Einsteiger	3	17-07-2009 14:46
Hintergrundbild verschwinden lassen + weiterleitung	Flashdream	Flash Einsteiger	3	30-01-2008 22:48
Per zufall von oben nach unten mehrer lichterflecke fallen lassen? wie?	Mysteryxxx	Flash Einsteiger	0	22-07-2007 13:19
<li>-link mit hintergrundbild- text unten ausrichten	andretti	HTML und CSS	21	25-09-2006 15:50
Hintergrundbild bewegen lassen?	ShadowOfSky	ActionScript 1	4	23-08-2004 08:41