Lücke zwischen zwei Bildern füllen.

[superaggy]

Hallo,

Ich habe zwei Bilder. Das erste ist am linken Rand, das zweite wird rechts platziert. Nun möchte ich das Bild am rechten Rand solange nach links wiederholen bis es auf das linke Bild trifft. Ich hoffe es kann mir jemand einen Tipp geben.

  
  
h1.logo a {  
        width: 360px;  
        display: block;  
        background: url(../images/logo.gif) no-repeat;  
        height: 188px;  
        position: relative;  
        z-index: 100;  
  
.ja-headermask {  
        width: 300px;  
        display: block;  
        background: url(../images/luecke.gif) repeat-x top right;  
        height: 188px;  
        position: absolute;  
        top: 0;  
        right: 363px;  
  

[ChrisB]

Hi,

Ich habe zwei Bilder. Das erste ist am linken Rand, das zweite wird rechts platziert. Nun möchte ich das Bild am rechten Rand solange nach links wiederholen bis es auf das linke Bild trifft. Ich hoffe es kann mir jemand einen Tipp geben.

Gerne: Tipp(s für Fragende)

Dein CSS-Beispielcode enthält bereits ein in x-Richtung wiederholtes Hintergrundbild.
Wenn es damit noch ein Problem gibt - wieso beschreibst du es dann nicht (unaufgefordert)?

MfG ChrisB

[Steel]

Moin!

Dein CSS-Beispielcode enthält bereits ein in x-Richtung wiederholtes Hintergrundbild.
Wenn es damit noch ein Problem gibt - wieso beschreibst du es dann nicht (unaufgefordert)?

Ich bin hiermit offiziell beleidigt, weil du schon wieder schneller warst.

*schmollt*

[Cheatah]

Hi,

Ich bin hiermit offiziell beleidigt, weil du schon wieder schneller warst.
*schmollt*

nur Mädchen beklagen sich darüber, dass jemand schneller war!

Cheatah

[Steel]

Hola!

nur Mädchen beklagen sich darüber, dass jemand schneller war!

Das wiederum, kann ich so nicht behaupten... ;)
*pfeift*

[superaggy]

Danke erstmal für die Antwort. Und entschuldigt bitte, wenn ich mich etwas falsch ausgedrückt habe. Das repeat-x gilt ja nur bis zur angegebenen Breite. Die Frage wäre ja, ob es möglich ist, das repeat-x nur bis zum nächsten Bild gültig sein zu lassen. Ich hoffe es ist klar was ich meine.

Hi,

Ich habe zwei Bilder. Das erste ist am linken Rand, das zweite wird rechts platziert. Nun möchte ich das Bild am rechten Rand solange nach links wiederholen bis es auf das linke Bild trifft. Ich hoffe es kann mir jemand einen Tipp geben.

Gerne: Tipp(s für Fragende)

Dein CSS-Beispielcode enthält bereits ein in x-Richtung wiederholtes Hintergrundbild.
Wenn es damit noch ein Problem gibt - wieso beschreibst du es dann nicht (unaufgefordert)?

MfG ChrisB

[suit]

Bitte zitiere sinnvoll.

Und entschuldigt bitte, wenn ich mich etwas falsch ausgedrückt habe.

Dafür ist keine Entschuldigung nötig - du möchtest Hilfe, es liegt an dir (in deinem eigenen Interesse) dich so auszudrücken, dass dir jemand helfen kann. Je vollständiger und verständlicher du dein Problem beschreibst, desto schneller kann dir geholfen werden.

Lieber beim initialen Erstellen der Nachricht 10 Minuten länger beschreiben worums als am nächsten Tag festzustellen, dass man nochmal nachreichen muss.

Mit einer ordentlichen Beschreibung deines anliegens hättest du vermutlich jetzt schon eine Lösung.

Das repeat-x gilt ja nur bis zur angegebenen Breite.

repeat-x gilt für die vollständige Breite des entsprechenden Elements - ob diese explizt in einer Einheit angegeben wurde (z.B. "200px") oder ob sie automatisch berechnet wird ("auto"). Ist nebensächlich.

Die Frage wäre ja, ob es möglich ist, das repeat-x nur bis zum nächsten Bild gültig sein zu lassen.

Dafür gibts mehrere Möglichkeiten:

• das zweite Element überlagert das erste Element (z.B. negativer Aussenabstand).
• das zweite Element ist ein Kind des ersten Elements (und liegt somit darüber)
• das zweite Element ist neben dem ersten Element (z.B. mit float).

Aber welche der Möglichkeiten zutreffen können, hängt von deinem HTML-Code ab.

Ich hoffe es ist klar was ich meine.

Fürs Protokoll - uns ist schon lange klar, was du erreichen möchtest - aber wie dein Code (das HTML-Konstrukt) aussieht, wissen wir immer noch nicht - und der ist für die Lösung des Problems entscheidend. Der von dir gepostete CSS-Schnipsel ist schön und gut, wirkt sich aber je nach darunterliegendem HTML anders aus.

[SuperAggy]

Bitte zitiere sinnvoll.

Und entschuldigt bitte, wenn ich mich etwas falsch ausgedrückt habe.

Dafür ist keine Entschuldigung nötig - du möchtest Hilfe, es liegt an dir (in deinem eigenen Interesse) dich so auszudrücken, dass dir jemand helfen kann. Je vollständiger und verständlicher du dein Problem beschreibst, desto schneller kann dir geholfen werden.

Lieber beim initialen Erstellen der Nachricht 10 Minuten länger beschreiben worums als am nächsten Tag festzustellen, dass man nochmal nachreichen muss.

Mit einer ordentlichen Beschreibung deines anliegens hättest du vermutlich jetzt schon eine Lösung.

Gut, dann jetzt halt etwas ausführlicher.
Ich passe mir ein Joomla-Template auf meine Bedürfnisse an. Das Problem was ich gerade habe: Ich habe in ganz oben drei Bilder. Das Linke und Rechte habe ich positioniert. Nun möchte ich die Lücke, die zwischen den beiden Bildern liegt, ausfüllen. Hierzu habe ich eine 1 Pixel breite Grafik erstellt und neben die rechte Grafik plaziert. Diese möchte ich gern bis zur linken Grafik wiederholen, sodas die Lücke geschlossen ist.

Das repeat-x gilt ja nur bis zur angegebenen Breite.

repeat-x gilt für die vollständige Breite des entsprechenden Elements - ob diese explizt in einer Einheit angegeben wurde (z.B. "200px") oder ob sie automatisch berechnet wird ("auto"). Ist nebensächlich.

Die Frage wäre ja, ob es möglich ist, das repeat-x nur bis zum nächsten Bild gültig sein zu lassen.

Dafür gibts mehrere Möglichkeiten:

• das zweite Element überlagert das erste Element (z.B. negativer Aussenabstand).
• das zweite Element ist ein Kind des ersten Elements (und liegt somit darüber)
• das zweite Element ist neben dem ersten Element (z.B. mit float).

Aber welche der Möglichkeiten zutreffen können, hängt von deinem HTML-Code ab.

Ich hoffe es ist klar was ich meine.
Fürs Protokoll - uns ist schon lange klar, was du erreichen möchtest - aber wie dein Code (das HTML-Konstrukt) aussieht, wissen wir immer noch nicht - und der ist für die Lösung des Problems entscheidend. Der von dir gepostete CSS-Schnipsel ist schön und gut, wirkt sich aber je nach darunterliegendem HTML anders aus.

Eigentlich wollte ich an dieser Stelle die templare.css und die index.php posten, doch die ist anscheinend etwas zu Groß.

Deswegen hab ich`s hier mal hochgeladen:

http://rapidshare.de/files/47731300/template.zip.html

Falls nochwas gebraucht wird, bitte sagen.

[suit]

Bitte zitiere sinnvoll.

Besser - aber bitte entferne auch die nicht relevanten Teile - dann wirds lesbarer :)

Gut, dann jetzt halt etwas ausführlicher [...]

Ja, sowas sagtest du bereits

Falls nochwas gebraucht wird, bitte sagen.

Das sieht sich vermutlich keiner an - einerseits ist es zu kompliziert, andererseits können Archive immer wieder Schadsoftware beinhalten.

Ein auszug aus dem Quellcode (sollte mit etwa 2 bis 5 Zeilen HTML getan sein) und eben den CSS-Schnipsel, den du gepostet hast, wäre ausreichend.

Besser aber ein Link zu einer minimierten Online-Version, wo man das Problem direkt sehen kann.

[superagy]

So, nächster Versuch. Hier ein ausschnitt aus der css:

#ja-headerwrap {  
	background: #FFFFFF;  
	color: #CCCCCC;  
	line-height: normal;  
	height: 142px; /* AK: Um Menuleiste auf Balken zu setzen: 142 px */  
}  
  
#ja-header {  
	position: relative;  
	height: 188px;  
}  
  
.ja-headermask {  
	display: block;  
	background: url(../images/luecke.gif) repeat-x top right;  
	height: 188px;  
	position: absolute;  
	top: 0;  
	width: 500px;  
	right: 363px;  
}  
  
#ja-header a {  
	color: #CCCCCC;  
}  
  
h1.logo, h1.logo-text {  
	margin: 0 0 0 5px;  
	padding: 0;  
	font-size: 180%;  
	text-transform: uppercase;  
}  
  
h1.logo a {  
	width: 360px;  
	display: block;  
	background: url(../images/logo.gif) no-repeat;  
	height: 188px;  
	position: relative;  
}  
  
h1.logo a span {  
	position: absolute;  
	top: -1000px;  
}  

Und hier aus der index.php

<script type="text/javascript">  
var siteurl = '<?php echo $tmpTools->baseurl();?>';  
  
window.addEvent ('load', makeTransBG);  
function makeTransBG() {  
	fixIEPNG($E('.ja-headermask'), '', '', 1);  
	fixIEPNG($E('h1.logo a'));  
	fixIEPNG($$('img'));  
	fixIEPNG ($$('#ja-mainnav ul.menu li ul'), '', 'scale', 0, 2);  
}  
</script>  
<style type="text/css">  
.ja-headermask, h1.logo a, #ja-cssmenu li ul { background-position: -1000px; }  
#ja-cssmenu li ul li, #ja-cssmenu li a { background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;}  
.clearfix {height: 1%;}  
</style>  
<![endif]-->  
<?php endif; ?>  
  
<style type="text/css">  
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}  
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}  
</style>

Ich hoffe das reicht.

[suit]

So, nächster Versuch. Hier ein ausschnitt aus der css:

Der sieht halbwegs vernünftig aus

Ich hoffe das reicht.

Hier ist keines der im CSS vermerten Elemente zu sehen. Es sind lediglich ein paar script-Elemente mit etwas JavaScript und PHP enthalten.

Wie erwähnt wäre der HTML-Code interessant.

[superaggy]

Hier ist keines der im CSS vermerten Elemente zu sehen. Es sind lediglich ein paar script-Elemente mit etwas JavaScript und PHP enthalten.

Wie erwähnt wäre der HTML-Code interessant.

Ich merke schon, das ich wahrscheinlich etwas anstrengend bin. Sorry.
Ich würde Dir gern HTML-Code geben, ehrlich. Aber es gibt da keinen HTML-Code. Das einzige was ich anbieten kann wäre der erzeugte HTML-Code im Browser. Deswegen poste ich noch etwas mehr aus der index.php und etwas html. Hoffe das Du das meinst.

<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >  
<a name="Top" id="Top"></a>  
<ul class="accessibility">  
	<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>  
	<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>  
	<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>  
	<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>  
</ul>  
  
<div id="ja-wrapper">  
  
<!-- BEGIN: HEADER -->  
<div id="ja-headerwrap">  
	<div id="ja-header" class="clearfix" style="background: url(<?php echo $tmpTools->templateurl(); ?>/images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">  
  
	<div class="ja-headermask">&nbsp;</div>  
  
	<?php  
		$siteName = $tmpTools->sitename();  
		if ($tmpTools->getParam('logoType')=='image'): ?>  
		<h1 class="logo">  
			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>  
		</h1>  
	<?php else:  
		$logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');  
		$sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText');	?>  
		<h1 class="logo-text">  
			<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>  
		</h1>  
		<p class="site-slogan"><?php echo $sloganText;?></p>  
	<?php endif; ?>  
  
	<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>  
  
	<?php if($this->countModules('user4')) : ?>  
		<div id="ja-search">  
			<jdoc:include type="modules" name="user4" />  
		</div>  
	<?php endif; ?>  
  
	</div>  
</div>  
<!-- END: HEADER -->

<!-- BEGIN: HEADER -->  
<div id="ja-headerwrap">  
	<div id="ja-header" class="clearfix" style="background: url(http://172.19.0.102/fuf-joomla/templates/FuF/images/header/logo2.gif) no-repeat top right;">  
  
	<div class="ja-headermask">&nbsp;</div>  
  
			<h1 class="logo">  
			<a href="/fuf-joomla/index.php" title="Fit und Fair Leipzig"><span>Fit und Fair Leipzig</span></a>  
		</h1>  
	  
			<ul class="ja-usertools-font">  
	      <li><img style="cursor: pointer;" title="Increase font size" src="http://172.19.0.102/fuf-joomla/templates/FuF/images/user-increase.png" alt="Increase font size" id="ja-tool-increase" onclick="switchFontSize('FuF_ja_font','inc'); return false;" /></li>  
		  <li><img style="cursor: pointer;" title="Default font size" src="http://172.19.0.102/fuf-joomla/templates/FuF/images/user-reset.png" alt="Default font size" id="ja-tool-reset" onclick="switchFontSize('FuF_ja_font',4); return false;" /></li>  
		  <li><img style="cursor: pointer;" title="Decrease font size" src="http://172.19.0.102/fuf-joomla/templates/FuF/images/user-decrease.png" alt="Decrease font size" id="ja-tool-decrease" onclick="switchFontSize('FuF_ja_font','dec'); return false;" /></li>  
		</ul>  
		<script type="text/javascript">var CurrentFontSize=parseInt('4');</script>  
		  
	  
	</div>  
</div>  
<!-- END: HEADER -->

[Steel]

Heyho!

Ich merke schon, das ich wahrscheinlich etwas anstrengend bin. Sorry.

öhm. Minimal. ganz vielleicht. ;)

Ich würde Dir gern HTML-Code geben, ehrlich. Aber es gibt da keinen HTML-Code.

Es gibt normalerweise IMMER HTML-Code:

Das einzige was ich anbieten kann wäre der erzeugte HTML-Code im Browser.

Und genau DEN brauchen wir ja auch.

Deswegen poste ich noch etwas mehr aus der index.php und etwas html. Hoffe das Du das meinst.

*immer freundlich lächeln*

Ich hatte ein Beispiel gegeben, was wir brauchen. Und sowas in der art schnippelst Du jetzt aus dem Code den der Browser bekommt. Also den Bereich, um den es geht, plus das CSS das diese Elemente betrifft.

[superaggy]

Das einzige was ich anbieten kann wäre der erzeugte HTML-Code im Browser.

Und genau DEN brauchen wir ja auch.

HTML:
Soo.
-Der "ja-headerwrap" ist das rechte Bild.
-Die "ja-headermask" ist der mittlere Teil, der bis zum linken wiederholt werden soll.
-Das "h1 class="logo"" ist das linke Bild

<!-- BEGIN: HEADER -->  
<div id="ja-headerwrap">  
	<div id="ja-header" class="clearfix" style="background: url(http://172.19.0.102/fuf-joomla/templates/FuF/images/header/logo1.gif) no-repeat top right;">  
  
	<div class="ja-headermask">&nbsp;</div>  
  
			<h1 class="logo">  
			<a href="/fuf-joomla/index.php" title="Fit und Fair Leipzig"><span>Fit und Fair Leipzig</span></a>  
		</h1>  
	  
			<ul class="ja-usertools-font">  
	      <li><img style="cursor: pointer;" title="Increase font size" src="http://172.19.0.102/fuf-joomla/templates/FuF/images/user-increase.png" alt="Increase font size" id="ja-tool-increase" onclick="switchFontSize('FuF_ja_font','inc'); return false;" /></li>  
		  <li><img style="cursor: pointer;" title="Default font size" src="http://172.19.0.102/fuf-joomla/templates/FuF/images/user-reset.png" alt="Default font size" id="ja-tool-reset" onclick="switchFontSize('FuF_ja_font',4); return false;" /></li>  
		  <li><img style="cursor: pointer;" title="Decrease font size" src="http://172.19.0.102/fuf-joomla/templates/FuF/images/user-decrease.png" alt="Decrease font size" id="ja-tool-decrease" onclick="switchFontSize('FuF_ja_font','dec'); return false;" /></li>  
		</ul>  
		<script type="text/javascript">var CurrentFontSize=parseInt('4');</script>  
		  
	  
	</div>  
</div>  
<!-- END: HEADER -->  

Und hier das css:

Derzeit hab ich der headermask eine fixe Breite von 550 Pixeln gegeben.

  
/* HEADER  
--------------------------------------------------------- */  
#ja-headerwrap {  
        background: #FFFFFF;  
        color: #CCCCCC;  
        line-height: normal;  
        height: 142px; /* AK: Um Menuleiste auf Balken zu setzen: 142 px */  
}  
  
#ja-header {  
        position: relative;  
        height: 188px;  
}  
  
.ja-headermask {  
        display: block;  
        background: url(../images/luecke.gif) repeat-x top right;  
        height: 188px;  
        position: absolute;  
        top: 0;  
        width: 550px;  
        right: 363px;  
}  
  
#ja-header a {  
        color: #CCCCCC;  
}  
  
h1.logo, h1.logo-text {  
        margin: 0 0 0 5px;  
        padding: 0;  
        font-size: 180%;  
        text-transform: uppercase;  
}  
  
h1.logo a {  
        width: 360px;  
        display: block;  
        background: url(../images/logo.gif) no-repeat;  
        height: 188px;  
        position: relative;  
}  
  
h1.logo a span {  
        position: absolute;  
        top: -1000px;  
}  

*immer freundlich lächeln*

:-)

[superaggy]

War das immer noch nicht das richtige???

[Steel]

Huch!

War das immer noch nicht das richtige???

dochdoch!

Genau sowas. Du bist mir nur "entflutscht". :)

Also. Kann man das irgendwo online betrachten? Ich sehe naemlcih keinen Grund dafuer, nicht einfach eine andere Struktur zu benutzen. Das heisst das sich wiederholende in den Wrapper und dann jeweils links und rechts die anderen Elemente im Wrapper positioinieren.

[superaggy]

Also. Kann man das irgendwo online betrachten? Ich sehe naemlcih keinen Grund dafuer, nicht einfach eine andere Struktur zu benutzen. Das heisst das sich wiederholende in den Wrapper und dann jeweils links und rechts die anderen Elemente im Wrapper positioinieren.

Ich hab mal eine Version online gestellt: http://bravehart.kilu.de/fitundfair/

[Steel]

Jo!

Ich hab mal eine Version online gestellt: http://bravehart.kilu.de/fitundfair/

Wie gesagt: Das beste Du hast den rot blauen Hintergrund (um den es doch wohl geht?) als Hintergrund in einem übergeordneten Container und dort hinein platzierst Du dann auch die beiden Grafiken links und rechts.

Also keine Logos im umschliessenden Div sondern nur den Hintergrund. Dadrauf dann die Logos und was sonst noch. Beim Positionieren der Grafiken hilft die dann die absolute Positionierung links und rechts am Rand. Zu beachten wäre noch, daß absolute Positionierung die Elemente aus dem Fluß nimmt und der umgebende Container so eventuell keine ordentliche Höhe hat. (Höhe mit 0 Pixel Inhalt... ) Da Du aber weißt, wie groß die Grafiken sind, sollte das kein Problem sein.

[Steel]

Hi!

Ja. Wir wissen, was Du meinst. Das wurde ja schon von kompetenter Seite festgestellt.

Ich geb Dir mal nen Beispiel:

Gewollt ist eine Flaeche zwischen 2 Bildern, die mit einer Grafik aufgefuellt ist.

-----------------------
| Bild | Flaeche | Bild |
 -----------------------

Da gibt es nun zahlreiche Moeglichkeiten das herbeizufuhren. Ich entscheide mich mal fuer diesen HTML Code:

<div>
 <img src="Bild">
 <img src="Bild">
</div>

Bilder links und rechts auf dem gefuellten Div. Ich habe ein Bild, eine kostant gefuellte Flaeche und wieder ein Bild. Dein CSS laesst vermuten, dass Du ein aehnliches Konstrukt verwendest, aber eben nicht repeatest obwohl Du es willst.

Wenn Du zu deinem CSS noch einen HTML-Schnipsel, wie den dort oben, hast, sind alle gluecklich und 11880 ist in Reichweite. Irgendwelche wilden Joomlatemplates braucht da auch kein Mensch. Nur das Schema, das verwendet wird.

[Steel]

Moin!

Ich hoffe es kann mir jemand einen Tipp geben.

Das stellt sich als schwierig dar, weil keiner genau weiss, was du eigentlich machst. Du hast hier 2x CSS aber niemand weiss was fuer Elemente das sind und in welcher Beziehung sie stehen.

Ich wurde jetzt sogar soweit gehen und sagen, dass du doch schon hast, was du willst. ein hintergrundbild mit repeat x und am rechten Rand darueber ein anderes Bild.

(glaube ich nicht wirklich, da deine positionierungsangaben eventuell darauf schliessen lassen, das das 2. Element im Ersten steckt. Dir fehlt also vielleicht nur ein repeat.)

Es ist viel schoener jemanden erstmal ordentlich auflaufen zu lassen, damit, man sich nacher noch mehr drueber aufregen kann, wenn mal wieder der Lerneffekt wegbleibt.

:D