Angabe in Prozent und Pixel kombiniert

[Maria]

Hallo Miteinander,

ich konnte leider nichts finden, das meine Problemstellung beantwortet und hoffe daher auf Eure Hilfe:

Kann ich eine Angabe (in dem Fall geht es um ein DIV-Element und dessen Attributangabe TOP) auch kombinieren, so dass ich eine Angabe in Prozent + eine gewisse Anzahl von Pixeln mache.

Hintergrund ist der, dass ich zwei Division-Elemente habe, die mehr oder weniger zwei horiziontale Linien ergeben, zwischen denen Bilder in einer bestimmten Größe (250 Pixel) sind.
Aus Design-technischen Gründen soll der Strich oberhalb der Bilder prozentual angegeben werden. Der Strich darunter soll sich an der fixen Größe der Bilder orientieren, so dass dieser genau da ist, wo die Bilder enden. Also im Endeffekt, die prozentuale Angabe + die feste Pixelanzahl.

Falls es nicht direkt geht, gäbe es dann eine Möglichkeit so etwas über ein Javascript oder ähnliches zu realisieren?
Wäre dankbar für einen Beispielcode, auf meine gewünschte Seite kann ich es dann selbst anpassen.

Danke für Eure Hilfe vorab.

Liebe Grüße

Maria

P.S.: Ich hoffe ich habe mich nicht zu kompliziert ausgedrückt, ggf. bitte nachfragen. 0;-)

[bleicher]

Grüße,
ich kapiere nciht wie du es beschreibst - wirklich nicht, habe zwar vermutung - aber fest ist die nicht
an sich kann man dein vorhaben vllt umsetzen - indem man % und px angaben auf unterscheidliche eigenschaften verteilt - aber du sollst deine idee entweder sinvoll beschrieben oder skizzieren.
MFG
bleicher

[Maria]

Grüße,
ich kapiere nciht wie du es beschreibst - wirklich nicht, habe zwar vermutung - aber fest ist die nicht
an sich kann man dein vorhaben vllt umsetzen - indem man % und px angaben auf unterscheidliche eigenschaften verteilt - aber du sollst deine idee entweder sinvoll beschrieben oder skizzieren.

Ich gebe Dir am besten mal ein Link:
http://www.d-u-m-m-y.de/maria/test.html
Es geht um die zwei horiziontalen Balken (apDiv4 und apDiv5). Momentan habe ich auch noch bei dem unteren (apDiv5) eine Prozentangabe drin weswegen der Abstand zwischen den Balken je nach Auflösung bzw. Fenstergröße variabel ist. Dieser Abstand soll aber fest sein und sich daher an der variablen Größe des oberen Balken (apDiv4) orientieren - das Ziel ist als für apDiv5 einen Abstand von 43.68% + 250px zu bekommen:

#apDiv4 {
position:absolute;
width:100%;
height:3px;
z-index:3;
left: 0%;
top: 43.68%;
background-color: #FFFFFF;
}
#apDiv5 {
position:absolute;
width:85.3%;
height:3px;
z-index:4;
background-color: #FFFFFF;
top: 78.42%;
left: 14.7%;
}

MFG
bleicher

[bleicher]

Grüße,
wie schon gesagt .- ersetz top durch margin und gut ist^^
MFG
bleicher

[Jack]

Hi,

Ich vermute, das sich dein Problem sehr einfach ohne JS mit CSS lösen lasst. Mach einfach die top Angabe des div Elements in Prozent und zusätzlich eine margin-top Angabe in Pixel ...

Gruss, Jack

P.S.: Ich hoffe ich habe mich nicht zu kompliziert ausgedrückt,

Doch - hast du :-)

[Maria]

Hi,

Ich vermute, das sich dein Problem sehr einfach ohne JS mit CSS lösen lasst. Mach einfach die top Angabe des div Elements in Prozent und zusätzlich eine margin-top Angabe in Pixel ...

Danke für den Hinweis.

Sehe ich es aber richtig, dass ich dann den zweiten Balken als Unterelement des ersten Balken einfügen muss.
Sonst wäre margin-top ja im Body-Tag und würde damit die gleiche Angabe wie top bewirken, nämlich der Abstand nach oben zum Beginn des Browser-Fensters.

Könnte oder sollte ich mit anderen Elementen für die Balken arbeiten? Da es keine vertikalen Trennstriche gibt, habe ich einfach alle Balken über schmale Divisions realisiert. Natürlich bin ich aber daran interessiert, möglichst sinnvoll zu programmieren und freue mich gerne über Hinweise, wie es besser zu machen ist.

Habe Dir mal kurz Links zu meinen Dateien:
Ursprung:
http://www.d-u-m-m-y.de/maria/test.html
mit Deinem Hinweis (margin-top 250 px und unterer Balken (apDiv5) als Unterelement des oberen Balkens (apDiv4):
http://www.d-u-m-m-y.de/maria/test2.html

Gruss, Jack

P.S.: Ich hoffe ich habe mich nicht zu kompliziert ausgedrückt,

Doch - hast du :-)

Sorry, Frauen eben ;-P ... natürlich nicht alle, aber ich ;-)

[bleicher]

Grüße,

Sonst wäre margin-top ja im Body-Tag und würde damit die gleiche Angabe wie top bewirken, nämlich der Abstand nach oben zum Beginn des Browser-Fensters.

nein, des elements drüber/davor

margin besagt nur vie viel freiraum zum element (drüber in diesem fall) das element lässt.
liest du vllt ein wenig selfhtml-tutorials nach?
du hast nicht ganz so viuel erfahrung mit wie es mir vorkommt.
MFG
bleicher

[Maria]

Grüße,

Sonst wäre margin-top ja im Body-Tag und würde damit die gleiche Angabe wie top bewirken, nämlich der Abstand nach oben zum Beginn des Browser-Fensters.

nein, des elements drüber/davor

Na wenn der div-Tag aber im body-Tag ist, wie es bei mir der Fall war, dann ist doch dieser das darüberliegende Element und somit die gleiche Wirkung wie top. War zumindest bei mir so, als ich es ausprobiert hab (allerdings auch nur mit dem IE8 angesehen).

margin besagt nur vie viel freiraum zum element (drüber in diesem fall) das element lässt.
liest du vllt ein wenig selfhtml-tutorials nach?

Doch ich lese scho nach, bin aber leider in dem Punkt nicht mehr weiter gekommen, da ich dem Irrglauben unterlag, dass margin-top und ähnliche Elemente nur etwas mit Tabellen zu tun haben und wusste nicht, dass die auch beispielsweise bei Divisions und anderen Elementen genutzt werden können. Insofern nochmals herzlichen Dank für Eure Hilfe, der Knoten ist geplatzt und mir ist jetzt auch klar, warum ich beim suchen nichts gefunden habe, nachdem die Lösung eigentlich so einfach ist.

du hast nicht ganz so viuel erfahrung mit wie es mir vorkommt.
MFG
bleicher

[bleicher]

Grüße,

Na wenn der div-Tag aber im body-Tag ist, wie es bei mir der Fall war, dann ist doch dieser das darüberliegende Element und somit die gleiche Wirkung wie top. War zumindest bei mir so, als ich es ausprobiert hab (allerdings auch nur mit dem IE8 angesehen).

nein - dombaummäßig schon, für die darstellung hat es aber secundere beduetung - bei <div id=1></div><div id=2></div> würde margin die lücke zwichen den beuden divs bestimmen, und margin-top von 2 sein abstand zum 1

MFG
bleicher

[Kai345]

[latex]Mae  govannen![/latex]

bei <div id=1></div><div id=2></div>

... verdient der Autor Schläge. http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name

Cü,

Kai

[bleicher]

Grüße,

... verdient der Autor Schläge. http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name

ich weiss - funktioniert aber irl un dist immer noch üblicher als . und : )
MFG
bleicher

[Jack]

Sehe ich es aber richtig, dass ich dann den zweiten Balken als Unterelement des ersten Balken einfügen muss.
Sonst wäre margin-top ja im Body-Tag und würde damit die gleiche Angabe wie top bewirken, nämlich der Abstand nach oben zum Beginn des Browser-Fensters.

Drei wichtige Hinweise zu deiner Formatiererei:

• es ist schnurz-egal ob du div, hr, p oder sonstweilche Elemente verwendest
• "margin-top" ist immer der Abstand eines Elements zum Vorgänger. Ist also vom Verständnis sehr einfache!
• top ist vom Verständis schwieriger. Unbedingt den Absatz "Positionierung und Anzeige von Elementen" von selfhtml gründlich lesen!!!!

[Kai345]

[latex]Mae  govannen![/latex]

Drei wichtige Hinweise zu deiner Formatiererei:

• es ist schnurz-egal ob du div, hr, p oder sonstweilche Elemente verwendest

Unsinn. Es gibt durchaus noch andere Geräte als Desktop-Browser. Nicht alle kennen CSS überhaupt oder vollständig und sind daher auf korrekte Verwendung entsprechender Elemente angewiesen, um eine Seite entsprechend darzustellen. Desweiteren stellen nicht alle Geräte Elemente ohne Inhalt überhaupt dar, daher wird oftmals zu üblen Krücken wie <div>&nbsp;</div> gegriffen.

• "margin-top" ist immer der Abstand eines Elements zum Vorgänger. Ist also vom Verständnis sehr einfache!

Bis man in die Falle der "collapsing margins" tritt :)

Cü,

Kai

[Kai345]

[latex]Mae  govannen![/latex]

Ein kleiner Hinweis außerhalb; zum Problem selbst hast du ja schon Antworten und mir fehlt zur Zeit die Lust, mich damit zu befassen (zu warm hier oben im unisolierten Dachgeschoß)

Hintergrund ist der, dass ich zwei Division-Elemente habe, die mehr oder weniger zwei horiziontale Linien ergeben, zwischen denen Bilder in einer bestimmten Größe (250 Pixel) sind.

Das hört sich _sehr_ übel an. <div> als Linie widerspricht jeglicher Semantik.
Linien sind meist nur optische Trennung, kein wirklicher Inhalt, daher benutze (bevorzugt) border-(bottom|top), das ggf. mit einem entsprechenden Padding auf Abstand gebracht wird oder aber notfalls das für horizontale Linien vorgesehenen Element hr

Kai

[Jack]

Das hört sich _sehr_ übel an. <div> als Linie widerspricht jeglicher Semantik.

Nein, die Technik hört sich nicht sehr übel an. Maria möchte ganz offensichtlich, das sich Linien überschneiden (nennen wir es mal "Das Wort zum Sonntag Format" - kurz DWZSF). Ein DWZSF kriegt man mit border etc. ungleich schwerer hin als mit ihrer Methode. Vieleicht könnte sie die Logik der Codes etwas verbessern indem sie die div Elemenete durch hr Elemente oder ähnliches ersetzt (ein hr Element lässt sich ja auch 1 Millimeter breit und 5 Meter lang formatieren). Aber technisch bleibt das einerlei.

[Maria]

Das hört sich _sehr_ übel an. <div> als Linie widerspricht jeglicher Semantik.

Nein, die Technik hört sich nicht sehr übel an. Maria möchte ganz offensichtlich, das sich Linien überschneiden (nennen wir es mal "Das Wort zum Sonntag Format" - kurz DWZSF). Ein DWZSF kriegt man mit border etc. ungleich schwerer hin als mit ihrer Methode. Vieleicht könnte sie die Logik der Codes etwas verbessern indem sie die div Elemenete durch hr Elemente oder ähnliches ersetzt (ein hr Element lässt sich ja auch 1 Millimeter breit und 5 Meter lang formatieren). Aber technisch bleibt das einerlei.

Danke für die Unterstützung ;-P
wobei ich gerne offen für Verbesserungsvorschläge bin.
Ich will auch noch die Angaben mit einer gesonderten CSS-Datei trennen, sobald mal das Grundgerüst steht, aber bin eben noch in der "Probier-Phase".
Also wenn Ihr mir einen Hinweis habt, dass ich andere Elemente als Divisions nehmen sollte, bin ich offen und dankbar für Vorschläge.

Damit Ihr genau wisst worum es mir geht nachfolgend mal ein Link auf die Datei
http://www.d-u-m-m-y.de/maria/test2.html
Darin habe ich schon dank der Hilfe über margin-top und umstellen des zweiten Balken als Unterelement des ersten mein Ziel erreicht. :-)

[Kai345]

[latex]Mae  govannen![/latex]

Das hört sich _sehr_ übel an. <div> als Linie widerspricht jeglicher Semantik.

Nein, die Technik hört sich nicht sehr übel an.

Doch, aus semantischer Sicht bleiben unpassende Elemente unpassende Elemente.  Wenn ich eine Kuh darstellen will, benutze ich das (imaginäre) Element <kuh /> und nicht <schwein />, welches ich wie eine Kuh formatiere. Wohlgemerkt: Es geht absolut nicht um das, was darstellerisch erreicht werden soll, sondern ausschließlich um semantische Sichtweise.

Maria möchte ganz offensichtlich, das sich Linien überschneiden (nennen wir es mal "Das Wort zum Sonntag Format" - kurz DWZSF). Ein DWZSF kriegt man mit border etc. ungleich schwerer hin als mit ihrer Methode.

Aus diesem Grunde habe ich alternativ das genau für horizontale Linien vorgesehene Linien hr-Element erwähnt.

Vieleicht könnte sie die Logik der Codes etwas verbessern indem sie die div Elemenete durch hr Elemente oder ähnliches ersetzt (ein hr Element lässt sich ja auch 1 Millimeter breit und 5 Meter lang formatieren). Aber technisch bleibt das einerlei.

Deshalb schrieb ich auch "aus semantischer Sicht". Man kann auch eine Seite fast komplett mit divs/spans aufbauen, dadurch wird es aber nicht sinnvoll, dies auch zu tun. Es gibt z.B. nun mal das Element h1, deshalb ist ein div class="header1" unsinnig, obwohl es bei entsprechender Formatierung technisch genau das gleiche Ergebnis erzeugen mag.

Cü,

Kai

[Jack]

ich gebe gerne zu, das hier der Begriff "Semantik" besser als "Logik" ist. Ansonsten sagen/chreiben wir aber doch das gleiche ... jedemfalls kriegt am nmit "border" ein DWZSF nur sehr schwer hin.