nicht angemeldet
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;
}