Seite 1 von 1

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

Verfasst: 27.04.2014 17:06
von mps
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:

Code: Alles auswählen

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

Code: Alles auswählen

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

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

Verfasst: 27.04.2014 21:14
von HabNurNeFrage
Hi,

in der Tabelle hast Du keine Chance, sofern die Tabelle sich automatisch dem Inhalt anpasst und das div auch eine prozentuale Breite hat.
Tabellenspalten und Zeilen richten sich immer nach dem größten Inhalt, solange Du keine feste Höhe oder/und Breite dafür angibst.

Feste Breite für die Tabelle oder Spalte oder das div setzen oder die Tabelle beenden, dann das scrollable div einzeln und die Tabelle danach - wenn nötig - wieder starten.

LG

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

Verfasst: 27.04.2014 22:16
von mps
Hallo,

vielen Dank! Auf die Idee hätte ich auch kommen können... :roll:

Jetzt geht auf jeden Fall alles wieder so, wie ich es haben will.

Gruß,
mps