Höhe und Breite-Problem bei <div>/<table>/<img>/<map>
Verfasst: 27.04.2014 17:06
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:
Wichtig ist hierbei das
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:
Vielen Dank für eure Hilfe.
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>
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ä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ä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 -->