Hallo,
ich versuche eine responsive Seite mit 3 Kolonnen zu machen. Es hat links und rechts einen leeren Bereich und in der Mitte eine Slide-Show : I I ooo I I.
über der Slide Show braucht es ein Menu .. das heisst es steht rechts oben menu und dann kommt die Slide Show.
Das habe ich jetzt so wie in den Code Beispiel im Anhang. Aber da kommt zwar die Slide-Show dort wo sie sein soll (= horizontral zentriert in der Mitte vom Bildschirm) aber das Menu wird in der linken Kolonne angezeigt... In der Smartphone-Version soll das dann im Portrait-Format. So kommen: IooI. (also mit sehr geringem Rand auf beiden Seiten) und im Querformat so: I. ooo. I .
Jetzt wird das Menu in der PC Version am linken Bildschirmrand angezeigt, im Portrait-Format auf dem Smartphone wird es nicht angezeigt und im Querformat ist das Wort Menu auch am linken Bildschirm rand.
Ich verstehe nicht warum.
Danke
brainstuff
CSS:
------------------
* {
box-sizing: border-box;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 0px;
/* height: 300px;*/ /* Should be removed. Only for demonstration */
}
.left, .right {
width: 15%;
}
.middle {
width: 85%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
------------------------------
html:
<div class="row">
<div class="column left" style="background-color:rgb(165,68,154);">
</div>
<div class="column middle" style="background-color:rgb(165,68,154);">
<div class="dropdown">
<button class="mainmenubtn">menu</button>
<div class="dropdown-child">
<a href="contact/index.html">contact</a>
<a href="contact/partners.html">partners</a>
<a href="contact/impressum.html">impressum</a>
</div>
</div>
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
data-cycle-pager=".example-pager"
>
........ der Rest ist wahrscheinlich hier nicht nötig