Float bei geometrischen Formen

Lukas L

Hallöchen,
ich probiere im Moment ein bisschen mit float rum und würde gerne Dreicke dabei "zusammenpuzzeln".

Rot, Orange und Grün haben "float:left".
[Blockierte Grafik: http://i.imgur.com/i1OiYkY.jpg]

Dabei sollte das rote Dreieck eigentlich am orangenen Dreieck anliegen. Alle drei unteren Dreiecke haben "float:left".

Wenn ich den float vom orangenen Dreieck weg mache, dann liegen Rot und Orange zusammen, wie ich es haben will, aber das grüne ist dann natürlich unter dem Ganzen und liegt nicht mehr an.

Nur Rot und Grün haben "float:left". (Oder nur Rot hat "float:left", das läuft natürlich aufs Gleiche hinaus.)
[Blockierte Grafik: http://i.imgur.com/d5Gz75b.jpg]

Ich verstehe einfach nicht, warum diese Lücke erst ensteht wenn ich alle drei Objekte floaten lassen.

HTML:

HTML

<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box">
    <div id="submenu1"></div>
    <div id="submenu2"></div> 
    <div id="submenu3"></div>
    <div id="submenu4"></div>
    </div>

    </body>

Alles anzeigen

CSS:

Code

#box
{width:800px;
height: 500px;
background-color:#2EFEF7;}


#submenu1
{width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent #007bff;}


#submenu2
{width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #ff0000 transparent transparent transparent;
float:left;
}


#submenu3
{width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #ff7700 transparent;
float:left;
}


#submenu4
{width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent #0dff00;
float:left;
}

Alles anzeigen

Auch wenn es sich wahrscheinlich um einen offensichtlich dummen Fehler handelt, hoffe ich jemand kann mir beim puzzlen helfen
LG Lukas

MrMurphy

Hallo

Dein Vorgehen ist nicht geeignet um float zu üben oder gar kennenzulernen. Aber Puzzle ist ein schönes Spiel. Also denn:

Grundsätzlich werden auch keine Dreiecke sondern Rechtecke gefloatet. Daran ändert sich auch nichts wenn du die Größe der Rechtecke auf 0 setzt und teilweise transparente Rahmen erstellst.

Damit irritierst du nur dich selbst. Darauf deutet zumindest hin das du von Dreiecken schreibst, obwohl es sich um Rechtecke (beziehungsweise in deinem Beispiel um spezielle Rechtecke: Quadrate) handelt.

Um das Verhalten der Rechtecke zu verstehen musst du dich mit dem Dokumentenfluss beschäftigen. Also wie sich Elemente verhalten, die sich im Dokumentenfluss befinden und solche, welche sich durch float nicht im Dokumentenfluss befinden. Bei deinen Spielereien natürlich auch noch, wie sich deren Rahmen verhalten. Die können sich nämlich durchaus vom Inhalt des Elements entfernen.

Suchmaschine: float dokumentenfluss

Erschwerend kommt hinzu, dass die Browser solche eher sinnfreien Anordnungen teilweise auch noch unterschiedlich anzeigen. Das wirst du merken, wenn du dich etwas intensiver mit float und bei dem Verhalten von border beschäftigst.

Mit dem Wissen sollte dir dann auch bewußt werden, dass bei float die Reihenfolge der Elemente im Quelltext entscheidend ist. Die kann durch float nicht beliebig verändert werden.

Deine gesuchte Lösung sollte mit folgendem HTML-Quelltext

Code

<body>
   <div id="box">
      <div id="submenu1"></div>
      <div id="submenu2"></div> 
      <div id="submenu4"></div>
      <div id="submenu3"></div>
   </div>
</body>

und folgendem CSS

Code

#box {
   width: 800px;
   height: 500px;
   background-color: #2EFEF7;
}
#box>div {
   width: 0;
   height: 0;
   border-style: solid;
}
#submenu1 {
   border-width: 200px 0 0 200px;
   border-color: transparent transparent transparent blue;
   /*float: left;*/
}
#submenu2 {
   border-width: 200px 200px 0 0;
   border-color: red transparent transparent transparent;
   float: left;
}
#submenu3 {
   border-width: 0 0 200px 200px;
   border-color: transparent transparent orange transparent;
   /*float: left;*/
}
#submenu4 {
   border-width: 200px 0 0 200px;
   border-color: transparent transparent transparent lime;
   float: left;
}

Alles anzeigen

erreicht werden.

Gruss

MrMurphy

Lukas L

Dankeschön für die Antwort und die Hilfe. Da hab ich mich tatsächlich ein bisschen sellbst verwirrt mit den Dreiecken. Würdest du bzw. würder ihr, die das lest, denn eine Andere, bessere Methode vorschlagen wie man ohne absolute Positionen den gleichen Effekt erzeugen kann?

MrMurphy

Hallo

Ich habe doch eine Lösung aufgezeigt. Was stört dich daran?

Oder besser: Was willst du überhaupt erreichen? Bislang hast du dein Ziel nur sehr schwarmmig formuliert, da ist eine konkrete Hilfe kaum möglich.

Heutzutage werden solche Formen üblicherweise mittels des Grafikformats SVG erstellt und dann entweder als img-Element oder background-image eingebunden.

Gruss

MrMurphy

Lukas L

Ich wollte mal probieren ein Menü bzw. sowas ähnliches wie eine Navbar aus diesen Formen zu bauen. Am Ende sollte es ein Rechteck gefüllt mit Dreiecken sein und mit klick auf eins der Dreiecke kommt man zu einer anderen Seite. Ich hab ein bisschen recherchiert und dachte float wäre dazu am besten die Formen zusammenzusetzen. Aber scheinbar ist es ja eher komplizierter, was aber auch mit den Dreiecken die keine wirklichen sind zusammenhängt. Jetzt frage ich mich nach deiner Antwort ob es sinnvoller wäre sofort mit img-Elementen zu starten. Das ganze sollte nur ein kleiner Test sein ob das möglich ist

MrMurphy

Hallo

Zitat

Ich wollte mal probieren ein Menü bzw. sowas ähnliches wie eine Navbar aus diesen Formen zu bauen.

Diese Information gleich zu Beginn hätte mir viel Zeit gespart. Bei zukünftigen Frage wäre es nett wenn du neben dem aktuellen Problem gleich dein eigentliches Ziel benennen würdest.

Zitat

Aber scheinbar ist es ja eher komplizierter,

Ja, da die "Dreiecke" zwar sichtbar sind, die zugehörigen Rechtecke sich jedoch übereinander stapeln, so dass die unteren für eine Navigation nicht zu erreichen sind.

Zitat

Am Ende sollte es ein Rechteck gefüllt mit Dreiecken sein und mit klick auf eins der Dreiecke kommt man zu einer anderen Seite.

Dazu gibt es zwei Techniken:

1. HTML area map

Auf einer Grafik werden per CSS Bereiche bestimmt, deren Aussehen beim Hovern oder Klicken geändert werden kann und mit denen Links verknüpft werden können.

Siehe zum Beispiel

http://www.mediaevent.de/xhtml/area-map.html

2. SVG

SVG sind Bilder, deren Bestandteile direkt als Link bestimmt werden können.

Sie haben gegenüber den area maps nur Vorteile und sind benutzerfreundlicher. Deshalb sollten sie bevorzugt werden, auch wenn sie zunächst etwas Einarbeitungszeit benötigen.

Siehe

http://webkrauts.de/artikel/2014/text-in-svg

(Abschnitt: Links in SVG)

Gruss

MrMurphy

modem-kind

mit area map wird so wenig gearbeitet
ich finde es so schön..

allerdings als Navi für Besucher oft nicht auf Anhieb leicht verständlich

format C:
Gruss aus Hamburg

djheke

Hier noch was Sinnfreies

HTML

<!Doctype Html>
<html>


<head>
<meta charset="utf-8">
<title>Sinnfreie CSS3 Spielerei</title>


<style>


nav {
 margin:0;
 padding:0;
 width:300px;
 height:300px;
 border:1px solid #000;
 float:left;
 position:relative;
 overflow:hidden;
}
ul {
 margin:0;
 padding:0;
 list-style:none;
 width:500px;
 height: 500px;
 background-color:#2EFEF7;
 transform:rotate(45deg);
 position:absolute;
 left:-100px;
 top:-100px;
}


li {
 list-style:none;
 width:250px;
 height:250px;
 float:left;
}


a {
 width:250px;
 height:250px;
 display:block;
 text-align:center;
 color:#ada;
}


a:hover {
 background:rgba(200,200,200,.5);
}


li:nth-child(1) b {
 float:left;
transform-origin:25%;
 transform:rotate(-45deg);
 position:relative;
 left:140px;
 top:150px;
 color:#000;
}


li:nth-child(2) b {
 float:left;
transform-origin:25%;
 transform:rotate(45deg);
 position:relative;
 left:60px;
 top:140px;
 color:#fff;
}


li:nth-child(4) b {
 float:left;
transform-origin:25%;
 transform:rotate(-45deg);
 position:relative;
 left:60px;
 top:90px;
 color:#000;
}


li:nth-child(3) b {
 float:left;
transform-origin:25%;
 transform:rotate(-135deg);
 position:relative;
 left:140px;
 top:80px;
 color:#fff;
}
li:nth-child(1) {
 background:yellow;
}
li:nth-child(2) {
 background:red;
}
li:nth-child(3) {
 background:blue;
}
li:nth-child(4) {
 background:orange;
}
</style>
 
 
</head>
<body>
<nav>
  <ul>
    <li><a href="#"><b>HOME</b></a></li>
    <li><a href="#"><b>ABOUT</b></a></li>
    <li><a href="#"><b>BLOG</b></a></li>
    <li><a href="#"><b>GALLERY</b></a></li>
    </ul>
</nav>
</body>
</html>

Alles anzeigen

Lukas L

Danke für eure Antworten und Hilfe. Ich habe es jetzt mit SVG umgesetzt und es war genau das was ich gesucht habe. Als dankeschön nun das fertige Puzzle:
[Blockierte Grafik: http://i.imgur.com/F84L6da.jpg]

Liebe Grüße und ein großes Dankeschön
Lukas L

MrMurphy

Hallo

Vielleicht ist für die SVG-Interessierten auch interessant, dass Video2Brain aktuell knapp zwei Tage lang einen "Tag der offenen Tür" veranstaltet, bei denen gegen Anmeldung, aber sonst kostenfrei (so verstehe ich es jedenfalls), alle Videotrainings abgerufen werden können.

Dort gibt es auch ein relativ gutes SVG-Training:

https://www.video2brain.com/de/videotraini…ungen-crashkurs

Natürlich lohnt es auch in den anderen Trainings zu stöbern

https://www.video2brain.com/de/

Gruss

MrMurphy

modem-kind

Cooler Tipp
Dankeschön dafür.. -

Tags