| Autor |
Nachricht |
fred_
Dabei seit: 13.03.2007
Ort: Bern
Alter: -
Geschlecht: 
|
Verfasst Mi 14.03.2007 10:35
Titel [css] Image-Map als HTML |
  |
|
[Ausgangslage]: Es geht um die Erweiterung einer bestehenden Website, d.h. die Seitengrundstruktur ist als gegeben zu betrachten (CSS dazu darf nicht verändert werden).
[Problem]: Ich habe eine Image-Map, die per JavaScript/CSS ein spezielles Tooltip für die entsprechenden Regionen einblendet. Wegen den erwähnten Restriktionen und dem speziellen JavaScript-Konstrukt kann das Bild (der Image-Map) nicht per CSS (background-image) eingebunden werden, sondern nur als IMG-Tag (HTML).
Die Seite ist so aufgebaut, dass links ein Menü ist und rechts davon das Bild angezeigt wird. Realisiert habe ich das mit zwei DIVs.
Hier die CSS-Definition dazu:
#divLinks
{
float:left;
width:200px;
}
#divRechts
{
margin-left:200px;
}
Im Firefox und im Safari wird alles korrekt dargestellt, jedoch im Internet Explorer führt die grosse Breite des Bildes (>1000px) im rechten DIV zum Umbruch (das Bild wird nun unterhalb der Menüliste angezeigt, statt rechts davon).
Gibt es eine einfach Lösung für dieses IE-Problem?
|
|
| |
  |
 |
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 24
Geschlecht:
|
Verfasst Mi 14.03.2007 17:28
Titel
|
|
|
das ist alles etwas ungenau, was du beschreibst, aber probier mal das von hinten anzugehen (falls ich dein problem richtig verstanden hab):
| Code: |
.divlinks {
width:200px;
}
.divrechts {
float: right;
}
|
dann im html
| Code: |
<div class="divrechts">...</div>
<div class="divlinks">...</div>
|
wenn das nicht klappt poste doch mal den code komplett...
grüße
|
|
| |
|
|
fred_
Dabei seit: 13.03.2007
Ort: Bern
Alter: -
Geschlecht:
|
Verfasst Do 15.03.2007 11:22
Titel
|
|
|
vielen dank für den input. die idee ist nicht so schlecht, aber leider hat's nicht geklappt. um mein problem etwas besser zu verdeutlichen, habe ich versucht, alles wichtige in einem doc zusammenzufassen:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Testseite Anordnungs-Problem</title>
<style type="text/css">
body
{
margin-left: 10px;
margin-right: 10px;
}
#banner
{
width:100%;
float:left;
background-color: #CCCCCC;
}
#divleft
{
float:left;
width:100px;
background-color: #F00000;
}
#divright
{
margin-left:100px;
background-color: #B00000;
}
#content
{
background-color: #BAAA00;
width:97%;
}
#contentbox
{
background-color: #BABB00;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div id="banner"> Banner-Platzhalter </div>
<div id="divleft">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</div>
<div id="divright">
<div id="contentbox">
<div id="content">
<div id="Map">
<img src="inc/map.gif" border="0" width="1200px" height="600px" usemap="#Map1">
<map name="Map1">
<area id="part1" shape="rect"coords="700,100,800,200" onMouseOver="functionXY()" onMouseOut="functionYZ()" >
<area id="part2" shape="rect"coords="710,100,810,200" onMouseOver="functionXY()" onMouseOut="functionYZ()" >
</map>
</div>
</div>
<div id="contentFooter"> Content-Footer-Platzhalter</div>
</div>
Footer-Platzhalter
</div>
</body>
|
das bild auf der rechten seite ist also relativ gross --> und deshalb wird das bild nach unten (unter das menü) verschoben.
ich suche eine lösung, die auch im IE funktioniert.
vielen dank nochmals.
Zuletzt bearbeitet von Nimroy am Fr 16.03.2007 11:21, insgesamt 1-mal bearbeitet
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 24
Geschlecht:
|
Verfasst Do 15.03.2007 12:52
Titel
|
|
|
bevor ich jetzt dein wirrwar  auseinandernehme... hier mein ansatz, vll. bauste deins (dein wirrwar  ) einfach drumrum. geht in ff, ie6, ie7. isses das, was du willst?
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Testseite Anordnungs-Problem</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#rechts {
float: right;
width: 1200px;
background-color: #ff0000;
margin: 0;
}
#links {
float: left;
width: 100px;
background-color: #ffff00;
margin: 0;
}
#content {
width: 1300px;
}
</style>
</head>
<body>
<div id="content">
<div id="rechts">
<img src="inc/map.gif" border="0" width="1200px" height="600px" usemap="#Map1">
</div>
<div id="links">
link<br />
link<br />
link
</div>
</div>
</body>
</html>
|
Zuletzt bearbeitet von fuchsbau am Do 15.03.2007 12:53, insgesamt 1-mal bearbeitet
|
|
| |
|
|
fred_
Dabei seit: 13.03.2007
Ort: Bern
Alter: -
Geschlecht:
|
Verfasst Do 15.03.2007 16:11
Titel
|
|
|
besten dank erst mal für die antwort ... ich teile deine meinung bzgl. wirrwarr voll und ganz; wie gesagt, ich habe das vergnügen, eine bestehende applikation zu erweitert (der teil mit der image-map ist von mir).
mit einem zusätzlichen div geht es - wie vorgeschlagen - ausgezeichnet. der einzige nachteil dabei ist, dass ich verschiedenen image-maps dynamisch in den content lade ... mit unterschiedlichen width, versteht sich. dass ist auch der grund, warum ich auf einen umschliessenden div verzichten wollte.
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 24
Geschlecht:
|
Verfasst Fr 16.03.2007 11:20
Titel
|
|
|
sag das doch  das ändert natürlich die sache n bissl.
dann fallen mir noch 2 möglichkeiten ein:
a) PHP
das umschließende div dann irgendwie so wie
| Code: | <?php echo '<div style="width:' . $_POST['width'] . 'px;">'; ?>
shizzle
</div>
|
musste dann halt jedesmal width mit übergeben. aber müsste ja irgendwie gehn
b) halt absolut positionieren
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Testseite Anordnungs-Problem</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#rechts {
position: absolute;
top: 0;
left: 100px;
background-color: #ff0000;
margin: 0;
}
#links {
width: 100px;
background-color: #ffff00;
margin: 0;
}
</style>
</head>
<body>
<div id="rechts">
<img src="inc/map.gif" border="0" width="1200px" height="600px" usemap="#Map1">
</div>
<div id="links">
link<br />
link<br />
link
</div>
</body>
</html> |
glaube da bekommste imma scrollbars. so, jetzt dein nächster einwand... 
Zuletzt bearbeitet von fuchsbau am Fr 16.03.2007 11:22, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
tooltip, css und image map
[html] link aus image-map im neuen fenster öffnen
input type=image + image map
image map
Rollover,wenn über Image-Map?
Image Map erstellen
|
|
Willkommen auf dem Portal für Mediengestalter
