K
kornyclown
Guest
Es gibt da zwei Baustellen
1.
Das <img> befindet sich in einem Container, der größer ist als es selbst. Innerhalb dieses Containers wurde der/die/das margin auf margin: 3% auto; gestellt. Demzufolge müsste es sich doch auf der X-Achse mittig positionieren. Warum tut es das nicht?
2.
Der Container "sideWrapper" soll sich rechts neben den zwei "listWrapper" Containern befinden. Da die "listWrapper"aber relativ sind, fügt sich der "sideWrapper" automatisch unter den beiden ein. Wie kriege ich ihn dort hin sodass er sich rechts neben den beiden befindet und über die komplette Höhe der "listWrapper" geht?
Quellcode:
Stylesheet:
Ich erwarte natürlich nicht, dass ihr das für mich schreibt. Nur wo die Fehler liegen, würde mir schon enorm helfen.
1.
Das <img> befindet sich in einem Container, der größer ist als es selbst. Innerhalb dieses Containers wurde der/die/das margin auf margin: 3% auto; gestellt. Demzufolge müsste es sich doch auf der X-Achse mittig positionieren. Warum tut es das nicht?
2.
Der Container "sideWrapper" soll sich rechts neben den zwei "listWrapper" Containern befinden. Da die "listWrapper"aber relativ sind, fügt sich der "sideWrapper" automatisch unter den beiden ein. Wie kriege ich ihn dort hin sodass er sich rechts neben den beiden befindet und über die komplette Höhe der "listWrapper" geht?
Quellcode:
HTML:
<body>
<div class="wrapper">
<header>
<img src="http://www.psd-tutorials.de/forum/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="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>
<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. </div>
</section>
<footer>
</footer>
</div><!-- end wrapper -->
</body>
Code:
/*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%; position: relative; background: #eee;}
header img {width: 150px; height: 123px; max-width: 100%; max-height: auto; margin: 3% auto; position: relative; background: green;}
.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;}
.listWrapper {width: 49%; 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;}
.sideWrapper {width: 45%; height: 100%; margin: 0 0 0 50%; position: relative; float: right; font-size: 1.3em; background: #eee;}
Zuletzt bearbeitet von einem Moderator:
