Automatische Browseranspassung/Browserauflösung der Divs

eaten · 21.01.2011

Hallo

Nach vielem Foren durchstöbdern und googlen, wende ich mich nun an euch. In der Hoffnung das ihr mir helfen könnt.

Ich hab meine Seite mit DIVs erstellt. Einen HG Div, der soll so bleiben wie er ist, alles schick und schön.
Nun ist mein Problem folgendes.
Wenn jemand einen 16:9 Bildschirm hat, soll sich der Hauptbereich in die Mitte verschieben. Und wenn jemand einen 4:3 hat, dann soll es ebenfall automatisch an dessen Auflösung in die Mitte schieben. Versteht ihr mein Problem.
Ich habe alles in CSS und HTML erstellt. Entweder stell ich mich etwas Brot an oder...

So, die Box_Sonne, Box_Erde und Box_Eis sollen sich automatisch ausrichten. Und die Boxen Menu, Logo und Main habe ich in die Box_All gepackt, da ich dachte das man es darüber "leichter" ausrichten kann.
Gibt es CSS Lösung oder muss ich was anderes einbauen?

HTML:

<!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>Solar°System</title>
<style type="text/css">
<!--
body {
    background-color: #000102;
    background-repeat: no-repeat;
}
body,td,th {
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}
#Box_BG {
    position:absolute;
    left:0px;
    top:0px;
    width:1024px;
    height:768px;
    z-index:1;
    background-image: url(images/hg.jpg);
}
#Box_Erde {
    position:absolute;
    left:550px;
    top:-100px;
    width:617px;
    height:591px;
    z-index:4;
    background-image: url(images/planet_erde.png);
}
#Box_Eis {
    position:absolute;
    left:450px;
    top:450px;
    width:646px;
    height:413px;
    z-index:3;
    background-image: url(images/planet_eis.png);
}
#Box_Sonne {
    position:absolute;
    left:-250px;
    top:-50px;
    width:897px;
    min-height:930px;
    z-index:2;
    background-image: url(images/planet_sonne.png);
}
#Box_All {
    position:absolute;
    left:240px;
    top:0px;
    width:560px;
    min-height:885px;
    z-index:5;
    background: -moz-linear-gradient(top,  #000,  #080b17);
    opacity: 0.85;
}
#Box_Logo {
    position:absolute;
    left:240px;
    top:0px;
    width:560px;
    height:120px;
    z-index:6;
    background-image: url(images/solarsystembanner.png);
}
#Box_Menu {
    position:absolute;
    left:240px;
    top:120px;
    width:560px;
    height:70px;
    z-index:7;
}
a:link {
    color: ff9707;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: ff9707;
}
a:hover {
    text-decoration: none;
    color: ff9707;
}
a:active {
    text-decoration: none;
    color: ff9707;
}
#Box_Main {
    position:absolute;
    left:260px;
    top:210px;
    width:520px;
    height:500px;
    z-index:8;
}
-->
</style></head>



<body link="#ff9707" vlink="#ff9707" alink="#ff9707">
<div id="Box_BG"></div>
<div id="Box_Erde"></div>
<div id="Box_Eis"></div>
<div id="Box_Sonne"></div>
<div id="Box_All" align="center"></div>
<div id="Box_Logo"></div>
<div id="Box_Menu">
  <table width="100%" border="0">
    <tr>
      <td width="20%" align="center"><a href="entwicklung.html">Entwicklung</a></td>
      <td width="20%" align="center"><a href="team.html">Team</a></td>
      <td width="20%" align="center"><a href="gallerie">Gallerie</a></td>
      <td width="20%" align="center"><a href="kontakt">Kontakt</a></td>
      <td width="20%" align="center"><a href="links">Links</a></td>
    </tr>
    <tr>
      <td colspan="5"><img src="images/line.png" width="558" height="7" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<div id="Box_Main">Hallo</div>
</body>
</html>

Ich hab euch noch ein Screen angehangen um mein "Problem" zu verdeutlichen. Ich hab nämlich einen 16:9 Bildschirm.

http://www.jwill.de/sos.jpg

Besten Dank!!
janina

MyBad · 21.01.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

So ganz habe ich dein Problem nicht verstanden... möchtest du horizontal oder vertikal zentrieren?

Horizontal lässt sich leicht über margin: 0 auto; zentrieren:

HTML:

  #dein_haupt_div{
    width: 600px;
    margin: 0 auto;
  }

Damit das funktioniert, darf das Haup-Div natürlich NICHT absolut positioniert sein!

eaten · 21.01.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

Hi
Ja horizaontale ausrichtung, also links rechts. Es soll sich automatisch dem Fenster anpassen selbst wenn ich es mit meinem 16:9 Bild den FF verkleiner das es automatisch sie neu mittig ausrichtet.
Mit dem was du geschrieben hast. hab ich grad Chaos :eek:

) Die Planeten sind irgendwo, alle untereinander und die Box ganz unten nach ewigen scrollen. Hab auch alle absolut vorher rausgenommen.
Noch ne Idee?

fexx · 21.01.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

schick mal bitte einen link

die komplette seite inkl. planeten soll mittig gesetzt sein?

eaten · 21.01.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

automatisch je nach fenstergröße, ja.
habs ma eben hochgeladen link: Solar°System

sokie · 21.01.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

Am einfachsten wäre es, du würdest einmal klar festlegen, wie breit deine Hintergrundgestaltung tatsächlich ist. mit der Breite der box #Box_BG von 1024px kommst du nämlich gar nicht aus - die Inhalte haben einen overflow. Da ist es einfacher die box direkt so breit zu machen, wie die Inhalte es erfordern, die box relative zu positionieren und mit margin:0 auto zu zentrieren.
Für die Bilder in dieser Box #Box_BG sind die Div container überflüssig. Die könnten direkt absolute positioniert in der box als <img> angeordnet sein. wenn du das als erstes notierst, kannst du dann deinen container für die eigentlichen Inhalte(content) direkt danach notieren (hier position: relative). die notierungsreihenfolge('natürliche' Stapelreihenfolge) bedingt von selbst, dass dieser container über dem Hintergrund liegt. mit Angabe der Breite und des magins von 0 auto wird auch dieser problemlos in deinem Design zentriert.

im inhaltscontainer ist viel zu viel (unnötigerweise) absolute positioniert(bei längeren Inhalten wächst deine Box nicht entsprechend mit den Inhalten) deine Navigation als tabelle ist unlogisch und stört die Seitenstruktur.
wenn du eine ul id="Box_menu" für die Navigation verwendest, hast du nicht nur das passende Element für eine Linkliste, sondern fast Hälfte an markup in der Seite gespart

eaten · 22.01.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

Mein Hintergrund, also die Box_Bg soll "immer" da bleiben wie sie bisher festgelegt ist. Egal welche Auflösung der User hat, da der BG so ist das er in die Hintergrundfarbe ausläuft.

Es soll nur die Box mit dem Logo, dem Menü und dem Main teil, individuell sich anpassen je nachdem welche Fenstergröße der User hat. Und nur horizontal, da die Box "mitwachsen" soll wenn mehr Inhalt ist. Die 'position: absolut' - da sind bestimmt einige falsch.
Warum ich Das Menü in eine tabelle gepackt habe, damit ich besser aufteilen kann mit gleichem Abstand.

Und du sagst ich habe zu viele Divs, und könnte es einfacher reduzieren und somit meiner "automatischen horizontalen Anpassung an Fenster" entgegen kommen.
Ich verstehe sovieles nicht. Hach man :eek:

) Es tut mir auch schrecklich Leid wenn ich euch strapaziere.
Ich überarbeite den Code nochmal und stelle ihn dann wieder rein

lg janina

NiAlMa · 07.02.2011

AW: Automatische Browseranspassung/Browserauflösung der Divs

Lösbar ist das über die Css-Angaben in em! Das funktioniert mit Schriften, Bildern und DIV's