nicht angemeldet
Kachelgestaltung
0 0 
Gunnar Bittersmann
Kachelgestaltung
AugeHallo,
ich bräuchte einmal eure Hilfe.
Ich würde gerne meine Homepage in dieser Art gestalten.
[url=http://www.fotos-hochladen.net/view/portfolioblockuwaqxv4nmp.jpg][img]http://img5.fotos-hochladen.net/thumbnail/portfolioblockuwaqxv4nmp_thumb.jpg[/img][/url]
Jedoch nicht mit Quadraten, sondern mit Kreisen.
Diese sollen dann bis zu einer bestimmten Verkleinerung des Browsers sich anderes anordnen (untereinander).
An dieser Stelle komme ich nicht weiter:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> … </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="gestantung">
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body {
width:900px;
height:auto;
margin: 0 auto;
}
#gestantung {
margin: 5%;
min-width: 500px;
}
#kreis {
margin: 1%;
width: 250px;
height: 250px;
border-radius: 200px;
background-color: #000000;
clear: right;
float: left;
}
Danke schon einmal für eure Hilfe!!!
-
Der Link scheint nicht zu Funktionieren..
hier noch einmal: http://www.fotos-hochladen.net/view/portfolioblockuwaqxv4nmp.jpgViele Grüße
-
@@Banana-Split:
nuqneH
Der Link scheint nicht zu Funktionieren..
hier noch einmal: http://www.fotos-hochladen.net/view/portfolioblockuwaqxv4nmp.jpgImmer noch nicht. Aber dabei dir kann geholfen werden: Verweise und Grafiken einbinden. (Wobei bei letzterem evtl. Urheberrechte zu wahren sind.)
Bei deinem Problem eher nicht. Was an einer mangelhaften Problembeschreibung liegen könnte. Was genau willst du erreichen und wobei hast du Schwierigkeiten?
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
http://www.fotos-hochladen.net/view/portfolioblockfj4u25b8dq.jpg
Mein Problem ist, dass ich es nicht schaffe, dass die Kreise sich bin zu einer bestimmten Größe des Browsers anderes anordnen.
(sollen somit auf dem Tablett anderes zu sehen sein, als auf dem Rechner)Also das normale Layout auf dem Rechner soll in diesem 3x3 Raster sein. Bei Handy dann nur noch eine Spalte runter.
Ich hoffe es ist jetzt verständlich…
Danke
-
@@Banana-Split:
nuqneH
Mein Problem ist, dass ich es nicht schaffe, dass die Kreise sich bin zu einer bestimmten Größe des Browsers anderes anordnen.
Was hast du denn versucht? Media-Queries? Lass mal sehen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Hallo
Also das normale Layout auf dem Rechner soll in diesem 3x3 Raster sein. Bei Handy dann nur noch eine Spalte runter.
Allgemeine Hinweise:
-
Da Du ja wohl ein präzises Layout anstrebst, würde ich für alle Längenangaben (Abstände u.s.w.) nur Pixel verwenden, keine Prozentwerte (welche abhängig sind von der Grösse des Eltern-Elements, und somit ggf. unberechenbar).
-
Du hast nur die Hintergrundfarbe (Schwarz) angegeben. Wenn der Browser als Schriftfarbe ebenfalls Schwarz nimmt - was der übliche Standard ist - dann ist der Text unsichtbar.
Also: Wenn Du eine Hintergrundfarbe angibst, gib auch gleich eine dazu passende Schriftfarbe an.
Und auch noch die Linkfarben.
W3C QA Tips: If You Pick One Color, Pick Them All
Zur Anordnung der Elemente (Kreise):
Weitaus am einfachsten (und IMHO auch am sinnvollsten) wäre es, wenn Du nur eine maximale Breite für das umgebende Element angibst (um zu erreichen, dass maximal 3 Elemente nebeneinander in einer Reihe stehen) und alle Elemente links floaten lässt.
Stark vereinfachtes Beispiel:
Voraussetzungen: ein Element ist 250 Pixel breit und hoch, und Du hast 9 Elemente.<ul id="kreise"> <li>Kreis 1</li> <!-- ... --> <li>Kreis 9</li> </ul>ul#kreise { list-style-type:none; margin: 0 auto; padding:0; max-width:752px; } ul#kreise li { float: left; width: 250px; height: 250px; margin:0; border-radius: 200px; padding:0; }Wenn das Fenster genug breit ist (d.h. mindestens 750 Pixel), gibt es 3 Elemente pro Reihe:
1 2 3
4 5 6
7 8 9Wenn das Fenster etwas schmaler ist (zwischen 500 und 749 Pixel), gibt es 2 Elemente pro Reihe:
1 2
3 4
5 6
7 8
9
(Das ist natürlich etwas unschön, weil in der letzten Reihe ein einzelnes Element steht.)Wenn das Fenster noch schmaler ist, also unter 500 Pixel, werden die Elemente untereinander angezeigt.
Das alles macht der Browser automatisch.
Online-Beispiel mit DIV / Online-Beispiel mit UL/LIWenn Du genau das erreichen willst, was Du beschreibst, nämlich bei genug breiten Bildschirmen ein Raster mit 3x3 Elementen, sonst alle Elemente in einer Spalte untereinander, könntest Du mit Media Queries arbeiten:
/* "Normalangaben": */ ul#kreise { list-style-type:none; margin: 0 auto; padding:0; width:752px; height:752px; } ul#kreise li { /* siehe oben */ } /* Spezialangaben fuer Browserfenster bis maximal 760px Breite: */ @media screen and (max-width: 760px) { ul#kreise { width:250px; height:2254px; } }Online-Beispiel mit schwarzen Kreisen / Online-Beispiel mit bunten Kreisen
Ich hoffe, das hilft Banana-Split oder sonst wem.
Und sonst war es eine nette Fingerübung für mich ...Lesetipps:
A List Apart - Responsive Web Design
Responsive Webdesign (Wikipedia)Freundliche Grüsse
ThomasP.S. Jaja, ich weiss, dass der ID-Name "kreise" pfui ist, da Layout-bezogen.
Da wir aber nicht wissen, wozu die Kreise (semantische) gut sein sollen ...-
@@Thomas Luethi:
nuqneH
- Da Du ja wohl ein präzises Layout anstrebst, würde ich für alle Längenangaben (Abstände u.s.w.) nur Pixel verwenden, keine Prozentwerte
Au contraire, mon capitaine!
Vergiss, dass es sowas wie Pixel gibt. Längenangaben stets in Bezug aufs Containerelement (Prozent) oder auf die Schriftgröße (em bzw. rem). (Außer für dünne Linien bei border.)
(welche abhängig sind von der Grösse des Eltern-Elements, und somit ggf. unberechenbar).
Soll „unberechenbar“ die deutsche Übersetzung für „responsive“ sein?
Wenn das Fenster genug breit ist (d.h. mindestens 750 Pixel)
Auch hier: Vergiss, dass es sowas wie Pixel gibt. Auch Breitenangaben in Media-Queries in em.
gibt es 2 Elemente pro Reihe:
1 2
3 4
5 6
7 8
9
(Das ist natürlich etwas unschön, weil in der letzten Reihe ein einzelnes Element steht.)1 2
3
4 5
6
7 8
9Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
@@Banana-Split:
nuqneH
<div id="gestantung">
#gestantung { … }Ich weiß zwar nicht, was "gestantung" ist, aber wenigstens passt der Selektor.
<div id="kreis"> </div>
<div id="kreis"> </div>
<div id="kreis"> </div>Ich weiß aber, dass das eindeutig fehlerhaft ist: IDs müssen dokumentweit eindeutig sein. So wie KFZ-Kennzeichen in einem Land. Es darf keine 2 Elemente mit derselben ID geben.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
okay, dass heißt ich müsste Kreis1, Kreis2, Kreis3, etc. schreiben?
Ist das dann nicht doppelt gemoppelt? Weil die ja alle die gleichen Eigenschaften haben sollen?Es sollte tatsächlich "Gestaltung" heißen ;-) Hab mich vertippt.
Viele Grüße
-
Hallo
okay, dass heißt ich müsste Kreis1, Kreis2, Kreis3, etc. schreiben?
Ist das dann nicht doppelt gemoppelt? Weil die ja alle die gleichen Eigenschaften haben sollen?Genau deswegen („alle die gleichen Eigenschaften“) sind sie Anwärter auf eine gemeinsame Klassenzugehörigkeit.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3 -
@@Banana-Split:
nuqneH
okay, dass heißt ich müsste Kreis1, Kreis2, Kreis3, etc. schreiben?
Natürlich nicht.
Du könntest eine Klasse verwenden. Musst du aber gar nicht, da die Elemente als Kindelemente des "Gestaltung"-Elements selektierbar sind.
Statt div-Suppe bietet sich hier eine Liste an: ul mit li, außenrum noch ein nav-Element. Und schon brauchst du auch die ID "Gestaltung" gar nicht mehr. Deren Bezeichnung sowieso recht fragwürdig ist.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
