nicht angemeldet
Quadrate mit prozentualen Seitenlängen
Gunnar BittersmannHalli, hallo
Mein Plan war es, Kreise zu erstellen, die prozentuale Seitenlängen haben. Ich möchte, dass sie eben auf jedem Bildschirm gleich dargestellt werden.
Um das zu machen, braucht man natürlich erstmal die Quadrate, bei dem man die Ecken mit border-radius: 100%; abrundet.
Nun hatte ich aber festgestellt, dass es gar nicht so einfach ist. Ich hatte den Gedanken, über Javascript die Seitenlängen des Fensters zu ermitteln, um dann auf:
Breite = x%*seitenbreite
Höhe = x%*(seitenbreite/seitenhöhe)*seitenhöhe
zu kommen. Dabei müsste ich allerdings PHP, Javascript und CSS so miteinander verknüpfen, dass alles nurnoch ein unübersichtliches Gewusel ist (oder ich schreib einfach alles in den html header, ohne externe Dateien (haha)).
Ich will jetzt eben nicht auf kosten der Übersichtlichkeit arbeiten, daher wäre ich um jeden Rat erfreut :)
-
Wieso PHP?
Wieso Javascript?Wenn die Quadrate überall gleich groß sein sollen benutz doch einfach px. Oder hab ich da was nicht mitbekommen?
Gruß
T-Rex²-
Wieso PHP?
Wieso Javascript?Wenn die Quadrate überall gleich groß sein sollen benutz doch einfach px. Oder hab ich da was nicht mitbekommen?
Gruß
T-Rex²Ich möchte eben keine Seitenlängen in Pixel, da es dann auf jedem Bildschirm anders aussieht und die Gefahr besteht, dass es nicht auf die Seite passt, ohne Scrollbalken zu benutzen. Benutze ich hingegen prozentuale Seitenangaben, ist dieses Problem gut einschränkbar.
-
Wieso PHP?
Wieso Javascript?Wenn die Quadrate überall gleich groß sein sollen benutz doch einfach px. Oder hab ich da was nicht mitbekommen?
Gruß
T-Rex²
Ich möchte eben keine Seitenlängen in Pixel, da es dann auf jedem Bildschirm anders aussieht und die Gefahr besteht, dass es nicht auf die Seite passt, ohne Scrollbalken zu benutzen. Benutze ich hingegen prozentuale Seitenangaben, ist dieses Problem gut einschränkbar.Sorry da ist ein Wiederspruch. Wenn es überall gleich aussehen soll, dann benutzt du px. Dann ist das Quadrat immer 100px hoch und breit. Benutzt du hingegen Prozent, dann ist das Quadrat je nach Browsergröße anders. In der Schule gibt es da das schöne Wort "kongruent" (Deckungsgleich). Bei px gibt's kongruente Quadrate, bei Prozent nicht. Aber naja deine Sache.
Zur Lösung:
Ich weiß jetzt nicht genau wie groß dein Quadrat sein soll, aber eine Prozentangabe sollte doch deinem Wunsch entsprechen.
<div class='quadrat'></div>
.quadrat
{
width: 50%;
height: 50%;
}Gruß
kongruenter
T-Rex-
Sorry da ist ein Wiederspruch. Wenn es überall gleich aussehen soll, dann benutzt du px. Dann ist das Quadrat immer 100px hoch und breit. Benutzt du hingegen Prozent, dann ist das Quadrat je nach Browsergröße anders. In der Schule gibt es da das schöne Wort "kongruent" (Deckungsgleich). Bei px gibt's kongruente Quadrate, bei Prozent nicht. Aber naja deine Sache.
Zur Lösung:
Ich weiß jetzt nicht genau wie groß dein Quadrat sein soll, aber eine Prozentangabe sollte doch deinem Wunsch entsprechen.
<div class='quadrat'></div>
.quadrat
{
width: 50%;
height: 50%;
}Gruß
kongruenter
T-RexDas ist nun aber kein Quadrat mehr, außer das Seitenverhältnis des Bildschirms des Benutzers ist 1:1. Und genau da hängt ja der Haken. Danke für deine Bemühungen übrigens :)
Was ich meine mit "gleich aussehen" ist folgendes:
Je nach Auflösung sieht jede Internetseite unterschiedlich aus. Benutze ich Pixelangaben, kann ich dann zum Beispiel rein- und rauszoomen und das benutzte Quadrat wird größer oder kleiner (auf dem Bildschirm). Benutze ich aber Prozentangaben, verändert sich die größe des Quadrates (auf dem Bildschirm) nicht, sondern bleibt immer gleich. Das heißt, dass egal welche Auflösung und welchen Zoomfaktor ich habe, das Quadrat immer gleich aussehen wird. Das war mein Plan.-
Das ist nun aber kein Quadrat mehr, außer das Seitenverhältnis des Bildschirms des Benutzers ist 1:1. Und genau da hängt ja der Haken. Danke für deine Bemühungen übrigens :)
Mist, da hast du natürlich recht. Jetzt komme ich mir irgendwie doof vor.
Wie wäre es den mit einem Bild?
<img class='quadrat' />
.quadrat
{
width: 50%;
}
Die höhe würde dann automatisch angepasst werden.Dann hätte man auch die nicht quadratischen Pixel für die Ostblock PCs abgefangen :D.
Gruß
doofer Spaßvogel
T-Rex-
Hi,
Dann hätte man auch die nicht quadratischen Pixel für die Ostblock PCs abgefangen :D.
Nein, hätte man nicht.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Dann hätte man auch die nicht quadratischen Pixel für die Ostblock PCs abgefangen :D.
Nein, hätte man nicht.
MfG ChrisB
Dann musst du mir das jetzt doch mal erklären bitte.
Gruß
bettelnder
T-Rex
-
-
Das ist nun aber kein Quadrat mehr, außer das Seitenverhältnis des Bildschirms des Benutzers ist 1:1. Und genau da hängt ja der Haken. Danke für deine Bemühungen übrigens :)
Mist, da hast du natürlich recht. Jetzt komme ich mir irgendwie doof vor.
Wie wäre es den mit einem Bild?
<img class='quadrat' />
.quadrat
{
width: 50%;
}
Die höhe würde dann automatisch angepasst werden.Dann hätte man auch die nicht quadratischen Pixel für die Ostblock PCs abgefangen :D.
Gruß
doofer Spaßvogel
T-RexAah, das ist gut. Wenn ichs so lasse, variiert das ganze je nach Zoom-Faktor zwar immer noch, aber ich habs so umgeschrieben:
<div id="kreis"><img src="kreis.png" width="20%" /></div>
div#cloud1 {
width: 20%;
}Dann gehts. Danke für die Hilfe :)
-
-
-
Hi,
Wenn es überall gleich aussehen soll, dann benutzt du px. Dann ist das Quadrat immer 100px hoch und breit.
Nicht jedes Anzeigegerät stellt Pixel als exakte Quadrate dar ...
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-
@@DerDude:
nuqneH
Mein Plan war es, Kreise zu erstellen […] Um das zu machen, braucht man natürlich erstmal die Quadrate, bei dem man die Ecken mit border-radius: 100%; abrundet.
Nein, die braucht man natürlich nicht. Man braucht 'radial-gradient'.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)