Szövegdoboz kódja
 

<center>
    <div class="hatterkep">
        <div class="szoveg">
            Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero. Curabitur eu libero sodales eros aliquam sagittis sit amet sit amet odio. Vivamus lorem nisl, varius sit amet vehicula blandit, mattis tempus mi. Donec lectus sapien, dignissim vitae est non, aliquam suscipit velit. Pellentesque ac ligula tincidunt, elementum tortor eu, mattis dolor. Praesent quis hendrerit odio, sed scelerisque risus. Sed at vulputate velit, eget rutrum est. Duis et elementum libero.
            <center>
                <p>
                    <br />
                    <strong>Navigáció</strong><br />
                    &nbsp;
                </p>

                <div class="tablazat">
                    <div class="sor">
                        <div class="cella">
                            <p>
                                <a href="ide jön a menü linke">Menüpont</a>
                            </p>
                        </div>

 

                        <div class="cella">
                            <p>
                                <a href="ide jön a menü linkje">Menüpont</a>
                            </p>
                        </div>
                    </div>

 

                    <div class="sor">
                        <div class="cella">
                            <p>
                                <a href="ide jön a menü linkje">Menüpont</a>
                            </p>
                        </div>

 

                        <div class="cella">
                            <p>
                                <a href="ide jön a menü linkje">Menüpont</a>
                            </p>
                        </div>
                    </div>
                </div>
            </center>
        </div>
    </div>
</center>

CSS kód
 

<style type="text/css">
.hatterkep{
    width:400px;
    height:465px;
    background: url(/images/scripts/image-effects/001.png) no-repeat;
}
.szoveg{
    width:380px;
    height:445px;  
    opacity:0;
}
.hatterkep:hover .szoveg {
    font-family: Arial;
    font-size:12px;
    color:#000000;
    text-align: justify;
    background:#ffffff;
    padding:10px;
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    opacity: 0.6;
}
.tablazat{
    display: table;
}
.sor{
    display: table-row;
}
.cella{
    width: 190px;
    background: #FDF3EC;
    display: table-cell;
    padding: 10px;
    border-top: 1px solid #F3C6AA;
}
.cella a:link, .cella a:visited, .cella a:hover{ /* link kinézete */
    color: #000000 !important;
}
</style>

2 385 megtekintés