zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Layout mit verschieden hohen Containern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.09.2013, 19:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2013
Beiträge: 4
Mando befindet sich auf einem aufstrebenden Ast
Standard 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 20:29 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
absolute, boxen, css, layout, relative

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Css 3 Seiten Layout will net so :) nova_rs CSS 1 30.03.2010 15:54
Mein erstes CSS Layout Sonriente CSS 0 03.04.2007 01:01
Joomla und CSS Layout ohne Tabellen ... MoYo CSS 2 15.02.2007 10:19
CSS Layout - ist das so möglich? berlina CSS 18 12.02.2007 21:55
includes bei css layout dan CSS 2 10.03.2004 18:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:59 Uhr.