Rotation

**manta656** · 12.01.2011 19:36

Hey ich habe mier mal kurz eine Seite gebastelt

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>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body> 

<div id="container">


<div id="header">
    <h1>HEADER</h1>
	</div> 
  <div id="mainContent">  
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div> <!-- end #mainContainer -->	
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>

<!-- end #container --></div>
<div id="RED"> </div>
<div id="WHITE"> </div> 
<div id="BLUE"> </div>

</body>
</html>

Code:

@charset "utf-8";

body  {
font-family: 'Droid Sans', arial, serif;
background-image:url(bg.gif);
text-align: center;
color: #000000;
}
#container { 
background: #ffffff;
background-image:url(bg.gif);
text-align: left; 
} 
#header { 


z-index:4;
position:relative;
margin-left:60px;
background-color: transparent;
margin-top:10px;
padding: 0 10px;  
font-family: 'Cuprum', arial, serif;
} 
#header h1 {
	margin: 0; 
	padding: 10px 0; 
}

#mainContent {
	z-index:4;
	position:absolute;
	margin-top:10px;
	background:#ececec;
	margin-left:60px;
	margin-right:60px;
	padding-top:5px !important;
	padding:10px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
}

#footer { 
z-index:4;
position:absolute;
margin-left:60px;
font-family: 'Cuprum', arial, serif;
background-image:url(bg.gif);
position:absolute;
bottom:0px !important;
padding: 0 10px;
width:90%;
} 
#footer p {
	background:ffffff;
	margin: 0; 
	padding: 10px 0; 
}

.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#RED {
	float:left;
	z-index:1;
	margin-left:400px;
	background-color:#F00;
	height:950px;
	width:80px;
	-webkit-transform: rotate(-140deg); 
	-moz-transform: rotate(-140deg);
	}

#WHITE {
	float:left;
	z-index:1;
	margin-left:24px;
	background-color:#ffffff;
	height:950px;
	width:80px;
	-webkit-transform: rotate(-140deg); 
	-moz-transform: rotate(-140deg);	
}

#BLUE {
	float:left;
	z-index:2;
	margin-left:23px;
	background-color:#09C;
	height:950px;
	width:80px;
	-webkit-transform: rotate(-140deg); 
	-moz-transform: rotate(-140deg);
}

Css und Html Code

. Die bg.gif ist nur ein leichtes rauschen, da dies besser aussieht

So nun zu meinem Problem.
Ich möchte, dass die Klassen #RED #BLUE und #WHITE vom Browserfenster OBEN angefangen schräg nach unten gehen (-moz-transform: rotate(-140deg)) bis zu dem footer und dort aufhören.
Allerdings, wie ihr seht ist dies NICHT der Fall. Auch wäre es nicht schlecht, wenn sich die ''Streifen'' automatisch der Browsergrösse anpassen aber das ist ein extra, das nicht sofort sein muss

.

Ich wäre euch sehr dankbar für die Hilfe, denn ich komme da einfach nicht weiter und sehe keine Lösung darin...

**Rinaldo** · 15.01.2011 23:17

In welchem Browser?

**manta656** · 17.01.2011 22:08

Firefox 4

**hero-master** · 18.01.2011 15:04

Hey

da Ganze wirst du so nicht hinbekommen, da sich rotation ein bisschen anders verhält, siehe Grafik von W3C:

Kannst du vlt. einmal dein Endlayout zeigen, damit man weiß ob es überhaupt sinnvoll ist da mit 3 verschiedenen Divs zu arbeiten oder es nicht besser wäre da über ein Hintergrundbild zu gehen?

zur Startseite vom TP

Thema: Rotation

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Rotation

Ähnliche Themen

360 Grad Rotation

Banner Rotation....

Rotation via AS

Banner Rotation

PHP Banner-Rotation?

Aktive Benutzer

Aktive Benutzer