kostenloser Webspace werbefrei: lima-city


Höhe und Breite-Problem bei <div>/<table>/<img>/<map>

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mpsftp

    mpsftp hat kostenlosen Webspace.

    Hallo zusammen,

    vorweg: Es geht um diese Seite: http://www.ep-board.de/parkplan.php?view=themen

    (bitte Variable nicht ändern!)

    ich würde gerne ein sehr großes Bild einfügen auf eine von mir erstellte Seite in PHPBB. Das Problem an der Sache ist aber, da es eine Imagemap werden soll, muss das Bild in der originalen Größe bleiben, wodurch aber die Seite sehr unschön aussieht, da sie über den Banner und Footer hinweg nach rechts geht. Dann habe ich mir gedacht, mache ich das Bild in ein <div>-Element, welches so aufgebaut ist:


    <div style="height:50%; width:60%; overflow:scroll;">XXXXXINHALTXXXXX</div>


    Wichtig ist hierbei das overflow:scroll;. Dadurch gibt es an den Seiten des Elements Scrollbalken. Nun ist jedoch die Tabelle völlig verstellt...

    Wie bekomme ich das Bild in volle Größe hin, sodass die DIV-Box über die gesamte Seite (und nicht weiter) geht, aber die Tabelle, also der blaue Hintergrund, sich nicht verändert?

    Noch einmal der gesamte Template-Code:

    <!-- INCLUDE overall_header.html -->
    <!-- PHP -->
    
        $view = $_GET['view'];
    
    
    <!-- ENDPHP -->
    <br />
    <table align="left" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td nowrap="nowrap">
        <table>
            <tr>
                <td>
                    <span class="gensmall">{L_CHOOSE_EXPLAIN}</span>
                </td>
                <td>
                    <form method="get" name="show_plan" action="parkplan.php">
                        <select name="view">
                          <option value="start">{L_CHOOSE_START}</option>
                          <option value="attraktion">{L_CHOOSE_ATTRAKTION}</option>
                          <option value="shows">{L_CHOOSE_SHOWS}</option>
                          <option value="themen">{L_CHOOSE_THEMEN}</option>
                          <option value="gastro">{L_CHOOSE_GASTRO}</option>
                          <option value="shop">{L_CHOOSE_SHOP}</option>
                        </select>
                        <input class="btnlite" type="submit" value="{L_CHOOSE_GO}" />
                    </form>
                </td>
            </tr>
        </table>
        </td>
    </tr>
    </table>
    <br /><br />
    <table class="tablebg" width="auto" cellspacing="1">
    <tr>
    	<th>{L_TITLE}</th>
    </tr>
    <tr>
        <td class="row3" colspan="2"><span class="gensmall">{L_EXPLAIN_BEFORE}
        <!-- PHP -->
    
     switch($view)
    {
      case ("start"):
      echo " einen Bereich, nachdem du oben einen Parkplan ausgew&auml;hlt hast, ";
      break;
    
      case ("attraktion"):
      echo " eine Attraktion ";
      break;
    
       case ("shows"):
      echo " einen Showort ";
      break;
    
     case ("themen"):
      echo " einen Themenbereich ";
      break;
    
       case ("gastro"):
      echo " ein Restaurant ";
      break;
    
      case ("shop"):
      echo " einen Shop ";
      break;
    
      default:
      echo " einen Bereich, nachdem du oben einen Parkplan ausgew&auml;hlt hast, ";
      break;
    }
    
    
    <!-- ENDPHP -->{L_EXPLAIN_AFTER}</span></td>
    </tr>
    <tr>
    	<td height="300px" width="300px" class="row1" align="left">
    	<div style="height:50%; width:60%; overflow:scroll;">
        <!-- PHP -->
    
        switch($view)
    {
      case ("start"):
      include ('styles/subsilver2/template/parkplan_start.html');
      break;
    
      case ("attraktion"):
      include ('styles/subsilver2/template/parkplan_attraktionen.html');
      break;
    
       case ("shows"):
      include ('styles/subsilver2/template/parkplan_shows.html');
      break;
    
     case ("themen"):
      include ('styles/subsilver2/template/parkplan_themenbereiche.html');
      break;
    
       case ("gastro"):
      include ('styles/subsilver2/template/parkplan_gastro.html');
      break;
    
      case ("shop"):
      include ('styles/subsilver2/template/parkplan_shopping.html');
      break;
    
      default:
      include ('styles/subsilver2/template/parkplan_start.html');
      break;
    }<!-- ENDPHP --></div>
    </td>
    </tr>
    <tr>
    <td class="row2" align="left">
    <p>Quelle des Parkplanes: <a href="http://presse.europapark.com/de/presse/fotos-multimedia/" class="postlink" title="Europapark - Presseportal">Europapark</a></p>
    </td>
    </tr>
    </table>
    
    <!-- INCLUDE overall_footer.html -->


    Vielen Dank für eure Hilfe.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Ich bin vor vielen Jahren auch einmal auf dieses Problem gestoßen und fand damals den Hinweis:
    Die Anwendbarkeit von overflow wurde im Entwurf zu CSS 2.1 auf Tabellenzellen (unterstützt momentan keiner der Browser) und inline-block erweitert.

    Quelle:http://www.css4you.de/overflow.html
    Ich habe das so interpretiert, dass overflow sich auf übergeordnete Tabellenelemente nicht auswirkt.

    Die von mir angegebene Quelle wird zwar seit einiger zeit nicht mehr gepflegt, aber anscheinend ist die Aussage immer noch zutreffend.
  4. Füg einfach einfach width="100%" bei <img> ein

    <td height="300px" width="300px" class="row1" align="left">
    	<div style="height:50%; width:60%; overflow: auto;">
        <img src="./images/parkplan.jpg" alt="Parkplan" usemap="plan_themenbereiche" width="100%"/>


    Dann sollte es so aussehen: Link

    Wie bekomme ich das Bild in volle Größe hin, sodass die DIV-Box über die gesamte Seite (und nicht weiter) geht, aber die Tabelle, also der blaue Hintergrund, sich nicht verändert?


    <td height="300px" width="300px" class="row1" align="left">
    <div style="height:70%; width:100%; overflow: scroll;">
        <img src="./images/parkplan.jpg" alt="Parkplan" usemap="plan_themenbereiche" width="100%"/>


    Dann sieht es so aus: Link

    BIldoriginalgröße:

    <td height="300px" width="300px" class="row1" align="left">
    <div style="height:70%; width:100%; overflow: scroll;">
        <img src="./images/parkplan.jpg" alt="Parkplan" usemap="plan_themenbereiche" width="250%"/>


    Link
  5. Autor dieses Themas

    mpsftp

    mpsftp hat kostenlosen Webspace.

    mein-wunschname schrieb:Die von mir angegebene Quelle wird zwar seit einiger zeit nicht mehr gepflegt, aber anscheinend ist die Aussage immer noch zutreffend.


    Schade eigentlich, aber danke! :wink:

    @onur-yavuz: Ich habe die letzte Möglichkeit genommen und angepasst. Vielen Dank für die Hilfe! Habe eben noch etwas von "table-layout: fixed" gelesen.

    Beitrag zuletzt geändert: 27.4.2014 21:54:34 von mpsftp
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!