Höhe und Breite-Problem bei <div>/<table>/<img>/<map>
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angegebene quelle
attraktion
aussage
bereich
bild
blaue hintergrund
blocken
boxen
break
code
element
hilfe
http
problem
quelle
show
start
switch
tabelle
url
-
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ä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 -->
Vielen Dank für eure Hilfe. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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. -
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 -
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!
@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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
