Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS repeat-y mit bestimmten Abständen...
Hallo
Ich habe ein kleines Prob mit CSS und zwar habe ich auf einer Seite ein Hintergrundbild, dass mit repeat-y abhängig von der Länge des Inhaltes wiederholt werden soll.
Soweit kein Problem.
Allerdings ist das Hintergrundbild 64 Pixel hoch und jedes mal wenn das Bild wiederholt wird muss die Länge des Inhalts deshalb um 64 Pixel verlängert werden, damit das Muster des Hintergrundes passt.
Das tut CSS allerdings nicht. Es verlängert den Inhalt immer nur beliebig wie es grade nötig ist. Gibt es die Möglichkeit das so zu machen, dass immer jeweils um 64 Pixel verlängert wird sobald der Inhalt nicht mehr passt?
Mh wo ist das Problem?
Versteht man nicht was ich geschrieben habe oder ist meine Sache unlösbar?
clerfayt
2007-12-05, 18:52:39
Ich glaube, eine Skizze oder Screenshot würden die Sache etwas anschaulicher machen. Bin mir nicht sicher, ob ich Dich richtig verstehe.
http://www.planet.progalaxy.de
Mal zwischen Home und News hin und her schalten. Bei News siehts mit Firefox richtig aus, aber bei Home sieht man den Übergang zwischen Footer und dem Rest.
Weil das Muster nicht mehr passt. Damit das Muster immer passt, müsste ich festlegen um wie viele Pixel die Seite nach unten gezogen werden darf sobald sich der Inhalt vergrößert.
darph
2007-12-06, 09:54:48
Also ich seh das auf beiden Unterseiten.
Das kannst du nicht so genau bestimmen.
tomtom
2007-12-06, 12:07:19
Das ist leider das Problem bei solchen Mustern. Auf die Schnelle fällt mir auch keine passable Lösung ein (vermutlich gibts auch leider keine).
Bei absoluten Größen geht sowas, aber bei variblem Seitenaufbau ist das leider immer wieder ein Problem ;(
DanMan
2007-12-06, 18:04:44
Das mit dem Stacheldraht kannst du ohne feste Höhe wohl komplett vergessen. Funktioniert nicht, weil du nicht bestimmen kannst, dass der entsprechende Container eine Vielfaches einer bestimmten Höhe haben soll - wenigstens nicht ohne Javascript.
Außer vielleicht, wenn du du den BG im footer top-aligned, und den BG der Navi bottom-aligned setzt. Wenn man das macht sieht man auch, dass die Bilder nicht richtig gesliced sind.
Außerdem sehe ich im Firefox keine Head-Grafik, aber im Opera.
Naja das bringt ja nichts wenn ich die BGs so aligne wie du sagst. Dann habe ich den Übergang oben vom Header zum Inhalt.
Ist ja doof, dass sowas nicht geht.:redface:
Wie ist das denn mit JavaScript zu machen? Auf der Seite wird wahrscheinlich eh JavaScript vorkommen...
Das der Header in deinem Firefox nicht angezeigt wird muss aber an dir liegen, weil das bei mir und anderen Leuten im IE7 und Firefox auch geht.
DanMan
2007-12-07, 20:18:53
Naja das bringt ja nichts wenn ich die BGs so aligne wie du sagst. Dann habe ich den Übergang oben vom Header zum Inhalt.
Tja, einen Tod musst du sterben. Lass den Stacheldraht eben zum Head hin ausblenden, oder so...
Wie ist das denn mit JavaScript zu machen? Auf der Seite wird wahrscheinlich eh JavaScript vorkommen...
Naja, du kannst mit JS (DOM-Scripting) ja die Höhe abfragen, und wenn es kein Vielfaches deiner Kachelhöhe ist, dann machst du es einfach so hoch.
Tja, einen Tod musst du sterben. Lass den Stacheldraht eben zum Head hin ausblenden, oder so...
Naja, du kannst mit JS (DOM-Scripting) ja die Höhe abfragen, und wenn es kein Vielfaches deiner Kachelhöhe ist, dann machst du es einfach so hoch.
Es geht mir weniger um den Stacheldraht. Den kann ich ja, wie du sagst, ausblenden. Ich finde das fällt bei dem auch nichts so auf dass der nicht passt.
Aber das Hintergrundmuster allgemein ist das Problem. Das fällt einem sofort auf, dass es nicht passt.
DanMan
2007-12-07, 23:00:25
Es geht mir weniger um den Stacheldraht. Den kann ich ja, wie du sagst, ausblenden. Ich finde das fällt bei dem auch nichts so auf dass der nicht passt.
Aber das Hintergrundmuster allgemein ist das Problem. Das fällt einem sofort auf, dass es nicht passt.
Dann lass die Schlagschatten auf transparent auslaufen, und nicht auf das Muster im BG. Das Grau nimmst du als Matte. Vielleicht fällt das weniger auf.
P.S.: Dein Header wird von meinem Adblock geschluckt weil "banner" drin vorkommt. :)
Scream
2007-12-07, 23:04:33
gibt es nicht auch muster die immer zusammenpassen?
Dann lass die Schlagschatten auf transparent auslaufen, und nicht auf das Muster im BG. Das Grau nimmst du als Matte. Vielleicht fällt das weniger auf.
Die Schatten? Gut die passen auch nicht perfekt, aber ich finde das fällt kaum auf.
Viel größer ist das Problem mit der Übergangslinie, die komplett von links nach rechts durchgeht.
(siehe Anhang)
P.S.: Dein Header wird von meinem Adblock geschluckt weil "banner" drin vorkommt. :)
Oh, das ist natürlich gut zu wissen. Werde ich umbenennen.^^
DanMan
2007-12-08, 15:28:50
Viel größer ist das Problem mit der Übergangslinie, die komplett von links nach rechts durchgeht.
(siehe Anhang)
Ja, und wir haben dir ja schon mehrfach gesagt, dass es höchstens mit fester Höhe oder ECMAScript funktioniert. Liegt also an dir jetzt, ob du eines davon in Angriff nimmst, oder eben einfach dein Design änderst.
Die Logik hinter dem ECMAScript wäre ja:
Höhe abfragen
Höhe durch Kachelhöhe teilen
Wenn ein Rest bleibt, dann die Containerhöhe um (Kachelhöhe - Rest) erhöhen.
Jetzt musst du das nur noch in Programmierung umsetzten. Ein Tip: Rest berechnet man mit Modulo. Aber vielleicht ringt sich ja einer dazu durch es dir handzufüttern. Sepiroth z.B. ;)
...Ader vielleicht ringt sich ja einer dazu durch es dir handzufüttern. Sepiroth z.B. ;)
Das wäre natürlich Hammergeil.:biggrin:
Weil ich im Moment noch gar keine Vorstellung davon habe wie man mit Javascript irgendwas abfragen und sozusagen das Design manipulieren soll.
DanMan
2007-12-11, 16:46:35
Meine Fresse, bin ich heute nett....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kevin"/>
<meta name="keywords" content="Browsergame, Planet, Invasion, Planet Invasion"/>
<meta name="description" content="Browsergame, Planet, Invasion, Planet Invasion"/>
<meta name="robots" content="all"/>
<title>Planet Invasion</title>
<style type="text/css">
body {
background:#666666 url(bg000000.gif) repeat;
font-size:100.01%;
font-family:"trebuchet ms", verdana, sans-serif;
color:#FFFFFF;
}
p { font-size:13px}
b { font-size:13px; font-weight:bold}
h2 { font-size:17px; line-height:1.3}
p.h { display:none; }
a.reg { font-size:12px;}
a{text-decoration:none; font-size:13px}
a:link{color:#7ac37a}
a:visited{color:#7ac37a}
a:hover, a:active{color:#FFFFFF; text-decoration:underline}
td.login {
font-size:13px;
margin:0;
}
input {
font-size:12px;
}
#container{
width:910px}
#header{
background:url(header00.gif) -1px top no-repeat;
height:187px;
width: 907px;
}
#m_navi {
background:url(navi0000.gif) no-repeat;
margin-left:3px;
margin-bottom:15px;
width:99px;
height:16px;
}
#inhalt-container {
background:url(bg_im000.gif) repeat-y;
width:723px;
}
#inhalt{
width:515px;
margin:0 0 0 195px;
padding:10px 0 10px 0;
}
#menu {
width:130px;
padding:10px 0 5px 30px;
float:left;
}
#login {
background:url(login000.gif) left no-repeat;
width:178px;
height:209px;
float:right;
}
#footer {
clear:both;
background:url(footer00.gif) no-repeat;
width:373px;
height:50px;
padding:48px 0 0 350px;
position:relative;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p class="h">header</p>
</div>
<div id="login">
<form action="http://www.planet.progalaxy.de/index.php?section=login" method="post">
<table>
<tr><td class="login">Nickname:</td></tr>
<tr><td><input name="nick" type="text" size="15" maxlength="30" /></td></tr>
<tr><td class="login">Passwort:</td></tr>
<tr><td><input name="pass" type="password" size="15" maxlength="30" /></td></tr>
<tr><td><input type="submit" value=" Anmelden " /></td></tr>
<tr><td>
<!--<a class="reg" href="index.php?section=register">Registrieren</a>-->
</td></tr>
</table>
</form> </div>
<div id="inhalt-container">
<div id="menu">
<div id="m_navi">
<p class="h">Navigation</p>
</div>
<a href="http://www.planet.progalaxy.de/index.php">Home</a><br />
<a href="http://www.planet.progalaxy.de/index.php?section=news">News</a><br />
<a href="http://board.progalaxy.de/">Forum</a><br />
<a href="http://www.planet.progalaxy.de/index.php?section=geschichte">Geschichte</a><br />
<a href="http://www.planet.progalaxy.de/index.php?section=anleitung">Anleitung</a><br />
<a href="http://www.planet.progalaxy.de/index.php?section=bilder">Bilder</a><br /> </div>
<div id="inhalt">
<p>
Projektleitung:<br />
Gadeco iG.<br />
<br />
Programm:<br />
Kevin H.<br />
<br />
Idee & Umsetzung:<br />
Tim. E<br />
<br />
Design:<br />
Maddi<br />
<br />
Verantwortlich für den Inhalt der dargestellten Elemente ist Gadeco iG. <br />
Wir versichern, dass dieses Spiel auf eigener Idee und eigener Umsetzung basiert
und distanzieren uns von jeglichen Spielen selbiger Art!<br />
<br />
</p>
</div>
</div>
<div id="footer">
<p><a href="http://www.planet.progalaxy.de/index.php?section=agb">AGB's</a> <a href="">Impressum</a>
Copyright by Gadeco 2007/ 2008</p>
</div>
</div>
<script type="text/javascript">
var alles = document.getElementById("inhalt-container");
var footer = document.getElementById("footer");
var hohe = alles.clientHeight;
var diff = hohe % 64;
if (diff != 0) {
alles.style.height = (hohe + (64- diff) + "px");
}
</script>
</body>
</html>
<!-- This document saved from http://www.planet.progalaxy.de/index.php?section=impressum -->
Du hattest da auch ein paar blöde Kleinigkeiten: sowas wie 1px hin- und hergeschiebe von Elementen im Css. Außerdem hab ich den Footer aus dem Inhalts-Container herausgezogen, sonst wär es komplizierter geworden.
Geil^^ Vielen Dank.
Es funktioniert, aber erst ab einer bestimmten Höhe.:biggrin:
Hab jetzt im inhalt-container eine Mindesthöhe von 200px, dann gehts. :)
DanMan
2007-12-12, 20:28:56
Geil^^ Vielen Dank.
Es funktioniert, aber erst ab einer bestimmten Höhe.:biggrin:
Hab jetzt im inhalt-container eine Mindesthöhe von 200px, dann gehts. :)
Bitteschön. Die Problemstellung hat mich gereizt. =)
Wieso? Was passiert wenn es nicht hoch genug ist?
P.S.: Dein CSS validiert nicht.
Wenn es nicht hoch genug ist, wird das Hintergrundbild nur einmal angezeigt und nicht wiederholt. Dann sieht man zwischen Inhalt und footer den hellgrauen Hintergrund.
Anscheinend muss die Höhe mindestens so groß sein, dass das Hintergrundbild zwei mal übereinander passt, also einmal wiederholt bzw. 2x 64 Pixel hoch.
P.S.: Dein CSS validiert nicht.
Das war noch ein Hack für den IE7, weil der die Abstände anders angezeigt hatte als Firefox. Ist aber unnötig und somit jetzt weg. ;)
DanMan
2007-12-13, 10:08:11
Wenn es nicht hoch genug ist, wird das Hintergrundbild nur einmal angezeigt und nicht wiederholt. Dann sieht man zwischen Inhalt und footer den hellgrauen Hintergrund.
Anscheinend muss die Höhe mindestens so groß sein, dass das Hintergrundbild zwei mal übereinander passt, also einmal wiederholt bzw. 2x 64 Pixel hoch.
Dann probiers mal damit (ungetestet):
<script type="text/javascript">
var alles = document.getElementById("inhalt-container");
var footer = document.getElementById("footer");
var hohe = alles.clientHeight;
var diff = hohe % 64;
if (hohe > 64) {
if (diff != 0) {
alles.style.height = (hohe + (64- diff) + "px");
}
}
else { alles.style.height = 64}
</script>
Hm ich glaube das Problem ist doch woanders. :biggrin:
Es funktioniert immer dann nicht wenn das Menü größer ist als der Inhalt.
Obwohl dein JavaScript die Höhe vom ganzen Container abfragt, wird die Höhe des Menüs nicht beachtet.
Nachdem man sich auf der Seite einloggt, hat man ein noch viel größeres Menü und da muss ich die Mindesthöhe des containers auf 500 Pixel einstellen damit das funktioniert.
DanMan
2007-12-15, 16:03:41
Hm ich glaube das Problem ist doch woanders. :biggrin:
Es funktioniert immer dann nicht wenn das Menü größer ist als der Inhalt.
Obwohl dein JavaScript die Höhe vom ganzen Container abfragt, wird die Höhe des Menüs nicht beachtet.
Nachdem man sich auf der Seite einloggt, hat man ein noch viel größeres Menü und da muss ich die Mindesthöhe des containers auf 500 Pixel einstellen damit das funktioniert.
Naja, du hast ja eine Lösung gefunden. Also belassen wir es dabei.
vBulletin®, Copyright ©2000-2025, Jelsoft Enterprises Ltd.