zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Bilder/Videos bewegen lassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 03.01.2014, 22:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 05.01.2014, 13:54
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

CSS hat nichts mit Semantik zu tun.

Ob ein Element ein Block- oder Inlineelement ist, spielt für die Semantik keine Rolle, d.h. du kannst jedes Element beliebig zu einem Block/Inlineelement deklarieren. Das Problem hier ist, dass ein float ein Element zu einem Blockelement macht, d.h. die Deklaration display:inline ist einfach überflüssig, da sie keine Auswirkung hat.

Schau dir im Firefox Inspector mal diesen Code an:
HTML-Code:
<div style="float:left;display:inline">inline float?</div>
display:inline wird zwar eingelesen, wenn du aber auf berechnet gehst, siehst du, dass es trotzdem ein Blockelement ist
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 05.01.2014, 14:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #14 (permalink)  
Alt 05.01.2014, 14:28
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
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.
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.
Mit Zitat antworten
  #15 (permalink)  
Alt 05.01.2014, 14:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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>
Duch die inline-block-Technik muss man alle Absätze und Leerzeichen zwischen den DIV-Elementen entfernen. Das ist nich so schön - wen das stört, der kann ja mit display : table-row oder float arbeiten. Das Prinzip sollte aber jetzt klar sein.
Mit Zitat antworten
  #16 (permalink)  
Alt 05.01.2014, 15:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Ob ein Element ein Block- oder Inlineelement ist, spielt für die Semantik keine Rolle, d.h. du kannst jedes Element beliebig zu einem Block/Inlineelement deklarieren.
Diese Formulierung finde ich sehr unglücklich, da leicht misszuverstehen. Ob ein Element ein Block- oder Inline-Element ist, spielt schon eine Rolle. Was es ist, steht in der HTML-Spezifikation.
Was keine Rolle spielt ist, wie es dargestellt wird. Die Darstellung regelt CSS.

Zitat:
Das Problem hier ist, dass ein float ein Element zu einem Blockelement macht, d.h. die Deklaration display:inline ist einfach überflüssig, da sie keine Auswirkung hat.
Das stimmt so pauschal nicht immer. Li-Elemente, die nur gefloatet werden, behalten die Listenmarker. Zusätzlich inline blendet sie aus.
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.
Mit Zitat antworten
  #17 (permalink)  
Alt 05.01.2014, 17:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #18 (permalink)  
Alt 05.01.2014, 17:11
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Diese Formulierung finde ich sehr unglücklich, da leicht misszuverstehen. Ob ein Element ein Block- oder Inline-Element ist, spielt schon eine Rolle. Was es ist, steht in der HTML-Spezifikation.
Was keine Rolle spielt ist, wie es dargestellt wird. Die Darstellung regelt CSS.
Das finde ich aber ähnlich unglücklich. Ist Block/Inline eine Frage der Darstellung oder nicht?
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:
Zitat von fricca Beitrag anzeigen
Das stimmt so pauschal nicht immer. Li-Elemente, die nur gefloatet werden, behalten die Listenmarker. Zusätzlich inline blendet sie aus.
Das ist interessant
HTML-Code:
<ul>
    <li style="float:left;display:inline">inline float</li>	
    <li style="float:left;">nur float</li>	
</ul>
Das erste Element wird im Firefox explizit ein Blockelement. Das zweite nicht.

Aber gut, dass ist ein Verhalten das man gerne wünscht. Beruht das auch irgendeine Spezifikation?
Mit Zitat antworten
  #19 (permalink)  
Alt 05.01.2014, 18:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Das finde ich aber ähnlich unglücklich. Ist Block/Inline eine Frage der Darstellung oder nicht?
Das kommt eben darauf an, in welchem Zusammenhang.
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:
Der Unterschied bei der Semantik ist, dass ein Blockelement weitere (Block)Elemente enthalten kann, ein Inlineelement kann/darf keine Blockelemente enthalten.
Ob das Semantik oder doch nur Syntax ist, darüber könnte man wohl diskutieren.

Zitat:
Aber wie du es im CSS deklarierst - worum es hier geht - ist egal.
Das meine ich ja. Ein span-Element, das per CSS display:block bekommt ist kein Blockelement, es wird nur als Blockelement dargestellt. Deshalb finde ich deine Formulierung -- also das Wörtchen "ist" -- unglücklich, weil es missverstanden werden kann.
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 von MitjaStachowiak Beitrag anzeigen
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.
Das ist eben falsch. Doch, float funktioniert bei Inline-Elementen. Sie werden dann nur nicht mehr inline dargestellt.

Zitat:
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.
Nein, man kann Inline-Elemente nicht zu Blockelementen machen -- man kann sie nur so darstellen lassen. Die Bedeutung (= Semantik) des Elements ändert sich nicht durch CSS -- also kann es niemals "semantisch inkorrekter" sein, wenn man eine CSS-Eigenschaft auf ein Element anwendet.


Zitat:
Beruht das auch irgendeine Spezifikation?
Ja, sicher.
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)

Geändert von fricca (05.01.2014 um 18:40 Uhr) Grund: Formulierung ...
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 05.01.2014, 20:55
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Daumen hoch

Zitat:
Zitat von fricca Beitrag anzeigen
Ja, sicher.
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)
Danke.

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:20 Uhr.