Scrollbar automatisch und Positionierung angepasst

**112 115** · 09.06.2010 13:19

Hallo,

ich hoffe, jemand kann mir bei meinen zwei Fragen helfen, würde mich sehr freuen.

Ich arbeite mit Dreamweaver und hatte auch schon einmal einen Kurs in Sachen HTML und CSS, ist aber schon wieder etwas her. Der Barrierefreiheit halber und weil's einfach praktischer ist, ist es wohl ratsam, mit Div-Containern zu arbeiten.

Ich habe nun einen totalen Container, der alle anderen Container beinhaltet. Seine Größe ist an der Seitenmenüleiste orientiert und damit fest, er ist position:absolute, der Body ist ebenfalls position:absolute. Von Fixed wurde ja wegen dem IE abgeraten.

Nun ist aber schon auf der ersten Seite meiner HP, dem Index, mehr Inhalt als der totale Div-Container an Größe besitzt. Folglich müsste der Browser doch sofort eine Scrollbar einrichten, mit deren Hilfe ich den weiter unten stehenden Inhalt hochrollen kann.
Leider tut er das nicht, stattdessen vergrößert er einfach völlig selbstständig den Totalen Container in seiner Größe weiter nach unten (bei der Ansicht, nicht im Code).

~~~~

Mein zweites Problemchen ist, dass meine Seitenansicht eine feste Größe besitzt, egal ob ich position:absolute, position:fixed oder position:relative eingebe. Mein Ziel ist aber, dass sich der Totale Container immer an die aktuelle Bildschirmbreite anpasst, warum tut er das mit den genannten Befehlen nicht?

Ich hoffe, es ist in Ordnung, wenn ich jetzt einfach mal den Container-Code einfüge, aber sonst versteht womöglich keiner, wovon ich rede.

HTML-Code:

<style type="text/css">
<!--
body { background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px; position:absolute; 
}

#general {
	position:absolute;
	top:1px;
	left:auto;
	left:10px;
	top:18px;
	width:900px;
	height:712px;
	z-index:1;
	background-color: transparent;
}
#menue_rechts {
	position:absolute;
	left:11px;
	top:19px;
	width:144px;
	height:709px;
	z-index:2;
	background-color: transparent;
}
#bildlinks {
	position:absolute;
	left:766px;
	top:17px;
	width:144px;
	height:711px;
	z-index:3;
	background-color: transparent;
}
#ueberschrift {
	position:absolute;
	left:184px;
	top:18px;
	width:553px;
	height:74px;
	z-index:4;
}
#apDiv1 {
	position:absolute;
	left:157px;
	top:105px;
	width:640px;
	height:346px;
	z-index:5;
}
#apDiv2 {
	position:absolute;
	left:177px;
	top:132px;
	width:566px;
	height:322px;
	z-index:5;
}
#bildbox1 {
	position:absolute;
	left:318px;
	top:506px;
	width:281px;
	height:289px;
	z-index:6;
}
#bildbox2 {
	position:absolute;
	left:319px;
	top:812px;
	width:281px;
	height:289px;
	z-index:7;
}


-->
</style>
</head>

Zusammengefasst, meine Probleme sind:

- bei zu viel Inhalt im Container mit z-index1 kommt trotzdem keine Scrollbar im Browser, warum nicht?
- der Browser überlässt dem Inhalt nicht die gesamte Bildschirmbreite..?

Über Hilfe würde ich mich sehr freuen.

Ich benutze zum Anschauen meiner erstellten DW-Ergebnisse IE7.

Gruß

**wildmieze** · 09.06.2010 13:33

Für die gewünschten Scrollbalken schau mal nach "overflow" .. und Du hast dem Container eine feste breite von 900px gegeben, da kann er sich nicht anpassen .. versuch mal width:100%; .. wenn das nicht funktioniert .. hmm .. ich nutze eigentlich nur in Notfällen mal position:absolute; und kenne mich daher damit nicht so gut aus ..

**112 115** · 09.06.2010 13:52

Danke für deine schnelle Antwort, Wildmieze. Leider haben die Tipps nichts gebracht bei mir. Er vergrößert den totalen Div-Container weiterhin, nur dass ich jetzt eine parallel zur Seiten-Scrollleiste verlaufende Scrollleiste habe.

Auch width:100% hat ihn nicht interessiert. -.-

**112 115** · 09.06.2010 14:23

EDIT: Gut, das mit der Scrollleiste hätte ich dann wohl geschafft, ich muss die Div-Container natürlich ineinander verschachteln. ^^

Das Positionierungsproblem will jedoch nicht weichen.

**spyrotone** · 09.06.2010 15:56

Hassemal den kompletten Code (html und css)?

**112 115** · 09.06.2010 19:32

Ja, wobei das schon fast der komplette Code war. Ich habe das CSS nicht von einer externen Sheet-Datein eingebunden, das steht oben alles im Header.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seite</title>
<style type="text/css">
<!--
body { background-color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:10px; 
}

#general {
	position:absolute;
	top:33px;
	left:24px;
	width:100%px;
	height:712px;
	z-index:1;
	background-color: transparent;
	
}
#menue_links {
	position:absolute;
	left:11px;
	top:19px;
	width:144px;
	height:709px;
	z-index:2;
	background-color: transparent;
}
#bildlinks {
	position:absolute;
	left:766px;
	top:17px;
	width:144px;
	height:711px;
	z-index:3;
	background-color: transparent;
}
#inhalt {
	position:absolute;
	left:183px;
	top:51px;
	width:602px;
	height:710px;
	z-index:2;
	overflow:scroll;
}
#ueberschrift {
	position:absolute;
	left:25px;
	top:0px;
	width:553px;
	height:74px;
	z-index:3;
}
#box {
	position:absolute;
	left:19px;
	top:77px;
	width:566px;
	height:322px;
	z-index:4;
}
#bild1 {
	position:absolute;
	left:345px;
	top:491px;
	width:281px;
	height:289px;
	z-index:5;
}
#bild2 {
	position:absolute;
	left:167px;
	top:428px;
	width:281px;
	height:289px;
	z-index:5;
}
#bild3 {
	position:absolute;
	left:0px;
	top:316px;
	width:281px;
	height:289px;
	z-index:3;
}

#bild4 {
	position:absolute;
	left:1px;
	top:634px;
	width:281px;
	height:289px;
	z-index:3;
}
#bild5 {
	position:absolute;
	left:2px;
	top:952px;
	width:281px;
	height:289px;
	z-index:3;
}
#bild6 {
	position:absolute;
	left:3px;
	top:1271px;
	width:281px;
	height:289px;
	z-index:3;
}
#bild7 {
	position:absolute;
	left:4px;
	top:1593px;
	width:281px;
	height:289px;
	z-index:3;
}
#bild8 {
	position:absolute;
	left:5px;
	top:1914px;
	width:281px;
	height:289px;
	z-index:3;
}

#tabelle {
	position:absolute;
	left:49px;
	top:2228px;
	width:100px;
	height:100px;
	z-index:4;
}
.style1 {color: #FFFFFF}
#tabelle_neu {
	position:absolute;
	left:36px;
	top:2235px;
	width:212px;
	height:102px;
	z-index:3;
}
.style5 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 11px;
}




-->
</style>
</head>


<div id="general">
<div id="menue_links"></div>
</div>
<div id="inhalt">
<div id="ueberschrift"><img src="wdn_schriftzug_neu.png" width="553" height="74" border="0"/></div>
<div id="box"><img src="box.PNG" width="566" height="322" border="0" /></div>
<div id="bild1"><a href="#"><img src="bild1.png" alt="kk" width="281" height="289" border="0" /></a>
<div id="bild2"><a href="#"><img src="bild2.png" alt="" width="281" height="289" border="0" /></a></div>
<div id="bild3"><a href="#"><img src="bild3" alt="" width="281" height="289" border="0" /></a></div>
<div id="bild4"><a href="#"><img src="bild4" alt="" width="281" height="289" border="0" /></a></div>
<div id="bild5"><a href="#"><img src="bild5" alt="" width="281" height="289" border="0" /></a>
</div>
<div id="bild6"><a href="#"><img src="bild6" alt="" width="281" height="289" border="0" /></a></div>
<div id="bild7"><a href="#"><img src="bild7" alt="" width="281" height="289" border="0" /></a></div>
<div id="tabelle_neu">
  <table width="210" border="1">
    <tr>
      <td width="93"><span class="style5">Text1</span></td>
      <td width="101"><span class="style5">Text2</span></td>
    </tr>
    <tr>
      <td><span class="style1">Text3</span></td>
      <td><span class="style1">Text4</span></td>
    </tr>
    <tr>
      <td><span class="style1">Text5</span></td>
      <td><span class="style1">Text6</span></td>
    </tr>
    <tr>
      <td><span class="style1">Text7</span></td>
      <td><span class="style1"><a href="#" target="_blank">Text8</a></span></td>
    </tr>
    <tr>
      <td><span class="style1">Text9</span></td>
      <td><span class="style1"><a href="#" target="_blank">Text10</a></span></td>
    </tr>
  </table>
</div>
</div>

</div>











</body>
</html>

**spyrotone** · 10.06.2010 09:18

Ich verstehe nicht ganz, wie es im Ergebnis werden soll. Soll der Bereich rechts den verbleibenden Bildschirm füllen?

**112 115** · 17.06.2010 22:36

Genau, es soll kein schwarzer Rand bleiben. Das Mindeste wäre aber, dass, sollte der Inhalt auf solch einen schmalen Kasten beschränkt sein, dieser zentriert im Bildschirm sein sollte. Hauptsache es sieht nicht so an den Rand gequetscht aus (habe selbst einen sehr breiten Bildschirm).

Ich hatte gedacht, mit position:absolute wäre das kein Problem, weil sich die Internetseite der jeweiligen Bildschirmbreite anpasst.

zur Startseite vom TP

Thema: Scrollbar automatisch und Positionierung angepasst

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Scrollbar automatisch und Positionierung angepasst

Ähnliche Themen

Captchafeld angepasst sr_feuser_register

[Suchen] Programmierer für Template angepasst an Typo3

Login/Mitgliederbereich (angepasst) + Newsletter

Scrollbar: rechts automatisch, unten keine

Nested Templates: Seiten werden nicht angepasst

Stichworte

Aktive Benutzer

Aktive Benutzer