• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Website wegzoomen bei kleinerem Browser

M

marco9

Neues Mitglied
Hallo Leute,

ich arbeite gerade an einer Homepage über mich selber für ein Schulprojekt, jetzt hab ich aber folgendes Problem:

Wenn ich den Browser kleiner mache (ziehe) bleibt das bild konstant groß und es kommen die scrollbalken an der Seite.
Ich brauche es aber so, dass wenn ich den Browser kleiner mache die Seite wegzoomt und als ganzes Bild da bleibt!
Habe als Hintergrund ein Bild wo ich in Photoshop bearbeitet habe!

wie kann ich das realisieren?

gruß Marco
 
Werbung:
Hintergrundbilder lassen sich nicht skalieren. So gehts auf jeden Fall nicht.

Dass die Elemente sich bei Verkleinerung des Viewports auch verkleinern, kannst Du damit erreichen, dass Du die Größe der Elemente in "%" angibst, das richtet sich dann immer nach dem Elternelement bzw. als oberstes dem Viewport.

Bilder solltest Du aber nicht vom Browser skalieren lassen, weil die dann nicht mehr schön aussehen.

Und über den Sinn, dass die gesamte Seite kleiner werden soll, wenn der Viewport kleiner ist, kann man sich sicher auch streiten. Oder kannst Du Dir vorstellen, Deine Seite in einem Handy oder PDA bei 200x320px verkleinert zu betrachten?
 
ja das hatte ich meinem lehrer auch gesagt, genau aus diesem Grund mit den Handys, aber er meint ich soll es so machen!!!!

das Problem ist mit "%" geht es nicht da ich nicht mit div-containern gearbeitet habe, sondern nur mit dem hintergrundbild?
kann mir da jmd helfen?
 
Werbung:
marco9 schrieb:
ja das hatte ich meinem lehrer auch gesagt, genau aus diesem Grund mit den Handys, aber er meint ich soll es so machen!!!!
Zum Vergrößern anklicken....
Na, wenn er mal nachdenken würde, dann müsste er einsehen, dass das Blödsinn ist. Dann erkennt man doch nichts mehr.
Wenn der Viewport kleiner wird, muss sich das ganze Layout verändern, bzw. macht man für Handys eigentlich ein eigenes Layout, indem man beim Stylesheet sagt "media='handheld'".

das Problem ist mit "%" geht es nicht da ich nicht mit div-containern gearbeitet habe
Zum Vergrößern anklicken....
Hä?

sondern nur mit dem hintergrundbild?
kann mir da jmd helfen?
Zum Vergrößern anklicken....
Was?

Was hat das mit dem Bild auf sich? Hintergrundbilder kann man nicht skalieren. Mir schwant, dass Dein Hintergrundbild eigentlich keines ist. Wie sieht das aus? Gibts nen Link zur Seite? Du machst doch nicht Dein Layout mit einem Hintergrundbild???
 
ne die seite ist nicht online soll erst ein referat drüber halten und er will das, hier hab ich mal die .htm usw hochgeladen:

File-Upload.net - Upload.zip

die zip beinhaltet main.css, background.png und startseite.html
doch wie es ausschaut mach ich das, bin ziemlicher anfänger^^
kannst ja mal anschauen
 
Nein, ich schau mir keine fremden zips an. Ich schau mir nur verlinkte Seiten an.
 
Werbung:
die seite is nich online, weil ich sie nur für die schule als projekt mache!

wie kann ich sie dann zeigen?

main.css:

body {
font: 10pt arial, helvetica, sans-serif;
color: #fffff;
background-color: #ffffff;
}
Zum Vergrößern anklicken....

startseite.html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>PORTFOLIO</title><meta name="author" content="Tamara Lahner">
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="main.css" />




<!-- Kopfbereich -->
</head>

<body>


<div class="content1">
<img src="Background.png" border="0" alt="portf" usemap="#tammy">
<map name="tammy">
<area shape="circle" coords="530, 420, 60"
href="Lebenslauf.html" alt="Lebenslauf" title="Lebenslauf">

<area shape="circle" coords="999, 551, 60"
href="Websites.html" alt="Websites" title="Websites">

<area shape="circle" coords="651, 317, 60"
href="Gutscheine.html" alt="Gutscheine" title="Gutscheine">

<area shape="circle" coords="997, 205, 60"
href="Fotografie.html" alt="Fotografie" title="Fotografie">

<area shape="circle" coords="1226, 434, 60"
href="http://www.html.de/html-und-xhtml/Flyer & Co..html" alt="Flyer & Co." title="Flyer & Co.">
</map>










</div>
</body>
</html>
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
marco9 schrieb:
die seite is nich online, weil ich sie nur für die schule als projekt mache!
wie kann ich sie dann zeigen?
Zum Vergrößern anklicken....
Indem Du sie online stellst.

Bilder sieht man im Code nicht.
Aber ich sehe, dass Dein Menü eine Imagemap ist. Glaubst Du, das klappt gut, wenn man Images abstellt?
 
ich weiß nicht, ob das gut klappt?
auf jedenfall ist das ja dass Problem mit dem zoomen, wegen dem bild, verstehst?

gruß Marco
 
Werbung:
Problem

Aber im allgemeinen verstehst das Problem schon?

es ist halt so da ich das Bild als menü habe, geht es nicht wenn ich die größe als % angebe, und deswegen frag ich mich ob es da ne andere lösung fürs wegzoomen gibt?

gruß und vielen dank für deine Hilfe
 
marco9 schrieb:
Wenn ich den Browser kleiner mache (ziehe) bleibt das bild konstant groß und es kommen die scrollbalken an der Seite.
Zum Vergrößern anklicken....
Ja, das ist normal und das ist gut so.

Ich brauche es aber so, dass wenn ich den Browser kleiner mache die Seite wegzoomt und als ganzes Bild da bleibt!
Zum Vergrößern anklicken....
Mit dem Effekt, dass man es irgendwann nicht mehr lesen kann? Ich finde Deinen Ansatz schon nicht sinnvoll. Vielleicht habe ich deswegen so Probleme mit Deinen Fragen.

Ich hab mir Dein zip dann doch mal ausgepackt.

Das macht keinen Sinn, das zu verkleinern. Was meinst Du, was ich von dem Menü, denn das soll es ja sein, auf meinem Netbook mit 1024x600 Auflösung (also einem Viewport von vielleicht 400px Höhe) dann noch sehe? Zumal die Schrift in den Menüpunkten auch zur Grafik gehört unddurch die Verkleinerung des Browsers total verpixelt und unleserlich wird.

Das einzige, was hier sinnvoll wäre, sind SVG (Scalable Vector Graphics). Inwieweit das umsetzbar ist, dazu gabs hier mal nen ausführlichen Thread.

Anderernfalls könnte man die einzelnen Würfel als einzelne Objekte darstellen und den Browser bei der Positionierung mit einspannen. Dann kann das Menü aber bei unterschiedlich großen Viewports ganz anders aussehen. Da müsste man mal drüber grübeln, was man da machen kann.

Aber so wie es im Moment gelöst ist, macht es keinen Sinn, das zu zoomen (du bräuchtest ja nur die Größe des <img> als width="100%" und height="100%" angeben), weil es dann schnell unleserlich wird. Das als Menü sieht zwar schön aus, ist aber eigentlich gar nicht Webtauglich, weil die Scrollbalken, wie Du selbst gemerkt hast, ja auch nicht gerade nutzerfreundlich sind.

Alternativ bleibt ja jedem Besucher die Option, die Inhalte über die Browser-Zoom-Funktion nach Belieben zu zoomen.
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
hast recht

ja klar ich geb dir vollkommen recht zu dieser Antwort du hast es perfekt getroffen!

aber mein Lehrer (schlechter Entwickler *lol*) meinte halt wenn ich das mache dass es dann quasi kleiner wird bekomm ich ne 1 ansonnsten keine 1.

und ich hab ihm deine Gründe auch genannt, aber das ist ihm schnurz egal^^

gruß Marco
 
Bilder werden nicht verkleinert, wenn du das Browserfenster kleiner ziehst als die Bilder groß sind. Wenn du das Bild als Hintergrund einstellst sollte es funktionieren.
 
Werbung:
Hintergrundbilder kann man nicht skalieren.

Wie gesagt...<img ... width="100%" height="100%"> aber das ist idiotisch. Und davon eine gute Note abhängig zu machen - kein Wunder, wenn wir bei Pisa schlecht abschneiden...
 
pisa lol

also da mit pisa geb ich dir vollkommen recht, ich bin ja beruflich Entwickler (Objective-C und Java), aber in der Berufschule meint der Lehrer halt es soll so sein (was wirklich schwachsinn ist)! aber ich mach es einfach in diesem Fall, persönlich weiß ich ja dass es anders besser ist, dann hab mich meine Note und ihr eure Ruhe oder?^^

gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben