Problem mit Bildpositionierung

[Eliquas]

Hallo liebe Forumsmitglieder.

Ich verwende das Template "op_metro_02" und habe ein Problem.

ich möchte zwei Farbfelder afder Titelseite einfügen. Eines in der Mitte, das zweite nach rechts und unten versetzt. Die Farbflächen werden aber unterhalb des Hintergrundes für den Titel angezeigt, Sie sollen aber auf dem Hintergrund sichtbar sein.

Genaue Größe, Farbe, Text muss ich noch anpassen. Aber wie schaffe ich es, dass die Felder auf der Titelseite erscheinen und an der richtigen Position?

Anschauen könnt Ihr das Problem unter: http://www.elias-webdesign.de/easygoing ... rmal#Start

Danke für Eure Unterstützung.

Eliquas

[Tata]

Hast Du schon versucht mit "text-align" im

Code: Select all

.untertitel {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    line-height: 1.5;
    letter-spacing: 2px;
    word-spacing: 2px;
    color: #000000;
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-align: center;

zu spielen?
Mit den Farbfelder - man braucht erst die Seiten erstellt haben. Dann die Felder im Stylesheet nach Gewünsch zu stylen.

[Eliquas]

Hallo tata.

Danke für Deine Antwort. Ich habe das Logu und das Foto nun wie gewünscht rechts und links(genaue Position folgt noch!). Aber ich habe Probleme mit den Farbflächen. Ich konnte sie jetzt zwar anlegen, aber sie werden unterhalb der Titelseite angezeigt. Nicht auf der Titelseite. Weißt Du, an welcher Schraube ich drehen muss, damit sie auf der Titelseite erscheinen?

Vielen Dank

Eliquas

[lck]

Hallo Eliquas,

ber ich habe Probleme mit den Farbflächen. Ich konnte sie jetzt zwar anlegen, aber sie werden unterhalb der Titelseite angezeigt. Nicht auf der Titelseite.

Verschiebe die farbigen div's unter <div class="tpllck_nav"> also:

Code: Select all

<div class="tpllck_nav"> <!-- DAS GIBT ES SCHON: Hier darunter deine Farb-div's einfügen -->
	<div class="box_mitte">Hier kommt der Inhalt der Box</div>
	<div class="box_rechts">Hiier ist die rechte box</div>
	...

Dann noch das stylesheet.css anpassen:

Code: Select all

.box_mitte {
	padding: 10px;
	background: #ff8000;
	color: #7f1d31;
	border: 2px solid #7f1d31;
	border-radius: 5px;
	font-size: 16px;
	width: 451px;
	height: 316px;
	box-shadow: 5px 4px 13px 8px #C0C0C0;
	display: block;
	/* margin-left: auto; */ /* ab hier NEU */
	/* margin-right: auto; */
	margin: 0;
	position: absolute;
	left: 50%;
	top: 10%;
	transform: translateX(-50%);
}

.box_rechts {
	padding: 10px;
	background: #ff4527;
	color: #7f1d31;
	border: 2px solid #f12547;
	border-radius: 5px;
	font-size: 16px;
	width: 451px;
	height: 316px;
	box-shadow: 5px 4px 13px 8px #C0C0C0;
	display: block;
	/* margin-right: 150px; */ /* ab hier NEU*/
	margin: 0;
	position: absolute;
	right: 10%;
	bottom: 10%;
}

Nach deinen Wünschen ausrichten kannst du das in den Angaben left, top, bottom.

[Eliquas]

Hallo Ick.

Danke für Deinen Tipp. Ich habe die Template gerade geändert und es klappt! Das Stylesheet.CSS passe ich später noch an.

Die Startseite ist jetzt seeehr hoch. Aber ich denke, wenn die Flächen richtig positioniert sind, "regelt" sich das ein.

In der "Bearbeiten-Version" werden Logo und Foto bis auf wenige Millimeter in der Höhe "abgeschnitten. Ist das so richtig? In der Vorschau ist alles o.k..

Vielen Dank nochmal.

[Tata]

In der "Bearbeiten-Version" werden Logo und Foto bis auf wenige Millimeter in der Höhe "abgeschnitten. Ist das so richtig? In der Vorschau ist alles o.k..

Es spielt keine Rolle, solange man im Bearbeitungmodus die "Headeroptik" nicht wichtig ist. Ich schalte den "Header" im Berarbeitungmodus aus, um mehr Platz für den Editor zu haben.

[Eliquas]

Wie schaltet man den Header denn aus? Das kenne ich noch nicht.

[lck]

Die Startseite ist jetzt seeehr hoch. Aber ich denke, wenn die Flächen richtig positioniert sind, "regelt" sich das ein.

Da hast du einen Bock geschossen . Schau dir das nochmal an viewtopic.php?f=16&t=16887&p=77904#p77898.
Ich habe das auch noch mit einem Kommentar ergänzt.

Code: Select all

<div class="tpllck_nav"> <!-- DAS GIBT ES SCHON: Hier darunter deine Farb-div's einfügen -->

Und vorher immer eine Sicherheitskopie der Dateien machen, die du ändern willst.

[lck]

Wie schaltet man den Header denn aus? Das kenne ich noch nicht.

Das ist schon ein älteres Template, da ist so etwas noch nicht vorgesehen. Müsste eingebaut werden.
Ist doch schon eingebaut , seit der Anpassung für XH 1.7. Im "Bearbeiten-Modus" ist der Header ausgeblendet und das Menü erscheint oben. Gesteuert wird das durch das admintemplate.css im Template-Ordner.

[Eliquas]

Jetzt sind die Flächen auf der Startseite. Nur das Logo und das Foto, die auch auf die Startseite sollen, sind jetzt auf die erste Seite "gerutscht". Muss ich hier die Reihenfolge der Bilder und Boxen in der Auflistung im Template ändern?

Also erst die beiden "img-Dateien", dann die "divs" der Boxen?