✔ img src width prozentual angeben

Status
Nicht offen für weitere Antworten.
S

schmitti81

Mitglied
Hi,

ich hab ein Problem. Ich habe mein Homepage-Layout an einem Laptop erstellt mit der Auflösung 1280x800.
Wenn ich jetzt die Auflösung änder, z.B. 1024x768 dann verschiebt das sich. Hab versucht das mit width="100%" zu ändern, das bringt aber irgendwie nichts.
Die obere Grafik passt es an, nur die linke Grafik partout nicht.

Hier meine Dateien:
style.css:
Code: 
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#LeftPart{
position: absolute; 
border:none;
top: -20px; 
left: 0; 
width: 288px; /*Width of left frame div*/
height: auto;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: white;
}


#TopPart{ 
position: absolute; 
top: 0;
left: 288px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 145px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: white;
}

#MainPart{
position: fixed; 
left: 288px; /*Set left value to WidthOfLeftFrameDiv*/
top: 145px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}


* html body{ /*IE6 hack*/
padding: 150px 0 0 290px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #MainPart{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #TopPart{ /*IE6 hack*/
width: 100%;
}

AreaMap.php:
Code: 
<?php
echo";
<img src=\"Left_Main.gif\" width=\"100%\" name=\"veraenderlich\" usemap=\"#imgmap\" border=\"0\">
<MAP NAME='imgmap'>
<AREA SHAPE=\"polygon\" COORDS='10,334,32,340,42,320,18,312' HREF='montag.html' target=\"_self\" ALT='Montag' onmouseover=\"on('montag');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='21,309,43,319,51,302,30,291' HREF='dienstag.html' target=\"_self\" ALT='Dienstag' onmouseover=\"on('dienstag');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='32,288,52,298,62,283,46,269' HREF='mittwoch.html' target=\"_self\" ALT='Mittwoch' onmouseover=\"on('mittwoch');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='47,266,63,277,73,260,56,251' HREF='donnerstag.html' target=\"_self\" ALT='Donnerstag' onmouseover=\"on('donnerstag');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='58,248,73,256,82,243,64,234' HREF='freitag.html' target=\"_self\" ALT='Freitag' onmouseover=\"on('freitag');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='66,232,82,240,90,226,72,218' HREF='samstag.html' target=\"_self\" ALT='Samstag' onmouseover=\"on('samstag');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='74,215,92,223,101,212,84,200' HREF='sonntag.html' target=\"_self\" ALT='Sonntag' onmouseover=\"on('sonntag');\" onmouseout=\"off('origimage')\">
<AREA SHAPE=\"polygon\" COORDS='85,198,102,208,114,194,98,184' HREF='extra.php' target=\"_self\" ALT='Extra' onmouseover=\"on('extra');\" onmouseout=\"off('origimage')\">
</MAP>;"
?>

Main.php
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<script src="Navigation.js" type="text/javascript"></script>
</head>


<body>


<div id="LeftPart">
<?php
include 'Area_Map.php';
?>
</div>


<div id="TopPart">
<img src="Top.gif" width="100%">
</div>


<div id="MainPart">
</div>

</body>
</html>

Kann mir bitte jemand helfen. Ist echt dringen. Hier der Link zu der online-Seite:
http://dfz.cocktail4all.info/2007/DFZ/Main.php

Vielen Dank schon im Vorraus.
schmitti81
 
MsStriker hat gesagt.:
irgendwie verstehe ich dein Problem nicht.
Zum Vergrößern anklicken....

Hast du dir die Seite mal mit einer niedrigeren Auflösung angeschaut?
Da fehlt das copyright unten links und die beiden Grafiken sind nicht bündig.

Ich möchte, dass die Grafiken egal bei welcher Auflösung, bündig aneinander sind und das copyright zu sehen ist.

Danke & Gruß
schmitti81
 

Anhänge

  • falsch.jpg
    falsch.jpg
    77,4 KB · Aufrufe: 66
  • richtig.jpg
    richtig.jpg
    59,6 KB · Aufrufe: 59
Hi,

wenn das Copyright, das Bestandteil der Grafik Left_Main.gif ist, beim Skalieren des Browserfensters nach oben wandern soll, muß das Grafikelement mit einer relativen Höhe, wie z.B. height:100%, ausgezeichnet werden.
 
Also das Copyright ist auch bei einer niedrigen Auflösung da, wenn du mal die Bildruntertaste drückst, dann erscheint das Copyright, dies kommt daher, dass dein linkes Bild zu groß für die Auflösung ist.
 
Wenn ich das height=\"100%\" in der Datei AreaMap.php angeb, dann zeigt er mir den linken Teil gar nicht mehr an.
Das copyright ist in dem Bild.

@MsStriker: Deswegen möchte ich ja die Größe des Bildes in Prozent haben, damit es immer an die Auflösung angepasst wird.

Gruß
Michael
 
Ich habe vom Grafikelement gesprochen:

Code: 
<img src="Left_Main.gif" width="100%" height="100%" name="veraenderlich" usemap="#imgmap" border="0">
 
Und die Zeile steht doch in der Datei AreaMap.php.
Wenn ich da dann height="100%" angeb, zeigt es mir den linken Teil gar nicht mehr an, sondern nur die Grafik oben.

Danke & Gruß
schmitti81

P.S.: Hab das mal auf meinem oben geposteten Link so gelassen, dann kannst du dir das anschauen.
 
Zuletzt bearbeitet:
Probier's mal hiermit:

Code: 
#LeftPart{
position: absolute;
border:none;
top: -20px;
left: 0;
width: 288px; /*Width of left frame div*/
min-height:100%; /* moderne Browser */
height:auto !important;  /* moderne Browser */
height:100%;  /* IE */
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: white;
}
und lass das Attribut height=100% im Grafikelement.
 
Jetzt verkleinert es die Grafik, nur noch ein anderes Problem. Die beiden Grafiken passen nicht mehr aneinander, siehe Homepage.
Warum stimmt das nicht mehr?
EDIT: Es verzieht die Grafik wenn ich das Browserfenster größer mach.

Gruß & vielen, vielen Dank für deine Hilfe.
schmitti81
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück