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

Problem bei Positionierung

M

momo95

Mitglied
Hallo,
ich habe ein Problem mit der Positionierung von Divs.
Im content habe ich text, der zu lang für die Seite ist (scrollen notwendig).
Ich möchte aber nicht, dass am Div der Balken ist sondern dass die ganze seite scrollt und der balken an der rechten seite zu sehen ist.
Hier die CSS Datei
HTML: 
body
    {
    margin: 0; /* margin and padding only necessary to cater for Mac IE5 */
    padding: 0;
    /*\*/    overflow: scroll; /* because Mac IE5 don't understand */
    }
div
    {
    margin: 0;
    padding: 0;
    }
#content
    {
    position: absolute;
    top: 100px;
    left: 240px;
    width: 909px;
    height: auto;
    bottom: 30px;
    padding: 20px;
    background: white;
    /* Exclude all previous props for Mac IE5 */
    margin: 0px 0px 0px 0px; /* Cater for Mac IE5 */
    /*\*/ margin: 0; /* Put back for all the rest */
    /*\*/ overflow: auto; /* no need for Mac IE5 to see this */
    }
Und hier die HTML
HTML: 
<html>
<head>
<title>Home</title>
<style type="text/css" media="all">
<!--
@import url(styles1.css);
-->
</style>
</head>
<body background="bkgr.jpg">


<div id="content">hallo<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>
</body>
</html>
alles in vereinfachter Form


Ich hoffe ihr könnt mir helfen...
Danke im vorraus
 
Zuletzt bearbeitet:
Hallo Momo95,

es liegt an einem Denkfehler in der CSS - Datei.

left: 240px;
width: 909px;
240 + 909 = 1149

d.h. Deine Bildschirmauflösung müsste 1280 X 780 betragen, dann verschwindet der untere Balken.

Da Du scheinbar aber eine geringere Auflösung hast -1024 X 768 -, erscheint der untere Balken so, wie Du es vorgegeben hast.

Ändere die Breite des Contents und/oder Abstands von Links so dass Du insgesamt 1024 nicht überschreitest, sonst können es nur Besucher richtig sehen die eine 1280 'er Auflösung haben.
 
Tut mir leid! Ich habe die Frage falsch gestellt. der text ist nicht "zu lang" für die seite und ich habe auch nicht unten einen Balken.
Der Text ist zu viel ("zu hoch") für die Seite oder den Div.

Außerdem ist da kein Denkfehler.. ich habe eine Auflösung von 1280x800 also stimmt in der Breite alles

IN DER HÖHE LIEGT MEIN PROBLEM

Drotzdem danke für deine Bemühungen
 
Ich glaube ich komme der lösung näher...

Ich habe nun noch ein bisschen herumpobiert und in der css datei die bottom-angabe etfernt. jetzt kommt rechts der balken wie ich es wollte. Aber unter meinem content hätte ich gerne noch einen "rand". Der content geht jetzt nämlich bis ganz nach unten was ich eigendlich nicht will...
 
danke für den tipp hat aber leider nichts gebracht.

Ums besser zu verstehen:

mein content hat ein andere hintergrundfarbe als der body. man sieht also eine art fenster. wenn ich aber viel text habe, wird das fenster automatisch größer (height: auto) und endet nach dem scrollen am unteren bildschirmende
nun möchte aber dass dort noch ein kleine spalt ist, in dem der Body-hintergrund zu sehen ist, damit das fenster-layout bleibt
 
Zuletzt bearbeitet:
Hallo nochmal,

da haben sich unsere Antworten überschnitten.

was Du benötigst ist dann

padding-bottom: 20px;
 
Ich habe ein Backgroundbild im body und der content ist weiß (man benötigt nur die angabe 'background="white"; ' den rest kann man sich sparen)
der content soll ein weißes viereck sein. nur liegt jetzt die unter kante am bildschirmrand. da hätte ich aber gerne etwas platz wo man mein hintergrundbild sieht
 
Hallo nochmal,

wir antworten uns dauernd überschneidend. ich hab´s jetzt mal nachgebaut, und komme so zur Lösung, allerdings ohne

position: absolute;
Code: 
body
    {
    margin: 0; /* margin and padding only necessary to cater for Mac IE5 */
    padding: 0;
    /*\*/    overflow: scroll; /* because Mac IE5 don't understand */
       }
div
    {
     margin-bottom: 30px ;
    padding: 30px;
    }
#content
    {
/*     position: absolute; */
    margin-top: 100px;
    margin-left: 240px;
    width: 909px;
    margin-bottom: 30px ;


    padding: 40px;
    background-color: #C0C0C0;
    }

mit position: absolute; kriege ich das auch nicht hin.
 
Nun in Bildern:
Bild 1 zeigt den content mit wenig text
Bild 2 zeigt den content mit viel text ganz nach unten gescrollt
bild 3 zeigt den content mit viel text ganz nach unten gescrollt aber mit dem platz
 

Anhänge

  • Bild1.gif
    Bild1.gif
    11,2 KB · Aufrufe: 8
  • Bild3.GIF
    Bild3.GIF
    11,2 KB · Aufrufe: 8
  • Bild2.png
    Bild2.png
    14,7 KB · Aufrufe: 8
Hallo,

hast Du es mal wie in meinem Beispiel Probiert, ohne position: absolute;?

Ich komme da im Moment auch nicht weiter.
 
das hilft leider auch nichts...

ich versteh dass nicht. bei jeder schönen homepage endet der content ungefähr 30px vor bildschirmrand. auch hier
 
Hallo,

bei mir hat´s funktioniert, unterer Rand 30px abstand.

ich habe das auch so gemacht, allerdings ohne positionierung, sondern mit float, oder wie eben Beschrieben.

Sonst fällt mir im Moment leider auch nichts dazu ein.
 
probiere mal dieses Stylesheet speichere es als Test.css ab, bennene es einfach mal kurzfristig in der HTML Datei auf test.css um

Code: 
body
    {
    margin: 0; /* margin and padding only necessary to cater for Mac IE5 */
    padding: 0;
    /*\*/    overflow: scroll; /* because Mac IE5 don't understand */
    background-color: #808000;
    }
div
    {
    margin-bottom: 30px ;
    padding: 30px;
    }
#content
    {
/*     position: absolute; */
    margin-top: 100px;
    margin-left: 240px;
    width: 909px;
    margin-bottom: 30px ;


    padding: 40px;
    background-color: #C0C0C0; /* nur wegen der Optik */
    }
HTML

Code: 
<!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" xml:lang="de" lang="de">

<head>
<title>Home</title>
<style type="text/css" media="all">
<!--
@import url(Test.css);
-->>
</style>
</head>
<body background="bkgr.jpg">


<div id="content">
hallo<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
</body>
</html>

bei mir ist der Abstand dann da.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben