so willkommen zum zweiten teil im tierbereich mdm box modell heute mit mir in der ecke weil ich eine neue kamera ab deswegen würde ich das mal austesten aber darum soll es hier nicht gehen sondern wir setzen nach lausanne an den box eigenschaften die wir jetzt schon kennengelernt haben und wenn wir von boxen eigenschaften sprechen dann meinen wir damit zum beispiel den außen abstand margin wir meinen zum beispiel in den abstand penning und wir haben darüber hinaus noch die möglichkeit die höhe die breite genauso wie irgendwie alles was mit dem rahmen zu tun hat das ganze festzulegen in diesem video geht es um drei andere kleinere themengebiete und zwar ist das zu 1 die oder sind das zum einen die elementaren unterschiede zwischen in menton und block elementen mal dass ein nahtloser auswirkungen darauf hat wie funktionieren dann nicht nur der box eigenschaften dann schauen wir uns an welche möglichkeiten habe ich diese elemente so ein bisschen zu positionieren ich sage bewusst nur so ein bisschen weil es mit css3 eine wesentlich einfachere möglichkeit gibt um eine webseite zu layouten das was wir bis jetzt mache sind mehr so grundlagen das heißt das würde man jetzt heutzutage dich unbedingt verwenden um zu sagen okay boxen mainzer sind der ecke box nummer zwei in der ecke und dritter teilbereich dieses videos wie das sein dass wir uns anschauen wie können wir es einstellen dass gewisse teile meiner webseite eine andere um fließen und auch dieser bereich soll so ein bisschen reduziert dargestellt werden war eigentlich geht es nur darum wenn ich ein bild auf meiner webseite platzieren wie schaffe ich dass der text also extremst das geht ja um herfiel ist gut ich habe drei sachen vorbereitet drei verschiedene quellcode ich habe das natürlich dann auch so genannt wie das was ich hier erklären möchte und der bereich 1 ist der unterschied zwischen block elementen und inline elementen und er gibt es tatsächlich und was sollten zwitter dingen das heißt dann die wie inline block und wir wollen wir einmal kurz überlegen was heißt das ganze eigentlich wir haben festgestellt dass es bei diesen box eigenschaften das ist immer darauf abzielt dass wir ein element irgendwo auf der webseite darstellen wollen und wir wollen quasi dieses element isoliert von allen anderen in die hafen darstellen indem wir zum beispiel sagen die linken außen ab standfest zu einem anderen block element da haben wir können uns einmal diese webseite hier angucken blog unterstrich und inline unterstrich und so weiter und so fort immer ein bisschen öffnet da hab ich es geöffnet das ist das was hinter dieser web seite steht flecker was man ihnen nebeneinander aufmachen wir sehen also ich mir das ganze mal kurz genau dass wir hier unseren ersten bereich überschrift 1 haben und das ist also das was hier dargestellt ist wenn mit überschrift 1 danach hat mir paragraf tag und das ganze wiederholt sich hier gerade hier haben wir tatsächlich überschrift zwei und eins aber ist auch egal wir haben also unsere zeit hier so ein bisschen strukturiert wir haben also überschriften und wir haben ein bisschen text und das was wir jetzt auf der linken seite auf dem bildschirm sehen ist aber eigentlich etwas anderes als das was wir da stellen wo ich muss mal kurz aktualisieren soll jetzt ist auch die aktuelle fassung denn und das haben wir ja schon ganz häufig kennen gelernt oder gesehen wir sehen dass diese html bereichen wieso inhärente eigenschaften haben die überschrift 1 beispielsweise ist jetzt größer dargestellt aber das was wir auch in jedem fall sehen ist dass ein automatischer umbruch generiert wird eben zu dem element danach streng genommen sind element selbst auch wieder ein umbruch und zwar richtung überschrift 1 nach oben wir können das mal ein bisschen erweitern indem wir sagen okay jetzt soll hier unter der überschrift 1 nochmal so ein zweiter perfekt gemacht werden das heißt wir haben jetzt zwei absätze die wir hier generiert haben ich aktuelle den ganzen apparat mal und wir sehen dass wir hier den gleichen effekt also automatisch nach diesem tag wird ein umbruch generiert das heißt im dokument fluss so würde man es nennen entstehen eben automatischer abstände zu den nachfolgenden element bei peek ist es noch ein bisschen aggressiver als mein schiff tag haben wir tatsächlich einen größeren abstand als in der gewichen aber darum soll es nicht geben wir wollen zunächst feststellen was ist eigentlich ein blog live band und ein block element sind alles die tags in html die quasi ein abgeschlossenen bereich für sich erzeugen soll heißen dass nach abschluss eines tags das heißt immer dann wenn wir von diesem geschlossenen apparate reden da wird ein umbruch erzeugt das heißt auch ein optischer abstand zu dem nachfolgenden und dokumentenfluss erscheinenden tag in diesem fall ist es der nächste tag wenn wir unten sind bei dem geschlossenen petrik dann haben wir eben den abstand zu überschrift 2 ja und was macht ihr jetzt diese html tags zu block elementen das bedeutet ich habe die möglichkeit die block elemente gemäß der box eigenschaften zu verändern ich kann also zum beispiel sagen dass alle ptx und dazu geben wir einmal hier oben ins teilbereich rein ich sage also beispielsweise alle p tags soll jetzt einen etwas größeren abstand nach unten sprechen hier zb den außen abstand an wenn wir nur margin-bottom und in etwas grösseren pixel wir speichern das mal über den pcie lektor werden jetzt alle ptx angesprochen und wir sehen wir dass wir hier eine relativ aggressiven abstand nach unten in arm das können wir eben machen wenn wir blog elemente ansprechen ich kann auch nicht zusätzlich noch den artikeln nähmen warum man auch ein artiger tag ist ein blog internet wir haben ganz viele verschiedene blogger elemente schon kennengelernt in diesem fall sehen wie sie in artikel und wir sehen ganz unten bei überschrift zwei jahren auch den typischen track dazu kommen wir noch ganz viele andere tags kennengelernt insbesondere im bereich der semantischen seiten strukturierung dort spreche ich zum beispiel den header an ich spreche dem futter an wir haben den tag findet navigationsleiste also dem den nachtrag wir können den ganzen hob teil einer webseite semantisch kennzeichnen durch den tag oder wir haben doch riss ein und tut und es gibt eine ganze vielzahl an tags die ihm als block elemente gekennzeichnet sind und ein block element zeichnet aus dass ich dieses blog element anhand von all dessen was wir am box eigenschaften schon im vorangegangenen video gesehen haben ändern kann sprich in abstand in alle richtungen außen abstand in eure richtung höhe breite und den rahmen also das kennzeichnet eben unsere block widmet der heißen dem auch deshalb lockt in der mitte weil das immer so einzelne blöcke auf meiner webseite darstellt ich nehme hier noch immer die formale weisung aus und das ganze ein bisschen kompakter in den browser angezeigt werden kann meine ursprüngliche webseite und vielleicht habt ihr schon gesehen mitten in diesem text 1 und ich hab das ja kopiert sehen wir dass wir dort so schriftzeichen haben hierüber dur ist ja das ist fett gedruckt und warum ist das fett gedruckt nicht etwa weil ich irgendwelche format anweisung über css gerät wird ab denn wir sehen das ganze ding ist leer wir greifen auf gar keine css anweisung zurück sondern ich rede hier von diesem tag extra strong hat als html tech die inhalte ein geschäft ist es immer dass das zwischen den öffnenden tag und dem schließenden tag gedruckt darstellt oder stromer gedruckt darstellt als normal ein zeichen setze das ganze kennen wir auch wenn wir zum beispiel die intec nehmen für die technik dann habe ich eben den q7 schrift schnitt oder de für bolt das heißt auch dort ist die schrift dargestellt das ganze bezeichnet man als in line element in neuen elemente zeichnen aus ist die im textfluss angewendet werden es machte jetzt wenig sinn zu sagen ich nehme hier sonnenstrom tag weil ich möchte ja gewisse text bestandteile eines textes im tricks plus auszeichnen dass ich das ganze jetzt the box eigenschaften wie zum beispiel martin belege weil das würde dazu führen dass wir quasi dieses duo dolores eth welches sich hier innerhalb des sonntags ein gefasst habe das würde dazu führen dass wir das jetzt einzeln stehen hätten sprich wir hätten bei just ein umbruch und bei personal mal durchspielen und dazu nehme ich eben nicht strom als in line element sondern gbp und dazu muss man natürlich auch wieder schließen und sonst nie so richtig hin zu speichern das mal und schauen mal wie sich das ganze jetzt im browser verhält ja und das ganze sieht jetzt so aus ich habe also jetzt keine textuelle hervorhebung mehr von meinen schriftzeichen sondern ich habe mit ihnen wie dafür gesorgt dass es eigentlich aus dem schreibfluss herausgenommen wird und als eigener blog dargestellt wird und das ist überhaupt nicht im sinne des erfinders und deswegen unterscheidet man in diesem fall eben zwischen block elemente und inline elementen strom wäre ein inline element weil sie das nämlich in der zeichnung führung darin wiederfinden und das ganze hat dem wird die bedeutung dass ich nicht in der lage bin box eigenschaften sowie wir sehen dem vorangegangen dem video gesehen haben auf in-line elemente anzuwenden also ich kann jetzt nicht sagen ich möchte nicht dass wir wieder rückgängig mache was du eben zum beispiel einen außen abstand nach unten haben von cara und raum wechseln er weil dann habe ich ja genau diesen effekt und das widerspricht ihnen der idee des inline events was ich allerdings machen kann so macht das nicht gespeichert hat was sie allerdings machen kann ich kann den abstand nach links und nach rechts bestimmen weil das im grunde genommen nicht den textfluss behindert wir sind da trotzdem noch in einem text los drin ich habe nur abstände nach links und rechts also wenn ich also sage ich nehme von meinem tag den die mit abstand wie beispielsweise 50 gipfel speichern dann kann ich das aktualisieren und ich sehe im dass wir jetzt den abstand haben was nicht funktioniert es abstand nach oben gelaufen naja das vertikale abstände werden dort nicht berücksichtigt also das ist der kern unterschied zwischen block elementen und in leimen warum erzähle ich das jetzt manchmal ist es eben notwendig dass ich aus einem block elementen in ein element machen oder eben aus einem inline element ein blog jeder mensch das heißt ich muss also nicht zwangsläufig eine html-seite schock anfassen um das zu ändern ein ich kann das ganze auch php seite staub ist nämlich über prp ich meine css seit ich dafür verwenden sie sowieso nur zäh es ist für alles was ziel dabei sei das tier dabei saison angeht und ich kann das jetzt auch über css sagen du bist zwar blog element aber ich bin der mann bist viel lieber ein in sein element und das ganze funktioniert über die css eigenschaft display wir wollen das ja mal durchführen wir nehmen mal einmal die überschrift h1 und die packard unter wir wissen beides sind block in eventuell beides erzeugung also bei ihrer interpretation einen umbruch formen danach und wir wollen das ganze jetzt einmal aufheben und dazu sprechen wenn man einmal die beiden an über die tüte elektronen p und h1 und wir verwenden jetzt die cssf display also richtig machen mit kriegen wir auch schon einiges vorgeschlagen und uns interessiert an dieser stelle jetzt wie ihr seht es gibt ganz viel insbesondere dieser bereich flex der wird noch etwas härter beschäftigen wir wissen p und h1 blog elemente das heißt die erste ausprägung macht für mich nicht so wichtig sind wir wissen dass die beiden html elemente blog elemente sind deswegen muss ich den das nicht css hatte ich auch nochmal mit allen dann wir nehmen an dieser stelle mal in line und das letzte mal mit prominenter wir speichern einmal und schauen was jetzt dahinter passiert wir sehen jetzt dass ich überschrift 1 genauso wie der tag danach jetzt plötzlich als ein schriftzug darstellen heißt also alles das was sowieso als inhärente eigenschaften der glocke elemente gilt nämlich abstand vor abstand darunter und alles das was ich auch festgelegt haben über css wie zum beispiel ein margin entweder eine art und weise zumindest nach oben und nach unten hat jetzt keine gültigkeit mehr haben warum es ist jetzt kein blogger element er mehr es ist jetzt ein inline element ist die ganze kunst das ist nur solche sachen die man im hinterkopf behalten muss wenn man mit marketing und so weiter arbeitet weil ich kann noch so aggressiven margin nach oben oder unten anwenden wenn es sich bei dem zugrundeliegenden element um einen inline elemente ja dann werde ich da kein zufriedenstellendes ergebnis erreicht die leute heraus speicher und stelle mir den status quo wieder her wir wollen das ganze jetzt einmal umgekehrt machen heißt also aus dem hier als strong gekennzeichneten bereich wissen dass es in sein element wollen wir jetzt mal ein blog element machen weil aus irgendwelchen gründen möchte ich dass dieses duo dolores eta noch viel weiter hervorgehoben wird abstand nach oben abstand nach unten wie man vielleicht im rahmen hinzufügen und so weiter und so fort und natürlich will ich nicht die html-datei anpacken wir haben wir diese arbeitsteilige herangehensweise sondern die ich mache das ganze css seitig ist nicht das große problem wir wenden über den typ sektor strong cssb wlan und in diesem fall müssen wir zunächst einmal sagen dass lieber jetzt kein blog element mehr bist stopp in ein element sondern du bist jetzt ein blog element und wenn wir das gemacht haben könnte da schon mal den stopp den effekt einmal anschauen blog element sehen wir dass das ganze auf jeden fall nach oben und auch unten ein abstand also ein umbruch drin das ganze verhält sich jetzt aktuell wären typischen tag jetzt kann ich eben ran gehen und sagen jawohl bajin haben immer mal die marge nach oben pixel den markt links und rechts etwa zehn pixel darüber hinaus möchte ich gerne penning abend in der sache allerdings ungleich seien 120 pixel und ich hätte gerne einen border zwei pixel dick das ganze durchgezogen und in der farbe schwarz jetzt habe ich hier schon meine box bis hinaus fühle ich ja irgendwie dargestellt wir gucken uns das mal an und wir sehen jetzt dass bei beiden bereichen aus den ursprünglich gewesen ein elementen und block elemente geworden sind bei denen ich eben alles das was ich am box eigenschaften kenne anwenden kann also nehmen wir mit bei element typen blog elemente es gibt in eine elemente und jetzt gibt es hier noch die variation in ein blog und wir können ja mal schauen was passiert wenn ich den html text display in light blog deklariere dann sehen wir dass das ganze jetzt irgendwie so eine art zwitter ist zwischen block in dem enten ein element das ganze beinhaltet alle box ein schaffen die ich kenne wird aber zwangsläufig in den textfluss integriert es müsste schon ein paar besondere fälle seien weil man das anwendet aber es ist möglich dass bietet sich beispielsweise an wenn man irgendwie so ein bisschen den bredouille kommt und man möchte dieser eine box idol daneben eine andere gleichartige boxen bauen aber da verspreche ich euch werden wir später auf jeden fall noch eine einfache art und weise finden wie man das hinbekommen gut so wird dem thema element typen teil zwei des videos positionieren positionierung meint ich muss mir überlegen wo habe ich denn ein blog element so wie ich einst habe auf meiner webseite und bei der positionierung unterscheiden viele verschiedene sachen voneinander und zwar kann ich eine positionierung statisch machen das ist so das was auch der default wert ist also was im dokument fluss erzeugt wird heißt überschrift zwei beispielsweise wird automatisch über dem danach folgenden pc kann geordnet warum weil das html seit ich schon so festgelegt ist die zweite positionierungs möglichkeit wäre relativ das heißt positioniere ein blog elementen nur in abhängigkeit gegenüber das direkt davor positionierten blog element und dann habe ich noch zwei weitere möglichkeiten die im grunde genommen eine blog elemente aus dem dokumentenfluss heraus ziehen ja und die dann irgendwie absolut unabhängig von bildschirmbreite oder vom vpod wie man auch sagt irgendwo anzug ordnen vielleicht hören also ein bisschen raus ich bin gar nicht so begeistert und der ganze positionierungs geschichte weil das extrem viel vorbei ist nichtsdestotrotz zeige ich euch einmal worum es geht webseite nummer zwei positionierung von elementen wir haben jetzt eine webseite wir haben vier blog elemente wir haben wir sollten händler drin wir haben ihre artikel 1 artikel 2 und eine futter der entsprechende code dahinter sieht so aus artikel 1 und p das heißt alles das was wir in diesem fall gesehen ist eingebettet in ein artikel tagen ist auch ein blog element und ja alle diese diese apparate hier so blau dargestellt herder und futter und geld da gespielt die beiden artikeln die habe ich hier oben schon mal so ein bisschen gestylt da kommt also den blauen hintergrund zwei pixel dicken durchgezogen und schwarzen arm die schriftgröße ist hier ein bisschen größer dargestellt und wir haben einmal schirm das heißt den außen abstand nach oben von 15 pixeln da reden wir drüber und nach links und rechts automatisch ausgerichtet heißt also das ging bleibt über mittel wie ich das irgendwie eskaliere das ist nach links und rechts fällt automatisch ausgerichtet damit der text nicht direkt an den rahmen klatscht mit petting festgelegt und die ganze breite des apparats 750 pixel übrigens bei den anderen auch und das gilt dann auch für najin und den abstand und das ist in der grund warum das hier so wunderschön bündig aussieht ok worum geht's wir haben viele verschiedene möglichkeiten diese boxen zu positionieren das was wir jetzt sehen im browser das ist die positionierung static also die statische positionierung wir haben also hier an der darstellung streng nach dem dokument fluss heißt derartige positioniert sich unter dem header weil der auch reinform html quellcode unter dem header anzutreffen ist das ist der grund zunächst einmal wir das hier auf die webseite gepackt im anschluss kommt der artikel darauf das bezeichnet was dokument floss das heißt nach und nach in nur jedem alle glocken den mieter der website wieder ich muss also dieses und diese einstellung positions tätig nicht explizit einstellen ich nutze sie immer dann wenn ich quasi in eine andere positionierung aufheben das habe ich schon gesagt position ist die css eigenschaften geben für den ärger und die position auch hier gibt es verschiedene sachen ich rede von static wenn ich hier drauf geht dann habe ich eben die positionierung gestrengen nach dokument flash speicher und er stellt fest dass wir gar nichts riskieren weil wir wissen ja das ist sowieso die default einstellung das heißt alles das ist bereits statisch positionen gut wir das mal wieder raus und schauen uns die nächste positionierung an die nächste positionierung heißt ich gucke mir in diesem fall jetzt mal den artikel 2 an als block element und positioniere artikel 2 in relation zu dem der vorhergehenden in demand und artikel 2 wir scroll im quellcode nach unten das ist der apparat und der apparat wird laut dokument fluss nach dem ersten artikel bildschirm angezeigt und wir wollen jetzt mal gucken ob der artikel zwei ich ein bisschen anders positionieren können wenn wir quasi den artikeln 1 als referenzwerte und dazu müssen wir zunächst einmal dass die css eigenschaften position wähnen weil wir wollen ja die positionierung anpacken wir sagen also nicht mehr du wirst das positioniert nach dem dokument los sondern du sonst relativ positioniert werden position redet wenn ich das jetzt speicher und mehr anschaue dann werde ich auch hier vorstellen dass ich nicht so viel tut und warum weil alle box eigenschaften die schon definierter bleiben gleich das als relativ gesehen zu den materialien in der sich nichts was ich aber zum beispiel machen kann ich gehe mal in den magen ein löschmann das aus was wir hier haben können wir die ganze margin raus löschen was dann passiert passiert nicht sonderlich viel das ganze hat immer noch einen aus und abstand nach unten was ich machen kann ist ich kann ja mal einen negativen wert ein negativer margin wert heißt ich wann da quasi relativ gesehen von artikel 2 nach oben also wenn ich sonst versuchen wir positiven marge werden wir den abstand zu generieren werde ich jetzt einen negativen abstand generieren macht man selten worum es eigentlich geht im ministerium wird pixel alle richtungen wir speichern das ganze und aktualisieren und sehen in diesem fall folgendes wir haben jetzt hier eine überlappung hinbekommen die tatsächlich wird dass sie nicht mehr angezeigt dass quasi 400 pixel des bildschirms gewandert ist soll aber heißen das ganze ist nach oben gewandert weil er relativ gesehen zu dem apparat davor wird das ganze jetzt 400 pixel nach oben gerichtet das heißt wir haben hier überlappungen drin man sieht schon auf den ersten blick das kann ja nicht unbedingt im sinne des erfinders sein und das ist auch wieder eine art spezialfall man das anwendet wichtig ist dass ihr die bedeutung verspielt von diesen angaben stetig und relativ normaler dokument fluss relativ gesehen nicht normaler dokument floss beziehungsweise ich quasi als in der werte aus dem dokument fluss aus bedeuten dass man ganz schnell wieder zurück es gibt noch zwei weitere und hier spreche ich ihnen den artikel 2 an das man sich natürlich auch zurück das kann so eine webseite ganz schnell aus der inhalt einer insel und das wollen wir natürlich nicht wir lassen den krippen jetzt mal so und zwar wollen wir jetzt einmal die absolute position uns anschauen dass er sich im einsatz klicken absolute positionierung also hier das ganze ding wieder aus dem dokument floss herausgezogen und alle anderen elemente auf der webseite verhalten sich jetzt so als wäre der artikel zwei gar nicht auf der webseite von und jetzt könnt ihr das gedanklich schon mal durchspielen was passieren müsste wenn dieses ding eigentlich gar nicht vorhanden ist müssen wir davon ausgehen dass er von oben geht es passiert allerdings noch mehr nicht speicher aktualisieren stopft er ist hier speichern und jetzt aktualisieren es passiert allerdings noch mehr das erst aber schon gesagt der faktor verhält sich so als gäbe es gar kein artikel 2 wandert also ganz normal nach oben und der artikel 2 wiederum verändert seine größe das hat jetzt den hintergrund dass ich bei der absoluten positionierung gezwungen als web-entwickler breite und höhe anzugeben man muss sich das so vorstellen dass diese artikel 2 und dokument fluss einfach nicht mehr vorhanden ist und hat sich zum beispiel die breite im vorfeld am dokument fluss orientiert dann kann sie das jetzt eben nicht mehr das heißt die normalen einstellungen dieser box die werden erst mal wieder zurückgesetzt und ich musste dann möchte ich denn ein dich diese geschichte absolut positionieren das ganze ist nochmals kroll war wie sonst auch wenn man zum beispiel irgendwie niemand hat was überall an schweden soll man möchte also unabhängig vom support die dinge alter und auf der website positionieren dann greift man eben auf diese absolute position zurück aber auch hier reden wie er von einem spitzel erfahren zumindest das wissen haben was noch kommt last but not least haben wir die fixierte position und die fixierte positionen die ist tatsächlich sehr ähnlich zu der absoluten allerdings gebe der fixierten position einen vorteil her und dieser vorteil der bilder häufiger genutzt haben stimmt doch schon mal auf irgendwelchen überzeugen ich verlasse dieser stelle mal den artikel 2 und verwende die position fixed bei dem penner und den futter wir gehen also wand und nutzen die css eigenschaften kennen geschenkt und er greift jetzt zurück auf dem werth fixed fixed a ist auch hier das ganze ding wird aus dem dokument fluss ausgenommen allerdings fixieren wir dieses eliminiert derartig auf unserer webseite dass ich quasi auch wenn ich's krolle diesen block an der gleichen stelle immer wieder finde ich kann noch soviel erzählen das ganze kann sich ein bisschen einmal anschauen ja ich will dich absolut ich will kekse speichern den apparat aktualisieren wir sehen schon direkt die gleichen eigenschaften wie wir absoluten positionierung auch das ding ist erst mal nicht mehr im dokumentenfluss vorhanden was ich jetzt aber machen kann ist ich gehe mal ein bischen rein also ein bisschen gesucht wenn ich jetzt mit dem mausrad von oben nach unten irgendwie scrollen dann sehen wir dass dieses element eben absolut immer an der gleichen fixen positionen an und jetzt hatte ich gesagt so was hat man häufiger schon mal gesehen diese dieses position fix nutzt man häufig um sonne menüleiste um vielleicht zu fixieren das heißt man kann auf der webseite beliebig weit nach unten scrollen hat aber trotzdem nebenan fixierter positionen immer das menü bin also quasi jederzeit in der lage zu navigieren über eine webseite egal wie tief ich rolle also das ist das und kniffe wie man ein ganz gerne anwendet um quasi derartige zu fixen wenn man auf die pds m.de seite geht dort stellt er fest dass der händler dort auch fixiert ist also das ist genau der effekt die mir quasi hierzu es erst seit ich ein gestellter gut was nehmen wir mit bei der positionierung von elementen und vor allen dingen warum erzähle ich euch das eigentlich wenn nicht immer schon wieder direkt gegen diese positionierung wetter wobei so richtig wetter durch dagegen auch nicht diese positionierungs geschichte wurde früher dazu benutzt um komplette webseiten zu layouten den man sagt du als element steht ist da du hast stehst da hat man da so eine webseite vorsicht wo man ganz viele verschiedene elemente ganz viele verschiedene richtungen positioniert hat das ganze funktioniert natürlich nicht nur über die css eigenschaft position dazu muss man marketing und so weiter verwenden und jetzt merkt man vielleicht schon dass es viel aufwand ist und es hat sich jetzt deswegen hab ich gerade eben früher gesagt ein heutiger zeit mit css3 eine neue art und weise entwickelt den webseiten zu layouten das heißt man muss nicht mehr so viel arbeiten um eine vernünftig aussehen das layout hinzubekommen und der hauptgrund ist dass man eben nicht immer nur mit dem web browser ins internet geht dann so zum beispiel mit smartphone und tablet und so weiter das heißt ich muss in der lage sein alle diese elemente irgendwie flexibel auf der webseite anordnen zu können da kommen wir später zu wenn man sieht was über design sprechen in diesem fall aber sollte man mitnehmen dass es eben diese vier verschiedenen varianten gibt um ihr welche boxen zu platzieren stetig ist dabei die default variante und wir haben gesehen dass wir fix zum beispiel nutzen können um ein ja so festkleben des sck rollbares menü in wie einzubauen und vor allen dingen sollte in der lage sein zu sagen was ist der dokument fluss und was macht zwischen ihnen mit den elementen innerhalb des dokuments früher wurde aber nicht nur mit positionen gearbeitet und mit penning und marshall und so weiter sondern dazugehörig oder auch noch die css eigenschaft float verwendet und flo meint dass wir in der lage sind einzelne elemente um andere elemente fließen zu lassen gibt sich sicherlich auch schon aus dem namen der css eigenschaften ich zeige euch hier bewusst jetzt keine großen kniffe wie man zusammen mit position und flut und so weiter über das layouten kann weil wir werden die ganz einfache variante kennenlernen allerdings kann man dieses float ganz gut verwenden um so ein bisschen das zusammenspiel zwischen bildern und text zu organisieren und deswegen habe ich hier die gleiche webseite wie eben auch das ist der gleiche quellcode allerdings habe ich das ganze ergänzt um ein image tag und wir sehen hier die wunderschöne und nur in stadt und wir wollen jetzt einmal gucken kriegen wir das nicht ein bisschen glück sein dass wir ihnen wie die texte und das bild so darstellen dass da kein platz verschwendet wird wir haben diesen ganzen bereiche den leer ist es ist jetzt ein bisschen aus der sichtweise vom webdesign ungünstig dazu müsste man besser lösen und genau dafür eignet sich eben die cssr float ich gehe also in ein element rein und sage du element der erlaube ich das von anderen elementen umflossen wirst ich habe also quasi mit der css ein schaf float diesen automatisch generierten umbruch der ja auch hier im image dick mitriss und mit ihnen über block elemente gebe ich auf und der laube quasi die platz daneben frei zu machen für andere elemente und hier reden wir über den dokument los freizumachen für elemente die danach kommen das heißt wenn ich sage ich lasse den image tag um diesen dann hat der puck die erlaubnis diesen zu fließen und nicht im video unten der futter- oder so warum war der pta komplett dokument fluss nachdem ihr mit stecken wir schauen uns das ganze mal an ich habe in den stil anweisungen bislang den images noch nicht aufgegriffen deswegen nutzen wir das als typ sehr himmel setzen symbolbild da drin und verwenden die cssr schafft viel los hier gibt's ja wieder so ein paar dinge die man machen kann wright und left sind für uns die wesentlichen sachen bezieht sich darauf wo soll das element stehen und quasi der platz auf der anderen seite wird dann frei das also dort kann die mehr oder weniger geschlossen werden wenn ich also sage ich nehme flow do right speicher das ganze einmal ab und schone das an dann sage ich das bild soll auf der rechten seite stehen der platz dann eben in diesem fall die linke seite soll beschlossen werden das macht float natürlich jetzt ein bisschen kacke werden jetzt hier relativ nah am bild diesen text können wir jetzt rangehen und sagen ja okay mir gefällt mir dann die ich hätte schulen die entziehen pixel platz in alle richtungen er ist das kein problem dann können wir das ganze ok zehn pixel ist ein wenig über 40 dann haben wir hier ebenso ein bisschen luft in alle richtungen haben wir hier nach unten sondern elend egal müsste man jetzt ein bisschen anpassen wie man es daneben möchte wenn ich das ganze umdrehung da muss ich da keine hexe wertvoll machen sich andere reiht aufläuft speicher das mannschaft bleibt dieser stelle identisch und wir kriegen das genau auf der anderen seite gut was nur aus diesem bereich mit floating dafür das zusammenspiel von bildern und text organisieren oder für unsere fälle ist das so ganz gut geeignet ich kann aber auch sagen dass zum beispiel der etat soll flossen werden von dem artikel nur da ist es leider so dass das viel fummelarbeit ist und es ist tatsächlich auch so dass vom browser zu browser haben mache ich mal und verschiedene ergebnisse dabei auf dem bildschirm zu sehen und deswegen würde ich euch jetzt gar nicht andere hatten dass wir da große herumprobiert sondern nehmt es eben hin als zusammenspiel zwischen bild und text oder irgendwas anderes und text alles weitere kommt später und mit diesen drei sachen wenn man diese mission im hinterkopf hat und weiß wofür die da sind dann kann man tatsächlich schon ganz schön viel machen richtige slay augen kommt allerdings dann im nächsten kapitel oder dann führen wir alles das was wir an geballtem fachwissen nehmen wir haben gesammelt haben zusammen und ja das war es so weit von mir ich schluss mainka will er und bis zum nächsten mal