Auf Thema antworten 2026

Beitrag

<blockquote data-quote="kornyclown" data-source="post: 2108768">AW: PositionsproblemeNein nein, die listWrapper sollen beide untereinander stehen und der sideWrapper rechts neben den listWrappern.Ich habe es jetzt auch endlich geschafft, fast. Die Position stimmt aber ich wollte eigentlich, dass der sideWrapper, unabhängig von dessen Inhalt, die gleiche höhe hat wie sein Parent, das &lt;section&gt; Tag.Der aktuelle Code ist hier:[HTML]&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &nbsp; &lt;title&gt;Thomas Manz.de | VFX Generalist&lt;/title&gt;&nbsp; &nbsp; &lt;link rel=&quot;SHORTCUT ICON&quot; href=&quot;icon.png&quot; type=&quot;image/png&quot; /&gt;&nbsp; &nbsp; &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;&lt;/link&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &nbsp; &lt;div class=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;header&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;images/TMLogo.png&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;headline&quot;&gt;Thomas Manz | VFX Generalist&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/header&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav class=&quot;mainNav&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;reel.html&quot;&gt;Reel&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;gallery.html&quot;&gt;Gallery&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;vita.html&quot;&gt;Vita&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;contact&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;sideWrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dies ist ein Test. dies ist ein Test.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;listWrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;Skills&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;3D Modeling&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Digital Sculpting&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Texturing&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Lighting&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Rendering&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Digital Compositing&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Matchmoving&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Python Scripting&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;listWrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;Software&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Maya&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Cinema 4D&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;ZBrush&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Nuke&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Synth Eyes&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;Photoshop&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;footer&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/footer&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;!-- end wrapper --&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML][CODE]@charset &quot;UTF-8&quot;;/* CSS Document *//*@font-face {font-family: &#039;Cardo&#039;; src: url(&#039;Cardo-Regular.ttf&#039;) format(&#039;truetype&#039;);}@font-face {font-family: &#039;Cardo&#039;; src: url(&#039;Cardo-Bold.ttf&#039;) format(&#039;truetype&#039;);}@font-face {font-family: &#039;Cardo&#039;; src: url(&#039;Cardo-Italic.ttf&#039;) format(&#039;truetype&#039;);}*//* Font Standart: font-family: Cardo; font-size: 15pt; font-weight: normal; color: #000; *//*Reset*/* {padding: 0; margin: 0;}ul, ol, li {list-style: none;}a {text-decoration: none; color: #000;}img {border: none;}/*Background*/body {&nbsp; &nbsp; background: #000000; /* Old browsers */&nbsp; &nbsp; background: -moz-linear-gradient(left,&nbsp; #000000 0%, #3f3f3f 50%, #000000 100%); /* FF3.6+ */&nbsp; &nbsp; background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#3f3f3f), color-stop(100%,#000000)); /* Chrome,Safari4+ */&nbsp; &nbsp; background: -webkit-linear-gradient(left,&nbsp; #000000 0%,#3f3f3f 50%,#000000 100%); /* Chrome10+,Safari5.1+ */&nbsp; &nbsp; background: -o-linear-gradient(left,&nbsp; #000000 0%,#3f3f3f 50%,#000000 100%); /* Opera 11.10+ */&nbsp; &nbsp; background: -ms-linear-gradient(left,&nbsp; #000000 0%,#3f3f3f 50%,#000000 100%); /* IE10+ */&nbsp; &nbsp; background: linear-gradient(to right,&nbsp; #000000 0%,#3f3f3f 50%,#000000 100%); /* W3C */&nbsp; &nbsp; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#039;#000000&#039;, endColorstr=&#039;#000000&#039;,GradientType=1 ); /* IE6-9 */&nbsp; &nbsp; }/*Wrapper*/.wrapper {width: 80%; height: 100%; height: auto; overflow: hidden; margin: auto; position: relative;}/*Header*/header {width: 100%; height: 100%; margin: 5% auto 1%; padding: 2% 0 1% 0; position: relative; background: #eee;}header img {width: 150px; height: 123px; max-width: 100%; margin: 0 auto; position: relative; display: block;}.headline {width: 100%; text-align: center; font-family: Cardo; font-size: 2em;}/*Navigation*/.mainNav {width: 100%; margin: 1% auto; text-align: center;}.mainNav ul {width: 100%; margin: auto; position: relative; display: table; background: #eee;}.mainNav ul li {display: table-cell; table-layout: fixed; text-align: center;}.mainNav ul li a {width: 200%; text-decoration: none; font-family: Cardo; font-size: 1.3em; font-weight: normal; color: #000;}/*Content*/section {width: 100%; position: relative; background: red;}.sideWrapper {width: 45.5%; height: auto; margin: 0 0 0 0; padding: 2%; float: right; font-size: 1.3em; background: #eee;}.listWrapper {width: 45.5%; height: 100%; margin: 0 0 1% 0; padding: 2%; position: relative; background: #eee;}.listWrapper ul {font-family: Cardo; font-size: 1.3em; font-weight: bold; position: relative;}.listWrapper ul li {font-weight: normal; margin: 0 5%; position: relative;}[/CODE]Der Trick war den sideWrapper im Quelltext vor die listWrapper zu stellen und im CSS position: relative rauszunehemen und einfach ein float: right einzusetzen.Aber wie bekomme ich jetzt die Höhe des sideWrapper = Höhe &lt;section&gt;?</blockquote>

[QUOTE="kornyclown, post: 2108768"] [b]AW: Positionsprobleme[/b] Nein nein, die listWrapper sollen beide untereinander stehen und der sideWrapper rechts neben den listWrappern. Ich habe es jetzt auch endlich geschafft, fast. Die Position stimmt aber ich wollte eigentlich, dass der sideWrapper, unabhängig von dessen Inhalt, die gleiche höhe hat wie sein Parent, das <section> Tag. Der aktuelle Code ist hier: [HTML]<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Thomas Manz.de | VFX Generalist</title> <link rel="SHORTCUT ICON" href="icon.png" type="image/png" /> <link href="css/style.css" rel="stylesheet" type="text/css"></link> </head> <body> <div class="wrapper"> <header> <img src="images/TMLogo.png"> <div class="headline">Thomas Manz | VFX Generalist</div> </header> <nav class="mainNav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="reel.html">Reel</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="vita.html">Vita</a></li> <li><a href="contact">Contact</a></li> </ul> </nav> <section> <div class="sideWrapper"> dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. dies ist ein Test. </div> <div class="listWrapper"> <ul>Skills <li>3D Modeling</li> <li>Digital Sculpting</li> <li>Texturing</li> <li>Lighting</li> <li>Rendering</li> <li>Digital Compositing</li> <li>Matchmoving</li> <li>Python Scripting</li> </ul> </div> <div class="listWrapper"> <ul>Software <li>Maya</li> <li>Cinema 4D</li> <li>ZBrush</li> <li>Nuke</li> <li>Synth Eyes</li> <li>Photoshop</li> </ul> </div> </section> <footer> </footer> </div> </body> </html>[/HTML] [CODE]@charset "UTF-8"; /* CSS Document */ /* @font-face {font-family: 'Cardo'; src: url('Cardo-Regular.ttf') format('truetype');} @font-face {font-family: 'Cardo'; src: url('Cardo-Bold.ttf') format('truetype');} @font-face {font-family: 'Cardo'; src: url('Cardo-Italic.ttf') format('truetype');} */ /* Font Standart: font-family: Cardo; font-size: 15pt; font-weight: normal; color: #000; */ /*Reset*/ * {padding: 0; margin: 0;} ul, ol, li {list-style: none;} a {text-decoration: none; color: #000;} img {border: none;} /*Background*/ body { background: #000000; /* Old browsers */ background: -moz-linear-gradient(left, #000000 0%, #3f3f3f 50%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#3f3f3f), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #000000 0%,#3f3f3f 50%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #000000 0%,#3f3f3f 50%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #000000 0%,#3f3f3f 50%,#000000 100%); /* IE10+ */ background: linear-gradient(to right, #000000 0%,#3f3f3f 50%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } /*Wrapper*/ .wrapper {width: 80%; height: 100%; height: auto; overflow: hidden; margin: auto; position: relative;} /*Header*/ header {width: 100%; height: 100%; margin: 5% auto 1%; padding: 2% 0 1% 0; position: relative; background: #eee;} header img {width: 150px; height: 123px; max-width: 100%; margin: 0 auto; position: relative; display: block;} .headline {width: 100%; text-align: center; font-family: Cardo; font-size: 2em;} /*Navigation*/ .mainNav {width: 100%; margin: 1% auto; text-align: center;} .mainNav ul {width: 100%; margin: auto; position: relative; display: table; background: #eee;} .mainNav ul li {display: table-cell; table-layout: fixed; text-align: center;} .mainNav ul li a {width: 200%; text-decoration: none; font-family: Cardo; font-size: 1.3em; font-weight: normal; color: #000;} /*Content*/ section {width: 100%; position: relative; background: red;} .sideWrapper {width: 45.5%; height: auto; margin: 0 0 0 0; padding: 2%; float: right; font-size: 1.3em; background: #eee;} .listWrapper {width: 45.5%; height: 100%; margin: 0 0 1% 0; padding: 2%; position: relative; background: #eee;} .listWrapper ul {font-family: Cardo; font-size: 1.3em; font-weight: bold; position: relative;} .listWrapper ul li {font-weight: normal; margin: 0 5%; position: relative;} [/CODE] Der Trick war den sideWrapper im Quelltext vor die listWrapper zu stellen und im CSS position: relative rauszunehemen und einfach ein float: right einzusetzen. Aber wie bekomme ich jetzt die Höhe des sideWrapper = Höhe <section>? [/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?