|
|||
CSS Layout mit verschieden hohen Containern
OK HABS HINBEKOMMEN
Hallo, irgendwie komm ich bei dem Aufbau nicht weiter. Es sollen 4 Spalten sein in denen jeweils 1-3 Bilder untereinander gezeigt werden. Im Hintergrund soll auf den Seiten ein freigstellter Ast hervorschauen der immer an der gleichen stelle bleibt, egal wie ich das browserfenster verziehe (was auch funktioniert). HTML-Code:
<body> <div id="content"> <div id="menue"> <a href="index.html" class="primnav-active">NEWS</a> <a href="portfolio.html" class="primnav">PORTFOLIO</a> ... </div> <!--Bar--> <div id="portfolio1"> <div class="mosaic-block3 bar"> <div class="mosaic-backdrop"><img src="img/climb.jpg"/></div> </div> <div class="mosaic-block3 bar"> <div class="mosaic-backdrop"><img src="img/climb.jpg"/></div> </div> <div class="mosaic-block3 bar"> <div class="mosaic-backdrop"><img src="img/climb.jpg"/></div> </div> </div> <div id="portfolio2"> <div class="mosaic-block3 fade"> <div class="mosaic-backdrop"><img src="img/sahneklimaschrank.jpg"/></div> </div> <div class="mosaic-block3 fade"> <div class="mosaic-backdrop"><img src="img/sahneklimaschrank.jpg"/></div> </div> <div class="mosaic-block3 fade"> <div class="mosaic-backdrop"><img src="img/sahneklimaschrank.jpg"/></div> </div> </div> <div id="portfolio3"> <div class="mosaic-block2 bar"> <div class="mosaic-backdrop"><img src="img/climb.jpg"/></div> </div> <div class="mosaic-block2 bar"> <div class="mosaic-backdrop"><img src="img/climb.jpg"/></div> </div> </div> <div id="portfolio4"> <div class="mosaic-block1 bar"> <div class="mosaic-backdrop"><img src="img/other.jpg"/></div> </div> </div> <div class="blatt"></div> <div class="clearfix"></div> </div> </body> </html> und hier das CSS Code:
#portfolio1 { position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 240px; /* ie5win fudge begins */ } #portfolio2 { position: relative; top: -500px; left: 250px; /* Opera5.02 will show a space at right when there is no scroll bar */ margin: 0px; padding: 0px; width: 240px; /* ie5win fudge begins */ } #portfolio3 { position: relative; top: -900px; left: 500px; /* Opera5.02 will show a space at right when there is no scroll bar */ margin: 0px; padding: 00px; width: 240px; /* ie5win fudge begins */ } #portfolio4 { position: relative; top: -1700px; left: 750px; /* Opera5.02 will show a space at right when there is no scroll bar */ margin: 0px; padding: 0px; width: 240px; /* ie5win fudge begins */ } /*General Mosaic Styles*/ .mosaic-block1 { z-index: 2; float:left; position:relative; overflow:hidden; width:246px; height:560px; margin:2px; border:0px solid #fff; border-style: normal; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .mosaic-block2 { z-index: 2; float:left; position:relative; overflow:hidden; width:246px; height:270px; margin:2px; border:0px solid #fff; border-style: normal; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } .mosaic-block3 { z-index: 2; float:left; position:relative; overflow:hidden; width:246px; height:170px; margin:2px; border:0px solid #fff; border-style: normal; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; } Geändert von Mando (13.09.2013 um 21:29 Uhr) |
Sponsored Links |
Stichwörter |
absolute, boxen, css, layout, relative |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Css 3 Seiten Layout will net so :) | nova_rs | CSS | 1 | 30.03.2010 16:54 |
Mein erstes CSS Layout | Sonriente | CSS | 0 | 03.04.2007 02:01 |
Joomla und CSS Layout ohne Tabellen ... | MoYo | CSS | 2 | 15.02.2007 11:19 |
CSS Layout - ist das so möglich? | berlina | CSS | 18 | 12.02.2007 22:55 |
includes bei css layout | dan | CSS | 2 | 10.03.2004 19:21 |