HTML prozentuale Quadrate
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
browser
code
eigenschaft
element
falle
funktion
http
idee
karte
machen
problem
quader
quadrat
standard
tabelle
url
versuchen
vollmond
zeile
-
Hallo,
ich versuche, ein
quadratisch darzustellen, also so, dass die Breite der Höhe entspricht. Mit angaben in Pixeln ist das auch kein Problem, aber bei Prozentangaben schon. Zur besseren Verständnis:<div>
<div height="50%" width="50%"> Hier steht Etwas </div>
Nur soll die Breite nicht 50% der Gesammtbreite, sondern der Gesammthöhe des Anzeigebereichs entsprechen. Gibt es da eine möglichkeit? Wenn nötig auch mit Javascript, was aber warscheinlich aufwendig wäre, weil die Werte ja u.U. angepasst werden müssen, wenn man die Fenstergröße ändert.
MFG THWBM -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
nun relative width und height beziehen sich nunmal immer auf die abmessungen des elternelements.
mit javascript sicherlich zu lösen - und auch nicht so kompliziert:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>quadratisch</title> <style type="text/css"> html, body { width:100%; height:100%; margin:0px; padding:0px; overflow:auto; text-align:center; } p { margin:0px; } #quadrat { margin:0px auto; background-color:#CCC; } </style> <script type="text/javascript"> function quadratisch() { var wert = Math.min(document.body.offsetHeight, document.body.offsetWidth); var quadrat = document.getElementById('quadrat'); quadrat.style.width = wert + 'px'; quadrat.style.height = wert + 'px'; } </script> </head> <body onload="quadratisch()" onresize="quadratisch()"> <div id="quadrat"> <p>Hier steht etwas</p> </div> </body> </html>
die idee mit dem img hatte ich auch, aber scheint ncht so einfach zu klappen... -
Hallo und danke für die schnelle Antwort,
xian schrieb:
idee: bilder können proportional skalieren
Die Idee hatte ich auch schon, aber das wäre eine nicht sehr elegante Lösung. Außerdem war ich beim Schreiben dieses Themas zu schlau für mich selber
. Die Prozentangaben sollen sich nämlich nicht nur auf einen einzelnen Div, sondern auch auf von einander unabhängigen Tabellenspalten beziehen, sodass die Höhe einer Tabellenspalte (z.B. 50%) der Breite einer anderen Tabellenspalte entspricht. Ich wollte das Beispiel mit dem Div nehmen, um alles leichter verständlich zu machen.
hcms schrieb:
mit javascript sicherlich zu lösen - und auch nicht so kompliziert:
Das sieht recht vielversprchend aus, aber ich werde mit dem Bild als Quadrat nochmal weiter rumprobieren. An sonsten werde ich es mal mit dem Javascript Script versuchen.
Falls noch jemand weitere Ideen hat, bin ich ihm/ihr sehr dankbar, wenn er/sie mir diese mittelit.
MFG THWBM -
thwbm schrieb:
ich versuche, ein
quadratisch darzustellen, also so, dass die Breite der Höhe entspricht.<div>
Daraus schließe ich:(b = Breite, h = Höhe)
Nur soll die Breite nicht 50% der Gesammtbreite, sondern der Gesammthöhe des Anzeigebereichs entsprechen.
heißt
Interpretiere ich deine Aussage falsch oder widersprichst du dir selbst?
Wenn nötig auch mit Javascript, was aber warscheinlich aufwendig wäre, weil die Werte ja u.U. angepasst werden müssen, wenn man die Fenstergröße ändert.
Das stellt grundsätzlich kein Problem dar, denn sofern man geklärt hat, was du überhaupt erreichen möchtest, kann man die Berechnung der DIVs in eine Funktion auslagern und bei einer Manipulation der Fenstergröße aufrufen:
window.onresize = function(event) { //Funktion aufrufen }
oder via jQuery
$(window).resize(function() { //Funktion aufrufen }); -
ploco schrieb:
Interpretiere ich deine Aussage falsch oder widersprichst du dir selbst?
Darin liegt kein Widerspruch.
b und h sind frei wählbar und sollen den gegebenen Gleichungen genügen.
-
hcms schrieb:
^^ Das alleine wird nicht ausreichen, da der IE ne Extrawurst haben möchte.
var wert = Math.min(document.body.offsetHeight, document.body.offsetWidth);
Der Grund sind installierte Toolbars & die Taskleiste (welche ja ein/ausgeblendet sein könnte), was beim IE falsche Werte für den eigentlich erfragten, im aktiven Fenster sichtbaren Bereich einer Webseite ausgeben könnte. Folglich müsste das zunächst abgefragt werden:
var d=document, doc_width, doc_height; if ( d.body.scrollHeight > d.body.offsetHeight ) { doc_width = d.body.scrollWidth; doc_height = d.body.scrollHeight; } else { doc_width = d.body.offsetWidth; doc_height = d.body.offsetHeight; };
Kleines Scriptchen zum Testen unterschiedlicher Browser:
<html><head><title></title></head> <body><script language="JavaScript"><!-- var d=document, doc_width, doc_height; if ( d.body.scrollHeight > d.body.offsetHeight ) { doc_width = d.body.scrollWidth; doc_height = d.body.scrollHeight; } else { doc_width = d.body.offsetWidth; doc_height = d.body.offsetHeight; }; // do something with doc_width & doc_height // test? alert (doc_width+' * '+doc_height) //--> </script></body></html>
^^ Ist übrigens so ganz nebenbei ne weitere nette Methode um herauszufinden, ob jemand mit geturkten Browserdaten unterwegs ist ;)
Beitrag zuletzt geändert: 26.1.2013 15:13:20 von menschle -
Hallo,
ploco schrieb:
Daraus schließe ich:
heißt
Interpretiere ich deine Aussage falsch oder widersprichst du dir selbst?
Nein, ich meine das so:
Die Breite des Divs sollen X% der Breite des Fensters sein. Die Höhe sollen auch X% der BREITE des Fensters sein.
ploco schrieb:
via jQuery
$(window).resize(function() { //Funktion aufrufen });
Diesen Code habe ich auch bereits gefunden und nutze ihn.
menschle schrieb:
hcms schrieb:
var wert = Math.min(document.body.offsetHeight, document.body.offsetWidth);
^^ Das alleine wird nicht ausreichen, da der IE ne Extrawurst haben möchte.
Sehr (un-)geerter IE,
ich wolte dir nur sagen, dass ich dich
. Du bist zum 
!
Danke für die
Abfrage für den Browser, ich überlege noch, ob ich mir die Arbeit machen soll, das ganze auch für den IE tauglich zu machen, oder ob ich eher nur eine Meldung anzeigen soll die in etwa das aussagt:if
Du benutzt einen sch*** Browser, bitte lade dir hier einen vernünftigen Browser herunter oder verlasse diese Seite.
Mein nächstes Problem ist es, dass ich einen div immer genau doppelt so breit darstellen will wie er hoch ist, es aber nie Scrallbalken gibt. Hat jemand eine Idee?
MFG THWBM -
thwbm schrieb:
Sehr (un-)geerter IE,
ich wolte dir nur sagen, dass ich dich. Du bist zum !
[...] ich überlege noch, ob ich [...] eher nur eine Meldung anzeigen soll die in etwa das aussagt:
Du benutzt einen sch*** Browser, bitte lade dir hier einen vernünftigen Browser herunter oder verlasse diese Seite.
Mein nächstes Problem ist es, dass ich einen div immer genau doppelt so breit darstellen will wie er hoch ist, es aber nie Scrallbalken gibt. Hat jemand eine Idee?
Hm, erst nen Quader, nun doch lieber ein Rechteck.
Vielleicht beschreibst Du lieber zunächst, was genau Du denn eigentlich vorhast, bevor gefühlte 900 Scriptvorschläge kommen?
-
menschle schrieb:
Hm, erst nen Quader, nun doch lieber ein Rechteck.
Ein Quader? Ich habe nie ein Quader in zwei Dimansionen erstellen wollen. Oder meinst du ein Quadrat? Ich denke schon.
menschle schrieb:
Vielleicht beschreibst Du lieber zunächst, was genau Du denn eigentlich vorhast, bevor gefühlte 900 Scriptvorschläge kommen?
Ich habe zum einen vor, dass ein Div quadratisch dargestellt wird, auch wenn die Größe in Prozentangaben angegeben ist, zum andern will ich einen Div so anzeigen, dass er doppelt so breit wie hoch ist, ohne dass es Scrallbalken gibt. Außerdem soll er immer so groß wie möglich sein.
Dies soll jeweils auch der Fall sein, wenn ein Bild in dem Div ist. Es soll immer quadratisch bzw. doppelt so breit wie hoch sein, auch wenn es eigentlich andere Abmessungen hätte. Es sollen sich alle Werte anpassen, wenn sich die Fenstergröße ändert. Die Ziele sind zum Teil schon erreicht (siehe vorherige Antworten). Das ist das, was ich vor habe.
MFG THWBM -
thwbm schrieb:
Ja, *verzeihung*
menschle schrieb:
Hm, erst nen Quader, nun doch lieber ein Rechteck.
Ein Quader? Ich habe nie ein Quader in zwei Dimansionen erstellen wollen. Oder meinst du ein Quadrat? Ich denke schon. 
möge mir meine menschliche Denkweise, sich stets in Andere hineindenken zu wollen, doch bitte verziehen werden.
Aber wahrscheinlich denke ich im 21.ten Jahrhundert einfach schon zu Dreidimensional.
Nun käme mir der tolle neue Vorschlag von hpage tatsächlich wie gerufen,menschle schrieb:
Vielleicht beschreibst Du lieber zunächst, was genau Du denn eigentlich vorhast, bevor gefühlte 900 Scriptvorschläge kommen?
Ich habe zum einen vor, dass ein Div quadratisch dargestellt wird, auch wenn die Größe in Prozentangaben angegeben ist, zum andern will ich einen Div so anzeigen, dass er doppelt so breit wie hoch ist, ohne dass es Scrallbalken gibt. Außerdem soll er immer so groß wie möglich sein. denn dann könnte ich hier bildlich darstellen, was ich gerade nur zur Hälfte verstand: [█████______]
Wolltest Du nicht die Hälfte der Höhe des sichtbaren Bereiches einer Webseite in einem DIV-Element quadratisch darstellen?
Dies soll jeweils auch der Fall sein, wenn ein Bild in dem Div ist. Es soll immer quadratisch bzw. doppelt so breit wie hoch sein, auch wenn es eigentlich andere Abmessungen hätte.
Und *zack* nun haste es geschafft: Ich stehe ich fast völlig auf dem Schlauch! [█___________]
Es sollen sich alle Werte anpassen, wenn sich die Fenstergröße ändert.
Was sich tatsächlich nur mit JavaScript realisieren lässt.
Das ist das, was ich vor habe.
[____________]
-
menschle schrieb:
Wolltest Du nicht die Hälfte der Höhe des sichtbaren Bereiches einer Webseite in einem DIV-Element quadratisch darstellen?
Jain. Ich probiere im Moent ein bischen rum. Ich habe einen Div mit dem Seitenverhältnis 1:2, also doppelt so breit wie hoch. in dem Div ist eine Tabelle mit 16*32 Zellen, die alle quadratisch sind, also 16*<tr>, 32*<td>. In diesen Zellen ist jeweils ein Bild, das ebenfalls quadratisch ist. Zusammengesetzt ergeben diese Bilder eine Karte, deshalb ist es auch wichtig, dass die einzelnen Bilder quadratisch dargestellt werden. Das ganze muss jetzt noch von der Bildschirmgröße abhängig gemacht werden.
menschle schrieb:
Dies soll jeweils auch der Fall sein, wenn ein Bild in dem Div ist. Es soll immer quadratisch bzw. doppelt so breit wie hoch sein, auch wenn es eigentlich andere Abmessungen hätte.
Und *zack* nun haste es geschafft: Ich stehe ich fast völlig auf dem Schlauch! [█___________]
Ich hatte das Problem, dass Bilder die ich so:
<table width="100%" height="100%"> <tr height="50%"> <td width="50%"> <img src="Bild.png" alt=""> </td> <td width="50%"> <img src="Bild.png" alt=""> </td> </tr> <tr height="50%"> <td width="50%"> <img src="Bild.png" alt=""> </td> <td width="50%"> <img src="Bild.png" alt=""> </td> </tr> </table>
in einer Tabelle eingebunden habe die Größenbegrenzung durch die Tabelle ignoriert haben, wenn sie größer als ein Virtel des Bildschirms waren.
menschle schrieb:
Es sollen sich alle Werte anpassen, wenn sich die Fenstergröße ändert.
Was sich tatsächlich nur mit JavaScript realisieren lässt.
Jain, denn die Angaben
undwidth="X%"
funktionieren auch ohne Javascript.height="X%"
menschle schrieb:
Das ist das, was ich vor habe.
[____________]
Ich versuche es erneut:
Das ist das, was ich vor habe.
Wo muss der Balken jetzt stoppen?
[????????????]
MFG THWBM
Beitrag zuletzt geändert: 27.1.2013 17:49:54 von thwbm -
vielleicht ist das hier ja der richtige dankanstoß:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>viele quadrate</title> <style type="text/css"> img { width:2%; /* 32 mal 2% = 64% vom body */ float:left; } br { clear:left; } </style> </head> <body> <?php for($iZeile=1;$iZeile<=16;$iZeile++) { for($iSpalte=1;$iSpalte<=32;$iSpalte++) { echo '<img src="quadratischesbild.gif" alt="">'; } echo '<br>'; } ?> </body> </html>
Beitrag zuletzt geändert: 28.1.2013 13:07:39 von hcms -
hcms schrieb:
vielleicht ist das hier ja der richtige dankanstoß:
Das sieht schon ganz gut aus, aber ich hätte noch 2 Probleme:
1. Wenn ich das Fenster weiter zusammenschiebe, entstehen weiße Linien zwischen den einzelnen Zeilen. Solange das Fenster auf voller Breite oder fast voller Breite ist, funktioniert aber alles super. Wie bekomme ich diese Streifen weg?
2. Wenn ich die Menge an Bildern erhöhe, die nebeneinander sind oder wenn ich die Breite eines einzelnen Bildes so erhöhe, dass eine gesammtbreite von über 100% entsteht, dann entstehen Zeilenumbrüche, die nicht da sein sollten. Wie bekomme ich die weg?
MFG THWBM -
zu 1.:
das liegt dann wohl daran das die höhe der bilder die line-height einer html-zeile unterschreitet...
zu 2.:
also wenn du tatsächlich immer eine scroll leiste haben willst, dann mache es am besten mit einem container-div...
so:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>viele quadrate</title> <style type="text/css"> div { width:120%; /* vom body */ line-height:1%; } img { width:2%; /* 50 mal 2% = 100% vom div */ float:left; } br { clear:left; } </style> </head> <body> <div> <?php for($iZeile=1;$iZeile<=25;$iZeile++) { for($iSpalte=1;$iSpalte<=50;$iSpalte++) { echo '<img src="quadratischesbild.gif" alt="">'; } echo '<br>'; } ?> </div> </body> </html>
Beitrag zuletzt geändert: 28.1.2013 14:41:11 von hcms -
hcms schrieb:
zu 1.:
das liegt dann wohl daran das die höhe der bilder die line-height einer html-zeile unterschreitet...
Danke, mit dem
kann ich was anfangen.line-height:X%
hcms schrieb:
zu 2.:
also wenn du tatsächlich immer eine scroll leiste haben willst, dann mache es am besten mit einem container-div...
Ich habe da auch schonmal ein bischen rumprobiert, aber bei mir hatte das nicht so ganz funktioniert. Jetzt klappt es aber, danke.
EDIT:
Warum muss <br> die CSS Eigenschaft "clear: left;" zugeordnet bekommen?
MFG THWBM
Beitrag zuletzt geändert: 28.1.2013 19:50:35 von thwbm -
es gibt ja so viele arten von tags
hast du schon eine tabelle probiert?
per css verhinderst du zeilenumbrüche mitwhite-space:nowrap;
, in html mit
<nobr>bricht nicht</nobr>
-
xian schrieb:
hast du schon eine tabelle probiert?
Ja, habe ich. Da hatte ich aber das Problem, dass die Zellen nicht prozentual an die Bildschirmgröße angepasst wurden.
xian schrieb:
per css verhinderst du zeilenumbrüche mitwhite-space:nowrap;
Funktioniert das nur bei Texten, also nicht bei Bildern oder mache ich etwas falsch?
xian schrieb:
es gibt ja so viele arten von tags
Ja, da hast du recht, aber das:
xian schrieb:
<nobr>bricht nicht</nobr>
gehört offiziell nicht zum HTML Standart. Quelle.
MFG THWBM -
was spricht nochmal dagegen, per js die bilschirmbreite auszulesen und die hälfte davon auf höhe und breite eines <div>s anzuwenden?
ist nicht standard, es funktioniert bloß.<nobr>
funtioniert zb auch bei <div>swhite-space:nowrap;
und die tabelle hört ebenfalls auf css. und js.
darf man, wenns fertig ist, dein projekt sehen? -
<nobr> ist nicht standard, es funktioniert bloß.
ja denkste - funktioniert in diesem falle mit den bildern aber tatsächlich nicht.
Warum muss <br> die CSS Eigenschaft "clear: left;" zugeordnet bekommen?
nun, da wir die bilder ja mit float:left versehen haben um sie nebeneinander zu bekommen ist es nur konsequent die (nach x bildern pro zeile gewollten) zeilenumbrüche mit clear:left zu versehen. natürlich wäre es nicht unbedingt notwendig solange jedes bild genau die selbe größe hat, und diese identisch mit der line-height wäre - aber der explorer lehrt uns: `sicher ist sicher`
außerdem sollte zumindest das allerletze <br> (nach allen bildern, vorm schließen des <div>) ein clear haben, damit das html-static layout wieder hergestellt wird (und somit das div auch browserübergreifend sicher richtig aufgespannt wird).
Beitrag zuletzt geändert: 29.1.2013 9:35:19 von hcms -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
