Responsive Template - UnderTheBridge
Moderator: mikey
Responsive Template - UnderTheBridge
Neue Version ist online und downloadbar.
Änderungen:
- CSS-Akkordeon-Menü ersetzt durch ein jQuery-Akkordeon-Menü zwecks besserer Browserkompatibilität
- Bug behoben, der bei einer bestimmten Link-Konstellation im Menulevel2 - nur im CSS-Akkordeon-Menü - auftrat (Viewport kleiner 499px).
- Außerdem gab es Probleme mit dem mobilen Browser "Dolphin mit aktivierten Jetpack" bei der korrekten Darstellung des CSS-Akkordeon-Menüs.
Leider wurde dies bei vorangegangenen Tests nicht erkannt, bzw. ist dieser Fehler in der Template-Demo nicht aufgetreten. Ich empfehle ein Update auf die neueste Version. Sorry für die Umstände.
Das Template konnte nicht mit allen Browsern, Geräten und Systemen getestet werden! Daher die Bitte, testet das Template vor einem produktiven Einsatz ausgiebig.
Änderungen:
- CSS-Akkordeon-Menü ersetzt durch ein jQuery-Akkordeon-Menü zwecks besserer Browserkompatibilität
- Bug behoben, der bei einer bestimmten Link-Konstellation im Menulevel2 - nur im CSS-Akkordeon-Menü - auftrat (Viewport kleiner 499px).
- Außerdem gab es Probleme mit dem mobilen Browser "Dolphin mit aktivierten Jetpack" bei der korrekten Darstellung des CSS-Akkordeon-Menüs.
Leider wurde dies bei vorangegangenen Tests nicht erkannt, bzw. ist dieser Fehler in der Template-Demo nicht aufgetreten. Ich empfehle ein Update auf die neueste Version. Sorry für die Umstände.
Das Template konnte nicht mit allen Browsern, Geräten und Systemen getestet werden! Daher die Bitte, testet das Template vor einem produktiven Einsatz ausgiebig.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Responsive Template - UnderTheBridge
Ich hätte den Titel gerne am oberen Rand vom Menü und rechts gefloatet. Wie kann ich den Titel runterverschieben, ohne dass er bei kleinerer Höhe ins Menü rutscht?
Re: Responsive Template - UnderTheBridge
stylesheet.css (* geändert)
Eventuell sind dann noch Anpassungen für kleinere Viewports nötig.
Code: Select all
.tpllck_head {
background-color: #486C88;
background: url(images/bg.jpg) 50% 0;
-webkit-background-size: cover;
background-size: cover;
/* height: 50%; */ /* geändert */
/* height: 50vh; */ /* geändert */
padding: .5em 0;
width: 100%;
}
Code: Select all
.tpllck_header {
/* background: url(images/header.jpg) no-repeat #2F606D; */
border: 0px solid red;
font-size: 1.8em;
font-weight: 700;
margin: 8rem auto 1rem;
max-width: 85%; /* geändert */
padding: 0;
}
Code: Select all
.tpllck_header h1 {
color: #fff;
font: italic bold 200% Georgia, serif;
letter-spacing: .1em;
margin: 0;
padding: 0;
text-shadow: 0 0 10px #000;
text-transform: uppercase;
text-align: right; /* geändert */
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Responsive Template - UnderTheBridge
Danke, ich hatte aber:
So erstreckt sich mein größeres Backgroundbild genau so weit nach unten, dass das Menü noch am untersten Rand klickbar ist. Mit weniger vheight wird das Bild abgeschnitten. Kann ich das irgendwie anders machen?
Code: Select all
.tpllck_head {
background-color: #486C88;
background: url(images/bg.jpg) 50% 0;
-webkit-background-size: cover;
background-size: cover;
height: 80%; */ /* geändert */
height: 80vh; */ /* geändert */
padding: .5em 0;
width: 100%;
}
Re: Responsive Template - UnderTheBridge
Dann probiere mal das, ob es so für dich passt. An der Höhe und den Abständen kannst du ja noch schrauben.
Code: Select all
.tpllck_head {
background-color: #486C88;
background: url(images/bg.jpg) 50% 0;
-webkit-background-size: cover;
background-size: cover;
/* height: 50%; */
/* height: 50vh; */
padding: .5em 0;
width: 100%;
}
#tpllck_header_box {
margin: 0 auto;
text-align: right;
width: 85%;
display: table;
height: 70vh;
}
.tpllck_header {
/* background: url(images/header.jpg) no-repeat #2F606D; */
border: 0px solid red;
font-size: 1.8em;
font-weight: 700;
margin: 0;
/* max-width: 1170px; */
padding: 0;
display: table-cell;
vertical-align: bottom;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Responsive Template - UnderTheBridge
Genau so passt es mir, danke!
Was ich noch fragen wollte: Gibt es eine Möglichkeit, im Menü einen Anker zu setzen, dass man bei einem Klick auf das Menü gleich im Content landet? Wenn ich runtergescrollt habe, bleib ich im Inhalt, trotz H1-Wechsels. Wie fixiere ich, dass ich beim Klick auf Menü im Content lande?
Was ich noch fragen wollte: Gibt es eine Möglichkeit, im Menü einen Anker zu setzen, dass man bei einem Klick auf das Menü gleich im Content landet? Wenn ich runtergescrollt habe, bleib ich im Inhalt, trotz H1-Wechsels. Wie fixiere ich, dass ich beim Klick auf Menü im Content lande?
Re: Responsive Template - UnderTheBridge
Ich weiß nicht, ob ich dich richtig verstanden habe. Eventuell entspricht diese Antwort deiner Frage.wbs wrote:Was ich noch fragen wollte: Gibt es eine Möglichkeit, im Menü einen Anker zu setzen, dass man bei einem Klick auf das Menü gleich im Content landet? Wenn ich runtergescrollt habe, bleib ich im Inhalt, trotz H1-Wechsels. Wie fixiere ich, dass ich beim Klick auf Menü im Content lande?
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Responsive Template - UnderTheBridge
Ja, aber ich will nicht ganz nach oben sondern auf die Höhe der Überschrift eins, damit man nicht auf den Content runterscrollen muss, weil mein Headerbg über den ganzen Bildschimr geht.
Re: Responsive Template - UnderTheBridge
Ich finde es immer bedenklich, wenn diese Möglichkeit angefragt wird. Wenn der Header nicht so wichtig ist, dass man ihn bei Site-interner Navigation quasi überspringt, warum ist er dann überhaupt ein Header (und nicht z.B. ein Footer), oder warum ist er so groß?wbs wrote:Ja, aber ich will nicht ganz nach oben sondern auf die Höhe der Überschrift eins, damit man nicht auf den Content runterscrollen muss, weil mein Headerbg über den ganzen Bildschimr geht.
Wenn es aber unbedingt sein soll, dann ändere diese zwei Zeilen zu:
Code: Select all
$x = '#start';
$x .= $this->shallOpenInNewWindow($i) ? '" target="_blank' : '';
return a($this->ta[$i], $x);
Christoph M. Becker – Plugins for CMSimple_XH
Re: Responsive Template - UnderTheBridge
Es ist halt ein Foto vom ganzen Team, da reicht's wenn man ihn auf der Startseite sieht. Wie so ein Onepagetemplate, nur dass es kein Onepagetemplate ist.