Scrollbalken und Breite Problem.. [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : Scrollbalken und Breite Problem..

R300

2008-05-25, 18:14:57

EDIT: Eig neues Thema, aber da es sich um die selbe Seite handelt, habe ich keinen neuen Thread erstellt.
Siehe Post 10

Hallo,
auf dieser Seite ist alles richtig solange das Menü nicht so groß ist, dass rechts ein Scrollbalken entsteht.
http://www.tanzschule-am-ring.de/tarbeta2008/new/index.php?section=kurse&grid=9

Sobald der Scrollbalken beim Firefox da ist, verschwindet "Aktuelles" unter den Inhalt, weil es jetzt zu wenig Platz hat.
Nun könnte ich mehr Platz für "Aktuelles" reservieren, aber dann siehts ohne Scrollbalken blöd aus und man verschenkt wertvollen Platz.

(Beim IE7 wird noch mehr Platz verschenkt, weil da der Scrollbalken immer da ist und nicht in die sichtbare Fenster breite eingerechnet wird. )

Gibt es eine Möglichkeit mit JavaScript dynamisch zu erkennen wann der Scrollbalken da ist und wann nicht (ohne Seitenreload)?

R300

2008-05-25, 19:03:13

Mhh

Es scheint nicht am Scrollbalken zu liegen...das Problem tritt nur dann auf wenn das Menü länger ist als der Inhalt.
Das tritt beim IE7 nicht auf.

Woran kann denn das liegen?

CSS Code:

#container {
padding: 0px;
margin: 0px;
background: transparent url(leftback.gif) no-repeat top left; }

#menu_container {
float:left;
margin-top:192px;
}

#menu_top {
width: 291px;
height: 59px;
background: transparent url(menu_top.gif) no-repeat top left;
}

#menu {
background-color: #e1803c;
border-right: 2px solid #fff;
width: 239px;
padding: 25px; }

span {
display: none; }

#menu_bottom {
background: transparent url(menu_bottom.gif) no-repeat top left;
width: 291px;
height: 59px;
margin: 0;
padding: 0; }

#impressum {
width: 291px;
height: 37px;
margin-top:20px;
padding: 0; }

#main {
border-left: 2px solid white;
border-right: 2px solid white;
margin: 0 0 0px 300px;
background: #fff url(content_back.gif) repeat-x;
min-width: 315px;
}

#inhalt {
background: transparent url(banner.jpg) no-repeat top center;
padding-top: 200px;
float:left;
}

#inhalt p {
margin-left: 11px;
margin-right: 20px;
padding: 10px; }

#footer {
clear:both;
text-align: center;
padding-bottom: 30px;
background-color: #fff; }

#aktuelles {
background: #fbfbf2 url(page_back.gif) repeat-x fixed;
margin-top:210px;
float:right;
}

#aktuelles2 {
background: transparent url(aktuelles.gif) 10px 0 no-repeat;
font: 10px verdana, sans-serif;
padding-top: 60px;
width: 170px; }

#aktuelles ul {
margin-top: 5px;
padding: 0px; }

#aktuelles li {
line-height: 1.1;
list-style-type: none;
display: block;
padding-top: 10px;
margin-bottom: 2px;
margin-left: 0;
padding-left: 15px;
padding-bottom: 5px; }

#aktuelles li a:link, a:visited {
font-size: 10px;
font-weight: bold;
font-family: verdana, sans-serif;
color: #000000; }

#aktuelles li a:hover, a:active {
background-color: #969696;
color: #fffc11; }

DanMan

2008-05-25, 19:41:36

Nun, es rutscht runter, weil du oben (über JS?) nicht genügend Platz machst.

Um abzufragen ob ein Scrollbalken da ist, oder nicht musst du dich fragen, wann erscheint er denn? Nämlich dann, wenn der Inhalt der Seite höher ist, als der angezeigte Ausschnitt. Das packst du in JS, und es sollte funktionieren.

P.S.: Warum du dafür überhaupt JS brauchst verstehe ich aber sowieso nicht.
P.P.S.: Wenn die Breite von Tabellenspalten festgelegt werden soll, dann macht man das besser mit <col> und <colgroup>.

R300

2008-05-25, 20:34:46

Um abzufragen ob ein Scrollbalken da ist, oder nicht musst du dich fragen, wann erscheint er denn? Nämlich dann, wenn der Inhalt der Seite höher ist, als der angezeigte Ausschnitt. Das packst du in JS, und es sollte funktionieren.

Äh ja ist mir klar und wie? Das hängt ja davon ab wie viel vom Menü grade offen ist...

Wenn der Inhalt größer ist als das Fenster und der Scrolbalken erscheint = kein Problem!

Wenn das Menü größer ist als das Fenster UND größer als der Inhalt UND der Scrollbalken erscheint = Problem!

P.S.: Warum du dafür überhaupt JS brauchst verstehe ich aber sowieso nicht.

Ohne kriege ich keine variable Breite des Inhalts Bereichs hin.
Wenn ich die Breite des div "inhalt" nicht begrenze floatet "aktuelles" nicht nach rechts sondern bleibt unten.

LordZed

2008-05-26, 08:03:49

R300

2008-05-26, 14:05:16

Ich habe hier bei mir in der Firma den IE6 und ich muss sagen, dass die Seite da ein paar Probleme macht.
Wenn ich über "Unser Angebot" fahre und sich dadurch das Menü öffnet, dann refreshed die Seite pausenlos, weswegen ich nicht runterscrollen kann, da die Seite nach einem refresh immer wieder ganz oben ist.

OK, das kann ich nicht testen, weil ich keinen IE6 habe.:rolleyes:

Desweiteren frage ich mich, ob es richtig ist, dass das Fenster "Aktuelles" unten rechts untern dem Content liegt...

Genau das ist ja das Problem. Darum gehts eig im Thread^^
Hast du den IE7 Zuhause? der zeigt es immer richtig an.

Ach und wenn du es als STRICT definierst, dann sollte es das auch sein! ;)
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tanzschule-am-ring.de%2Ftarbeta2008%2Fnew%2Findex.php%3Fsection%3Daktuelles&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0
Das sind ja nur die & Zeichen im Javascript... Hab den JS jetzt in Kommentare gesetzt. ;)

Am besten wäre es wenn die beiden letzten Sätze aus Post 4 beantwortet werden könnten.
Dann könnte ich nämlich das ganze JavaScript Zeug einfach rausnehmen...

Also kurz zusammengefasst:
div "inhalt" und div "aktuelles" befinden sich im div "main".
div "inhalt" floatet links und div "aktuelles" floatet rechts.

So sollte es sein. div "aktuelles" tut das allerdings nicht wenn die Größe vom div "inhalt" nicht so weit verkleinert wird, dass div "aktuelles" rechts daneben passt.
Und wie ich die Größe des divs "inhalt" ohne JS relativ zur Fensterbreite anpasse weiß ich nicht.

Kennt jemand eine bessere Lösung?

DanMan

2008-05-26, 17:01:40

Also kurz zusammengefasst:
div "inhalt" und div "aktuelles" befinden sich im div "main".
div "inhalt" floatet links und div "aktuelles" floatet rechts.

So sollte es sein. div "aktuelles" tut das allerdings nicht wenn die Größe vom div "inhalt" nicht so weit verkleinert wird, dass div "aktuelles" rechts daneben passt. Wie ich die Größe des divs "inhalt" ohne JS relativ zur Fensterbreite anpasse weiß ich nicht.

Kennt jemand eine bessere Lösung?
So z.B.: Du gibst dem mittleren Div eine Breite in %, und rechts und links einen margin in der Höhe, in der die Navi- und die Aktuelles-Box breit sein sollen. Dann setzt du die 2 mit Hilfe von absoluter Positionierung in die entstandenen Lücken. Setzt U.u. vorraus, dass die mittlere Spalte die längste sein wird.

Ich würde dir übrigens auch empfehlen, die Navi nicht bei mouseover, sondern bei click zu öffnen, weil es sonst zu chaotisch ist.

R300

2008-05-26, 20:01:22

Perfekt, Danke!

Ich habs zwar noch etwas anders gelöst, aber absolute Positionierung und margin waren sehr hilfreich.:smile:

DanMan

2008-05-26, 20:10:59

Perfekt, Danke!

Ich habs zwar noch etwas anders gelöst, aber absolute Positionierung und margin waren sehr hilfreich.:smile:
Gern geschehen. Hättste doch gleich gefragt. ;)

R300

2008-05-30, 18:25:46

Hab jetzt wieder ein anderes Problem, diesmal nur mit dem IE7.

http://www.tanzschule-am-ring.de/tarbeta2008/new/index.php?section=impressum

Aktuelles wird nicht mehr angezeigt im IE7. Bei Firefox ist es aber da.

Ich habe auch leider keine Ahnung warum das auf einmal verschwunden ist.
Hab versucht die kleinen Designänderungen rückgängig zu machen aber es bringt nichts. :(

Hilfe!^^

DanMan

2008-05-31, 12:09:50

Ich hab's nicht getestet, aber erhöh' doch mal den z-index. Außerdem würd ich für #aktuelles nicht margin-top, sondern einfach nur top setzen, wenn es schon absolut positioniert ist.

R300

2008-05-31, 14:09:09

bringt auch nichts.:frown:

BTW: Hat jemand noch den IE6? Würde auch mal gerne sehen wie es da aussieht.

mapel110

2008-05-31, 22:27:49

Im IE6 wirds auch nicht angezeigt. Aktuelles fehlt dort.
Opera 9.5 build 10034 funzt.

<div id="aktuelles2">
<ul>
<li><a href="index.php?section=aktuelles&id=4">07.06.2008 - Übungsparty</a></li>
<li><a href="index.php?section=aktuelles&id=24">21.06.2008 - Sommerball</a></li>
<li><a href="index.php?section=aktuelles&id=31">24.07.2008 - Präsentation</a></li>
<li><a href="index.php?section=aktuelles&id=32">24.11.2008 - Herbstball</a></li>
</ul>
</div>
Da liegt wohl irgendwo der "Fehler", aber ich kann dir da nicht weiterhelfen. Da fehlen mir noch Kenntnisse.

R300

2008-06-01, 13:34:11

Wie kommst du darauf, dass da der Fehler sein soll? Ich vermute ihn irgendwo im css code...
Ich sehe bei dem Code schnipsel nichts besonderes/ falsches.

mapel110

2008-06-01, 13:44:36

Wie kommst du darauf, dass da der Fehler sein soll? Ich vermute ihn irgendwo im css code...
Ich sehe bei dem Code schnipsel nichts besonderes/ falsches.
Es muss ja auch nichts falsches sein, sondern nur etwas, was der IE6 und IE7 nicht verstehen.
Weiß nicht, obs da nicht auch Schwierigkeiten bei HTML gibt. Höre sonst auch nur von CSS-Problemen. Das stimmt.

R300

2008-06-01, 16:54:35

Wuhu ich habs geschafft.

Falls es jemanden interessiert:
http://www.brunildo.org/test/IE_raf3.html

Bei mir war es der Test 2.
Ich hatte im footer
clear:both;
und
heigth:1px; stehen.

Die Höhe entfernt und siehe da, es geht.^^

Sieht es denn jetzt im IE6 genauso aus wie im Firefox/IE7?
Auch alle Abstände usw.

mapel110

2008-06-01, 19:05:46

Also "Aktuelles" auf der rechten Seite fehlt immernoch bei IE6.

Sphinx

2008-06-02, 22:35:36

Gibt es eine Möglichkeit mit JavaScript dynamisch zu erkennen wann der Scrollbalken da ist und wann nicht (ohne Seitenreload)?

Das wird dir nicht helfen ~ Es sind noch viele CSS Fehler die Artefakte verursachen ~ especially IE6.0.

Ich würde dir vielleicht Raten das Layout nochmal zu bearbeiten.

Stichwort : 3 column layouts [ Hier mal ein Link ] : http://www.yaml.de/fileadmin/examples/03_layouts_3col/3col_2-3-1.html