Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Float bei geometrischen Formen

  1. #1
    HTML Newbie
    Registriert seit
    26.02.2016
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Float bei geometrischen Formen

    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".



    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.)


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

    HTML:
    HTML-Code:
    <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>
    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;
    }
    Auch wenn es sich wahrscheinlich um einen offensichtlich dummen Fehler handelt, hoffe ich jemand kann mir beim puzzlen helfen
    LG Lukas
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Float bei geometrischen Formen

    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;
    }
    erreicht werden.

    Gruss

    MrMurphy
    Geändert von MrMurphy (26.02.2016 um 05:51 Uhr)

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    26.02.2016
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float bei geometrischen Formen

    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?

  5. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Float bei geometrischen Formen

    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

  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    26.02.2016
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float bei geometrischen Formen

    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

  7. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Float bei geometrischen Formen

    Hallo

    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.

    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.

    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
    Geändert von MrMurphy (26.02.2016 um 22:57 Uhr)

  8. #7
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: Float bei geometrischen Formen

    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

  9. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Float bei geometrischen Formen

    Hier noch was Sinnfreies
    Code:
    <!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>
    navi.jpg
    Geändert von djheke (27.02.2016 um 22:28 Uhr)

  10. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    26.02.2016
    Beiträge
    4
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Float bei geometrischen Formen

    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:


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

  11. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Float bei geometrischen Formen

    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/video...ngen-crashkurs

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

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

    Gruss

    MrMurphy
    Geändert von MrMurphy (28.02.2016 um 16:02 Uhr)

Ähnliche Themen

  1. Firefox (und Chrome) formen einen ungültigen Request
    Von Tobse im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 10.07.2012, 23:46
  2. CSS - Float
    Von Donkey im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 05.09.2010, 01:20
  3. Kurvige Formen in ps
    Von GustavGanz im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 04.10.2006, 10:19
  4. Problem mit "Formen" (FlashMX)
    Von madosch im Forum Flash Forum
    Antworten: 2
    Letzter Beitrag: 31.05.2006, 13:09
  5. Formen twennen
    Von Kuhgel im Forum Flash Forum
    Antworten: 2
    Letzter Beitrag: 03.09.2005, 11:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •