3 Tabellen in Dynamischen Content nebeneinander

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

Gastl

Lösund dabei?

https://www.tutorials.de/threads/drei-t…-setzen.338669/

Kurokami

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:

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

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;
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

MrMurphy

Hallo

Zitat

Ich weiß das ist viel Code, aber ich komme sonst leider nicht wirklich weiter und verzweifel noch.

Das allein wäre noch kein Problem.

Die beiden Quelltexte (HTML und CSS) sind zudem leider noch vollkommen unstrukturiert und enthalten nicht mehr benötigte Angaben. Als Außenstehender hat man da überhaupt keine Chance den nachzuvollziehen.

Es wäre zudem schön wenn du dir mal die Mühe machen würdest (die du uns ja zumutest) aus deinem hier veröffentlichen Quelltext eine Seite zu erstellen. Dann würdest du feststellen, das die mit dem in deinem vorigen Beitrag verlinkten Bild überhaupt nichts zu tun hat.

Ich kann auch nicht nachvollziehen, um welche Tabellen / div es überhaupt geht.

Deshalb ist zur Zeit nur eine allgemeine Hilfe wie von Gastl möglich.

Gruss

MrMurphy

Kurokami

Okay, also ich habe bereits mit dem Quelltext eine Seite erstellt, wie man sehen kann. Und bei mir sieht es so aus wie auf dem Screenshot,

wie dem auch Sei ich sende hier die wichtigen stellen des codes damit es strukturierter / übersichtlicher ist.

Code

<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>

Alles anzeigen

Code

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


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


#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;
}

Alles anzeigen

In Notepad++ ist es relativ übersichtlich durch die Farbliche unterteilung der einzelnen Elemente, zumindest für mich.

Falls das nicht genug ist gäbe es nur noch die möglichkeit das ich eine Zip datei erstelle.

Gruss

Kuro

djheke

position:absolute ist völlig unnötig und wird immer zu Problemen führen. Vielleicht doch nochmal die Grundlagen lernen.

Kurokami

Sollte ich lieber Relative benutzen? oder vielleicht auch garnichts?
So wie ich es in meinem Fachabitur lerne, wende ich es an. Ich kann mich ja eh nicht verschlechtern, mit hilfe kann ich nur mehr Lernen.

djheke

position:relative ist normalerweise auch nicht notwendig. Die Tabellen können auch weg.

Kurokami

Ich hatte es vorher mit divboxen, ich bin auf tabellen umgestiegen weil nichts mehr so funktionierte wie es sollte, Bild & Text waren nicht mehr untereinander, ich habe aber auch keine Erinnerung mehr daran was ich geändert habe wodurch es nicht mehr funktionsfähig war.

EDIT: Ich habe es geschafft.

Grevas

In den Entwicklertools merk ich recht schnell, dass das Markup zerschossen ist. Da geht irgendwo irgendwas zu früh* zu. Die zweite Tabelle ist nicht im mehr in dem Vorgesehen <div>. Dass die Tools sogar Kommentare als Knoten anzeigen ist überhaupt kein gutes Zeichen.

3min später in Entwicklertools diesen Zustand hergestellt:

Zweite Tabelle in den div#Magenbitter verschoben, der ersten Tabelle float:left; verpasst.
Es geht jedenfalls auch als außenstehender

*bzw. ein Element wird doppelt geschlossen.

Kurokami

Danke dir Grevas, das ist eine sehr hilfreiche antwort.

Tags