Seite automatisch an Auflösung anpassen

Ortrin

Hallo,

versuche eine Seite zu erstellen. Die Seite soll aus mehreren Grafiken bestehen. Die einzelnen Grafiken sollen teilweise als verlinkt werden und teilweise mit Text belegt werden. Die Grafiken sind mit CSS positioniert. Nun möchte ich, dass sich die Seite automatisch an die Auflösung des jeweiligen Besuchers anpasst.

Ist das irgenwie möglich? Bin schon fast an verzweifeln.

Kann mir jemand helfen? Vielen Dank!!

Hier mein Quelltext:

<HTML>
<HEAD>
<TITLE>Forum</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--

#Box1 {
position:absolute;
left:0px;
top:0px;
width:288px;
height:90px;
}

#Box2 {
position:absolute;
left:288px;
top:0px;
width:518px;
height:90px;
}

#Box3 {
position:absolute;
left:0px;
top:90px;
width:288px;
height:306px;
}

#Box4 {
position:absolute;
left:288px;
top:90px;
width:518px;
height:306px;
}

#Box5 {
position:absolute;
left:0px;
top:396px;
width:288px;
height:249px;
}

#Box6 {
position:absolute;
left:288px;
top:396px;
width:518px;
height:249px;
}

-->
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<DIV ID="Box1">
<IMG SRC="images/Forum_01.gif" WIDTH=288 HEIGHT=90></DIV>
<DIV ID="Box2">
<IMG SRC="images/Forum_02.gif" WIDTH=518 HEIGHT=90></DIV>
<DIV ID="Box3">
<IMG SRC="images/Forum_03.gif" WIDTH=288 HEIGHT=306></DIV>
<DIV ID="Box4">
<IMG SRC="images/Forum_04.gif" WIDTH=518 HEIGHT=306></DIV>
<DIV ID="Box5">
<IMG SRC="images/Forum_05.gif" WIDTH=288 HEIGHT=249></DIV>
<DIV ID="Box6">
<IMG SRC="images/Forum_06.gif" WIDTH=518 HEIGHT=249></DIV>
</BODY>
</HTML>

Tobse

So kann das nix werden.
benutz bitte nächstes mal die formatierungsmöglichkeiten [html ] [/ html]

HTML

<html>
 <head>
  <style type="text/css">
  #container {
     width: 100%;
     height: 100%;
     background: #CCC;
  }
  #box {
     width: 500px;
     height: 500px;
     position: absolute;
     margin-left: -250px;
     vertical-align: center;
     border: 2px solid #000;
   }
  #container img {
     float: left;
  }
 </style>
</head>
<body>
 <div id="container">
  <div id="box">
   <img src="BILD.JPG" border="0">
   <img src="BILD.JPG" border="0">
   <img src="BILD.JPG" border="0"><br>
   <img src="BILD.JPG" border="0">
   <img src="BILD.JPG" border="0">
   <img src="BILD.JPG" border="0">
  </div>
 </div>
</body></html>

Alles anzeigen

Wenn du genaue positionen für die bilder angibst, kann das ja nie im leben variabel sein. Wenn du aber die Bildgröße auchnoch anpassen willst, brauchst du flash/javascript.

sejuma

Das funktioniert so aus verschiedenen Gründen nicht:
Zunächst ist nicht die Bildschirmauflösung maßgeblich, sondern die Größe des jeweils geöffneten Browserfensters. Und die hängt u.a. davon ab, wie groß das Fenster vom Benutzer aufgezogen ist, ob eine Sidebar (Favoriten) geöffnet ist oder wie hoch die obere Menüleiste ist.

In deinem Code werden dir die absoluten Positionierungen zum Verhängnis. Denn je nach Fenstergröße führen dazu, dass bestimmte Inhalte unsichtbar werden und für den Besucher verschwinden.

Mein Tipp: Verzichte auf sämtliche absoluten Angaben (die heißen übrigens so, weil sie meist "absolut" unnötig sind und nur zu Prblemen führen, wenn man sie nicht sinnentsprechend verwendet).
Positioniere besser und ausschließlich mit float- und margin-Angaben.

Ortrin

Danke für die Antwort.
Ich wollte auch, dass sich die Seite an die Größe des jeweiligen Browserfensters anpasst...Also so, dass der Besucher nicht nach rechts scrollen muss sondern höchstens nach unten!

Habe aber den Tipp erfolgt die Div-tags mit float zu positionieren. Funktioniert auch soweit ganz gut (auch wenn das mit der Anpassung der Seite auf 100% Breite noch nicht funktioniert, selbst wenn ich die Größenangaben der Grafiken in % angebe). Nun habe ich aber das Problem, dass wenn ich das Browserfenster verkleinere die mit float positionierten Grafiken die Zeile umbrechen also plötzlich untereinander statt nebeneinander erscheinen. Soweit ich weiss ist das auch normal...aber gibt es irgendeinen Trick wie man dies verhindern kann?

Danke!

Tags