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

Div neben Container - Bildschirmgrößen unkompatibel

A

aJunkie

Mitglied
Hallo,

ich bekomme es einfach nicht hin, links oder rechts vom Container eine Div zu positionieren, die bei jeder Bildschirmgröße proportional bleibt.
Bei mir sieht alles okay aus. Bei anderen Größen verschiebt sich der Div, sodass es dann auf der rechten gar nicht mehr zu sehen ist, weil man scrollen müsste.
Als Notlösung habe ich die Div von links aus positioniert. Wenn ich es auf die linke Seite positinioniere, verdeckt der Div den Container, worin Navi bzw. Content drin sind.

Hier die CSS:
PHP: 
body {
    padding:0;
    margin:0;
    color:#000000;
    font-family: verdana, tahoma, sans-serif;
    font-size: 13px;
    background-color: #6DBFFB;
    background-image: none;
    background-repeat: no-repeat;
}
a {
    text-decoration:none;
    background-color:inherit;
    font-weight:bold;
    color:#286ea0;
}
a:hover {
    background-color:inherit;
    text-decoration:underline;
    color:#303030;
}
h1 {
    margin:0;
    font-size:16px;
    letter-spacing:-3px;
    text-align:right;
    background-color:inherit;
    color:#ffffff;
}
h2 {
    margin:5px 0 6px 0;
    font-size:18px;
    letter-spacing:1px;
    font-weight:bold;
    text-align:center;
}
h3 {
    font-size:15px;
    font-weight:bold;
    text-align:center;
}
p {
    line-height:18px;
}
p2 {
    line-height:16px;
}
right {
    text-align:right;
}
#title {
    width:1050px;
    height:140px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    border:3px solid #000000;
}
#container {
    margin:10px auto 10px auto;
    width:1050px;
    padding:5px;
    background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
    color:#000000;
    border:10px solid #000000;
}
#werbung {
    color:000000;
    width:120px;
    border:0px #000000 solid;
    height:600px;
    margin-top:5px;
    text-align:center;
    float:right;
}
#release {
    background:#ffffff;
    color:000000;
    border: 0px;
    position:absolute;
    left: 1380px;
    top:185px;
    float:right;
    width:auto;
    text-align:center;
    border:4px #000000 solid;
    hight:auto;
}
#sidebar {
    float:left;
    width:100px;
    text-align:center;
    margin-top:5px;
}

#sidebar3 {
    float:left;
    width:120px;
    text-align:center;
    margin-top:5px;
}

#sidebar2 {
    float:right;
    width:100px;
    text-align:center;
    margin-top:5px;
}

#main {
    width:805px;
    float:right;
    margin-right:10px;
    font-size:13px;
    min-height:700px;
}

#main2 {
    width:780px;
    float:right;
    margin-right:10px;
    font-size:13px;
    min-height:700px;
}

#footer {
    clear:both;
    font-size:12px;
    text-align:center;
}
#menu {
    width: 100%;
    background: #ffffff;
    font-family: Verdana;
    font-size: 12px;
    line-height: 22px;
    float: left;
}
/*--Setzt alle Abstände auf "Null"--*/
* {
    margin: 0;
    padding: 0;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
    float: left;
    width: 130px;
    list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    border: 1px solid #ffffff;
    background: #000000;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
    text-decoration: none;
    display: block;
    text-align: center;
    background: #000000;
    border: 1px solid #ffffff;
    color: #ffffff;
}
#menu a:hover {
    background-color:#6DBFFB;
    color:#000000;
    border:1px solid #000000;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
    position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
    position: absolute;
    z-index: 2;
    display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
    display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/

* html #menu ul li {
    float: left;
    width: 100%;
}
/*--nur für IE 7 erkennbar--*/

*+ html #menu ul li {
    float: left;
    width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
    behavior: url(csshover3-source.htc);
    font-size: 100%;
}
*html #menu ul li a {
    height: 10%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:link {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border: 1px solid #ffffff;
    background: #000000;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:hover {
    color: #000000;
    background: #6DBFFB;
    border: 1px solid #000000;
}
/*-- Menü 2 --*/
.menu2 {
    display:block;
    text-align:center;
    width:100px;
    height:38px;
    line-height:38px;
    font-size:14px;
    font-weight:bold;
    background:#ffffff url(/img/button.jpg) no-repeat;
    color:#6DBFFB;
}
.menu2:hover {
    background-color:#ffffff;
    color:#ffffff;
    text-decoration:none;
}
/*-- Menü 3 --*/
.menu3 {
    display:block;
    text-align:center;
    width:100px;
    height:38px;
    line-height:38px;
    font-size:14px;
    font-weight:bold;
    background:#ffffff url(/img/button1.jpg) no-repeat;
    color:#F9C5DB;
}
.menu3:hover {
    background-color:#ffffff;
    color:#ffffff;
    text-decoration:none;
}
.credits {
    margin-bottom:0;
    font-size:11px;
    background-color:inherit;
    color:#aaaaaa;
    text-align:center;
}
.credits a {
    background-color:inherit;
    color:#aaaaaa;
}
.small {
    font-size:10px;
}
.center {
    text-align:center;
}
Release soll rechts oder links vom Container (Container oder Main?!) erscheinen.

Zurzeit wie gesagt:
position:absolute;
left: 1380px;

Ich habe es mit float versucht.
Main und Container float:left
Release: float: right;

Dann verschiebt sich der Inhalt nach unten.

Hier die HTML Notlösung im Footer:
PHP: 
<div id="release">
  <h2>Releases</h2>
  <p><a href="/"><img src="/img2/" alt="" width="200" height="400" border="0" /></a></p>
  <br />
 <p><a href="/"><img src="/img2/.gif" alt=" - Meine " width="111" height="303" border="0"  /></a></p>
  <br />
  <p><a href="/"><img src="/img2/.gif" alt="feat." width="175" height="425" border="0" /></a></p>
</div>
</div> (schließt den Containter)
Weiß jemand Rat?
 
Zuletzt bearbeitet:
Deine Lösung hängt immer ab vom jeweiligen Viewport.

Du musst #release absolut in Relation zu #container posotionieren, z.B. so:

Gib #container noch ein
Code: 
position: relative;

Dann positioniere #release absolut hierzu:

Code: 
#release {
    background: #f00;
    color:#000000;
    border: 0px;
    position:absolute;
    left: 1080px;
    top:185px;
        text-align:center;
    border:4px #000000 solid;
}

Noch besser wäre es, wenn du alles in einen zentrierten #wrapper packst und innerhalb dessen mit float und margin anordnest, z.B. so:
Dreispaltiges Layout, zentriert mit fixen Breiten
 
Die Release Box funktioniert einwandfrei.
Da aber links von der Seite noch Platz ist, wollte ich diese mit Werbung füllen.
Die Werbung ist auch zu sehen, aber auch nur bei der Auflösung 1600x1200.
Bei kleineren Bildschirmen sieht man die Box gar nicht mehr und kann auch nicht hinscrollen.
Es existiert einfach nicht.

Wie soll ich das denn nun positionieren?
Ich habe viel rumprobiert.

Hier CSS:
PHP: 
body {
    padding:0;
    margin:0;
    color:#000000;
    font-family: verdana, tahoma, sans-serif;
    font-size: 13px;
    background-color: #6DBFFB;
    background-image: none;
    background-repeat: no-repeat;
}

#container {
    margin:10px auto 10px auto;
    width:1050px;
    padding:5px;
    position:relative;
    background:#ffffff url(/img/unten-rechts.jpg) bottom left no-repeat;
    color:#000000;
    border:10px solid #000000;
}

#werbung2 {
    color:000000;
    width:120px;
    border:4px #000000 solid;
    height:auto;
    position:absolute;
    right:1080px;
    float:right;
    top:0;
    text-align:center;
}
HTML (footer):
PHP: 
<div id="werbung2">
  <p>Anzeige</p>
Script Code
</div>
</div> (macht Container zu)
</body></html>
 
Ich erwähnte ja bereits, dass diese relativen und absoluten Positionierungen Nachteile haben, weil ihr Inhalt bei zu geringer Fensterbreite verschwinden kann.
Deshalb wäre eine Lösung mit einen dreispaltigen Layout ohne absolute Positionierungen besser, da man hier scrollen kann.
 
Bitte immer beachten, dass weder die Bildschirmgröße, noch die Auflösung wirkliche Relevanz beim Erstellen von Websites haben. Das erkennt man auch daran, dass die Layoutsprache CSS keine Ahnung hat, wie groß der Bildschirm ist und man die Auflösung auch nur über JavaScript ermitteln kann.

Das einzige, was zählt, ist der Viewport. Das ist der Bereich im Browserfenster, in dem die Website dargestellt wird. Das Browserfenster muss aber nicht maximiert sein und man kann es verkleinern. Aber selbst, wenn es maximiert ist, wird der Viewport immer deutlich kleiner sein als das, was die Auflösung hergibt. Denn ein Browser hat einen Rahmen, zahlreiche Tool- und manchmal sogar Sidebars.
 
Ja, das weiß ich ja.
Aber der Viewport soll links mit der Werbebox anfangen.
Der zeigt mir nur den Container an.
Da fängt für den Browser praktisch die Homepage an.
Die Werbebox links daneben gehört also für ihn nicht dazu.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben