• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Balken durch repead-x an unteren Rand?

Clans

Neues Mitglied
Hallo,
ich hab ein wahrscheinlich einfaches Problem (aber bin noch totaler Anfänger und auch erfahrenere Freunde konnten bis jezt nicht helfen).
Ich möchte einfach nur ein Kachel-Bild am unteren Rand in x-Richtung über die Seite wiederholen dass ich da eine Art Säule hab.
Nur bekomm ich die Säule einfach nicht an den unteren Rand, sie ist immer oben.
Hier mal mein Script und darunter zwei möglichkeiten, die ich als css-Datei einbinden wollte.

HTML:
<html>
<head>
<link rel=stylesheet type="text/css" href="index.css">
</head> 
<body><div id="unten">TEST</div></body>
</html>

HTML:
#unten {
bottom:0 !important;
margin:0;
position:fixed;
background-image: url(2.jpg);
background-repeat:repeat-x;
height:100%;
width:100%;
min-height: 100%; 
height:auto !important; 
height:100%; 
overflow: hidden !important; 
}

HTML:
#unten {
left:0; 
bottom:0; 
width:100%; 
height:100%; 
background-image:url(2.jpg);
background-repeat:repeat-x;
}

Erstere der beiden Varianten hab ich aus dem Netz und für mich angepasst. (angeblich unterstützen es dann mehr Browser)
Zweiteres sollte aber eigentlich auch gehen, zumindest der Balken ist da, nur halt oben nicht unten.

Wo ist denn da der Fehler?
 
Muss mich doch nochmal rückmelden.
Es klappt zwar bei den bekannten Browsern, mit Ausnahme vom Internet Explorer. Hier erscheinen die Elemente mit rießigem abstand in der y-Ebene. Hier mal meine Seite.

http://d2-live.he-hosting.de/

meine index.css schaut nun so aus:

HTML:
#unten {
bottom:0 !important;
margin:0;
position:fixed;
background-image: url(2.jpg);
background-repeat:repeat-x;
background-position:left bottom;
height:100%;
width:100%;
min-height: 100%; 
height:auto !important; 
height:100%; 
overflow: hidden !important;

Kann ich da noch nachbessern?

Edit.: Nicht nur bei dem einen Balken, auch ein Image, das ich positioniert habe, wird im Internet-Explorer nicht angezeigt.

Ok, hab jetzt alle "fixed" durch "absolute" ersetzt, nun wirds schon besser ^^ . Nun kann der Internet Explorer auch damit was anfangen. Wenn ich die Seite so hinbekomme, dass niemand Scrollen muss, machts für diese Elemente ja keinen Unterschied.
Aber trotzdem komisch.
 
Zuletzt bearbeitet:
Hey ich bräuchte nochmal Hilfe, mein Grundgerüst für die Seite steht nämlich, aber hab noch ein Balkenproblem. Meine Seite passt sich quer dem Bildschirm bis zu einer Minimalauflösung von 980px an, ist also nach unten hin scrollbar.
Wird aber die Seite kleiner als die Bildschirmhöhe bleibt der Balken nicht am unteren Bildschirmrand stehen, egal wie ich es versuche einzustellen.

Hier mal mein Script:

HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />
<title>Test</title>
<link rel=stylesheet type="text/css" href="css/test.css">
</head>
<body id="body">
<!-- obere Leiste ------------------------------------------>
<div id="leiste_oben">
<center>
<span id="musikband">Musikband &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
<span id="bergwerk">Bergwerk</span><br>
<span id="einfach_stark">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   ... einfach stark!!!</span>
</center>
</div>
<!---------------------------------------------------------->
<!-- Navigationsleiste ------------------------------------->
<div id="navigationsleiste">
<a href="startseite.php" target="_self" id="navigationsbutton" style="margin-left:0%;">Startseite</a>
<a href="mitglieder.php" target="_self" id="navigationsbutton" style="margin-left:12.5%;">Mitglieder</a>
<a href="historie.php" target="_self" id="navigationsbutton" style="margin-left:25%;">Historie</a>
<a href="playlist.php" target="_self" id="navigationsbutton" style="margin-left:37.5%;">Playlist</a>
<a href="media.php" target="_self" id="navigationsbutton" style="margin-left:50%;">Media</a>
<a href="kontakt.php" target="_self" id="navigationsbutton" style="margin-left:62.5%;">Kontakt</a>
<a href="gaestebuch.php" target="_self" id="navigationsbutton" style="margin-left:75%;">Gästebuch</a>
<a href="sponsoren.php" target="_self" id="navigationsbutton" style="margin-left:87.5%;">Sponsoren</a>
</div>
<!---------------------------------------------------------->
<!---Überschrift & Text ------------------------------------>
<div id="ueberschrift">
<u>Playlist</u>
</div>
<div id="text" align="center">
Testtext Testtext <br /><br /><br /><br />
testtext Testtext
</div>
<!---------------------------------------------------------->
<!-- untere Leiste ----------------------------------------->
<div id="leiste_unten">
<span id="copyright">© by Musikband Bergwerk 2012</span>
<a href="login.php" target="_self" id="administration">Administration</a>
</div>
<!---------------------------------------------------------->

</body>
</html>
Code:
a:link{
color:#FFFFFF;
text-decoration: none
}
a:visited{
color:#FFFFFF;
text-decoration: none
}
a:hover{color:#FFFF00;
text-decoration: none
}
a:active{color:#FFFFFF;
text-decoration: none
}

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

#body { 
background-color:#09193a;
min-width:980px;
}
 

#leiste_oben {
top:0px;
position:absolute;
background-image: url(/images/1.jpg);
background-repeat:repeat-x;
height:84px;
min-width:980px;
width:100%
}
#musikband {
top:1em;
left:0em;
position:absolute;
width:100%;
color:#FFFF00;
font-family:Lucida Calligraphy;
font-size:2em;
}
#bergwerk {
left:-0.5em;
position:absolute;
width:100%;
color:#FFFF00;
font-family:Algerian;
font-size:4.6em;
}
#einfach_stark {
top:1em;
margin-left:0em;
position:absolute;
width:100%;
color:#FFFF00;
font-family:Lucida Calligraphy;
font-size:2em;
}
 

#navigationsleiste {
top:95px;
left:0px;
min-width:980px;
width:100%;
height:5px;
position:absolute;
background-position: left top;
font-family:Lucida Calligraphy;
font-size:100%;
text-shadow: #555555 3px 3px 5px;
background-color:#FFFFFF;
}
#navigationsbutton {
margin-top:-8px;
width:120px;
height:25px;
margin-left:0%;
position:absolute;
text-align:center;
background-color:#FF0000;
}
 

#ueberschrift {
top: 140px;;
position: absolute;
min-width:980px;
width:100%;
font-family:Lucida Calligraphy;
font-size:300%;
color:#FFFF00;
text-align:center;
}
#text {
margin-top:240px;
min-width:700px;
width:100%
position: absolute;
height:auto;
min-height:200%;
font-family:Lucida Calligraphy;
text-shadow: #555555 1px 1px 3px;
color:#FFFFFF;
}
 

#leiste_unten {
margin-bottom:0;
position:absolute;
background-image: url(/images/2.jpg);
background-repeat:repeat-x;
background-position:left bottom;
height:60px;
min-width:980px;
width:100%;
}
#copyright {
bottom:0em;
position:absolute;
width:100%;
height:28px;
color:#FFFF00;
font-family:Lucida Calligraphy;
font-size:0.9em;
text-shadow: #000000 3px 3px 5px;
text-align:center;
}
#administration {
left:3em;
bottom:0em;
position:absolute;
width:auto;
height:28px;
color:#FFFF00;
font-family:Lucida Calligraphy;
font-size:0.9em;
text-shadow: #000000 3px 3px 5px;
}


Wie müsste ich den Code verändern?
Und kann mir jemand erklären, warum der Balken nur vom unteren Rand von <div id="text"> abhängt? Ist zwar praktisch, aber ist eher ein zufälliges Ergebnis.

Edit.: meine Seite vergessen ^^: http://d2-live.he-hosting.de/test.php
Der Balken ist hier irgendwo in der Mitte.
 
Ah das Teil hat sogar einen Fachbegriff, gut zu wissen ^^.

Danke für die Tipps, genau das will ich machen, dass er immer am unteren Rand der Seite ist, unabhängig wie lang die Seite wird.

Mein eigentliches Ziel war, dass ich ihn mit fixed am unteren Bildrand fest pinne, aber das blöde an der Methode ist (genau wie beim Kopf), dass wenn der Bildschirm kleiner als 1024px Auflösung in der Breite eingestellt ist, das Fenester verkleinert oder gezoomt ist, dass sich diese auch in der Breite nicht mit bewegen und so wichtige Teile nicht erreichbar sind (Beispiel der Administrationslink links unten). Und das ist mir zu halbherzig.

Ich versuch mal mit den Links was zu erreichen und mich mal über Footer schlau zu googlen. Danke.
 
Also wenn dein Footer immer unten bleiben soll, dann ist fixed schon in Ordnung. Du musst der Inhaltsbox nur einen unteren Innen- oder Außenabstand verpasssen.
Fur den IE7 musst du mal schauen ob er position:fixed kann.
 
Ist mit Innenabstand "width" oder "min-width" gemeint? weil unter margin bzw. padding kann ich mir nicht vorstellen wie das klappen kann.
alle meine gefixten elemente bewegen sich nämlich nicht mehr beim scrollen.

Ich versuchs jetzt zwar erst mal absolut, aber ist nicht die einzige homepage die ich gestalten will, deshalb bin ich jetzt trotzdem neugierig wie du das meinst.

Übrigens schaut die Möglichkeit im Link ganz gut aus, footerstick werd ich lieber nicht verwenden, da es wohl unter ie8 nicht funktioniert und es eine gewerbliche homepage werden soll.
 
Ja die Begriffe sind mir nicht fremd, arbeite ja mit denen unter anderem. Aber wie ich mit padding oder margin das hinbekommen soll versteh ich nicht, denn wenn das Fenster bei Zoom 150 evtl. nur noch 600px breite zeigt und meine Navigationsleiste aber ne Mindestbreite von 980px hat (und die hat sie) dann sind links und rechts 380px weg, und die kann ich nicht wieder herscrollen, da fixed auf y- und x-Ebene gilt. Es bleibt also immer der selbe Teil im Browser stehen.

Deshalb versteh ich nicht, wie mir ein Abstand helfen kann?
 
padding bezieht sich nur auf die letzten Einträge deines Inhaltes. Das du eine navi im fixen bereich mit fester breite möchtest, habe ich nicht gewusst(gesehen). Na dann google mal nach css Frames.

mfg
henry.
 
Danke, der Spaß hält sich in Grenzen, aber hab das jetzt sowieso mal nach hinten verschonben. Ohne Mindestbreite hatte ichs schon fertig.

Übrigens, die Methode im geposteten Link funktioniert einwandfrei!
 
Zurück
Oben