2 Container nebeneinander in den Header

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Glueckmacher
Mitglied
Beiträge: 209
Registriert: 11.06.2009 00:55

2 Container nebeneinander in den Header

Beitrag von Glueckmacher »

Hallo,

seit einiger Zeit versuche ich 2 div-Container im Header des Styles prosilver unterzubringen und zwar nebeneinander. Leider ohne Erfolg.

Mein Ziel ist es 2 (oder mehr) Slideshows unabhängig voneinander im Header nebeneinander ablaufen zu lassen. Eine einzelne Slideshow geht problemlos, allerdings ausschließlich linksbündig, egal was ich in der common.css angebe. Lege ich einen weiteren Container an, so funktonieren beide Slideshows unabhängig voneinander, allerdings linksbündig untereinander und somit einer davon mitten auf der Menüleiste.

Konkret sieht das in der overall_header.html bei den relevanten Passagen wie folgt aus:

Code: Alles auswählen

<head>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cycle.lite.js"></script>
<script type="text/javascript">
$(function(){
    $('#slideshow').cycle({
        timeout: 12000,
        speed:  1000
    });
});

$(function(){
    $('#slideshow2').cycle({
        timeout: 6000,
        speed:  1000
    });
});
</script>
</head>

<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

            <div id="slideshow">
                <img src="{T_IMAGESET_PATH}/collage5.png" width=40% height=100% alt="01" />
                <img src="{T_IMAGESET_PATH}/collage4.png" width=40% height=100% alt="02" />
            </div>
            <div id="slideshow2">
                <img src="{T_IMAGESET_PATH}/collage3.png" width=40% height=100% alt="03" />
                <img src="{T_IMAGESET_PATH}/collage2.png" width=40% height=100% alt="04" />
                <img src="{T_IMAGESET_PATH}/collage.png" width=40% height=100% alt="05" />
                <img src="{T_IMAGESET_PATH}/collage2.png" width=40% height=100% alt="04" />
                <img src="{T_IMAGESET_PATH}/collage3.png" width=40% height=100% alt="03" />
                <img src="{T_IMAGESET_PATH}/collage4.png" width=40% height=100% alt="02" />
            </div>


   			<span class="corners-bottom"><span></span></span></div>
		</div>
In der common.css ist folgendes angegeben:

Code: Alles auswählen

#slideshow {
    height: 150px;
    margin-left: 0;
    text-align: left;
}

#slideshow2 {
    height: 150px;
    margin-right: 0;
    text-align: right;
}
Wie gesagt, egal welche Ausrichtung ich angebe (center, right oder gar nichts), die Grafiken wollen immer nach links oben.

Meine Fragen und gleichzeitig meine Bitte um Hilfe wären nun, wie bringe ich erstens eine Grafik dazu in der Mitte oder rechts aufzutauchen und zweitens, wie bringe ich die beiden Container dazu, dass sie in einer Linie nebeneinander oben angezeigt werden?

Danke schon mal im Voraus für eure Hilfe!
phpbb: 3.3.4
Styles: aero, prosilver, Absolution, SoftBlue
PHP Version: 7.4.18
Datenbank-Server: MySQL(i) 5.7.34-2
Benutzeravatar
archivar
Mitglied
Beiträge: 572
Registriert: 07.08.2008 08:25
Wohnort: Deutschland

Re: 2 Container nebeneinander in den Header

Beitrag von archivar »

Hallo,
ich hoffe Du kannst was damit anfangen.
Steht so bei mir testweise in der overall_header.html von prosilver:

Code: Alles auswählen

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
<br />
<table width="100%" border="0">
<tr>
<td width="25%"><img src="{ROOT_PATH}/images/smilies/sum03.gif" alt="" /></td>
<td width="25%"><img src="{ROOT_PATH}/images/smilies/0665.gif" alt="" /></td>
<td width="25%"><img src="{ROOT_PATH}/images/smilies/sum17.gif" alt="" /></td>
<td width="25%"><img src="{ROOT_PATH}/images/smilies/0665.gif" alt="" /></td>
<td><img src="{ROOT_PATH}/images/smilies/sum03.gif" alt="" /></td>
</tr>
</table>
			<span class="corners-bottom"><span></span></span></div>

		</div>
Kannst es Dir auf meiner Testseite begutachten. :wink:
V. G. archivar
Benutzeravatar
7emper5i
Ehemaliger Übersetzer
Beiträge: 1473
Registriert: 11.04.2009 13:31
Wohnort: Köln
Kontaktdaten:

Re: 2 Container nebeneinander in den Header

Beitrag von 7emper5i »

Asterix 4tw :D
Die Deutsche Rechtschreibung ist Freeware, sprich, du kannst sie kostenlos nutzen. Allerdings ist sie nicht Open Source, d.h. du darfst sie nicht verändern oder in veränderter Form veröffentlichen.
Glueckmacher
Mitglied
Beiträge: 209
Registriert: 11.06.2009 00:55

Re: 2 Container nebeneinander in den Header

Beitrag von Glueckmacher »

Hallo archivar,

danke für Deine Hilfe und Deine Mühen.
Habe jetzt mal versucht Deinen Code an meinen Bedarf anzupassen. Leider ohne Erfolg.

Mein Problem ist, dass <td> jeweils einen Zellenblock beansprucht. Für eine Slideshow brauche ich aber mehrere Bilder im selben Zellenblock, damit die Bilder ineinander übergehen und nicht nur nebeneinander angezeigt werden. Setze ich also <td> vor jedes Bild, werden sie nebeneinander angezeigt und nicht übereinander gelegt.
Mein Plan ist es also mehrere Bildblöcke als Slider nebeneinander im Header laufen zu lassen und möglichst relativ positionieren zu können.

Hast Du evtl. eine Idee dazu? Gerne dürfen sich auch andere dazu äußern, wenn sie Infos für mich haben. :grin:
phpbb: 3.3.4
Styles: aero, prosilver, Absolution, SoftBlue
PHP Version: 7.4.18
Datenbank-Server: MySQL(i) 5.7.34-2
Benutzeravatar
7emper5i
Ehemaliger Übersetzer
Beiträge: 1473
Registriert: 11.04.2009 13:31
Wohnort: Köln
Kontaktdaten:

Re: 2 Container nebeneinander in den Header

Beitrag von 7emper5i »

Infos noch nicht:

erstmal kommen einige Fragen :D

1. welchen Style nutzt du denn, bzw, welchen möchtest du dann nutzen. In deiner Signatur hast du ja mehrere angegeben.
2. Feste Breite oder wrap?
3. Versuche mal dein Vorhaben anhand eines Bildes zu zeichnen, mit paint.net zB, und dann hier als Bild einzustellen, so dass man sich ein "besseres Bild" machen kann, was du vorhast.

Gut Ding will Weile haben :grin:
Die Deutsche Rechtschreibung ist Freeware, sprich, du kannst sie kostenlos nutzen. Allerdings ist sie nicht Open Source, d.h. du darfst sie nicht verändern oder in veränderter Form veröffentlichen.
Glueckmacher
Mitglied
Beiträge: 209
Registriert: 11.06.2009 00:55

Re: 2 Container nebeneinander in den Header

Beitrag von Glueckmacher »

Zu 1.: ist für prosilver gedacht
Zu 2.: wrap
Zu 3.: http://www.bilder-hochladen.net/files/8f9n-8o.jpg

Momentan ist es so: http://test.forum-slowenien.de/portal.php?style=1
Doch im Moment läuft lediglich eine einzige Slideshow ab, wo alles 3 integriert ist und nichtmal die lässt sich anders positionieren. Ich hätte es gerne unabhängig voneinander.

Auch bei Dir möchte ich mich für Deine Mühen bedanken.

Große Bilder bitte nur verlinken - KB:16 - Wuerzi
phpbb: 3.3.4
Styles: aero, prosilver, Absolution, SoftBlue
PHP Version: 7.4.18
Datenbank-Server: MySQL(i) 5.7.34-2
Glueckmacher
Mitglied
Beiträge: 209
Registriert: 11.06.2009 00:55

Re: 2 Container nebeneinander in den Header

Beitrag von Glueckmacher »

Nachdem ich bei den Zeilen

Code: Alles auswählen

<img src="{T_IMAGESET_PATH}/collage3.png" width=40% height=100% alt="03" />
"height=100%" rausgelöscht habe und "width" auf 100% gestellt habe, konnte ich nun endlich die beiden div-Container über die CSS steuern und sie gehorchen auch endlich darauf.

Es sieht nun also so aus:

Code: Alles auswählen

            <div id="slideshow">
                <img src="{T_IMAGESET_PATH}/collage5.png" width=100% alt="01" />
                <img src="{T_IMAGESET_PATH}/collage4.png" width=100% alt="02" />
                <img src="{T_IMAGESET_PATH}/collage3.png" width=100% alt="03" />
            </div>
            
            <div id="slideshow2">
                <img src="{T_IMAGESET_PATH}/collage2.png" width=100% alt="04" />
                <img src="{T_IMAGESET_PATH}/collage.png" width=100% alt="05" />
             </div>
Die CSS sieht wie folgt aus:

Code: Alles auswählen

#slideshow {
    height: 150px;
    float: left;
    width: 50%;
}

#slideshow2 {
    height: 150px;
    float: right;
    width: 50%;
}
Danke an alle Leser und nochmal danke an euch beide.
phpbb: 3.3.4
Styles: aero, prosilver, Absolution, SoftBlue
PHP Version: 7.4.18
Datenbank-Server: MySQL(i) 5.7.34-2
Glueckmacher
Mitglied
Beiträge: 209
Registriert: 11.06.2009 00:55

Re: 2 Container nebeneinander in den Header

Beitrag von Glueckmacher »

Nach vielen Versuchen kam ich zu dem Schluss, dass ich es ohne Tabelle wohl doch nicht hinbekomme, dass alle 4 Elemente nebeneinander stehen und dabei möglichst auf viele Bildschirmauflösungen passend reagieren. Also habe ich im Netz geschaut wie das mit den Tabellen funktioniert und es sieht auch ganz ok aus. Aber eben nur ganz ok, weil die unteren runden Ecken der headerbar flöten gegangen sind. Leider haben mich auch weitere Stunden des Herumprobierens und der Suche im Netz nicht weitergebracht, weshalb ich nochmal um Hilfe bitten möchte.

Konkret wäre ich also um Info dankbar, wie ich die Abrundungen unten wieder herbekomme ohne natürlich das bisher erreichte wieder aufgeben zu müssen.
http://www.bilder-hochladen.net/files/8f9n-8p.jpg

Die Stelle in der overall_header sieht derzeit so aus:

Code: Alles auswählen

<div class="headerbar">
  
            <div class="inner"><span class="corners-top"><span></span></span>

            <table>
                <colgroup>
                      <col width="10%"/>
                      <col width="50%"/>
                      <col width="10%"/>
                      <col width="30%"/>
                </colgroup>
            <tr>
            <td>
            <div id="slideshow">
                <img src="{T_IMAGESET_PATH}/Bild2.png" width="210" height="150" alt="01" />
                <img src="{T_IMAGESET_PATH}/Bild4.png" width="210" height="150" alt="02" />
                <img src="{T_IMAGESET_PATH}/Bild3.png" width="210" height="150" alt="03" />
                <img src="{T_IMAGESET_PATH}/Bild1.png" width="210" height="150" alt="04" />

            </div>
            </td>
            
            <td>
            <div id="forenlogo">
				<a href="{U_PORTAL}" title="{L_PORTAL}"><img src="{T_IMAGESET_PATH}/Forenlogo.png" width="494" height="150" alt="site-logo" /></a>
            </div>
            </td>
            
            <td>
            <div id="slideshow2">
                <img src="{T_IMAGESET_PATH}/Bild5.png" width="210" height="150" alt="01" />
                <img src="{T_IMAGESET_PATH}/Bild7.png" width="210" height="150" alt="02" />
                <img src="{T_IMAGESET_PATH}/Bild6.png" width="210" height="150" alt="03" />
                <img src="{T_IMAGESET_PATH}/Bild8.png" width="210" height="150" alt="04" />

            </div>
            </td>

            <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
            <td>
            <div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
            </td>
            <!-- ENDIF -->
            </tr>
            </table>

   			<span class="corners-bottom"><span></span></span></div>
		</div>
Und in der CSS sehen die entsprechenden id's wie folgt aus, die ich hinzugefügt oder verändert habe:

Code: Alles auswählen

#search-box {
	color: #FFFFFF;
	position: relative;
   z-index: 10;
	margin-top: 110px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

#slideshow {
    height: 150px;
    position: relative;
    width: 210px;
    float: left;
}

#forenlogo {
    height: 150px;
    position: relative;
    text-align: center;
    float: center;
    width: 100%;
}

#slideshow2 {
    height: 150px;
    position: relative;
    float: right;
    width: 100%;
    z-index: 5;
}
Danke & Grüße!
phpbb: 3.3.4
Styles: aero, prosilver, Absolution, SoftBlue
PHP Version: 7.4.18
Datenbank-Server: MySQL(i) 5.7.34-2
Benutzeravatar
archivar
Mitglied
Beiträge: 572
Registriert: 07.08.2008 08:25
Wohnort: Deutschland

Re: 2 Container nebeneinander in den Header

Beitrag von archivar »

Hallo,
ich habe das mal, wie es hier steht, bei mir eingebaut.
Bei mir sind die unteren Rundungen vorhanden. :)
EDIT:
Kannst Du mir mal die css und die header geben?
Für die Rundungen ist das hier mit verantwortlich:

Code: Alles auswählen

<span class="corners-bottom"><span></span></span></div>
V. G. archivar
Glueckmacher
Mitglied
Beiträge: 209
Registriert: 11.06.2009 00:55

Re: 2 Container nebeneinander in den Header

Beitrag von Glueckmacher »

Oh, danke, dass Du Dir so viel Mühe gemacht hast. :)

Allerdings ist das dann noch rätselhafter für mich. Dennoch schon mal ein guter Hinweis, weil es dann an etwas anderem liegen könnte, was für mich bedeutet, dass ich den Teil erstmal wieder in den Originalzustand bringe und schaue, ob die Rundungen wieder da sind und falls ja, ab wann genau sie verschwinden. Ich ging natürlich fest davon aus, dass es an meinen Änderungen liegt. Na mal schauen.

Danke & Grüße!

EDIT: Mache ich gleich. Setze die Pastebins gleich rein.

EDIT2: Und nun die Dateien:
https://www.phpbb.de/support/pastebin.p ... view&s=507
https://www.phpbb.de/support/pastebin.p ... view&s=508

Muss jetzt gleich weg, weshalb es bis zur nächsten Antwort von mir etwas dauern kann.
Zuletzt geändert von Glueckmacher am 29.07.2010 20:25, insgesamt 1-mal geändert.
phpbb: 3.3.4
Styles: aero, prosilver, Absolution, SoftBlue
PHP Version: 7.4.18
Datenbank-Server: MySQL(i) 5.7.34-2
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“