Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: 3 Tabellen in Dynamischen Content nebeneinander

  1. #1
    Teeny
    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Beitrag 3 Tabellen in Dynamischen Content nebeneinander

    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.
    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&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>
    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;
    }
    wäre super wenn ihr mir helfen könntet das irgendwie hin zu biegen das es funktioniert
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.152
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

    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.
    Unbenannt.jpg

    der HTML Code & CSS Code:
    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&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>
    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;
    }
    Ich weiß das ist viel Code, aber ich komme sonst leider nicht wirklich weiter und verzweifel noch.

    mit Freundlichem Gruß
    Kuro

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

    Hallo

    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

  5. Folgende User finden die Antwort von MrMurphy gut:


  6. #5
    Teeny
    Themenstarter

    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

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

  7. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

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

  8. #7
    Teeny
    Themenstarter

    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

    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.

  9. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

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

  10. #9
    Teeny
    Themenstarter

    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

    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.

    Alt.jpg

    EDIT: Ich habe es geschafft.
    Geändert von Kurokami (03.06.2015 um 11:29 Uhr)

  11. #10
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: 3 Tabellen in Dynamischen Content nebeneinander

    2015-06-04 00_13_11-Maikäferflugbenzin - Bad Wünnenberger Kräutermanufaktur.png

    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:
    2015-06-04 00_22_27-Maikäferflugbenzin - Bad Wünnenberger Kräutermanufaktur.jpg

    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.
    Geändert von Grevas (04.06.2015 um 01:26 Uhr)

  12. Folgende User finden die Antwort von Grevas gut:


Ähnliche Themen

  1. 2 Tabellen Nebeneinander
    Von t-flash im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 14.09.2013, 16:13
  2. bilder und Tabellen nebeneinander
    Von taotao im Forum HTML & CSS Forum
    Antworten: 33
    Letzter Beitrag: 23.01.2008, 12:29
  3. IE stellt Zellhöhen in dynamischen Tabellen falsch dar?
    Von NetCrack im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 22.12.2006, 06:51
  4. 2 Tabellen nebeneinander
    Von mh:design im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 13.02.2005, 23:32
  5. Tabellen nebeneinander
    Von Foulfang im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 08.05.2004, 22:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •