erstmal ein Hallo an Alle,
ich möchte gerne eine Horizontales 3 Spaltiges Menü realisieren und bekomme dies mit Typoscript einfach
nicht gebacken. das Menü habe ich zuvor erst einmal mit einer leeren HTML Seite realisiert um zu sehen wie
das Wrapping aussehen müsste.
<div id="box">
<ul>
<li class="links"><a href=""><span class="titel">titel1</span><span class="untertitlel">Untertitel1</span></a></li>
<li class="mitte"><a href=""><span class="titel">titel2</span><span class="untertitlel">Untertitel2</span></a></li>
<li class="rechts"><a href=""><span class="titel">titel3</span><span class="untertitlel">Untertitel3</span></a></li>
</ul>
</div>
jetzt zu meinen Fragen.😃
wie bekomme ich das bild aus /media/uploads als style in die div box (es soll sich ja ändern).
wie kann ich bei einem TMENU jedem listenelement einen anderen Namen geben so das diese per CSS
einzeln ansprechbar sind. und zu guter letzt wie komm ich an das feld untertitel / subtitle?
anbei ein screen wie es ich es gerne haben möchte.
ich bastle da jetzt schon seite einigen tagen und raff es einfach net #angry#
* {margin: 0; padding: 0;}
body { background: #fff; padding: 10px; }
#box
{
position: relative; /* für kind elemente nicht static */
width: 920px;
height: 540px;
background: url(bild2.jpg); width:920px; height:530px;
}
#box ul
{
position: absolute;
height: 100%;
background: transparent;
list-style-type: none;
}
.left
{
position: absolute;
float: left;
width: 306px;
height: 100%;
background: transparent;
}
.center
{
position: absolute;
float: left;
width: 306px;
left: 306px;
height: 100%;
background: transparent;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.right
{
position: absolute;
float: left;
left: 614px;
width: 306px;
height: 100%;
background: transparent;
}
#box ul li a
{
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-size: 14px;
position: absolute;
background: transparent;
height: 100%;
width: 190px;
padding-left: 10px;
text-decoration: none;
/* line-height:370px;*/
}
.link
{
color: #fff;
background: #005ca9;
width: 296px;
height: 30px;
position: absolute;
bottom: 100px;
left: 0;
line-height: 30px;
padding-left: 10px;
}
.test
{
color: #3d3d3d;
position: absolute;
background: #fff;
width:286px;
padding: 10px;
left: 0;
height: 80px;
bottom: 0;
opacity: 0.7;
}
<div id="box">
<ul>
<li class="left"><a href="1"><span class="link">Untermenü 01</span><span class="test">dies ist ein Untertitel, dies ist ein Untertitel</span></a></li>
<li class="center"><a href="2"><span class="link">Untermenü 02</span><span class="test">dies ist ein Untertitel, dies ist ein Untertitel</span></a></li>
<li class="right"><a href="3"><span class="link">Untermenü 03</span><span class="test">dies ist ein Untertitel, dies ist ein Untertitel</span></a></li>
</ul>
</div>
