Layout position
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
auto
bild
browser
code
dank
ecke
grafik
helfen
hintergrundbild
http
image
inhalt
mitte
position
problem
radius
rahmen
runde ecken
url
-
Hi erstmal,
meine Überschrift ist ein bisschen doof aber ich wusste nicht wie ich mein Problem in wenige Worte fassen sollte.
Ich möchte meine Homepage zentriert haben.
<center> ... </center>
damit klappts perfekt - allerdings möchte ich nicht mit htmlbefehlen sondern css arbeiten.
Doch überall wo ich schaue, wird nur die Möglichkeit mit position:absolute; und negativem margin vorgestellt:
position:absolute; left: 50%; width: 750px; margin-left: -388px; /* negative Hälfte von width:700px */ top:165px;
Ich möchte meine Elemente aber auf keinen Fall mit absolute positionieren, weil meine ganzen divs dan überhaupt keine Wirkung haben. Gibts da noch weitere möglichkeiten???
Außerdem möchte ich meine Divs (egal ob mit hintergrundbild oder anderst) mit einem dünnen Rahmen ausstatten. Dieser Rahmen soll allerdings abgerundete Ecken haben UND in jedem Browser (ja auch im IE weils im FF ja glaub son Befehl gibt) angezeigt werden. Auch hier möchte ich nicht mit Bildern, die mit z-index:-1; und position:absolute; ausgestattet sind arbeiten. Gegen z-index spricht an sich nix nur kann er eben nur bei absolut positionierten Elementen verwendet werden.
Ich hoffe da könnt ihr mir helfen - da ich trotz tagelangem Googeln nichts gefunden hab :(
schonmal jetzt vielen Dank!!
MVG
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
sry aber das hab ich schon versucht. Es klappt nur im FF im IE passiert garnix. trotzdem Danke aber ich brauche eine Lösung die in jedem Browser klappt (hatt ich auch glaub oben so hingeschrieben).
-
programtools schrieb:
sry aber das hab ich schon versucht. Es klappt nur im FF im IE passiert garnix. trotzdem Danke aber ich brauche eine Lösung die in jedem Browser klappt (hatt ich auch glaub oben so hingeschrieben).
Das von fatfreddy angegebene CSS funktionier in "jedem" Browser (sofern er nicht "uralt" ist), jedenfalls bei mir. Du musst etwas falsch gemacht haben. Auf welchen Selektor hast du das CSS angewendet?
Gruß Tom
Beitrag zuletzt geändert: 5.2.2010 16:07:04 von tom-moeller -
ich habs erst im body versucht und dann in dem Div das ich positionieren wollte (main-div in das dann der gesammte seiteninhalt kommt)
-
programtools schrieb:
.... (main-div in das dann der gesammte seiteninhalt kommt)
Genau auf den musst Du es anwenden. Auf body gehts nicht. Du wirst im ganen Netz keine andere Möglichkeit genannt bekommen, browserübergreifend ein DIV zu zentrieren.
Gruß
Edit// Der IE6 zeigt es natürlich nur an, wenn die Dokumenttyp-Deklarationen für den standardkonformen Modus eingerichtet sind. Link:
Beitrag zuletzt geändert: 5.2.2010 16:43:26 von tom-moeller -
vielen Dank schonmel...
ich hab mich jetzt damit abgefunden es so machen zu müssen aber position:absolute; wird dafür doch nicht benötigt oder??
Aber was mach ich mit den Divs-grafiken... ??? Das ist nähmlich etwas wörüber ich mir schon lange Gedanken mache und was ich einfach nicht rauskrig!! -
Schon mal mit position: relative; versucht?
Um runde Ecken um deine Div-Container zu bekommen, die auch auf allen Browsern so angezeigt werden, würde ich dir empfehlen, dass mit Grafiken zu lösen, da die CSS-Lösung noch nicht von allen aktuellen Browsern korrekt wiedergegeben wird. -
sry aber hab ich noch nie gehört. Kannst du mir da erklären was das ist?? (am besten mit Beispiel oder so damit ichs versteh!!) und wegen den Grafiken - wie soll ich das machen?
vielen dank - hoffe dass du mir dass noch ein bisschen näher erklären kannst
MVG -
programtools schrieb:
sry aber hab ich noch nie gehört. Kannst du mir da erklären was das ist?? (am besten mit Beispiel oder so damit ichs versteh!!) und wegen den Grafiken - wie soll ich das machen?
vielen dank - hoffe dass du mir dass noch ein bisschen näher erklären kannst
MVG
Kein Problem. Bei SELFHTML findest Du zu position:
Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
Wenn Du mehr Hilfe brauchst, musst Du aber schon konkreter deine Vorstellungen bzw. dein Ziel schildern, damit ich dir besser helfen kann. -
@lokishhomepage
danke für die Hilefe (ich nutze inkskape - kann man meiner Meinung nach viel bessere grafiken als mit gimp machen abba egal...)
doch mit dem background bin ich garnicht einverstanden! Das ist ja genau das was ich nicht will!!!
@das-atrium
auch vielen Dank an dich für deine Bemühungen mir zu helfen! Ich habe mir das bei selfhtml mal angeachaut und auch verstanden DD
Wegen den Grafiken ist das so ein Problem! Weil dass div 1. Nach unten hin variable sein soll (breite ist fest nur die höhe ist in %)
fällt ein Hintergrundbild aus! Ich möchte ja ALLE Ecken rund haben. Ist das überhaupt möglich ohne zig absolut positionierte (was ich ja garnicht mag) divs/ imgs??
Hoffe ich hab mein Anligen verständlich rübergebracht
MVG -
programtools schrieb:
Wegen den Grafiken ist das so ein Problem! Weil dass div 1. Nach unten hin variable sein soll (breite ist fest nur die höhe ist in %)
fällt ein Hintergrundbild aus! Ich möchte ja ALLE Ecken rund haben. Ist das überhaupt möglich ohne zig absolut positionierte (was ich ja garnicht mag) divs/ imgs??
Hoffe ich hab mein Anligen verständlich rübergebracht
MVG
Wenn Du den IE benutzt: Leider ja. Mir ist jedenfalls noch keine andere Lösung dafür untergekommen.
Der FF hingegen tuts schon mit dem CSS:
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Wird im IE halt nur eckig angezeigt. -
Ja nur leider nutzen über 65% der Leute IE (da dieser standartmäßig installiert ist und so). Deshalb muss ich es irgendwie mit Grafiken lösen. Naja vielleicht ist das auch etwas, was einfach nicht geht. MVG
-
also wenn ich rundherum runde ecken haben will, dann hab ich grob gesagt drei divs:
1.div = bild oben runde ecken
2.div= content (zu inhalten zähle ich jetzt mal alles was zwischen dem ersten und zweiten div steht)
3.div= bild unten runde ecken
ich fange dann von oben an erst einmal das bild mit den runden ecken einzufügen (background-image: url(); und breite und höhe des bildes, meist auch noch margin: 0px auto; für die zentrale positionierung)
dann kommt darunter der zweite DIV in dem dann alles andere drin ist (header, menü, diverse spalten usw.)
und zum schluss kommt der 3. div mit dem 2. bild (wieder wie beim ersten alles festlegen)
wenn ich die grundstruktur habe wird der content-bereich erstellt.
Beitrag zuletzt geändert: 6.2.2010 10:40:46 von coding4everyone -
thx aber ich verstehe da was nicht:
|----------------------------------------| ** oben (1.div)
? ? **mitte (mit inhalt also 2.div)
? ? **mitte (mit inhalt also 2.div)
? ? **mitte (mit inhalt also 2.div)
? ? **mitte (mit inhalt also 2.div)
? ? **mitte (mit inhalt also 2.div)
|----------------------------------------| ** unten (3.div>
wie mache ich jetzt den rand in der Mitte? ich will ja nicht nur runde echen sondern einen gesamten Rahmen mit runden echen. -
du kannst doch z.b. einen border-left und einen border-right festlegen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
