Beiträge von Kurokami

Kurokami

Hallo liebe Webmasterfreunde,

jeder kennt es, man erstellt eine Dynamische Seite und in dem Content soll etwas eingebunden werden,

in meinem Fall 3 Tabellen / 3 Divs in welchen sich Bilder mit Beschreibung befinden, problem an der sache ist... ich kriege diese 3 Tabellen und Div's nicht nebeneinander, habe es mit float versucht, mit jeglichen anderen dingen und größenverschiedenheiten ... jedoch hat es bei mir nicht funktioniert.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html >


<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style2.css" type="text/css">
    <title>
        Maik&auml;ferflugbenzin - Bad W&uuml;nnenberger Kr&auml;utermanufaktur
    </title>
</head>


<body>    
    <div id="wrapper">
        <div id="maikaefer">
            <img src="images/maikaefer.png" width="100%" height="100%"/>
        </div>
        <div id="wuennenberg">
            <img src="images/wuennenberg.png" width="70%" height="70%"/>
        </div>
        <div id="ManuLogo">
        <img src="images/Logo_manu_quer.png" width="100%" height="100%">
        </div>
        <div id="background">
            <div id="header"> </div>
            <div id="navigation">
                <nav>
                    <ul class="menu">
                        <li><a href="index2.html">Start</a>
                        <ul>
                            <li> <a href="etcSpez.html"> weitere Spezialit&auml;ten </a> </li>
                            <li> <a href="Video.html"> Video </a> </li>
                            </ul>
                        </li>

                        <li>
                            <a href="#" onClick="return alert('Select a Language please!');">Geschichte</a>    
                            <ul>
                                <li> <a href="Geschichte_DE.html" class="Deutsch"> Deutsch </a> </li>
                                <li> <a href="Geschichte_EN.html" class="Englisch"> Englisch </a> </li>
                                <li> <a href="Geschichte_FR.html" class="Franzoesisch"> Franz&ouml;sisch </a> </li>
                            </ul>
                        </li>
                        <li>
                            <a href="Maikaefer.html">Herstellung</a>
                            <ul>
                            <li> <a href="Maikaefer.html"> Maik&auml;ferflugbenzin </a> </li>


                            </ul>
                        </li>
                        <li><a href="zu_shop.html">zum Shop</a></li>
                        <li><a href="zu_Partner.html">Partner</a></li>
                        <li><a href="Kontakt.html">Kontakt</a></li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                    <div class ="Schnapssorte1" id="Magenbitter">

                        <table>
                            <th>
                                <h1 class="Schnapstext">Magenbitter</h1>
                            </th>

                        <div class="Schnapscontent">
                        <br>
                            <tr>
                                <td>
                            <img src="images/sorten/Magenbitter/Drachenblut.png" width="100%" height="32%"/>
                                </td>
                            </tr>
                            <tr>
                                <td>

                            Nachdem wir den heimischen Walddrachen aus dem W&uuml;nnenberger Wald gefangen hatten,
                            waren wir in der lage diesen sehr speziellen Lik&ouml;r herzustellen. Vorsicht das Drachenblut kann Gl&auml;ser rot f&auml;rben,
                            ist jedoch f&uuml;r Kenner ein Genuss.
                            Extrakte aus Angosturarinde und Toncabohnen in Kombination mit weiteren exotischen Pflanzenausz&uuml;gen verleihen ihm seinen einmaligen Geschmack.  
                                </td>
                            </tr>
                            <tr>
                                <td>
                            <img src="images/sorten/Magenbitter/Jesuiten.png" width="100%" height="32%"/>
                            Dieser kr&auml;ftige Magenbitter erinnert durch seinen pr&auml;gnanten Geschmack leicht an das Drachenblut.
                            In diesem Magenbitter wird das alte Kr&auml;uterwissen des Jesuitenordens mit ber&uuml;cksichtigt.
                            Als die Jesuiten diese Kr&auml;uter aus S&uuml;damerika mitbrachten,
                            wollten sie keinen Lik&ouml;r herstellen.
                            Vielmehr nutzten sie diese Kr&auml;uter als Heilpflanzen. 
                                </td>
                            </tr>
                            <tr>
                                <td>
                            <img src="images/sorten/Magenbitter/Magenfreund.png" width="100%" height="32%"/>
                            Der Magenfreund wurde noch vor dem Maik&auml;ferflugbenzin entwickelt und ist somit der &auml;lteste Lik&ouml;r in unserer Produktpalette.
                            15 ausgesuchte Kr&auml;uter in Apothekenqualit&auml;t geben ihm seinen unverwechselbaren, aromatischen Geschmack.  
                                </td>
                            </tr>
                        </table>
                        </div>
                    <!--</div>
                    <div class ="Schnapssorte2" id="Aromatisch">-->
                    <table>
                        <th>
                            <h1 class="Schnapstext">Aromatischer Lik&ouml;r</h1>
                        </th>
                        <div class="Schnapscontent">
                    <br>
                            <tr>
                                <td>
                                    <img src="images/sorten/aromatisch/Kaffee.png" width="100%" height="32%"/>
                                </td>
                            </tr>

                            <tr>
                                <td>
                            Wie entstand der Kaffeelik&ouml;r? Nachdem wir mit den Magenbittern gro&szlig;en Erfolg hatten,
                            wurde die Bitte an uns herangetragen einen milden Lik&ouml;r anzubieten, der auch andere Geschm&auml;cker anspricht.
                            Dieser Kaffeelik&ouml;r schmeckt pur, oder auch als Verfeinerung auf Eis, genauso wie in heissem Kakao mit Sahne.
                            Ein " Leckerschmecker" also als Mischung von Kaffee, Rum und weiteren geheimen  Zutaten.
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="images/sorten/aromatisch/karumquiwei.png" width="100%" height="32%"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                            Der karibische Lik&ouml;r &uuml;berzeugt durch seinen milden, s&uuml;ffigen Geschmack.
                            Der Name setzt sich aus den Hauptzutaten zusammen:Kaffee, Rum, Quitte und Wein. 
                                </td>
                            </tr>
                            <tr>
                                <td>
                            <img src="images/sorten/aromatisch/pilgertrost.png" width="100%" height="32%"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                            Der Pilgertrost wurde nach einer Wanderung auf dem Jakobsweg erfunden.
                            Die Pilgerherbergen boten nur unzureichende oder gar keine spirituellen Getr&auml;nke an.
                            Dieser milde Lik&ouml;r mit Anisgeschmack erfreut sich auch bei Nichtpilgern wachsender Beliebtheit und verfeinert durch sein Aroma besonders gut heisse Teegetr&auml;nke. 
                                </td>
                            </tr>
                            <tr>
                                <td>
                            <img src="images/sorten/aromatisch/winter.png" width="100%" height="32%"/>
                                </td>
                            </tr>
                            <!--<tr>
                                <td>
                                    ZUKÜNFTIGER TEXT STEHT HIER ~
                                </td>
                            </tr>-->
                        </table>
                        </div>
                    </div>
                    <!--<div class ="Schnapssorte3" id="Fruchtig">
                        <h1 class="Schnapstext">Fruchtlik&ouml;r</h1>

                        <div class="Schnapscontent">
                        <br>
                            <img src="images/sorten/fruchtig/schlehen.png" width="30%" height="32%"/>
                            Nicht jedes Jahr k&ouml;nnen wir unseren Schlehenlik&ouml;r herstellen,
                            denn der Schwarzdorn tr&ouml;gt nur in besonderen Jahren ausreichend Schlehen.
                            Er ist also eine echte Rarit&auml;t und wir nur in kleinen Mengen hergestellt.
                            Schlehen werden nach dem ersten Frost geerntet. Die niedriegen Temperaturen l&ouml;sen in den Fr&uuml;chten Prozesse aus,
                            die den Zuckergehalt erh&ouml;hen und die Bitterstoffe reduzieren.
                            <hr>
                            <img src="images/sorten/fruchtig/quitten.png" width="30%" height="32%"/>
                            Der Quittenlik&ouml;r wird nach Hausrezept ausschlie&szlig;lich aus heimischen Quitten hergestellt.
                            Durch das spezielle Herstellungsverfahren sind wir in der Lage, die sehr fruchtige Note der Quitte in Lik&ouml;rform zu konservieren.
                            Wer ihn einmal getrunken hat, m&ouml;chte ihn nicht missen. 
                            <hr>
                            <img src="images/sorten/fruchtig/holunder.png" width="30%" height="32%"/>
                        </div>
                    </div>-->

            </div>

        </div>
        <div id="footer"><a href="impressum.html">Impressum </a> &nbsp; <a href="Datenschutz.html">Datenschutz</a> </div>
    </div>
</body>
</html>

Alles anzeigen

CSS:

Code

td { font-size: 25px; color: olive;}
body { background: url(images/backweb.png) repeat fixed;}
h1 { font-size: 35px;}
h2 { color: red;}


.PartnerProgramm a {
    text-decoration: none;
 
    font-size: 25px;
 
    color: olive;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;

    z-index: 66;
}
#PartnerPages {
width:99%;
height: 75%;
box-shadow: 0;
border: 0;
}
#indeximg{
position: absolute;
right: 0%;
}
.PartnerProgramm a:hover {
    color: black;
}
.PartnerProgramm {
position: absolute;
left: 5%;
}
.sonderabstand {
margin-top: 3%;
}
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.menu {
    height: 40px;
    width: 100%;
    padding-left:0;
    position:absolute;
    font-size:30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 66;

    background: #4E7100;
    background: -webkit-linear-gradient(top, #306300 0%,#4E7100 100%);
    background: -moz-linear-gradient(top, #306300 0%,#4E7100 100%);
    background: -o-linear-gradient(top, #306300 0%,#4E7100 100%);
    background: -ms-linear-gradient(top, #306300 0%,#4E7100 100%);
    background: linear-gradient(top, #306300 0%,#4E7100 100%);
}
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 60px;
    width:230px;
    z-index: 66;
}
.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;

    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
 
    font-weight: bold;
    font-size: 30px;
 
    color: black;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;

    z-index: 66;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #4E7100;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;

    z-index: 66;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin-top: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;

    z-index: 66;
}
.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
    z-index: 66;
}
.menu ul li a {
    width: 190px;
    padding: 4px 0 4px 40px;
    margin: 0;
    font-size:20px;
    border: none;
    border-bottom: 1px solid #353539;
    z-index: 66;
}
.menu ul li:last-child a { border: none; }


#header{
width: 100%;
height: 32%;
position: absolute;
left: 3.5%;
top:0%;
background: url(images/header.png) no-repeat;
}


#content {
width: 100%;
height: 67.8%;
position: absolute;
top:31.8%;
font-size: 16px;
overflow: auto;
}


#maikaefer {
position: absolute;
right:0%;
bottom:0%;
z-index: 66
}
#wuennenberg {
position: absolute;
top: 3%;
left: 0%;
}
.geschichte {
margin-left:30%;
}
.Herstellung {
margin-left: 10%;
}
#wrapper {
 height: 99%;
 width: 99%;
 position: absolute;
}
#ManuLogo {
 position: absolute;
 z-index: 120;
 left: 6%;
 top: 25%;
 width: 6.8%
}
#background{
border-top: 10px solid green;
border-radius: 10px;
border-bottom: 10px solid green;
width: 75%;
height: 95%;
margin-left: 13%;
position: absolute;
top:0.6%;
display:block;
-webkit-box-shadow: 1px 3px 14px 1px rgba(255,147,89,0.79);
-moz-box-shadow: 1px 3px 14px 1px rgba(255,147,89,0.79);
box-shadow: 1px 3px 14px 1px rgba(255,147,89,0.79);
}
#background:after {
  content: "";
  background: url(images/backcon.png) repeat-y scroll 0% 0%;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}


#navigation {
width: 100%;
height: 63px;
position:absolute;
top:27%;
left: 0px;


}
#kraeuterlogo {
width:35%;
height: 20%;
position: absolute;
top:0;
left: 32%;
}
.indeximg {
position:relative;
border: 3px solid olive;


}


.schnapssorte1 {
border: 3px solid olive;
width: 30%;
height: 25%;
float: left;
position: absolute;
left: 20px;
}
.schnapssorte2{
border: 3px solid olive;
width: 30%;
height: 25%;
float: left;
}
.schnapssorte3{
border: 3px solid olive;
width: 30%;
height: 25%;
float: left;
}
#Magenbitter{
float: left;
width: 100%;
border-radius: 5px;
border: 3px solid olive;
border-top: 0px;
border-bottom: 0px;
font-size: 9px;
}
#Aromatisch {
position:absolute;
margin-left: 0%;
width: 25%;
border-radius: 5px;
border: 3px solid olive;
border-top: 0px;
border-bottom: 0px;
font-size: 9px;
}
#Magenbitter table{
width:25%;
}
#Magenbitter td{
font-size: 14px;
border-bottom:3px solid olive;
}
#Magenbitter th{
border-bottom: 3px solid green;
}
#footer {
color: green;
bottom: 0%;
position: absolute;
height: 2%;
width:100%;
}
#footer a {
color: green;
text-decoration: none;
}
#footer a:hover {
color: olive;
font-weight: bold;
}

Alles anzeigen

wäre super wenn ihr mir helfen könntet das irgendwie hin zu biegen das es funktioniert