nicht angemeldet
Skalierbare Website
Hallo!
Ich habe folgendes Problem: Ich möchte für jemanden eine skalierbare Website programmieren. Der Person ist es wichtig, dass die Bilder immer möglichst groß (je nach Auflösung) angezeigt werden.
Ferner soll bei kleinen Auflösungen das Bild durchaus über den gesamten Containerbereich sichtbar zu sein. Und das ist der Knackpunkt: Dieses Problem konnte ich bislang nicht lösen. Wenn ich in meiner Auflösung den Browser einfach von rechts nach links zusammenziehe, sollte zuerst das Bild bis an die linke Containerkante verschoben werden. Erst dann soll es skalieren.
Wie ist das mit HTML/CSS möglich?
Danke und grüße,
Martin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clem Wawrzyniak, Photographer</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="JavaScript">
function fenster()
{
if(document.all)
{
breit=document.body.clientWidth;
hoch=document.body.clientHeight;
alert("Breite: "+breit+" Hoehe: "+hoch);
}
if (document.layers)
{
breit = self.innerWidth;
hoch = self.innerHeight;
alert("Breite: "+breit+" Hoehe: "+hoch);
}
}
</script>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "navi1.png"
button2= new Image();
button2.src = "email.jpg"
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
</script>
</head>
<body onload="fenster();">
<div class="wrapper">
<div class="top">
<div class="fb"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FClem-Wawrzyniak-Photographer%2F115966175141027%3Fref%3Dts&layout=button_count&show_faces=true&width=30&action=like&font=verdana&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:114px; height:21px;" allowTransparency="true"></iframe></div>
<hr />
</div>
<div class="content"><div class="contentimg"><img src="pics/fashion/01.jpg" alt ="Fashion by Clem Wawrzyniak"/></div></div>
<div class="navigation"><hr />
<div class="navititle"><img src="clemwawrzyniak.jpg" alt="Clem Wawrzyniak" width="110%" /></div>
<div class="contentimg">
<a href="#" onmouseover="austausch1.src='navi2.png';"
onmouseout="austausch1.src='navi.png';"><img src="navi.png" name="austausch1" alt="Navigation" width="60%"/></a>
</div>
</div>
</div>
</body>
</html>
@charset "UTF-8";
/* div Container */
div.wrapper {
margin: 0 auto;
width: 75%;
}
div.content {
width:100%;
}
div.contentimg {
text-align:right;
}
div.navititle {
float:left;
width:35%;
}
div.navigation
{
width:100%;
}
/* Navi */
#navi {
font-family: 'Gruppo', serif;
font-size: 19px;
font-style: normal;
font-weight: 100;
color:#69696c;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.008em;
word-spacing: 0em;
line-height: 2.4;
}
ul#navi {
margin: 0; padding: 0em;
text-align: right;
margin-bottom:-40px;
}
ul#navi li {
list-style: none;
display: inline;
margin: 0; padding: 13px;
}
ul#Navigation a, ul#Navigation span {
float: left; width: 6em;
margin: 0.4em; padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#navi a, * html ul#navi span { /* Korrektur fuer IE 5.x */
width: 8em;
w\idth: 6em;
}
ul#navi a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#navi div {
clear: left;
}
.clear {
clear:left;
}
.content img {
width:75%;
}
div.fb {
text-align:right;
}
div.navigation {
padding-bottom:50px;
}
hr {
border: 0px; /* Für Firefox und Opera */
border-top: solid 1px #8a8a8a;
border-bottom: transparent;
float:none;
}
a:link {
font-family: 'Gruppo', serif;
color:#69696c;
text-decoration:none;
}
a:visited {
font-family: 'Gruppo', serif;
color:#69696c;
text-decoration:none;
}
-
Wie ist das mit HTML/CSS möglich?
Gar nicht. Dynamische Grössenänderung geht weder mit dem einen noch dem anderen.
-
Wie ist das mit HTML/CSS möglich?
Gar nicht. Dynamische Grössenänderung geht weder mit dem einen noch dem anderen.
Gibt es dazu denn die Möglichkeit ein Javascript zu verwenden? Oder andere Möglichkeiten?
-
Gibt es dazu denn die Möglichkeit ein Javascript zu verwenden?
Ja natürlich, was sollte dagegen sprechen?
Oder andere Möglichkeiten?
Jegliche serverseitige Programmiersprache, die dir zur Verfügung steht. Allerdings auch nur in Kombination mit Javascript, da du erstmal an die Viewportgrösse kommen musst.
Zusätzliche Alternative: Flash
-
Gibt es dazu denn die Möglichkeit ein Javascript zu verwenden?
Ja natürlich, was sollte dagegen sprechen?
Oder andere Möglichkeiten?
Jegliche serverseitige Programmiersprache, die dir zur Verfügung steht. Allerdings auch nur in Kombination mit Javascript, da du erstmal an die Viewportgrösse kommen musst.
Zusätzliche Alternative: Flash
Flash möchte ich vermeiden... alleine auf Grund der nicht vorhandenen iPhone Kompatibilität.
Könntest du mir einen Hinweis geben, wie ein solches Script aussehen könnte oder wo ich ein ähnliches finde. Hab so etwas leider noch nie programmiert.
-
Flash möchte ich vermeiden... alleine auf Grund der nicht vorhandenen iPhone Kompatibilität.
Sag das nicht so laut ..... die iPhone-Jünger da draussen glauben immer noch, dass ihr Gerät perfekt ist und einen direkten Kontakt zu ihrem Gott, Steve Jobs, herstellt. Alledings tut es das nur in Form von Bewegungsprofilen und vielen Euros für veraltetete Hardware. Das aber nur am Rande. Jedem das Telefon, was er will *g*
Könntest du mir einen Hinweis geben, wie ein solches Script aussehen könnte oder wo ich ein ähnliches finde. Hab so etwas leider noch nie programmiert.
Wenn dir bereits die Grundlagen fehlen, ist da nix mit nem einfachen Hinweis ausser auf http://de.selfhtml.org/javascript.
Ansonsten schau dir mal diverse Frameworks an wie MooTools, jQuery, Scriptacolous o.ä.Grundsätzlich nimmst du die Viewportgrösse und skalierst danach das Bild. Wie du das genau umsetzt, wirst du dir anlernen müssen oder du bezahlst jemanden dafür, dass er/sie es für dich macht.
-
Grundsätzlich nimmst du die Viewportgrösse und skalierst danach das Bild. Wie du das genau umsetzt, wirst du dir anlernen müssen oder du bezahlst jemanden dafür, dass er/sie es für dich macht.
Danke, das habe ich aber soweit auch bislang so gemacht! Mir fehlt nur der Hinweis auf das Hauptbild... ich möchte es erst skalieren lassen bis es den Hauptcontainer ausgefüllt hat. Hier fehlt mir der Zusammenhang?!
-
ich möchte es erst skalieren lassen bis es den Hauptcontainer ausgefüllt hat. Hier fehlt mir der Zusammenhang?!
schau dir den Eventhandler "onresize" an, immer wenn der feuert, prüfst du ob das Bild skaliert werden muss.
-
Ein Nebengedanke, im Browser skalierte Bilder sehen evtl. nicht mehr ganz so schön aus wie wenn in einem Grafikprogramm (mit etwas mehr Aufwand) skaliert wird. Das ist vielleicht auch noch eine Überlegung wert.
-
-
-
-
Hi!
Flash möchte ich vermeiden... alleine auf Grund der nicht vorhandenen iPhone Kompatibilität.
Wie cool. Ich dachte immer, das sei mal ein Grund Flash zu benutzen...
--
Vergesst Chuck Norris.
Sponge Bob kann unter Wasser grillen!
-
-
-
-