Hallo,
also ich habe das jetzt mal verscuht und eine 2te Tabelle mit "float: right" eingesetzt, nunja, es sieht sehr interessant aus aber leider ist es nicht so wie ich mir das vorstelle vielleicht kann ja jemand helfen.
der HTML Code & CSS Code:
<!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äferflugbenzin - Bad Wünnenberger Krä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ä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ösisch </a> </li>
</ul>
</li>
<li>
<a href="Maikaefer.html">Herstellung</a>
<ul>
<li> <a href="Maikaefer.html"> Maikä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ünnenberger Wald gefangen hatten,
waren wir in der lage diesen sehr speziellen Likör herzustellen. Vorsicht das Drachenblut kann Gläser rot färben,
ist jedoch für Kenner ein Genuss.
Extrakte aus Angosturarinde und Toncabohnen in Kombination mit weiteren exotischen Pflanzenauszügen verleihen ihm seinen einmaligen Geschmack.
</td>
</tr>
<tr>
<td>
<img src="images/sorten/Magenbitter/Jesuiten.png" width="100%" height="32%"/>
Dieser kräftige Magenbitter erinnert durch seinen prägnanten Geschmack leicht an das Drachenblut.
In diesem Magenbitter wird das alte Kräuterwissen des Jesuitenordens mit berücksichtigt.
Als die Jesuiten diese Kräuter aus Südamerika mitbrachten,
wollten sie keinen Likör herstellen.
Vielmehr nutzten sie diese Krä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äferflugbenzin entwickelt und ist somit der älteste Likör in unserer Produktpalette.
15 ausgesuchte Kräuter in Apothekenqualität geben ihm seinen unverwechselbaren, aromatischen Geschmack.
</td>
</tr>
</table>
</div>
</div>
<div class ="Schnapssorte2" id="Aromatisch">
<table>
<th>
<h1 class="Schnapstext">Aromatischer Likö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ör? Nachdem wir mit den Magenbittern großen Erfolg hatten,
wurde die Bitte an uns herangetragen einen milden Likör anzubieten, der auch andere Geschmäcker anspricht.
Dieser Kaffeelikö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ör überzeugt durch seinen milden, sü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änke an.
Dieser milde Likör mit Anisgeschmack erfreut sich auch bei Nichtpilgern wachsender Beliebtheit und verfeinert durch sein Aroma besonders gut heisse Teegeträ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ör</h1>
<div class="Schnapscontent">
<br>
<img src="images/sorten/fruchtig/schlehen.png" width="30%" height="32%"/>
Nicht jedes Jahr können wir unseren Schlehenlikör herstellen,
denn der Schwarzdorn trögt nur in besonderen Jahren ausreichend Schlehen.
Er ist also eine echte Rarität und wir nur in kleinen Mengen hergestellt.
Schlehen werden nach dem ersten Frost geerntet. Die niedriegen Temperaturen lösen in den Früchten Prozesse aus,
die den Zuckergehalt erhöhen und die Bitterstoffe reduzieren.
<hr>
<img src="images/sorten/fruchtig/quitten.png" width="30%" height="32%"/>
Der Quittenlikör wird nach Hausrezept ausschließlich aus heimischen Quitten hergestellt.
Durch das spezielle Herstellungsverfahren sind wir in der Lage, die sehr fruchtige Note der Quitte in Likörform zu konservieren.
Wer ihn einmal getrunken hat, mö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> <a href="Datenschutz.html">Datenschutz</a> </div>
</div>
</body>
</html>
Alles anzeigen
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;
float: right;
margin-right: 0%;
right: 0%;
height: 70%;
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
Ich weiß das ist viel Code, aber ich komme sonst leider nicht wirklich weiter und verzweifel noch.
mit Freundlichem Gruß
Kuro