Auf Thema antworten 2026

Beitrag

<blockquote data-quote="killa343" data-source="post: 2124001" data-attributes="member: 38228">AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren@patrick.Patrick, wo kommt dieser Space her? (rot markiert)<a href="http://www.abload.de/image.php?img=unbenannt-22vuc2.jpg" target="_blank"><img src="http://www.abload.de/thumb/unbenannt-22vuc2.jpg" alt="" class="fr-fic fr-dii fr-draggable " data-size="" style="" /></a>[code]@charset &quot;utf-8&quot;;/* CSS Document */* {&nbsp; &nbsp; padding:0; &nbsp; &nbsp; margin:0; &nbsp; &nbsp; border:none; &nbsp; &nbsp; outline:none; &nbsp; &nbsp; list-style:none; &nbsp; &nbsp; font-size:100%;&nbsp; &nbsp; }&nbsp; &nbsp; .clear {&nbsp; &nbsp; clear:both;&nbsp; &nbsp; }&nbsp; &nbsp; html {&nbsp; &nbsp; min-height:100%; &nbsp; &nbsp; min-width:100%;}body {&nbsp; &nbsp; background-image:url(../Bilder/background.jpg);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; background-color:#000;&nbsp; &nbsp; background-position:center;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #wrapper {&nbsp; &nbsp; width:940px; &nbsp; &nbsp; margin:20px auto;&nbsp; &nbsp; }&nbsp; &nbsp; #nav {&nbsp; &nbsp; margin-left:340px;&nbsp; &nbsp; width:145px; &nbsp; &nbsp; height:62px; &nbsp; &nbsp; }&nbsp; &nbsp; #nav ul {&nbsp; &nbsp; width:1200px;&nbsp; &nbsp; height:62px; &nbsp; &nbsp; }&nbsp; &nbsp; #nav ul li { &nbsp; &nbsp; padding-top:10px; &nbsp; &nbsp; float:left;&nbsp; &nbsp; }&nbsp; &nbsp; #nav ul li a {&nbsp; &nbsp; color:#fff; &nbsp; &nbsp; text-decoration:none; &nbsp; &nbsp; padding:62px 55px;&nbsp; &nbsp; }&nbsp; &nbsp; #nav ul li a:hover {&nbsp; &nbsp; background-image:url(../Bilder/mouse_over.png);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; }&nbsp; &nbsp; #logo {&nbsp; &nbsp; width:309px; &nbsp; &nbsp; height:519px;&nbsp; &nbsp; background-image:url(../Bilder/slider.png); &nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; padding:10px; &nbsp; &nbsp; float:left;&nbsp; &nbsp; }&nbsp; &nbsp; #right {&nbsp; &nbsp; width:590px; &nbsp; &nbsp; background-color:; &nbsp; &nbsp; padding-left:10px; &nbsp; &nbsp; float:left;&nbsp; &nbsp; }&nbsp; &nbsp; #content {&nbsp; &nbsp; height:333px;&nbsp; &nbsp; margin-bottom:10px;&nbsp; &nbsp; background-image:url(../Bilder/content.png);&nbsp; &nbsp; }&nbsp; &nbsp; #content_btn {&nbsp; &nbsp; height:197px;&nbsp; &nbsp; width:601px;&nbsp; &nbsp; background-image:url(../Bilder/content_btn.png);&nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; }&nbsp; &nbsp; /* alle 3 Spalten mit gleicher Breite */.col-1, .col-2 {&nbsp; &nbsp; width: 270px;&nbsp; &nbsp; height:197px;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; overflow:hidden;&nbsp; &nbsp; text-overflow: ellipsis;&nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; }.col-1 {&nbsp; &nbsp; float: left;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;.col-2 {&nbsp; &nbsp;&nbsp; float:right;&nbsp;}&nbsp; &nbsp; #content, #content_btn {&nbsp; &nbsp; width:600px; &nbsp; &nbsp; background-color:;&nbsp; &nbsp; }&nbsp; &nbsp; #footer {&nbsp; &nbsp; width:960px; &nbsp; &nbsp; height:40px; &nbsp; &nbsp; background-color:;&nbsp; &nbsp; }[/code][code]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;Unbenanntes Dokument&lt;/title&gt;&lt;link href=&quot;css/layout.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;&nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;div id=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;nav&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;page 1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;page 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;page 3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;page 4&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;br class=&quot;clear&quot; /&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;logo&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;right&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;slider&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.psd-tutorials.de/forum/papa/assets/images/slider/image1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.psd-tutorials.de/forum/papa/assets/images/slider/image2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.psd-tutorials.de/forum/papa/assets/images/slider/image3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;img src=&quot;http://www.psd-tutorials.de/forum/papa/assets/images/slider/image4.jpg&quot; alt=&quot;&quot; /&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;content_btn&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;col-1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;col-2&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;br class=&quot;clear&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;br class=&quot;clear&quot; /&gt;&nbsp; &nbsp; &nbsp; &lt;div id=&quot;footer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- footer content here --&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;[/code]Und kann ich bei dem &quot;text-overflow: ellipsis;&quot; im &quot;#Content_btn&quot; auch machen das er nicht nur eine Zeile sondern bis den Container voll schreibt?</blockquote>

[QUOTE="killa343, post: 2124001, member: 38228"] [b]AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren[/b] @patrick. Patrick, wo kommt dieser Space her? (rot markiert) [url=http://www.abload.de/image.php?img=unbenannt-22vuc2.jpg][img]http://www.abload.de/thumb/unbenannt-22vuc2.jpg[/img][/url] [code] @charset "utf-8"; /* CSS Document */ * { padding:0; margin:0; border:none; outline:none; list-style:none; font-size:100%; } .clear { clear:both; } html { min-height:100%; min-width:100%; } body { background-image:url(../Bilder/background.jpg); background-repeat:no-repeat; background-color:#000; background-position:center; } #wrapper { width:940px; margin:20px auto; } #nav { margin-left:340px; width:145px; height:62px; } #nav ul { width:1200px; height:62px; } #nav ul li { padding-top:10px; float:left; } #nav ul li a { color:#fff; text-decoration:none; padding:62px 55px; } #nav ul li a:hover { background-image:url(../Bilder/mouse_over.png); background-repeat:no-repeat; } #logo { width:309px; height:519px; background-image:url(../Bilder/slider.png); background-repeat:no-repeat; padding:10px; float:left; } #right { width:590px; background-color:; padding-left:10px; float:left; } #content { height:333px; margin-bottom:10px; background-image:url(../Bilder/content.png); } #content_btn { height:197px; width:601px; background-image:url(../Bilder/content_btn.png); background-repeat:no-repeat; } /* alle 3 Spalten mit gleicher Breite */ .col-1, .col-2 { width: 270px; height:197px; padding:10px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .col-1 { float: left; } .col-2 { float:right; } #content, #content_btn { width:600px; background-color:; } #footer { width:960px; height:40px; background-color:; } [/code] [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="nav"> <ul> <li><a href="#">page 1</a></li> <li><a href="#">page 2</a></li> <li><a href="#">page 3</a></li> <li><a href="#">page 4</a></li> </ul> </div> <div id="logo"> </div> <div id="right"> <div id="content"> <div id="slider"> <ul> <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image1.jpg" alt="" /></li> <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image2.jpg" alt="" /></li> <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image3.jpg" alt="" /></li> <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image4.jpg" alt="" /></li> </ul> </div> </div> <div id="content_btn"> <div class="col-1"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div class="col-2"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> </div> </div> <div id="footer">  </div> </div> </body> </html> [/code] Und kann ich bei dem "text-overflow: ellipsis;" im "#Content_btn" auch machen das er nicht nur eine Zeile sondern bis den Container voll schreibt? [/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?