HTML Box gleichmäßig Platzieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
angeben
auto
blocken
boxen
code
container
dank
eigenschaft
element
form
frage
gleichen stelle
objekt
position
problem
prozent
radius
reihe
url
-
Hey Leute,
ich teste und Google jetzt schon eine ganz schöne Zeit rum, und komme einfach nicht Voran.
Also ich will Folgendes Gelöst haben:
-Ich habe einen Box in Form eines Divs.
-Dem Div will ich keine Abstände zu den Linken oder Rechten Rändern angeben. Woher soll ich das auch wissen, weil die beiden Abstände ja immer gleich sein sollen.
-Ebenso will ich keine Breite angeben. In dem Div sollen weiter Boxen in Form von Links, Bildern und iFrames in einer Reihe sein, daraus soll die Breite bestimmt werden.
-Der Div soll Fixiert sein, also immer auf der gleichen stelle auf dem Bildschirm sein. Den Abstand zum oberen Rand will ich in Prozent angeben.
Daran hänge ich jetzt schon ziemlich lange und ich fände es toll wen mir jemand helfen könnte =D
danke schon mal ;D
LG
Michael -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
giga-score schrieb:
ich teste und Google jetzt schon eine ganz schöne Zeit rum, und komme einfach nicht Voran.
Du magst, was auch immer, testen, aber was hat Google damit zu tun?
-Ich habe einen Box in Form eines Divs.
Hast Du? Welche Form hat ein Div? Welche Bedeutung hat dessen Form?
-Dem Div will ich keine Abstände zu den Linken oder Rechten Rändern angeben. Woher soll ich das auch wissen, weil die beiden Abstände ja immeru gleich sein sollen.
Wenn dir die absoluten Abstände nicht bekannt sind, aber auf beiden Seiten, in der Horizontalen, der gleiche Außenabstand gewahrt sein soll, bietet sich eine Anweisung wie " margin:0 auto" an.
-Ebenso will ich keine Breite angeben.
Wenn Du das nicht willst und es deinem Zweck dienlich ist, kannst Du es auch lassen. Sinnvoll? Hmmm!
In dem Div sollen weiter Boxen in Form von Links, Bildern und iFrames in einer Reihe sein, daraus soll die Breite bestimmt werden.
Wo ist dabei jetzt das Problem? Warum sollen die Bosen im Div weiter sein als dieser selbst? Ist "weiter" jetzt räumlich oder temporär zu sehen?
-Der Div soll Fixiert sein, also immer auf der gleichen stelle auf dem Bildschirm sein. Den Abstand zum oberen Rand will ich in Prozent angeben.
Dann mußt Du den Div-Container halt absolut positionieren und den oberen Abstand, zu was auch immer, prozentual angeben. Auch hier wieder stellt sich die Frage, wo denn dein Problem ist.
Ein Link zu einem funktionierenden Beispiel der Seite, die dir Probleme macht, im optimalen Falle noch mit passenden Erklärungen zu den problematischen Bereichen, könnte die Beantwortung deiner Fragen erheblich erleichtern.
Meine Antwort erscheint dir merkwürdig un/oder unvollständig, oder wenig hilfreich? Dann schau dir mal deine Fragestellung genauer an!
Beitrag zuletzt geändert: 11.10.2012 3:56:45 von fatfreddy -
Also wenn ich das richtig verstanden habe soll dieser Div-Container einfach nur mehrere Objekte zusammenfassen und diese zusammen zentriert anzeigen. Dies geht, wie mein Vorredner ja schon sagte, mit der CSS-Eigenschaft "margin:0 auto". Wenn du keine Breite für die "Box" angibst dehnt sie sich mit der Größe ihres Inhalts aus. Dies dürfte also auch kein Problem für dich dargestellt haben. Wenn du ein Objekt absolut positionierst, musst du darauf achten, dass das übergeordnete Element, in dem sich dein Div-Container befindet, auch eine Positionierung besitzt (sonst kommt es zu fehlern in der Darstellung). Im einfachsten Fall ist das Übergeordnete Element das "body"-Element. Du kannst z.B. dem "body"-Element
zuweisen. Damit dürfte dein Div-Container korrekt angezeigt werden.body { position:relative; top: 0; left: 0; width: 100%; height: 100%; }#container { position:absolute; margin:0 auto; top:10%; } -
fatfreddy schrieb:
giga-score schrieb:
ich teste und Google jetzt schon eine ganz schöne Zeit rum, und komme einfach nicht Voran.
Du magst, was auch immer, testen, aber was hat Google damit zu tun?
-Ich habe einen Box in Form eines Divs.
Hast Du? Welche Form hat ein Div? Welche Bedeutung hat dessen Form?
-Dem Div will ich keine Abstände zu den Linken oder Rechten Rändern angeben. Woher soll ich das auch wissen, weil die beiden Abstände ja immeru gleich sein sollen.
Wenn dir die absoluten Abstände nicht bekannt sind, aber auf beiden Seiten, in der Horizontalen, der gleiche Außenabstand gewahrt sein soll, bietet sich eine Anweisung wie " margin:0 auto" an.
-Ebenso will ich keine Breite angeben.
Wenn Du das nicht willst und es deinem Zweck dienlich ist, kannst Du es auch lassen. Sinnvoll? Hmmm!
In dem Div sollen weiter Boxen in Form von Links, Bildern und iFrames in einer Reihe sein, daraus soll die Breite bestimmt werden.
Wo ist dabei jetzt das Problem? Warum sollen die Bosen im Div weiter sein als dieser selbst? Ist "weiter" jetzt räumlich oder temporär zu sehen?
-Der Div soll Fixiert sein, also immer auf der gleichen stelle auf dem Bildschirm sein. Den Abstand zum oberen Rand will ich in Prozent angeben.
Dann mußt Du den Div-Container halt absolut positionieren und den oberen Abstand, zu was auch immer, prozentual angeben. Auch hier wieder stellt sich die Frage, wo denn dein Problem ist.
Ein Link zu einem funktionierenden Beispiel der Seite, die dir Probleme macht, im optimalen Falle noch mit passenden Erklärungen zu den problematischen Bereichen, könnte die Beantwortung deiner Fragen erheblich erleichtern.
Meine Antwort erscheint dir merkwürdig un/oder unvollständig, oder wenig hilfreich? Dann schau dir mal deine Fragestellung genauer an!
Wenn du kein Bock hast, mir richtig zu antworten, solltest du es lassen!
t-blog schrieb:
Also wenn ich das richtig verstanden habe soll dieser Div-Container einfach nur mehrere Objekte zusammenfassen und diese zusammen zentriert anzeigen. Dies geht, wie mein Vorredner ja schon sagte, mit der CSS-Eigenschaft "margin:0 auto". Wenn du keine Breite für die "Box" angibst dehnt sie sich mit der Größe ihres Inhalts aus. Dies dürfte also auch kein Problem für dich dargestellt haben. Wenn du ein Objekt absolut positionierst, musst du darauf achten, dass das übergeordnete Element, in dem sich dein Div-Container befindet, auch eine Positionierung besitzt (sonst kommt es zu fehlern in der Darstellung). Im einfachsten Fall ist das Übergeordnete Element das "body"-Element. Du kannst z.B. dem "body"-Element
zuweisen. Damit dürfte dein Div-Container korrekt angezeigt werden.body { position:relative; top: 0; left: 0; width: 100%; height: 100%; }#container { position:absolute; margin:0 auto; top:10%; }
Danke =) ich werde das mal mit "margin:0 auto" Probieren ;D ich hatte das auch schon mit Margin:0 und Margin:Auto ausprobiert aber noch nicht zusammen o.O ich habe diese Eigenschaft auch noch nirgendswo Gelsen. Aber egal ^^ ich Probiere es mal aus =D
Danke ;)
-----------
Heyy,
jetzt geht die Box aber an den Linken Rand??
also irrgendwas funktioniert da nicht >.<
LG
Michael
Beitrag zuletzt geändert: 11.10.2012 13:27:49 von giga-score -
Es könnte sein, dass "margin:0 auto" (was übringes bedeutet, dass oben und unten margin:0 sein soll und links und rechts margin:auto) bei absoluter Positionierung nicht funktioniert. Es ist schon ne Weile her, dass ich mich mit der Materie beschäftigt habe. Eine weitere Möglichkeit die mir noch einfiele wäre, dass du folgendes machst:
dabei wird der div-container von innen her als inline-Element betrachtet (also als gäbe es nur eine zeile text wie beim p-element) aber von aussen weiterhin als mehrzeiliges Objekt sozusagen. Wie gesagt ich bin schon ein bisschen eingerostet also musst du leider probieren.#container { display:inline-block; text-align:center; } -
danke aber irgendwie funktioniert das auch nicht ganz >.<
Also das was ich im Moment in meiner main.css zu dieser Box stehen habe ist:div.menubox { position: fixed; display:inline-block; text-align:center; background-color: #333333; top:3%; z-index:1; padding-top:1%; padding-bottom:1%; padding-left:2%; padding-right:5%; white-space: nowrap; opacity: 0.3; border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -webkit-box-shadow: 0px 0px 10px #333333; -moz-box-shadow: 0px 0px 10px #333333; box-shadow: 0px 0px 10px #333333; }
Vielleicht kann mir ja jetzt jemand eher Helfen =D -
also margin:0px auto funktioniert zur positionierung nur bei static-layout, also nicht zur positionierung bei position:absolut
wenn du die box unbedigt absolut positioniert haben willst gibts den trick des horizontalen zentrierens mittels left:50% und negativem margin der hälfte der breite der box - aber bei einer inline-box (keine feste breite, also kein block-element) hast du diesen wert ja nicht...
eine lösung wäre ein absolut positionierter div (position:absolute; top:0px; left:0px; text-align:center) der deine box beinhaltet die dann mit normalem position (static) zentriert wird (display:inline-block; margin:0px auto) - wobei das div dann natürlich den platz links und rechts neben der box mit layout füllt, also eventuell drunterliegende links zb nicht mehr klickbar sind... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
