phpBB.de

Verfasst: **21.07.2010 20:04**

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!

Verfasst: **24.07.2010 03:24**

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.

Verfasst: **24.07.2010 04:18**

Asterix 4tw

Verfasst: **25.07.2010 17:25**

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.

Verfasst: **25.07.2010 17:31**

Infos noch nicht:

erstmal kommen einige Fragen

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

Verfasst: **25.07.2010 18:00**

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

Verfasst: **26.07.2010 21:30**

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.

Verfasst: **29.07.2010 15:12**

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!

Verfasst: **29.07.2010 19:05**

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>

Verfasst: **29.07.2010 20:14**

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.

phpBB.de

2 Container nebeneinander in den Header

2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header

Re: 2 Container nebeneinander in den Header