|
|||
Div ist doch das gängige Blockelement, um Inhalte zu positionieren. Eben genau weil es für sich genommen keine Aussage über die Art seines Inhalts macht, genau, wie Span, nur eben als Block statt als Inline.
Ich benutze das andauernd und hatte auch nie Probleme damit. Eine Quelle: http://de.selfhtml.org/html/text/bereiche.htm . Geändert von MitjaStachowiak (04.01.2014 um 13:10 Uhr) |
Sponsored Links |
Sponsored Links |
|
|||
Ja, dass float nicht bei inline-Elementen funktioniert ist klar. Deswegen würde ich das erst gar nicht auf inline-Elemente anwenden, sondern lieber ein DIV drum herum machen.
Viele inline-Elemente kann man zwar mit display:block oder eben float zu block-Elementen machen, aber das halte ich in den meisten Fällen für semantisch inkorrekter, als ein DIV. Mir ist noch nicht ganz klar, was BaTam am Ende erreichen will. Aus "Ich habe 8 Elemente [...] in einer Zeile ausgerichtet" schließe ich mal, dass er verschiedene Elemente nebeneinander positionieren möchte. Dafür würde ich eben alle diese Elemente in ein Div packen, jedem div die Eigenschaft display:inline-block geben und gegebenen Falls dem parent-Element noch white-space:nowrap. Geändert von MitjaStachowiak (05.01.2014 um 14:06 Uhr) |
|
||||
Wie gesagt, das hat nichts mit Semantik zu tun. Ob du ein DIV oder SPAN verwendest hängt von dem Kontext ab. Willst du andere Blockelemente gruppieren => DIV, willst du nur einen Abschnitt innerhalb eines Blockelements markieren => SPAN. Was das CSS daraus macht, spielt keine Rolle.
|
|
|||
Wie wäre es mit diesem Ansatz:
HTML-Code:
<HTML> <HEAD> <STYLE type="text/css"> div.slideNav { width : 500px; height : 200px; white-space : nowrap; border : 2px solid black; overflow : hidden; box-sizing : border-box; } .slideNav .block { height : 100%; width : 33.33333333333333333%; display : inline-block; vertical-align : top; } .slideNav .firstBlock { height : 100%; width : 0px; display : inline-block; margin : 0px; } </STYLE> </HEAD> <BODY> <DIV class="slideNav" id="slideNav"><DIV class="firstBlock"></DIV><DIV class="block" style="background-color : red; ">Video1</DIV><DIV class="block" style="background-color : blue; ">Video2</DIV><DIV class="block" style="background-color : green; ">Video3</DIV><DIV class="block" style="background-color : yellow; ">Video4</DIV><DIV class="block" style="background-color : silver; ">Video5</DIV><DIV class="block" style="background-color : black; ">Video6</DIV></DIV> <A href="javascript:setSlidePos(0)">Pos0</A> <A href="javascript:setSlidePos(1)">Pos1</A> <A href="javascript:setSlidePos(2)">Pos2</A> <A href="javascript:setSlidePos(3)">Pos3</A> <SCRIPT type="text/javascript"> function setSlidePos (x) { document.getElementById('slideNav').getElementsByTagName('div')[0].style.marginLeft = (-x*33.33333333333333333)+'%'; } </SCRIPT> </BODY> </HTML> |
|
|||
Zitat:
Was keine Rolle spielt ist, wie es dargestellt wird. Die Darstellung regelt CSS. Zitat:
Der Ursprung der so häufig zu sehenden Kombination von float und inline in Stylesheets ist mit großer Wahrscheinlichkeit der alte doubled float-margin Bug des IE 6. Der wurde damit bekämpft.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Inzwischen gibt es ja nur noch 2 1/2 Browser, also ist das Thema geschichte.
Ich habe es aufgegeben, abwärtskompatible Seiten zu schreiben. Man muss selbst für den aktuellen Internetexplorer schon genug Ausnahmen machen |
|
||||
Zitat:
Der Unterschied bei der Semantik ist, dass ein Blockelement weitere (Block)Elemente enthalten kann, ein Inlineelement kann/darf keine Blockelemente enthalten. Aber wie du es im CSS deklarierst - worum es hier geht - ist egal. Zitat:
HTML-Code:
<ul> <li style="float:left;display:inline">inline float</li> <li style="float:left;">nur float</li> </ul> Aber gut, dass ist ein Verhalten das man gerne wünscht. Beruht das auch irgendeine Spezifikation? |
|
||||||
Zitat:
Im Zusammenhang mit HTML[*] ist ein Element ein Blockelement. Ein Element, das im Stylesheet display:block bekommt, wird als Blockelement dargestellt -- muss deswegen aber kein Blockelement sein. [*] Genaugenommen müsste man sagen: HTML4. Da gibt es Block-level- und Inline-Elemente. The global structure of an HTML document Wenn man gemäß HTML5 formulieren möchte, dann wären es Elemente, die "flow element"s enthalten können und solche, die nur "phrasing element"s enthalten können. Common content models - HTML5 Zitat:
Zitat:
Es wäre nicht das erste Mal, das jemand glaubt, durch CSS die Syntaxregeln von HTML ändern zu können. Ich nehme nochmal Bezug auf obige Aussagen, vielleicht wird dann deutlicher, worauf ich hinaus will: Zitat:
Zitat:
Zitat:
Visual formatting model Li-Elemente sind "list-item"s -- auch das sind "Blockelemente"; das wird durch float nicht geändert (in CSS2 war das noch anders)
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (05.01.2014 um 18:40 Uhr) Grund: Formulierung ... |
Sponsored Links |
|
||||
Zitat:
Da sehe ich mein Grenzen, wenn ich nicht gewußt hätte worum es geht, hätte ich nie verstanden was dort beschrieben wird. Auch wenn ich jetzt schon seit ca. 15 Jahren immer mal wieder diese oder auch andere Sepzifikationen lese, haben Menschen, die das lesen und verstehen können immer meine Hochachtung |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Mehrere div Objecte per hover bewegen | adl-solutions | CSS | 7 | 29.09.2013 12:35 |
Transparentes Gif kontinuierlich bewegen | erich.wanker | CSS | 1 | 06.04.2011 22:10 |
Button soll sich bei Mausberührung bewegen | 19Magicg80 | CSS | 8 | 03.10.2008 19:25 |
Bewegen von Elementen im Browser | netbenni | Javascript & Ajax | 2 | 25.03.2008 13:45 |
Fixe Seitenleiste die sich doch bewegen soll | fabske | (X)HTML | 5 | 16.08.2007 00:52 |