Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 19-02-2010, 13:15   #1 (permalink)
about nothing
 
Benutzerbild von M!ch!
 
Registriert seit: Mar 2002
Ort: Borken
Beiträge: 724
Hintergrundbild bis unten laufen lassen

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
Angehängte Grafiken
Dateityp: jpg screen.jpg (79,2 KB, 16x aufgerufen)
__________________
.:.
M!ch! ist offline   Mit Zitat antworten
Alt 19-02-2010, 14:12   #2 (permalink)
Neuer Benutzer
 
Benutzerbild von webxvideo
 
Registriert seit: Nov 2003
Ort: berlin
Beiträge: 915
Ich verstehe noch nicht so ganz welcher Teil Deiner Grafik das zu wiederhohlende Hintergrundbild ist.
Und in welchem Element setzt Du den Hintergrund ein.
webxvideo ist offline   Mit Zitat antworten
Alt 19-02-2010, 14:29   #3 (permalink)
about nothing
 
Benutzerbild von M!ch!
 
Registriert seit: Mar 2002
Ort: Borken
Beiträge: 724
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;
}
__________________
.:.
M!ch! ist offline   Mit Zitat antworten
Alt 19-02-2010, 14:49   #4 (permalink)
·
 
Benutzerbild von pilzebub
 
Registriert seit: Oct 2003
Ort: ··
Beiträge: 746
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%;
pilzebub ist offline   Mit Zitat antworten
Alt 19-02-2010, 15:11   #5 (permalink)
about nothing
 
Benutzerbild von M!ch!
 
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!
__________________
.:.
M!ch! ist offline   Mit Zitat antworten
Alt 19-02-2010, 18:16   #6 (permalink)
about nothing
 
Benutzerbild von M!ch!
 
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
__________________
.:.
M!ch! ist offline   Mit Zitat antworten
Alt 19-02-2010, 22:27   #7 (permalink)
·
 
Benutzerbild von pilzebub
 
Registriert seit: Oct 2003
Ort: ··
Beiträge: 746
eine möglichkeit wäre mit jquery:
.load() – jQuery API


grüße
pilzebub ist offline   Mit Zitat antworten
Alt 20-02-2010, 14:42   #8 (permalink)
about nothing
 
Benutzerbild von M!ch!
 
Registriert seit: Mar 2002
Ort: Borken
Beiträge: 724
danke, das schaue ich mir mal an.

Gruß, Michi
__________________
.:.
M!ch! ist offline   Mit Zitat antworten
Antwort

Lesezeichen

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 sind an
Pingbacks sind an
Refbacks sind an


Ä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


Alle Zeitangaben in WEZ +1. Es ist jetzt 22:53 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele