nicht angemeldet
relativ
Struppihallo zusammen
ich möchte die elemente meines layout per externer css positionieren.
da das design bei jeder auflösung gleich aussehen soll mit der gleichen grösse, bin ich der meinung, das ganze relativ zu positionieren, fixed wird ja von älteren IE browsern nicht unterstützt.
habe das ganze mal bei selfhtml durchgelesen, aber kapiere das nicht 100%.
wenn ich in meiner datei (.php) ein div element habe und definiere es solle top und left 25 pix haben, dann ist der top abstand im online modus 45 und im left 35....warum denn das....das relativ geht ja von der anfangsposition oder normalposition des elements aus, nur woher soll ich wissen wo diese anfangsposition ist?
-
versteht ihr was ich meine?
-
Hallo Project,
ich möchte die elemente meines layout per externer css positionieren.
da das design bei jeder auflösung gleich aussehen soll mit der gleichen grösse, bin ich der meinung, das ganze relativ zu positionieren, fixed wird ja von älteren IE browsern nicht unterstützt.Du meinst mit position? Davon würde ich generell abraten. Benutze lieber normale Elemente im Fluss und Flaots. Außerdem wäre wohl, wenn überhaupt, position:absolute am sinnvollsten...
das relativ geht ja von der anfangsposition oder normalposition des elements aus, nur woher soll ich wissen wo diese anfangsposition ist?
Das siehst du, wenn du das position:relative weglässt. Die meisten Browser definieren z.B. ein margin oder padding für den body.
Jonathan
-
mit absolut scrollt das element mit das möchte ich ja nicht
-
mit absolut scrollt das element mit das möchte ich ja nicht
mit relative auch.
Struppi.
-
-
ist es damit auch möglich, elemente zu überlappen?
-
ist es damit auch möglich, elemente zu überlappen?
Womit?
Struppi.
-
mit umfliessung und float wie im oberen post genannt
-
-
-
habe das ganze mit margin gelöst, ist zwar bei überlappungen ein schönes rechenspiel aber geht aber möglich, leider funtzt es aber nicht ganz so wie ich will, habe eine div box und margin top und left 25 px angegeben.......im online modus ist der randabstand aber keinesfalls 25 px...bei top und left sogar noch unterschiedlich.....warum denn das wieder
-
Hallo Project,
im online modus ist der randabstand aber keinesfalls 25 px...bei top und left sogar noch unterschiedlich.....warum denn das wieder
Gib uns einfach einen Link. Eine Ursache könnten collapsing margins sein.
Aber irgendwie erschließt sich mir auch nicht, wozu du überlappungen brauchst.Wenn sich was überlappt ist das Darunterliegende für gewöhnlich zumindest teilweise verdeckt und damit mehr oder weniger unbrauchbar.
Und position:relative/absolute kann für Überlappungen auch durchaus in Ordnung sein. Nur wenn man ganze Seitenbereiche damit ausrichten will, sollte man vorsichtig sein.
Jonathan
-
http://www.kadia.net/cms-test-1/joomla/index.php
die überlappungen brauche ich hier www.kadia.net
hier sollte das div mit grauem rahmen hinter dem restlichen content sein...-
Hallo Project,
die überlappungen brauche ich hier www.kadia.net
hier sollte das div mit grauem rahmen hinter dem restlichen content sein...Sorry, aber da sehe ich nichts, was sich irgendwie überlappen sollte. Was spricht sagegen, dem <div> (oder wasauchimmer) in das du den ganzen Seiteninhalt reinpackst, einfach einen grauen Rahmen zu geben?
Wenn du lernen willst, wie man so ein Design mit CSS umsetzt, baue erstmal alles neu auf. Wenn es nur um die CSS-Umsetzung geht, fange z.B. damit an, erstmal ein <div> mit ein bischen Blindtext zu füllen. Das kannst du dann zentrieren, einen Rahmen hinzufügen, die Überschrift und den Himmel nacheinander einfügen und dann später die Restlichen Sachen umsetzen.
Jonathan
-
nun, die texte kann man vergessen denn das ganze wird ein template für ein cms und da werden alle texte per cms ausgegeben, wenn ich ein div mache eben mit dem grauen rahmen, dann kann ich nicht noch ein hintergrundbild zuordnen sonst wird ja die ganze höhe des divs mit dem bild versehen was ja nicht das ziel ist daher muss ich ja ein div mit dem rahmen und ein div mit dem background erstellen....
-
Hallo Project,
wenn ich ein div mache eben mit dem grauen rahmen, dann kann ich nicht noch ein hintergrundbild zuordnen sonst wird ja die ganze höhe des divs mit dem bild versehen was ja nicht das ziel ist daher muss ich ja ein div mit dem rahmen und ein div mit dem background erstellen....
Du kannst mit background-repeat das Bild nur einmal wiederholen lassen.
Aber auch sonst...
Was spricht gegen:
<div style="border 2px solid grey;width:60em;margin:0 auto;"> <div style="background:...;height:100px;"> Hier ist das Hintergrundbild </div> Hier ist unter dem Hintergrundbild </div>?
Jonathan
-
Hallo,
Nur, dass du dich nicht wunderst, aber da ist mir ein Doppelpunkt nach dem "border" verloren gegangen.
<div style="border 2px solid grey;width:60em;margin:0 auto;">Jonathan
-
ja man lernt immer wieder neu, geklappt hats jedenfalls...danke...
das ziel ist ja die möglichst beste variante in sachen barrierefreiheit einzusetzen.
die "verschachtelung" der divs, also div in div sollte da keine barriere darstellen nicht wahr, ich gehe davon aus, dass diese variante für meinen gewünschten verwendungszweck die "idealste" ist oder?-
Hallo Project,
ja man lernt immer wieder neu, geklappt hats jedenfalls...danke...
Mag schon sein. Aber beachte bitte, dass mein Beispielcode absolut simpel und grundlegendes CSS/HTML ist. Wenn du für sowas schon Hilfe brauchst, solltest du mit relativer Positionierung garnicht erst anfangen.
das ziel ist ja die möglichst beste variante in sachen barrierefreiheit einzusetzen.
die "verschachtelung" der divs, also div in div sollte da keine barriere darstellen nicht wahr, ich gehe davon aus, dass diese variante für meinen gewünschten verwendungszweck die "idealste" ist oder?Divs selber sind absolut kein Problem bei der Barrierefreiheit. Sie erzeugen aber auch in dem Punkt keinen Vorteil. Nachteilig wirds nur, wenn du Überschriften und ähnliches durch divs ausdrückst.
Das div im div war jetzt nur ein Beispiel. Je nach Inhalt der Seite kannst du z.B. überlegen, das innere div durch ein h1 zu ersetzten. Du darfst gerne divs einsetzen und verschachteln. Nur zeichne Bitte trotzdem Elemente sinnvoll aus und übertreibe es nicht. Dein Code wird umso übersichtlicher, je weniger überflüssige divs enthalten sind.
Meinen Code hätte ich z.B. auch so schreiben können:
<div style="border: 2px solid grey;width:60em;margin:0 auto;background:url(...) no-repeat;padding-top:100px;">
Hier ist unter dem Hintergrundbild
</div>
(ungetestet)Vom Rahmen und Hintergrundbild her dürfte beides gleich aussehen, aber hier hast du eben nicht mehr die Möglichkeit einen Text (oder eine Überschrift) übers Hintergrundbild zu legen.
PS: Natürlich lagert man normalerweise das CSS in ein externes Stylesheet oder ein <style>-Element aus. Meine Beispiele sind wirklich nur kleine Beispiele.
Jonathan
-
-
-
-
-
-
-
-
-