Verrutschtes Layout und Mainbereich anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
auto
balken
beispiel
bereich
code
container
einstellen
element
filter
gucken
http
image
oberen balken
portfolio
position
problem
stehen
text
url
-
Hallo alle zusammen,
also ich habe 2 Probleme, wo ich eure Hilfe bräuchte.
Erst einmal meine Seite, damit ihr es euch selbst ansehen könnt:
Es handelt sich ausschließlich um den Menüpunkt Portfolio mein Problem.
http://nataschak.lima-city.de/NataschaK%20Design/portfolio.html
1. Problem:
Ich habe oben einen Balken und unten einen Balken.
Dazwischen liegt mein Mainbereich.
Ich möchte nun, dass die beiden Menübalken so an ihren Plätzen bleiben, wie sie es auch sind. Das ist sehr wichtig!
Der Mainbereich soll den Kompletten Zwischenraum ausfüllen.
Ich hatte das mit Größenangaben gelöst, doch leider ist es nun so, im Internet Explorer IST der Zwischenbereich komplet mit dem Mainbereich gefüllt, bei Firefox ist oben eine Lücke.
Wie kann ich es einstellen, evt. ohne feste Größenangabe, dass der Mainbereich IMMER komplett zwischen den fest positionierten Balken ist?
Hier mal der Code:
body { color: #000000; font-family: Verdana; font-size: 12px; background-color: #ADD8E6; } #container { width:100%; margin:0 auto; text-align:left; } #mainnav { height: 50px; background-color: #000000; text-align: right; color: #ffffff; clear: both; position:absolute; bottom:80px; height:50px; width:100%; left:0px; right:0px; opacity: 0.7; -moz-opacity: 0.7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); } #mainnav ul { padding: 0; margin-right: 50px; list-style-type: none; } #mainnav li { display: inline; padding: 0 30px; } #mainnav li a { text-decoration: none; font-size: 15px; font-weight:bold; color: #ffffff; } #mainnav li a:hover { text-decoration: none; color: #00ffff; font-weight:bold; } #main { margin: auto; background-color: #ffffff; text-align: justify overflow: auto; padding: 0px; position:absolute; bottom:130px; height:450px; left:0px; right:0px; } #navi { height: 50px; background-color: #000000; text-align: left; color: #ffffff; position:absolute; top:100px; height:50px; width:100%; left:0px; right:0px; opacity: 0.7; -moz-opacity: 0.7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); } #navi ul { padding: 0; margin-right: 50px; list-style-type: none; } #navi li { display: inline; padding: 0 30px; } #navi li a { text-decoration: none; font-size: 14px; color: #ffffff; } #navi li a:hover { text-decoration: none; color: #00ffff; font-weight:bold; }
2. Problem:
Wenn ich mit dieser Seite nun das Fenster minimiere, verrutschen alle Elemente.
Gibt es eine Möglichkeit, einzustellen, dass die Seite sich mit verkleinert oder vlt. besser noch, alles so bleibt wie es ist, aber Scrollbalken auftauchen?
Weil ich will nicht, dass mein ganzey Layout im minimierten Fenster dann nach Quark aussieht^^...
Ich hoffe ich finde hier Hilfe :)
Liebste Grüße und noch eine schöne Restwoche
Natascha -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
nataschakdesign schrieb:
1. Problem:
Ich habe oben einen Balken und unten einen Balken.
Dazwischen liegt mein Mainbereich.
Ich möchte nun, dass die beiden Menübalken so an ihren Plätzen bleiben, wie sie es auch sind. Das ist sehr wichtig!
Der Mainbereich soll den Kompletten Zwischenraum ausfüllen.
Ich hatte das mit Größenangaben gelöst, doch leider ist es nun so, im Internet Explorer IST der Zwischenbereich komplet mit dem Mainbereich gefüllt, bei Firefox ist oben eine Lücke.
Wie kann ich es einstellen, evt. ohne feste Größenangabe, dass der Mainbereich IMMER komplett zwischen den fest positionierten Balken ist?
Beide Probleme lassen sich nicht nachvollziehen bei mir im IE und Mozialle.. Kannst du vielleicht anhand eines Screenshots dein Problem erläutern?
nataschakdesign schrieb:
2. Problem:
Wenn ich mit dieser Seite nun das Fenster minimiere, verrutschen alle Elemente.
Gibt es eine Möglichkeit, einzustellen, dass die Seite sich mit verkleinert oder vlt. besser noch, alles so bleibt wie es ist, aber Scrollbalken auftauchen?
Weil ich will nicht, dass mein ganzey Layout im minimierten Fenster dann nach Quark aussieht^^...
Lässt sich nachvollziehen, sieht tatsächlich ein wenig rau aus.. Kann das sein, dass du bei "#main" ein Semikolon vergessen hast? ;)
Außerdem solltest du dir angewöhnen "position: absolute" oder "position: relative" zu nutzen ;) Wenn du nun möchtest, dass deine Navigation "mitscrollt" verwendet man "position: overflow". Damit bleibt dann alles an Ort und stelle, lediglich dein main bereich wird durch gescrollt (Der Text verschwindet dann allerdings unter dem oberen balken!).
Außerdem ist wohl dein Browser verwirrt, da du im "#navi" zwei mal "height:50px" stehen hast :P
//EDIT:
Übrigens bekommst du einen Präfix (-ms-filter zum Beispiel) nicht CSS Validiert ;) Vielleicht ist ein .png an dieser Stelle angebracht? Einfach ein pixel hoch und breit, deckkraft 70% und dann als Background url des div's einstellen mit repeat XY
Beitrag zuletzt geändert: 5.7.2012 10:38:30 von kill-a-teddy -
kill-a-teddy schrieb:
nataschakdesign schrieb:
1. Problem:
Ich habe oben einen Balken und unten einen Balken.
Dazwischen liegt mein Mainbereich.
Ich möchte nun, dass die beiden Menübalken so an ihren Plätzen bleiben, wie sie es auch sind. Das ist sehr wichtig!
Der Mainbereich soll den Kompletten Zwischenraum ausfüllen.
Ich hatte das mit Größenangaben gelöst, doch leider ist es nun so, im Internet Explorer IST der Zwischenbereich komplet mit dem Mainbereich gefüllt, bei Firefox ist oben eine Lücke.
Wie kann ich es einstellen, evt. ohne feste Größenangabe, dass der Mainbereich IMMER komplett zwischen den fest positionierten Balken ist?
Beide Probleme lassen sich nicht nachvollziehen bei mir im IE und Mozialle.. Kannst du vielleicht anhand eines Screenshots dein Problem erläutern?
Oh tut mir leid, ich dachte, das Problem wäre nachvollziehbar...
INternet Explorer:
http://www.abload.de/image.php?img=ienvajp.png
FireFox:
http://www.abload.de/image.php?img=ffy4x7c.png
Außerdem solltest du dir angewöhnen "position: absolute" oder "position: relative" zu nutzen ;) Wenn du nun möchtest, dass deine Navigation "mitscrollt" verwendet man "position: overflow". Damit bleibt dann alles an Ort und stelle, lediglich dein main bereich wird durch gescrollt (Der Text verschwindet dann allerdings unter dem oberen balken!).
Der Text soll unter dem oberen Balken verschwinden =) Und das tut er auch, da ich den Befehl overflow:auto drin habe.
und ich habe position:absolute auch verwendet. Für alle 3 Elemente.
Alle 3 sind position:absolute. Ist das falsch?
Kannst du mal oben im CSS gucken?
Kann gut sein, dass ich was falsch gemacht habe...
Habe mit position noch net os oft gearbeitet.
Außerdem ist wohl dein Browser verwirrt, da du im "#navi" zwei mal "height:50px" stehen hast :P
Ohje ich Schusel =D du hast recht, danke :)
Wegen dem Semikolon bin ich etwas verwirrt...
Es fehlt zwar oben in meinem kopierten, aber in meiner Style.css ist es drin... ^^
//EDIT:
Übrigens bekommst du einen Präfix (-ms-filter zum Beispiel) nicht CSS Validiert ;) Vielleicht ist ein .png an dieser Stelle angebracht? Einfach ein pixel hoch und breit, deckkraft 70% und dann als Background url des div's einstellen mit repeat XY
Menst du als HG Bild dann?
ich verstehe die Lösung die du vorschlägst, aber gerade nicht genau was CSS validiert heißt @@
Danke schon mal für die rasche Antwort :)
Beitrag zuletzt geändert: 5.7.2012 11:07:39 von nataschakdesign -
Also wenn ich dien Problem #1 jetzt richtig verstanden habe, dann löse es am besten so:
#BalkenOben { position: absolute; width:100%; height: 50px; /*oder wie hoch auch immer*/ } #BalkenUnten { position:absolute; width:100%; height: 75px; /* wider nach belieben */ bottom:0px; } #Content { position: absolute; width:100%; top:50px; /* hier wichtig: muss die höhe des BalkenOben sein! */ bottom: 75px; /* Höphe von BalkenUnten! */ }
Damit sind deine Balken oben und unten immer gleich groß und es ändert sich nur der Content-Bereich!
funktioniert auch im IE !
mfg Freezinger -
freezinger schrieb:
Also wenn ich dien Problem #1 jetzt richtig verstanden habe, dann löse es am besten so:
#BalkenOben { position: absolute; width:100%; height: 50px; /*oder wie hoch auch immer*/ } #BalkenUnten { position:absolute; width:100%; height: 75px; /* wider nach belieben */ bottom:0px; } #Content { position: absolute; width:100%; top:50px; /* hier wichtig: muss die höhe des BalkenOben sein! */ bottom: 75px; /* Höphe von BalkenUnten! */ }
Damit sind deine Balken oben und unten immer gleich groß und es ändert sich nur der Content-Bereich!
funktioniert auch im IE !
mfg Freezinger
Hallo =)
erst einmal, danke für die Antwort.
Also das erreicht schon den Effekt, den ich erreichen will, nähmlich dass der Anfang des Main am oberen Balken und das Ende vom Main am unteren Balken "klebt".
Jedoch ist die Methode nicht ganz das was ich brauche, weil wenn du jetzt von Portfolio auf z Bsp die Seite About klickst, rutscht der Balken hoch oder rutner, also ist nicht auf der selben Position.
Dabei möchte ich, dass der untere Balken, der das Hauptmenü darstellt, auf allen Seiten auf der gleichen Position sitzt.
-
nataschakdesign schrieb:
Oh tut mir leid, ich dachte, das Problem wäre nachvollziehbar...
INternet Explorer:
http://www.abload.de/image.php?img=ienvajp.png
FireFox:
http://www.abload.de/image.php?img=ffy4x7c.png
Kein Ding, passiert ;) Weiß nun, was du meinst.. Würde gerne wissen, welche Firefox Version du nutzt? Bei mir ist im Firefox und Chrome der Main bereicht nicht unten dran getackert, denke das liegt an deinem, nutzt du für die Seite ein anderes Design, heißt dein container anders?
Der Text soll unter dem oberen Balken verschwinden =) Und das tut er auch, da ich den Befehl overflow:auto drin habe.
und ich habe position:absolute auch verwendet. Für alle 3 Elemente.
Alle 3 sind position:absolute. Ist das falsch?
Kannst du mal oben im CSS gucken?
Kein Ding.. Ich sehe dein css Code ist ziemlicher wirr warr... Du hast einmal
, danach kommt dann nochmal einmargin: auto
? Ziemlich unnötig :D Mach es alles mit margin oder nimm es raus und belasse es bei margin-left.. außerdem hast du dann mittig stehenmargin-left
weiter unten dannpadding: 10px 0px;padding: 20px;
In der container div hast du den Text auf align left gesetzt, im main bereich dann auch align justify?
Ich denke, bei einem overflow braucht man nichteinmal ein margin, da das sowieso unter den balken geht :P
Im mainnav dann auch wieder zwei mal height stehen...
Dein Body hat den style tag
wozu, wenn du doch eh ein text align im stylesheet anwendest? :o<body style="text-align:center;">
Menst du als HG Bild dann?
ich verstehe die Lösung die du vorschlägst, aber gerade nicht genau was CSS validiert heißt @@
Ja, ich meine als Hintergrund :) Ein Validator ist die inoffizielle Richtlinie für einen sauberen Code nennt sich auch "W3C" Konform. Darauf wird heutzutage viel Wert gelegt, um eine Schöne Website zu haben und ladezeiten zu spaaren ;)
Der Link dürfte für dich interessant sein:
http://jigsaw.w3.org/css-validator/
Beitrag zuletzt geändert: 5.7.2012 12:11:01 von kill-a-teddy -
kill-a-teddy schrieb:
nataschakdesign schrieb:
Oh tut mir leid, ich dachte, das Problem wäre nachvollziehbar...
INternet Explorer:
http://www.abload.de/image.php?img=ienvajp.png
FireFox:
http://www.abload.de/image.php?img=ffy4x7c.png
Kein Ding, passiert ;) Weiß nun, was du meinst.. Würde gerne wissen, welche Firefox Version du nutzt? Bei mir ist im Firefox und Chrome der Main bereicht nicht unten dran getackert, denke das liegt an deinem, nutzt du für die Seite ein anderes Design, heißt dein container anders?
Firefox 13.0.1 nutze ich.
Gibt es den nicht ne Möglichkeit, das so zu machen, dass es in allen Browsern und allen Versionen oben und unten angetackert ist? Aber der Balken unten trotzdem die selbe Position wie bei den andren Seiten hat?=)
Der Text soll unter dem oberen Balken verschwinden =) Und das tut er auch, da ich den Befehl overflow:auto drin habe.
und ich habe position:absolute auch verwendet. Für alle 3 Elemente.
Alle 3 sind position:absolute. Ist das falsch?
Kannst du mal oben im CSS gucken?
Kein Ding.. Ich sehe dein css Code ist ziemlicher wirr warr... Du hast einmal
, danach kommt dann nochmal einmargin: auto
? Ziemlich unnötig :D Mach es alles mit margin oder nimm es raus und belasse es bei margin-left.. außerdem hast du dann mittig stehenmargin-left
weiter unten dannpadding: 10px 0px;padding: 20px;
In der container div hast du den Text auf align left gesetzt, im main bereich dann auch align justify?
Ich denke, bei einem overflow braucht man nichteinmal ein margin, da das sowieso unter den balken geht :P
Im mainnav dann auch wieder zwei mal height stehen...
Dein Body hat den style tag
wozu, wenn du doch eh ein text align im stylesheet anwendest? :o<body style="text-align:center;">
Ohje :D
ja du hast Recht!!
Ich bin zur Zeit dabei mich in CSS einzuarbeiten und dann lese ich ein Tutorial und versuche das eine und ändere oder lösche dann nich die andre Einstellung, usw.... Das habe ich alles übersehen @.@
Ich sollte noch mal genua drüber gucken...
jedoch das align:left im Container habe ich drin, weil laut einem Tutorial soll man das reinschreiben mit dem margin:auto; weil damit der Container dann horizontal mittig ausgerichtet ist @@...
Menst du als HG Bild dann?
ich verstehe die Lösung die du vorschlägst, aber gerade nicht genau was CSS validiert heißt @@
Ja, ich meine als Hintergrund :) Ein Validator ist die inoffizielle Richtlinie für einen sauberen Code nennt sich auch "W3C" Konform. Darauf wird heutzutage viel Wert gelegt, um eine Schöne Website zu haben und ladezeiten zu spaaren ;)
Der Link dürfte für dich interessant sein:
http://jigsaw.w3.org/css-validator/
in der Tat, das ist er. :)
danke, werde mich mal reinlesen :)
Danke, dass du solche Geduld mit einem Anfänger wie mir aufbringst ^^...
-
nataschakdesign schrieb:
Ohje :D
ja du hast Recht!!
Ich bin zur Zeit dabei mich in CSS einzuarbeiten und dann lese ich ein Tutorial und versuche das eine und ändere oder lösche dann nich die andre Einstellung, usw.... Das habe ich alles übersehen @.@
Ich sollte noch mal genua drüber gucken...
jedoch das align:left im Container habe ich drin, weil laut einem Tutorial soll man das reinschreiben mit dem margin:auto; weil damit der Container dann horizontal mittig ausgerichtet ist @@...
align center heißt soviel wie "mittig antackern".. Nicht aber "mittag ausrichten" :D Margin auto ist sowas wie mittig ausrichten.. Margin ist der außenabstand zu anderen Elementen und Texten.. Zum Beispiel margin auto erkennt eben automatisch, was am besten wäre bzw. was die Mitte wäre..
Also align center heißt den Text mittig positionieren.. Er hat aber keinen speziellen Abstand zu links oder rechts, sondern steht einfach nur stumpf in der Mitte..
Wenn du die lösung unten übernommen hast mit dem "#balkenoben/#balkenunten" und die css fehler korrigiert hast, poste nochmal bitte deinen code und sage, was dann noch nicht funktioniert :D Ich denke hier müssen wir uns langsam antasten, aufgrund der Kentnisse :P
//EDIT:
Kannst du einmal bei "#main" noch folgendes hinzufügen, um zu testen ob das div dann aliegt?
position: absolute; bottom: 0px;
Im mainnav dann folgendes entfernen:
clear: both;
Beitrag zuletzt geändert: 5.7.2012 14:23:55 von kill-a-teddy -
kill-a-teddy schrieb:
nataschakdesign schrieb:
Ohje :D
ja du hast Recht!!
Ich bin zur Zeit dabei mich in CSS einzuarbeiten und dann lese ich ein Tutorial und versuche das eine und ändere oder lösche dann nich die andre Einstellung, usw.... Das habe ich alles übersehen @.@
Ich sollte noch mal genua drüber gucken...
jedoch das align:left im Container habe ich drin, weil laut einem Tutorial soll man das reinschreiben mit dem margin:auto; weil damit der Container dann horizontal mittig ausgerichtet ist @@...
align center heißt soviel wie "mittig antackern".. Nicht aber "mittag ausrichten" :D Margin auto ist sowas wie mittig ausrichten.. Margin ist der außenabstand zu anderen Elementen und Texten.. Zum Beispiel margin auto erkennt eben automatisch, was am besten wäre bzw. was die Mitte wäre..
Also align center heißt den Text mittig positionieren.. Er hat aber keinen speziellen Abstand zu links oder rechts, sondern steht einfach nur stumpf in der Mitte..
Wenn du die lösung unten übernommen hast mit dem "#balkenoben/#balkenunten" und die css fehler korrigiert hast, poste nochmal bitte deinen code und sage, was dann noch nicht funktioniert :D Ich denke hier müssen wir uns langsam antasten, aufgrund der Kentnisse :P
//EDIT:
Kannst du einmal bei "#main" noch folgendes hinzufügen, um zu testen ob das div dann aliegt?
position: absolute; bottom: 0px;
Im mainnav dann folgendes entfernen:
clear: both;
Sooo, habe die Balken und deine Änderungen vorgenommen.
Nun ist zwar mein 1. Problem gelöst. aber neue sind aufgetaucht...
Der Balken unten soll immer auf der gleichen Position stehen, sowie wenn du auf About klickst .
Aber jetzt rutscht er nach unten...
Und die Balken sollen auch nicht ganz oben und ganz unten sein, sondern eher etwas mittiger...
außerdem ist jetzt der Text im Mainbereich total verrutscht @@
Hier die CSS vom Portfolio:
body { color: #000000; font-family: Verdana; font-size: 12px; background-color: #ADD8E6; } #container { width:100%; margin:0 auto; } #mainnav { background-color: #000000; text-align: right; color: #ffffff; position:absolute; width:100%; height: 50px; bottom:0px; } #mainnav ul { padding: 0; margin-right: 50px; list-style-type: none; } #mainnav li { display: inline; padding: 0 30px; } #mainnav li a { text-decoration: none; font-size: 15px; font-weight:bold; color: #ffffff; } #mainnav li a:hover { text-decoration: none; color: #00ffff; font-weight:bold; } #main { margin: auto; background-color: #ffffff; text-align: justify; overflow: auto; padding: 0px 70px; position: absolute; width:100%; top:50px; bottom: 50px; } #navi { background-color: #000000; text-align: left; color: #ffffff; position:absolute; width:100%; height: 50px; } #navi ul { padding: 0; margin-right: 50px; list-style-type: none; } #navi li { display: inline; padding: 0 30px; } #navi li a { text-decoration: none; font-size: 14px; color: #ffffff; } #navi li a:hover { text-decoration: none; color: #00ffff; font-weight:bold; }
Beitrag zuletzt geändert: 6.7.2012 7:14:42 von nataschakdesign -
nataschakdesign schrieb:
Sooo, habe die Balken und deine Änderungen vorgenommen.
Nun ist zwar mein 1. Problem gelöst. aber neue sind aufgetaucht...
Der Balken unten soll immer auf der gleichen Position stehen, sowie wenn du auf About klickst .
Aber jetzt rutscht er nach unten...
Und die Balken sollen auch nicht ganz oben und ganz unten sein, sondern eher etwas mittiger...
Bitte #navi um folgendes ergänzen:
top:0px; left: 0px;
#mainnav auch um folgendes ergänzen:
left: 0px;
außerdem ist jetzt der Text im Mainbereich total verrutscht @@
Da hab ich dich wohl etwas im dunkeln tappen lassen, als ich dir das mit dem Margin gesagt habe, sorry! Du musst selbstverständlich den Außenabstand dann im neuen Margin auch angeben, dabei beachte, dass die erste Zahl für top steht, die zweite für right, die dritte für bottom und die vierte für left..
sollte also
ersetzen durch so etwasmargin: auto;
(weiß aus dem Kopf allerdings nicht, ob das so richtig geschrieben ist)..margin: auto 20px auto;
//EDIT:
Das dein Mainnav bei about anders aussieht als bei portfolio liegt daran, dass du ne andere .css Datei verwendest. Bei about hast du einen großen Abstand eingestellt.
Also dort hast du 80 px als Abstand, bei Portfolio hingegen 0px als Abstand ;) Einfach die 0 px in 80 px ändern, dann rutscht es auch net mehr runter :Pbottom: 80px;
//EDIT2:
Hast wohl grad ein Backup hochgeladen? :D Naja auf jedenfall, dass deine navi Leiste oben nicht zu sehen ist liegt an deinem "top" abstand :P du solltest auch einen bottom abstand hinzufügen, damit das am Main bereich klebt :) Nur so als Info, bevor du fragst :D
Beitrag zuletzt geändert: 6.7.2012 8:20:58 von kill-a-teddy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
