Auf Thema antworten 2026

Beitrag

<blockquote data-quote="leohh" data-source="post: 967963" data-attributes="member: 205642">AW: Ich verstehs nicht...Nun ja, mir sollst gleich sein:Grafiken einsetzen Hoehen und Breiten entsprechend anpassen.Wirst noch ein bisschen beim ausrichten von Schriften &amp; Aehnlichem zu feilen habenaber das ist wohl eher ein kleineres Problem.Es gibt sicher noch die ein oder andere Loesung, die zum selben Ziel fuehrt also bitte nicht als ultimative Loesung sehen. Auch wenn ich weiss, dass du selber wohl wenig, direkt aus diesem Beispiel lernen wirst aber sicher wird es den ein oder anderen geben, der sicher daran interessiert ist (<a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" target="_blank">Vertical Centering in CSS</a>)...[Code]&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; &nbsp; &nbsp; &nbsp; &lt;title&gt;vertical-alignedSites&lt;/title&gt;&nbsp; &nbsp; &nbsp; &lt;style type=&quot;text/css&quot; media=&quot;screen, projection&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; /* reset &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; ----------------------------------------------------------------------------------------*/&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * { margin: 0; padding: 0; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; a img { border: 0; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; ol, ul { list-style: none; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; q:before, q:after, blockquote:before, blockquote:after { content: &quot;&quot;; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; /* rebuild&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; ----------------------------------------------------------------------------------------*/&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; html,body { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font: 100%&nbsp; &quot;Lucida Grande&quot;, &quot;Lucida Sans&quot;, Tahoma, Verdana, sans-serif; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: url() repeat; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #333;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align:center; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #dummy { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom:-12.5em; /* die haelfte deiner gesammthoehe fuer den Inhalt */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float:left; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #wrap {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: orange url(); /* nur um den container und den effekt zu sehen - farbe ausradieren */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 25em; /* deine Gesammthoehe */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 25em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #nav li { float: left; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #nav a&nbsp; { display: block; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #main&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float:right; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: .68em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &lt;/head&gt;&nbsp;&nbsp; &lt;body id=&quot;vertical-alignedSites&quot;&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;dummy&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;wrap&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;div id=&quot;main&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;h1&gt;headline&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;ul id=&quot;nav&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;menu 1&quot;&gt;menu item 1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;menu 2&quot;&gt;menu item 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;menu 3&quot;&gt;menu item 3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;menu 4&quot;&gt;menu item 4&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;!--endMenue --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;br class=&quot;clear&quot; /&gt; &lt;!-- avoiding floting issues --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- endHeader --&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- endContent --&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;!-- endMain --&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;!-- endWrap --&gt;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &lt;/body&gt;&lt;/html&gt;[/Code]</blockquote>

[QUOTE="leohh, post: 967963, member: 205642"] [b]AW: Ich verstehs nicht...[/b] Nun ja, mir sollst gleich sein: Grafiken einsetzen Hoehen und Breiten entsprechend anpassen. Wirst noch ein bisschen beim ausrichten von Schriften & Aehnlichem zu feilen haben aber das ist wohl eher ein kleineres Problem. Es gibt sicher noch die ein oder andere Loesung, die zum selben Ziel fuehrt also bitte nicht als ultimative Loesung sehen. Auch wenn ich weiss, dass du selber wohl wenig, direkt aus diesem Beispiel lernen wirst aber sicher wird es den ein oder anderen geben, der sicher daran interessiert ist ([URL="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html"]Vertical Centering in CSS[/URL])... [Code] <!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>vertical-alignedSites</title> <style type="text/css" media="screen, projection"> /* reset ----------------------------------------------------------------------------------------*/ * { margin: 0; padding: 0; } a img { border: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } /* rebuild ----------------------------------------------------------------------------------------*/ html,body { font: 100% "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; background: url() repeat; color: #333; text-align:center; height: 100%; } #dummy { width:1px; height:50%; margin-bottom:-12.5em; /* die haelfte deiner gesammthoehe fuer den Inhalt */ float:left; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */ } #wrap { background: orange url(); /* nur um den container und den effekt zu sehen - farbe ausradieren */ margin: 0 auto; position: relative; text-align: left; height: 25em; /* deine Gesammthoehe */ width: 25em; clear: left; } #nav li { float: left; } #nav a { display: block; } #main { float:right; /* ie 6 u 7 haben so ihre probleme, damit umgeht man das */ font-size: .68em; } br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } </style> </head> <body id="vertical-alignedSites"> <div id="dummy"></div> <div id="wrap"> <div id="main"> <div id="header"> <h1>headline</h1> <ul id="nav"> <li><a href="#" title="menu 1">menu item 1</a></li> <li><a href="#" title="menu 2">menu item 2</a></li> <li><a href="#" title="menu 3">menu item 3</a></li> <li><a href="#" title="menu 4">menu item 4</a></li> </ul>   </div>  <div id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>  </div>  </div>  </body> </html> [/Code] [/QUOTE]

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

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?