Thema: Bildposition von Banner beeinflussen

Servus zusammen,

ich hoffe, dass ich jetzt keinen Doppelpost aufmache, aber über die Suche konnte ich mein Problem erstmal nicth lösen.

Hier ist die Seite, um die es geht...

Wie kann ich Einfluss auf die Position des Bildes im Bannermodul nehmen? Ich hatte schon versucht einen css-Eintrag über Firebug heraus zu finden, aber da scheint es nichts zu geben.

Kann mir jemand sagen, wo ich die Einträge finde, damit ich das Bild ein wenig weiter nach links setzen kann...

Danke & Grüße

Auf den ersten Blick würde ich sagen du solltest nicht das Bild verschieben, sondern den "Container" in dem es liegt, in diesem Fall also das Modul.

Ich hab dir mal einen Screenshot angehängt, vielleicht hilft dir dieser weiter.

In deiner CSS Datei sollten sich also etwas zu bannergroup/banneritem finden lassen.

Ich würde übrigens mal vermuten (falls du nicht selber Hand an gelegt hast), dass dein Bild etwas zu groß ist für diese Position (so wie sie ursprünglich gedacht ist). D.h. das wohl bewusst auf der linken Seite des Bildes geschätzte 20px "Rand" gelassen wurden. Alternativ könntest du also auch dein Bild so verkleinern, dass auf der rechten Seite ebenfalls 20px Rand übrigbleiben.

However, etwas Rand finde ich persönlich ansehnlich, wieviel kannst du nun entweder per CSS oder Bildgröße veränden.

Danke Dir für die guten Ideen...

Die Bildgröße einfach ändern wäre eine Möglichkeit, aber eigentlich wollte ich das nicht.

Das CSS ist das Problem...Ich finde im CSS keine Infos zu "banner" - egal in welcher Form.

Hier mal der Link zum CSS .

Bin für weitere Tips dankbar...

In diesem Template ist die Größe des Moduls auf eine Breite von 178px definiert.

Ergbit sich aus template_css.css Zeile 151: Breite Navi 208px, abzüglich Padding für div.moduletable.

Da Dein Bild schon 209px ist, wird das auf gar keinen Fall was.

Wenn Du es auf 208px verkleinerst, kannst Du den Modul einen Modulklassen-Suffix geben, dann wirkt das Padding nicht mehr, dann sollte man aber dem IMG noch den Border wegnehmen.

Angenommen bei Modulklassen-Suffix hast Du -blabla eingetragen, dann füge das:

div.moduletable-blabla img {
border: 0px;
}

der CSS Datei hinzu.

Code:

/* navigation */
.navigation {
	float: left;
	margin-left: 80px;
	width: 208px;
}

.navigation .moduletable {
	padding:0 15px;
	margin-bottom:15px;
}

.navigation .moduletable form {
text-align:left;
}

.navigation .moduletable-menu {
	padding:0;
	margin-bottom:0;
}
.navigation .moduletable h3,
.navigation .moduletable-menu h3 {
	background: #47980d;
	color: #FFF;
	font-size: 1.3em;
	line-height: 40px;
	padding-left: 12px;
	margin-bottom:8px;
	width:196px;
	margin-left:-15px;

Hast du mal versucht an dieser Stelle de margin/padding werte zu ändern? Ich befürchte nur gerade, dass in diesem template die gesamte rechte Seite über einen Kamm geschoren wurde, dass du also deine Menüstruktur ebenfalls mitverändern wirst. Eine neue Modul position zu schaffen wäre wohl die effizienteste Lösung wenn du die Bildgröße nicht verändern möchtest, oder?

ok,...zu spät

Zitat von babaganoush

Padding

Die Idee passt, aber das kann dazu führen, dass auch andere Module dann kein Padding mehr haben.

Stimmt, das hatte ich ja am Ende zu bedenken gegeben, deine Lösung ist natürlich eine Spur eleganter. Ich lerne auch gerne was dazu

Vorab erstmal, Danke an Euch für die Unterstützung...

Zitat von babaganoush

Hast du mal versucht an dieser Stelle de margin/padding werte zu ändern? Ich befürchte nur gerade, dass in diesem template die gesamte rechte Seite über einen Kamm geschoren wurde, dass du also deine Menüstruktur ebenfalls mitverändern wirst. Eine neue Modul position zu schaffen wäre wohl die effizienteste Lösung wenn du die Bildgröße nicht verändern möchtest, oder?

Darüber war ich auch gleich gestolpert - das ändert aber leider wirklich auch das Padding des Menüs mit. Schaut dann nicht mehr wirklich gut aus...Dann werde ich doch lieber die Größe der Banner ändern, denke ich.

Zitat von a.h.

In diesem Template ist die Größe des Moduls auf eine Breite von 178px definiert.

Ergbit sich aus template_css.css Zeile 151: Breite Navi 208px, abzüglich Padding für div.moduletable.

Da Dein Bild schon 209px ist, wird das auf gar keinen Fall was.

Wenn Du es auf 208px verkleinerst, kannst Du den Modul einen Modulklassen-Suffix geben, dann wirkt das Padding nicht mehr, dann sollte man aber dem IMG noch den Border wegnehmen.

Angenommen bei Modulklassen-Suffix hast Du -blabla eingetragen, dann füge das:

div.moduletable-blabla img {
border: 0px;
}

der CSS Datei hinzu.

Ich habe jetzt folgendes gemacht:

- Klasse .moduletable-banner angelegt
- CSS eingetragen

Code:

/* banner */
.moduletable-banner {
padding:0px;
}
.moduletable-banner img {
border: 0px;}

Jetzt mein Problem. Wie man auf der Hompage sehen kann, ist der Border weg, aber das Padding ist immer noch da. Irgendwo holt er sich das her und ich komm nicht dahinter... Vielleicht aus der default.php des Banner Moduls, aber in PHP bin ich nicht fit...

Code:

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<div class="moduletable-banner">
<div class="bannergroup<?php echo $params->get( 'moduleclass_sfx' ) ?>">

<?php if ($headerText) : ?>
	<div class="bannerheader"><?php echo $headerText ?></div>
<?php endif;

foreach($list as $item) :
	?><div class="banneritem<?php echo $params->get( 'moduleclass_sfx' ) ?>"><?php
	echo modBannersHelper::renderBanner($params, $item);
	?><div class="clr"></div>
	</div></div>
<?php endforeach; ?>

<?php if ($footerText) : ?>
	<div class="bannerfooter<?php echo $params->get( 'moduleclass_sfx' ) ?>">
		 <?php echo $footerText ?>
	</div>
<?php endif; ?>
</div>