Thema: Joomla Adventskalender

Servus @ all

Ich habe mir vor einigen Wochen folgende Adventskalender Komponente installiert: http://www.joomlaos.de/Joomla_CMS_Do...skalender.html
Wie schaffe ich, dass diese zentriert angezeigt wird.
Mit dem Beitrag bei joomlaos.de kann ich leider nichts anfangen. Habe mal an den Stellen <center> eingefügt, klappt aber nur im Iexplorer.

Ich hoffe mir kann noch jemand helfen...


Vielen Dank

Hier mal ein Link zu der Vereinsseite die ich betreue und dem Kalender im Teststadium: http://drachenboot-ladenburg.de/inde...ndar&Itemid=34

Hi,

HTML-Code:

<center>

solltest du eh nicht mehr einsetzen da es als depricated eingestuft ist.

Um das Kalenderbild in die Mitte zu bekommen musst du der #pic

HTML-Code:

#pic
{
margin: 0 auto;
}

hinzufügen.
Die Kalendertüren werden aber nicht folgen da diese absolut positioniert wurden. Also nicht vergessen dann auch jeweils die

HTML-Code:

ul li a

anzupassen.

Viele Grüße

Vielen Dank für die schnelle Antwort.
Da ich ein absolut unwissender Bastler auf dem Gebiet bin komme ich trotz der wohl guten Antwort nicht alleine weiter.....
Das Hintergrundbild bekomme ich so in die Mitte. Wie aber schon darauf hingewisen wurde muss ich da auch die einzelnen Felder versetzten. Leider peile ich da nichts und hoffe mir kann jemand helfen...

Bin ja schon froh das ich verstehe, dass die Anpassungen in der css-Datei gemacht werden müssen *g*!

Hier mal die unveränderte .css. Vielleicht kann sich jemand die Mühe machen und mir helfen.
Eigentlich fülle ich die Webseite nur mit Inhalt, der Gruru der mir bei solchen Dingen Hilft ist nur die nächsten 14 Tage nicht zu erreichen und ich möchte da meinen Verinsleutene ine Freunde machen!

Danke!

Code:

#pic {
	width: 500px;
	height: 375px;
	position: center;
}
#pic ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#pic a {
	position: absolute;
	color: #fff;
	text-decoration: none;
	border: 1px #E6E6E6 solid;
	font-size: 15px;
	font-weight: bold;
}
#pic a:hover {
	border-color: #FFCC00;
	color: #FFCC00;
}
#component-advent {
	margin: 15px 15px 15px 15px;
	padding-top: 15px;
}
#component-advent-popup{
	background-color: #FF0000;
	color: #fff;
	height: 530px;
	margin-top:  -15px;
}
#component-advent-popup25{
	background-color: #7F0000;
	color: #fff;
	height: 530px;
	margin-top:  -15px;
}
#component-advent-popup26{
	background-color: #7F0000;
	color: #fff;
	height: 530px;
	margin-top:  -15px;
}
#component-advent-statistik{
	width: 500px;
	text-align: center!important;
}
#component-advent-statistik a{
	color: black;
}
#component-advent-statistik2{
	text-align: center!important;
}
#component-advent-statistik2 a{
	color: #000000;
}
#calinfo{
	color: black;
	margin: 5px 0 5px 0;
}
.advent-footer{
	font-size: 10px;
	color: #C0C0C0;
}
.advent-zahl {
     font-size: 30px;
     line-height: 30px;
     font-weight: normal;
     text-decoration: none;
     color: #000000;
     background-color: #FF0000;
     border: 0 solid #008000;
     padding: 0;
     width: 100%;
     vertical-align: middle;
     text-align: center;
}

Hi,
also du hast ein bisschen Glück das ic auch gerade an einem Adventskalender sitze.
Die Komponente die du verwendest hatte ich auch zuerst im Einsatz, fand aber eben die Positionierung der Türchen etwas umständlich. Aber das ist eigentlich nebensächlich.
Ich habe mich für diese (wt_adventskalender) entscheiden. Aber unter anderem auch weil es diese Joomla bis 1.7 unterstützt und ich demnächst unsere Webseite updaten will. Diese muss aber auch noch angepasst werden da hier mit reinen Tabellen gearbeitet wird und auch depricated HTML eingesetzt wird.
Aber zurück zu deinem Problem.
Um die Türchen zu positionieren musst du mit left: XXpx und Top: XXpx arbeiten.
Als Beispiel für dein 1. Türchen wäre das

HTML-Code:

ul li#li1 a
{
top: 20px;
left: 20px;
}

Das zweite Türchen wäre dann mit

HTML-Code:

ul li#li2 a
{
top: 60px;
left: 60px;
}

zu positionieren und so weiter. Diese Methode ist etwas starr deshalb fand ich diesen Adventskalender auch etwas ungünstig. Aber man jetzt auch nicht sagen der ist Grundsätzlich besser oder schlechter.
Bei diesem fand ich z.B das handling im joomal Backend besser.

Viele Grüße und einen schönen Sonntag!

Servus

vielen Dank. Habe das gleich probiert und komme wieder nicht weiter :-(

Habe den Code nach meinem Verständnis zu deinen Infos folgendermaßen angepasst und erhalte kein richtiges Ergebnis! Egla wie ich die Werte ändere, die Felder bleiben immer an gleicher Stelle falsch neben dem Hintergrundbild. DAs Hintergrundbild liegt jetzt gneau wie gewünscht.

Vielleicht kann mir ja nochmal wer weiter helfen.

Liebe Grüße

Danke

Code:

#pic {
	width: 500px;
	height: 375px;
	position: center;
	margin: 30px auto;
}
#pic ul {
	padding: 0;
	margin: 0;
	list-style: none;
	margin: 0 auto;
}
#pic a {
	position: absolute;
	color: #fff;
	text-decoration: none;
	border: 1px #E6E6E6 solid;
	font-size: 15px;
	font-weight: bold;
	margin: 0 auto;
}
#pic a:hover {
	border-color: #FFCC00;
	color: #FFCC00;
		margin: 0 auto;
}
#component-advent {
	margin: 15px 15px 15px 15px;
	padding-top: 15px;
}
#component-advent-popup{
	background-color: #FF0000;
	color: #fff;
	height: 530px;
	margin-top:  -15px;
}
#component-advent-popup25{
	background-color: #7F0000;
	color: #fff;
	height: 530px;
	margin-top:  -15px;
}
#component-advent-popup26{
	background-color: #7F0000;
	color: #fff;
	height: 530px;
	margin-top:  -15px;
}
#component-advent-statistik{
	width: 500px;
	text-align: center!important;
}
#component-advent-statistik a{
	color: black;
}
#component-advent-statistik2{
	text-align: center!important;
}
#component-advent-statistik2 a{
	color: #000000;
}
#calinfo{
	color: black;
	margin: 5px 0 5px 0;
}
.advent-footer{
	font-size: 10px;
	color: #C0C0C0;
		margin: 0 auto;
}
.advent-zahl {
     font-size: 30px;
     line-height: 30px;
     font-weight: normal;
     text-decoration: none;
     color: #000000;
     background-color: #FF0000;
     border: 0 solid #008000;
     padding: 0;
     width: 100%;
     vertical-align: middle;
     text-align: center;
	 	margin: 0 auto;
}
ul li#li1 a
{
top: 35px;
left: 60px;
}
ul li#li2 a
{
top: 35px;
left: 80px;
}
ul li#li3 a
{
top: 35px;
left: 100px;
}
ul li#li4 a
{
top: 40px;
left: 20px;
}
ul li#li5 a
{
top: 40px;
left: 60px;
}
ul li#li6 a
{
top: 40px;
left: 100px;
}
ul li#li7 a
{
top: 60px;
left: 20px;
}
ul li#li8 a
{
top: 60px;
left: 60px;
}
ul li#li9 a
{
top: 60px;
left: 100px;
}
ul li#li10 a
{
top: 80px;
left: 20px;
}
ul li#li11 a
{
top: 80px;
left: 60px;
}
ul li#li12 a
{
top: 80px;
left: 100px;
}
ul li#li13 a
{
top: 100px;
left: 20px;
}
ul li#li14 a
{
top: 100px;
left: 60px;
}
ul li#li15 a
{
top: 100px;
left: 100px;
}
ul li#li16 a
{
top: 120px;
left: 20px;
}
ul li#li17 a
{
top: 120px;
left: 60px;
}
ul li#li18 a
{
top: 120px;
left: 100px;
}
ul li#li19 a
{
top: 140px;
left: 20px;
}
ul li#li20 a
{
top: 140px;
left: 60px;
}
ul li#li21 a
{
top: 140px;
left: 100px;
}
ul li#li22 a
{
top: 160px;
left: 20px;
}
ul li#li23 a
{
top: 160px;
left: 60px;
}
ul li#li24 a
{
top: 500px;
left: 500px;
}

Hi,
um dir jetzt Arbeit zu ersparen kannst du der Liste nun auch eine Positionierung mitgeben z.B.

HTML-Code:

#pic ul
{
position: absolute;
top: 110px;
}

Das Problem ist die absolute Positionierung der Anchor. Dadurch werden die Elemente aus dem Zeilenfluss genommen und die anderen HTML-Elemente haben keinen direkten Einfluss mehr auf das Anchor-Element.
Du solltest mal schauen ob du die Absolut positionierten Elemente nicht relativ positionieren kannst. Das würde das ganze etwas für dich vereinfachen.

Das kannst du dir dazu auch mal durchlesen:
http://www.mediaevent.de/css/positionieren.html

Auch wichtig für dich, so nebenbei den ganzen anderen CSS-Grundlagen , wäre das Thema der Kaskadierung und Vererbung:
http://thestyleworks.de/basics/cascade.shtml
http://thestyleworks.de/basics/inheritance.shtml

Nur so nebenbei, auch die anderen Dinge auf der Seite sind sehr interessant .

Viele Grüße

Danke, ich habe es jetzt so einigermaßen auf die Reihe bekommen. Allerdings berühren sich zwei Felder. Druchblicken tue ich immer noch nicht wirklich.
Ich sage dem nun mit deinem Code-Stück welchen Abstand die Felder von Oben haben. Dabei verschiebe ich aber alle auf einmal. Woher bekommen die aber den Wert Wo sie in der Horizontalen liegen und die genaue Vertikale Lage? Ich habe alle dazu gehörigen Dateien durchsucht und finde da nix. Habe nur sehr einfache Kenntnisse, so blöd habe ich mich aber noch nie angestellt.

Naja, mit dem Ergebnis bisher kann ich leben. Wenn jemand noch Zeit ofpern kann wäre ich für weitere Hilfe dankbar.

Allen die mir bisher geholfen haben noch einmal vielen Dank!

Liebe Grüße

Thomas

Hi,
jeder Anchor ist mit top und left gestylt

ul li#li1 a
{
top: 35px;
left: 60px;
}

Hier musst du nur top und left jeweils anpassen.

Bei deinem Adventskalender wäre das

ul li#li23 a
{
height:40px;
left:436px;
top:219px;
width:30px;
}

Viele Grüße