[CSS] Problem bei Menü-Balken <div>
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
aussehen
auto
bleiben
browser
code
dank
ding
http
index
internet
kasten
opus
position
problem
rand
sagen
streifen
test
text
-
ho ;)
Zuerst möchte ich angeben, dass ich bereits einen Thread zu dem folgenden Thema aufgemacht habe.
http://www.lima-city.de/boards/thread/80364
Da das erste Problem (das Menü soll immer oben bleiben) bereits gelöst wurde, und mein jetziges Hauptproblem ein ganz anderes ist, habe ich beschlossen, einen neuen Thread zu eröffnen. Falls diese Entscheidung nicht sinnvoll gewesen sein sollte, bitte ich den zuständigen Moderator die Themen zusammenzuschieben...
Und nun zu meinem Problem (oder eig. sind es zwei Probleme :/ ):
Ansehen kann man sich mein Problem mal hier:
http://sincer.lima-city.de/menu-test/index.html
Ich würde gerne in dem Menü-Streifen links und rechts ein graues Feld einbauen. (40 * 40 px)
(Mir ist schon klar, dass das jetzt nicht besonders berauschend wirkt XD, aber da kommen dann Bilder hin - Mir geht es fürs erste einmal um die Form ^^)
Hier der Code:
<html> <head> <title>Menu on Top</title> <style type="text/css"> * { margin:0; padding:0; } #menu { background:#000000 none repeat scroll 0 0; height:40px; position:fixed; top:0; left:40; right:-40; width:100%; } #menu_side1 { background:#999999 none repeat scroll 0 0; height:40px; position:fixed; top:0; float: left; width:40px; } #menu_side2 { background:#999999 none repeat scroll 0 0; height:40px; position:fixed; top:0; float: right; width:40px; } #menu_end { background-image:url(streifen.png); background-repeat:repeat-x; scroll 0 0; height:10px; position:fixed; top:40; width:100%; } #content { margin:60px auto; width:60%; } #links { padding:20px; } </style> </head> <body> <div id="menu_side1"></div> <div id="menu_side2"></div> <div id="menu"> <dit id="links"> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> </div> <div id="menu_end"> </div> </div> <div id="content"> Lore Ipsum... </div> </body> </html>
Nun habe ich nur eine sehr bescheidene Ahnung, was CSS angeht. (Ich weiß, dass ich mir mal eine Woche Zeit nehmen sollte, und mir ein CSS-Aufbau-Tutorial reinziehen sollte... Aber dann könnte ich euch nicht mehr damit auf die Nerven gehen :P *spaß*)
D.h., was ich da gebastelt habe baut auf dem auf, was man mir in meinem ersten Thread erklärt hat, und wurde dann ein wenig von mir verändert...
Wie man sieht, funktioniert es nicht, weil nur der graue Teil links, aber nicht der graue Teil rechts angezeigt wird.
Ich möchte wie gesagt graue Teile auf beiden Seiten des Menüs.
Der mittlere Teil sollte allerdings immer variabel bleiben. (D.h. wenn ich links und rechts 40 px in grau habe, soll der schwarze Teil in der Mitte immer den Rest der Seite auffüllen, egal wie breit das Browserfenster ist.)
Das zweite Problem ist ein Browserproblem:
Während der Code (wenn er mal fertig ist :D ) im FireFox super funktioniert, funktioniert er überhaupt nicht im Internet Explorer. (Andere Browser habe ich noch nicht getestet.)
Gibt es einen Weg, dass der Code in beiden (oder bessergesagt in allen gängigen) Browsern funktioniert? (z.B. Opera, und Navigator, etc. auch)
Wieder einmal vielen Dank für eure Hilfe ;)
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
#menu_side2 {
position:absolute;
right:0;
}
forausgesetzt das ist der rechte kasten...
aber so müsste es gehen
edit:
und im IE sind die kästen richtig aber da ist so ein blöder streifen neben an
außerdem solltest du margin immer mit prozenz angaben machen und das auto weg dann müsste es im ie gehen
noch eine alternative wären conditional comments
/edit
mfg andré
ps: weil momentan liegen di käasten übereinander kann man mittel firebug im FF bewundern
Beitrag geändert: 8.11.2008 14:12:38 von andre-morillon -
Auf zur Lösung des neuen Problems;)
Dein Code ist etwas ungeschickt aufgebaut- es is sinnvoll die beiden divs (links und rechts) erstmal in das menu div zu stellen. Dann noch etwas CSS Spielerei:
#menu { background:#000; height:40px; position:fixed; top:0; width:100%; } #menu_side1 { background:#999 ; float:left; height:40px; width:40px; } #menu_side2 { background:#999; float:right; height:40px; width:40px; }
Das Browserproblem wird warhscheinlich etwas schwerer zu lösen. Ich würde aber erst mal raten das Umzusetzen und wenn es wichtig ist, dass IE auch alles richtig darstellt vllt am Ende eine Browserweiche einbaun.
Gruß
-
ho ;)
Vielen Dank für eure schnellen Antworten!
Ich habe gleich mal alles umgeschrieben...
Dein Code ist etwas ungeschickt aufgebaut- es is sinnvoll die beiden divs (links und rechts) erstmal in das menu div zu stellen.
Done!
<div id="menu"> <div id="menu_side1"></div> <div id="menu_side2"></div> <div id="links"> <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a> </div> </div> <div id="menu_end"></div> (...)
@Werktags:
Deinen Code habe ich natürlich auch verwendet.
Danke :)
@Andre-Morillon:
Jop, den Streifen habe ich auch Bemerkt...
Wie kommt der da hin?
Bzw. wie bekomme ich ihn da weg?
Scheinbar muss ich wirklich auf sowas wie...
<!--[if IE]>
(...)
<![endif]-->
...zurück greifen.
Aber wie sage ich dem IE dann, dass das Menü immer oben bleiben soll?
außerdem solltest du margin immer mit prozenz angaben machen und das auto weg dann müsste es im ie gehen
Habe die Angaben nun in Prozent gemacht...
#content { margin:5%; width:90%; }
Im IE sieht es jetzt zwar gut aus... (Zwar etwas anders, als im FF, aber immerhin...) aber das Menü bleibt oben auf der Seite, und geht nicht mit dem Scrollen mit :(
Wie sage ich das dem IE, dass er das tun soll?
*Ich will ich will ich will...* :D
lg
Sincer
PS: Wie gesagt, konnte ich Navigater und Opera noch nicht testen, aber das mache ich erst später...
Meine Priorität bezieht sich erst einmal auf FF und IE.
//EDIT:
Anschauen kann man sich das Ding dann wieder hier:
http://sincer.lima-city.de/menu-test/index.html
Beitrag geändert: 8.11.2008 20:39:22 von sincer -
sincer schrieb:
außerdem solltest du margin immer mit prozenz angaben machen und das auto weg dann müsste es im ie gehen
Habe die Angaben nun in Prozent gemacht...
#content { margin:5%; width:90%; }
Im IE sieht es jetzt zwar gut aus... (Zwar etwas anders, als im FF, aber immerhin...) aber das Menü bleibt oben auf der Seite, und geht nicht mit dem Scrollen mit :(
Wie sage ich das dem IE, dass er das tun soll?
*Ich will ich will ich will...* :D
lg
Sincer
PS: Wie gesagt, konnte ich Navigater und Opera noch nicht testen, aber das mache ich erst später...
Meine Priorität bezieht sich erst einmal auf FF und IE.
//EDIT:
Anschauen kann man sich das Ding dann wieder hier:
http://sincer.lima-city.de/menu-test/index.html
1.) Das man nur relative Angaben macht sehe ich nicht sehr sinnvoll an. IE hat nämlich nicht die Probleme mit absoluten Angaben, sondern mit dem Wert "auto". Daher würde ich auf absolute Werte zurückgreifen, denn wenn man das Browserfenster verkleinert verschwindet der Text und das soll ja nicht sein!
2.) Das Problem liegt beim IE darin, dass es fixed nicht richtig umsetzt. Auf selfhtml findet man hier http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position dass es erst von IE7 unterstützt wird und bei Netscape aber der Version 6.1. Leider fällt mir momentan keine Lösung ein.
Beitrag geändert: 8.11.2008 20:52:36 von werktags -
ho ;)
Nochmal danke für den Hinweis & Link zu Selfhtml :)
Also ich habe mir das, was da steht ein wenig zu Herzen genommen, und mal oben die Zeile
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
eingefügt :D
Jetzt Scrollt das Menü auch im IE 7 brav mit ;)
Allerdings... Joahh... siehe selbst :/
Wie immer:
http://sincer.lima-city.de/menu-test/index.html
(Einfach im IE 7 Ansehen - Im FF schauts klasse aus *FF knuddel*)
Mag mich der IE nicht, oder habe ich einfach was falsch gemacht?
lg
Sincer -
in meinem ie fehlt rechts der kasten und nochwichtiger es ist links der gleiche rand vom text wie auch beim menu d.h. das menu ist nicht direkt am rand
-
in meinem ie fehlt rechts der kasten und nochwichtiger es ist links der gleiche rand vom text wie auch beim menu d.h. das menu ist nicht direkt am rand
Ja, genau das habe ich gemeint...
Aber wie bekomme ich das hin, dass es genau so aussieht, wie im FireFox?
lg
Sincer -
sincer schrieb:
in meinem ie fehlt rechts der kasten und nochwichtiger es ist links der gleiche rand vom text wie auch beim menu d.h. das menu ist nicht direkt am rand
Ja, genau das habe ich gemeint...
Aber wie bekomme ich das hin, dass es genau so aussieht, wie im FireFox?
lg
Sincer
Leider hab ich nicht die Möglichkeit mir das im IE7 anzuschaun, sondern nur im IE6 und da funktionierts nicht. Deshalb hab ich mir etwas anderes ausgedacht. Also dachte zuerst an ne Lösung mit Frames. Das müsste auf jedenfall möglich sein, aber das wäre dann ne Frameseite und ich bin mir da nicht sicher ob du sowas willst?!
Daher hab ich versucht das ganze mit dem Boxmodell zu lösen. Dabei gehts jetzt darum, dass ich alles fest positioniere. Mein Beispiel: http://werktags.lima-city.de/fixed_navi.html
Ich hab versucht, dass man nicht mehr den "body" scrollt sondern nur noch innerhalb des Textbereiches. Also die Umsetzung ist momentan nicht sehr gelungen. Das kann man besser machen. Ich denke mal, dies könnte man soweit gestalten, dass es größtenteils browserunabhängig ist. Allerdings müsste man die Bildschirmauflösung auslesen. Ich glaube sowas kann man mit Javascript realisieren. Da kenne ich mich aber nicht aus. Dies wäre jetzt ein ganz anderes Konzept, da das "alte" Mängel hat, die sehr schwer zu lösen sind!
-
ho ;)
Wieder einmal danke für deine konstruktiven Vorschläge :)
Also zu dem, was du mir gebastelt hast...
Daher hab ich versucht das ganze mit dem Boxmodell zu lösen. Dabei gehts jetzt darum, dass ich alles fest positioniere. Mein Beispiel: http://werktags.lima-city.de/fixed_navi.html
Ich hab versucht, dass man nicht mehr den "body" scrollt sondern nur noch innerhalb des Textbereiches.
Das ist zwar eine gute Alternative, aber das würde mir eher nicht gefallen...
Das wäre nur eine absolute Notlösung, aber dann würde ich schon eher auf das mitscrollende Menü verzichten :/
Zu dem Ding mit den Frames...
Ich habe absolut kA von Frames. Habe noch nie damit gearbeitet, und auch sonst keine Erfahrungen (weder schlechte noch gute) damit gemacht.
Aber damit du dir ein besseres Bild machen kannst, habe ich den Link mal Browsershots übergeben...
Ich habe jetzt mal den IE, FF, Opera, und Navigator in Auftrag gegeben.
Link dazu: http://browsershots.org/http://sincer.lima-city.de/menu-test/index.html
Das gibt nur einmal ein optisches Bild her. Man kann zwar nicht sehen, ob es mitscrollt, aber man sieht, ob es rein von der Form her ok ist :D
Vil. kannst du mir ja helfen, und sagen, was beim CSS nicht ganz stimmt, wenn du dir den einen oder anderen Screen von der Seite ansiehst...
Weiterhin vielen Dank für die Hilfe ;)
thx
Sincer
//EDIT: Also wenn ich mir die bisherigen Screenshots so ansehe, fällt mir auf, dass das Menü mal rein Optisch gesehen überall ein gutes Bild macht, außer im Internet Explorer -.-
Wer einen Tipp für mich hat, wie ich das Menü auch im IE mal rein optisch zum Laufen bringe, möge mir diesen verraten :)
Thx
Beitrag geändert: 10.11.2008 17:26:28 von sincer -
sincer schrieb:
Das ist zwar eine gute Alternative, aber das würde mir eher nicht gefallen...
Das wäre nur eine absolute Notlösung, aber dann würde ich schon eher auf das mitscrollende Menü verzichten :/
OK. Wenn du auf das mitscrollende Menü verzichten würdest, dann würde ich sagen, lass es so wie es ist. Anscheinend hat nicht mal jeder IE damit Probleme. CSS technisch sehe ich da keinen Fehler. Was du vllt. überdenken solltest, wäre die relative Angabe des margins beim #content- da hier die Browser doch sehr willkürlich das interpretieren und durch geschicktes Verkleinern des Browserbereichs der Text verschwindet.
Leider kann Browsershot nur ein optisches Bild erzeugen^^
Das Problem mit dem IE bleibt natürlich offen. Aber ich glaube bisher ist es mir noch nie gelungen (trotz validem Strict), dass IE auch das anzeigt was er anzeigen soll. In diesem Sinne.. freuen wir uns, dass wir wissen welcher Browser der bessere ist!
-
ho ;)
Kurz gesagt:
Mein Menü sollte oben sein, und auch dort bleiben...
:(
Ok, ...
Dann hätte ich noch eine "Abschlussfrage":
Kann ich es so verwirklichen, dass ich sage, es schaut in jedem Browser mal rein optisch gleich aus.
(Also links und rechts der graue Teil, in der Mitte schwarz, und darunter dieser Streifen, der ins weiße geht...)
Und grundsätzlich bleibt dieses Menü in allen Browsern oben, außer im FF.
Ginge das irgendwie?
Weil in meinen Augen schaut es einfach so aus, als würde der FireFox als einziger Browser diese Seite so interpretieren, wie ich es will :D
Kurz gesagt: Vom aussehen sind alle gleich, im FF scrollt das Menü mit, und in den anderen bleibt es oben. Punkt um, wer den FF nicht benützt sieht halt nur die "billige" Version.
Könnte ich das verwirklichen?
(Mit einer Browserweiche, die dem IE sagt, dass er NICHT Scrollen soll?!)
lg
Sincer -
CSS-Hacks machens möglich
http://ketchupfleck.lima-city.de/test.html
Das was du haben willst funktioniert im FF und im IE6. Zumindest bei mir
. Schau dir ruhig mal den Pagesource an.
mfg Ketchupfleck -
Dann hätte ich noch eine "Abschlussfrage":
Kann ich es so verwirklichen, dass ich sage, es schaut in jedem Browser mal rein optisch gleich aus.
Nein. Das Internet ist ein flexibles Medium und es gibt viele Browser. Eine Seite kann nicht in jedem Browser gleich aussehen. Das Internet ist nämlich kein Printmagazin.
Auch wenn du es schaffst, es im Firefox und Internet Explorer (fast) "gleich aussehen" zu lassen, gibt es noch viele andere Browser und Geräte. (iPhone, Browser auf Spielekonsolen, etc.)
Das einzig wichtige ist, dass der Inhalt für jeden erreichbar ist.
@ketchupfleck: Der IE6 hat bei deiner Testseite ein paar Schwierigkeiten mit der Scrollbar. Accessibility: 0 Punkte -.-
Ryan
Beitrag geändert: 11.11.2008 8:58:16 von ryanblack -
ho ;)
Danke für eure Antworten :)
@ketchupfleck:
Du hast das hier noch eingefügt:
html, body { height:100%; overflow:auto; }
Ich kann CSS wie gesagt eig. nicht, und reime mir meine Sachen nur so zusammen, bzw. lasse mir eben hier etwas soufflieren :D
D.h., dass ich nicht wirklich weiß, wie sich diese Zeilen genau auf das Menü auswirken.
Außerdem hast du dem #menu Div die position:absolute gegeben - ich dachte, dass dann das Menü nicht mehr mitscrollt, aber scheinbar habe ich da etwas missverstanden...
Nur leider funktioniert das ganze nicht wirklich, bei mir zumindest nicht...
Im FF geht das Menü selbst über meine Scrollbar. Sowas habe ich bis jetzt noch nie gesehen :/
Und im IE(7)... naja, kA, kann ich nicht beschreiben, habe einen Screen gemacht. Auf jeden Fall stimmt irgend etwas damit nicht.
Screen: http://download.lima-city.de/sincer/Screen_IE7.bmp
Also da musst du auch die Scollbalken besonders beachten. Und im IE 6 Funktioniert das, oder wie? *leider nicht testen kann*
Trotzdem danke für die Bemühung!
@ryanblack:
Ich weiß schon, dass jeder Browser seine eigene Suppe kocht :D
Und auch W3C scheint nicht 100% perfekt zu sein, aber was ist das schon ^^
Mir geht es um folgendes:
Die seite soll in jedem Browser halbwegs gleich aussehen...
Wenn es zwischen den Seiten nur einen unbedeutender Unterschied gibt, dann ist mir das eig. egal.
Funktionieren soll die Seite (ob mit scrollendem Menü, oder Menü oben stehen bleibend) auf jeden Fall im FireFox und Internet Explorer. Wenn es zusätzlich noch gut im Opera, Navigator, und Safari, etc aussieht, bin ich mehr als zufrieden :D
(Wenns am IPhone nicht funktionieren sollte, dann soll mir Apple AG unter die Arme greifen XD)
Wie gesagt: Das Hauptaugenmal richte ich auf FF und IE.
lg
Sincer
PS: Wenn ich irgendwas zusammen bringe, poste ich das sofort mit Code...
Bis dahin bin ich für jeden Hinweis dankbar ;) -
ho ;)
Also ich habe das jetzt mal so probiert:
#menu { background:#000; height:40px; <!--[if !IE]> position:fixed; <![endif]--> top:0px; width:100%; } (...) #menu_end { background-image:url(Verlauf.png); background-repeat:repeat-x; height:20px; <!--[if !IE]> position:fixed; <![endif]--> top:40px; width:100%; }
Also ich wollte erreichen, dass es nur für den IE nicht als Fixed gilt, sondern, einfach automatisch oben bleibt.
Das Problem ist aber, dass es jetzt gar nicht mehr mitscrollt. Weder im IE, noch im FF :/
Habe ich da was falsch verstanden mit den Browserweichen, oder funktioniert das einfach nicht so, wie ich mir das vorstelle?
Ich habe noch eine Frage zu dem Margin:
So, wie das jetzt ist, gilt es ja für die ganze Seite...
* { margin:0; padding:0; }
Ich habe schon versucht, es nur für den Menu Teil zu benützen, aber das funktioniert irgendwie nicht.
Das Problem, das ich damit habe, ist, dass es mir irgendwie die ganze Seite verzieht. Und, dass es im IE ganz anders aussieht, als im FF :/
Gibt es vil. doch eine Möglichkeit, dieses Ding nur für das Menü geltend zu machen?
lg && thx
Sincer
Beitrag geändert: 12.11.2008 22:26:14 von sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
