Die Ausrüstungen werden bereit gestellt und jeder Anfänger erhält eine ausführliche Unterweisung.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
neuer Artikel > Widget > Quellcode > code einfügen > ok
<div class="our_menu">
<ul class="menu">
<li class="item">
<strong class="new">neu</strong>
<a href="http://www.zella.de/bogenschiessen.html">
<h3>Bogenschießen</h3>
<p> Die Ausrüstungen werden bereit gestellt und
jeder Anfänger erhält eine ausführliche Unterweisung.</p>
<img src="http://zella.de/code/bilder/283x164/1.jpg"
alt="2 for 20" height="164" width="203">
</a>
</li>
<li class="item">
<strong class="new">neu</strong>
<a href="#">
<h3>Camping</h3>
<p> Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
<img src="http://zella.de/code/bilder/283x164/2.jpg"
alt="" height="164" width="203">
</a>
</li>
<li class="item">
<strong class="new">neu</strong>
<a href="#">
<h3>Fahrradverleih</h3>
<p> Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
<img src="http://zella.de/code/bilder/283x164/3.jpg"
alt="Alternate" height="164" width="203">
</a>
</li>
<li class="item">
<a href="#">
<h3> Reiten</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt</p>
<img src="http://zella.de/code/bilder/283x164/4.jpg"
alt="" height="164" width="283">
</a>
</li>
<li class="item">
<a href="#">
<h3>Kanuverleih</h3>
<p> Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt</p>
<img src="http://zella.de/code/bilder/283x164/5.jpg"
alt="" height="164" width="283">
</a>
</li>
<li class="item">
<a href="#">
<h3>Schwimmteich</h3>
<p> Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</p>
<img src="http://zella.de/code/bilder/283x164/6.jpg"
alt="Alternate" height="164" width="283">
</a>
</li>
<li class="item">
<a href="#">
<h3>Ferienwohnung</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt</p>
<img src="http://zella.de/code/bilder/283x164/7.jpg"
alt="Alternate" height="164" width="283">
</a>
</li>
<li class="item">
<a href="#">
<h3>Schwimmteich</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt</p>
<img src="http://zella.de/code/bilder/283x164/8.jpg"
alt="Alternate" height="164" width="283">
</a>
</li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok
<style>
.our_menu{width:930px; margin:0 auto;}
ul,li{margin:0;padding:0;list-style:none}
.menu .item{float:left;position:relative}
.menu .item .new{background-position:-248px
-482px;height:28px;left:-9px;padding:7px 0 0 7px;top:41px;width:55px;
background:#F00;color:#FFF;display:block;font-family:"league-gothic",sans-serif;font-size:18px;position:absolute;text-transform:uppercase;z-index:1;
}
.menu .item
a{background-color:#FFF;color:#820922;display:block;overflow:hidden;position:absolute;box-shadow:0
0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0
#CCC}
.menu .item a:hover{z-index:2;-webkit-transition:height .2s
ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s
ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s
ease-in-out}
.menu .item:hover .new{z-index:3}
.menu .item a
h3{border:0;font-family:"league-gothic",sans-serif;font-size:18px;margin:0 0
.5em 0;padding:0;text-transform:uppercase; }
.menu .item a p{color:#432;font-size:16px;}
.our_menu .menu{float:left;margin:0 0 50px 0}
.our_menu .menu .item{background-position:9px
-791px;height:170px;padding:0 0 0 7px;width:316px}
.our_menu .menu .item a{height:25px;padding:114px 0 0
14px;top:20px;width:295px;text-decoration:none;}
.our_menu .menu .item
a:hover{height:132px;padding-top:179px}
.our_menu .menu .item a
img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
.our_menu .menu .item a:hover img{clip:auto}
.our_menu .menu .item .new{left:-1px}
@media only screen and (max-width: 967px) {
.our_menu{ width:660px;margin:0 auto;}
}
@media only screen and (max-width: 620px) {
.our_menu{ width:330px;margin:0 auto;}
}
</style>
Alle hier aufgezeigten Codeschnipsel wurden mit dem Layout "Stripe Responsive" und in diesem Projekt getestet.
Ob diese in Euerem Projekt funktionieren müsst ihr testen.