Auf Thema antworten 2026

Beitrag

<blockquote data-quote="leohh" data-source="post: 824463" data-attributes="member: 205642">AW: Frage zum CSS-LayoutNun es ist relativ einfach, wie mein Vorposter schon schrieb.Man hat fuer nahezu jede Situation ein passendes Element, wodurch &#039;Container&#039; eigentlich nur noch zum Zusammenfassen von Bereichen verwendet werden sollten. Man kann es sogar strikter als im Printbereich machen, weil man hier logischer gliedern kann -bzw. darf. Oberpunkte mit einem Div-Container zusammenfassen, den Inhalt des Containers wiederum mit semantisch, sinnvollen Elementen auszeichnen und schon hat man das nahezu perfekte Markup.Einfaches (falsches) Beispiel:[HTML]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;de&quot; &gt;&nbsp;&nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; UTF-8&quot; /&gt;&nbsp; &nbsp; &nbsp; &lt;title&gt;Datenbank&lt;/title&gt;&nbsp; &nbsp; &nbsp; &lt;style type=&quot;text/css&quot; media=&quot;screen, projection&quot; id=&quot;id&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; @import &quot;style.css&quot;;&nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/head&gt;&nbsp;&nbsp; &lt;body id=&quot;index&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;logo&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div&nbsp; id=&quot;ueberschrift1&quot;&gt;Seitentitel&lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;sidebar&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;menue&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt; |&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;werbung&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;werbeueberschrift&quot;&gt;Werbung&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type=&#039;text/javascript&#039;&gt;&lt;!--//&lt;![CDATA[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; [Werbescript]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //]]&gt;--&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;main&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;ersterParagraph&quot;&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;zweiterParagraph&quot;&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&amp;copy; Firma | Datum | Ipressum usw.&lt;/div&gt;&nbsp;&nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Mit diesem Code, haettest du zwar eine leckere Suppe gekocht aber nicht jeder steht auf Suppe. Suchmaschinen werden hier streiken, Screenreader melden auch nur noch Muell und deine gesammte Struktur faellt im Benutzermodus komplett auseinander und wird somit nicht verwertbar fuer den Endanwender.Im Gegendsatz dazu, verwandelnt sich bei einer semantisch, korrekt ausgezeichneten Webseite die Nachteile schon praktisch zu Vorteilen.Einfaches (&#039;richtiges&#039;) Beispiel:[HTML]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;de&quot; &gt;&nbsp;&nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; UTF-8&quot; /&gt;&nbsp; &nbsp; &nbsp; &lt;title&gt;Datenbank&lt;/title&gt;&nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot;&nbsp; &nbsp; &nbsp; &lt;style type=&quot;text/css&quot; media=&quot;screen, projection&quot; id=&quot;id&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; @import &quot;style.css&quot;;&nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/head&gt;&nbsp;&nbsp; &lt;body id=&quot;index&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;h1 id=&quot;ueberschrift1&quot;&gt;Seitentitel&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;sidebar&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul id=&quot;menue&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;&quot;&gt;Lorem&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3 id=&quot;werbeueberschrift&quot;&gt;Werbung&lt;/h3&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type=&#039;text/javascript&#039;&gt;&lt;!--//&lt;![CDATA[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; [Werbescript]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //]]&gt;--&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;main&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;ul id=&quot;footer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&amp;copy; Firma&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Datum&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Ipressum usw.&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Mit diesem Markup vermittelst du anderen Geraeten mehr Information ueber deinen Inhalt, da du deinen Elementen eine hochwertigere Bezeichnung zuordnest.Dann schau noch mal in ein CMS und sieh dir die labels noch mal etwas genauer an <img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />In anderen Foren, wird man fuer diese und aehnliche Aussagen nahezu gesteinigt. Nein, so ist es sicherlich nicht, da man hier schon ganz anders denken bzw. vorgehen muss. Bei Tabellen erstellt man meist erst seine Webseite und fuegt dann den Inhalt ein, in der modernen Variante hat man zuerst den Content und bastelt um diesen eine &#039;benutzergrafisch, ansprechende Oberflaeche&#039;. Ganz einfach:SEO bzw. Leserlicher fuer Suchmaschinen, keine Spacer *.gifs, leichter zu handlen, semantisch hochwertiger &amp; zugaenglicher fuer Leute mit Einschraenkungen und vorallendingen weniger Code (weniger Traffic)Und auf den Schmuck kommt es eben an <img src="/styles/default/xenforo/smilies/tongue.gif"&nbsp; class="smilie" loading="lazy" alt=":P" title="Stick Out Tongue&nbsp; &nbsp; :P" data-shortname=":P" />Hier wird es im InDesign m.E. schon sehr abenteuerlich.Ich muss es zum Glueck nur selten verweden <img src="/styles/default/xenforo/smilies/biggrin.gif"&nbsp; class="smilie" loading="lazy" alt=":D" title="Big Grin&nbsp; &nbsp; :D" data-shortname=":D" /></blockquote>

[QUOTE="leohh, post: 824463, member: 205642"] [b]AW: Frage zum CSS-Layout[/b] Nun es ist relativ einfach, wie mein Vorposter schon schrieb. Man hat fuer nahezu jede Situation ein passendes Element, wodurch 'Container' eigentlich nur noch zum Zusammenfassen von Bereichen verwendet werden sollten. Man kann es sogar strikter als im Printbereich machen, weil man hier logischer gliedern kann -bzw. darf. Oberpunkte mit einem Div-Container zusammenfassen, den Inhalt des Containers wiederum mit semantisch, sinnvollen Elementen auszeichnen und schon hat man das nahezu perfekte Markup. Einfaches (falsches) Beispiel: [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" > <head> <meta http-equiv="content-type" content="text/html; UTF-8" /> <title>Datenbank</title> <style type="text/css" media="screen, projection" id="id"> @import "style.css"; </style> </head> <body id="index"> <div id="header"> <div id="logo"><img src="" alt="" /></div> <div id="ueberschrift1">Seitentitel</div> </div> <div id="sidebar"> <div id="menue"> <a href="#" title="">Lorem</a> | <a href="#" title="">Lorem</a> | <a href="#" title="">Lorem</a> | <a href="#" title="">Lorem</a> | </div> <div id="werbung"> <div id="werbeueberschrift">Werbung</div> <script type='text/javascript'></script> </div> </div> <div id="main"> <div id="ersterParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div> <div id="zweiterParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div> </div> <div id="footer">© Firma | Datum | Ipressum usw.</div> </body> </html>[/HTML] Mit diesem Code, haettest du zwar eine leckere Suppe gekocht aber nicht jeder steht auf Suppe. Suchmaschinen werden hier streiken, Screenreader melden auch nur noch Muell und deine gesammte Struktur faellt im Benutzermodus komplett auseinander und wird somit nicht verwertbar fuer den Endanwender. Im Gegendsatz dazu, verwandelnt sich bei einer semantisch, korrekt ausgezeichneten Webseite die Nachteile schon praktisch zu Vorteilen. Einfaches ('richtiges') Beispiel: [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" > <head> <meta http-equiv="content-type" content="text/html; UTF-8" /> <title>Datenbank</title> <link rel="stylesheet" <style type="text/css" media="screen, projection" id="id"> @import "style.css"; </style> </head> <body id="index"> <div id="wrapper"> <h1 id="ueberschrift1">Seitentitel</h1> <div id="sidebar"> <ul id="menue"> <li><a href="#" title="">Lorem</a></li> <li><a href="#" title="">Lorem</a></li> <li><a href="#" title="">Lorem</a></li> <li><a href="#" title="">Lorem</a></li> </ul> <h3 id="werbeueberschrift">Werbung</h3> <script type='text/javascript'></script> </div> <div id="main"> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </div> <ul id="footer"> <li>© Firma</li> <li>Datum</li> <li>Ipressum usw.</li> </ul> </div> </body> </html>[/HTML] Mit diesem Markup vermittelst du anderen Geraeten mehr Information ueber deinen Inhalt, da du deinen Elementen eine hochwertigere Bezeichnung zuordnest. Dann schau noch mal in ein CMS und sieh dir die labels noch mal etwas genauer an ;) In anderen Foren, wird man fuer diese und aehnliche Aussagen nahezu gesteinigt. Nein, so ist es sicherlich nicht, da man hier schon ganz anders denken bzw. vorgehen muss. Bei Tabellen erstellt man meist erst seine Webseite und fuegt dann den Inhalt ein, in der modernen Variante hat man zuerst den Content und bastelt um diesen eine 'benutzergrafisch, ansprechende Oberflaeche'. Ganz einfach: SEO bzw. Leserlicher fuer Suchmaschinen, keine Spacer *.gifs, leichter zu handlen, semantisch hochwertiger & zugaenglicher fuer Leute mit Einschraenkungen und vorallendingen weniger Code (weniger Traffic) Und auf den Schmuck kommt es eben an :P Hier wird es im InDesign m.E. schon sehr abenteuerlich. Ich muss es zum Glueck nur selten verweden :D [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?