✔ JS + CSS - Proportion

Carrear · 14. Juni 2012

Hallo meine lieben.

Ich habe einen Entwurf, den ich einfach ansprechend empfinde, bei dem ich aber konzeptionell noch nicht so richtig weiß, wie ich herangehe um das technisch auch umzusetzen. Im Anhang ist ein schematischer entwurf. Alles was weiß ist ist ein vollflächiges Hintergrundbild und die Roten Kästen sind die Inhalte.

Das Problem ist eben, das ganze auch mit CSS umzusetzen. Die 3 Kästen sollen ja immer sichtbar sein - sprich, das mittlere Kästchen soll dann eine scrollbar für den Inhalt haben, so das alles Kästchen prozentual in Höhe und Breite immer den gleichen Platz einnehmen (also hat die Seite an sich keine Scrollbar, sondern eben nur der Inhaltsbereich und die Kästen sollen genau vom oberen bis zum unteren Rand gehen). Das vollflächige Hintergrundbild soll immer die ganze Breite und Höhe des Fensters abdecken.

Allerdings soll sich das ganze beim skalieren des Browserfensters nicht anpassen. Es soll den Prozentualen Daten also immer die Auflösung und nicht die Browserfenstergröße zu Grunde liegen.

Um es kurz und knapp zu sagen:

Die Body Größe soll sich immer nach der Auflösung richten, das Hintergrundbild (im Bild weiß) soll immer 100% der Höhe und der Breite einnehmen und die Aufteilung der Kästen soll immer gleich sein (in Proportion zur Body Größe, nicht in Proportion zum skalierbaren Fenster)

Ist das verständlich

? Ich brauche jetzt mal einen anstoß wie ich da technisch rangehen kann.

Carrear · 15. Juni 2012

Für alle die es interessiert. Ich habe jetzt eine ganz gute Möglichkeit gefunden das darzustellen. Vielleicht hilft es ja dem einen doer anderen weiter- hier also der Code:

index.html

HTML:

<!DOCTYPE html>
<html>
<head>

	<title></title>
	<meta charset="iso-8859-1"" />
	<link rel="stylesheet" type="text/css" href="site/css/screen.css" />

	<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

var innerHeight = $(window).innerHeight();
var innerWidth = $(window).innerWidth();


$('#wrapper').css('height', innerHeight);
$('#wrapper').css('height', innerHeight);
$('#wrapper').css('height', innerHeight);

$(window).resize(function() {
var theWidth = $('body').width();
var fontSize = ((theWidth/120));

if(fontSize<12){fontSize = 12;};

var innerHeight = $(window).innerHeight();
$('#wrapper').css('height', innerHeight);
});



});

</script>	
	
</head>


<body>

<div class="hintergrundbild" > </div><!-- Das eingebundene Hintergrundbild -->
<div id="wrapper">

	<div id="one"><img src="site/img/logo.jpg" /></div>
	<div id="two">
	<h1>
	“Ich biete einen Weg zu unmittelbarer, verbindlicher und klarer Kommunikation zwischen Menschen. ”</h1>
	</div>
	
	<p class="clearfix">&nbsp;</p>
	
	<div id="three">3</div>

</div>
</body>
</html>

screen.css

Code:

@font-face {
	font-family: Frutiger;
	src: url('frutiger.otf');
}

@font-face {
	font-family: Frutiger;
	font-weight: bold;
	src: url('frutigerbold.otf');
}

* {
	margin:0;
	padding: 0;
}

body {
	height: 100%;
	width: 100%;
	font-family: frutiger, sans-serif;
	-moz-hyphens: auto; // für Firefox ab Version 6
    -webkit-hyphens: auto; // für aktuelle Chrome- bzw. Safari-Versionen
    -ms-hyphens: auto; // erst ab Internet Explorer 11
    hyphens: auto; // W3C-Standard
}

h1 {
	font-size: 1.8em;
	font-weight: normal;
	color: #381e4b;
	text-align: center;
	margin: 15px;
}

h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #c20e1a;
	letter-spacing: .3px;
	text-align: center;
}

#wrapper{
	min-width: 1024px;
	position: relative;
	min-height: 600px;
	width: 100%;
}

div.hintergrundbild {
	min-height: 600px;
	min-width: 1024px;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../img/bg-site.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#one{
	position: absolute;
	top: 0;
	right: 5.7%;
	width: 18.6%;
	background: #FFF;
	min-height: 15.88%;
}
	
#one img {
	max-width: 100%;
}
	
#two {
	position: absolute;
	top:15.88%;
	right:24.3%;
	width: 39.5%;
	background: #FFF;
	float: left;
	min-height: 66.3%;
	border: 2px solid #c20e1a;
}	

#two:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -60px;
	top: -2px;
	border: 30px solid;
	border-color: #c20e1a  #c20e1a transparent transparent ;
}

#two:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -56px;
  top: 0px;
  border: 28px solid;
  border-color: #fff #fff transparent  transparent;
}
	
#three {
	position: absolute;
    width: 18.6%;
	right: 64%;
	bottom:0;
	background: #FFF;
	min-height:17.4%;
}
	
.clearfix {
	clear: both;
	hight: 0;
	width: 0;
}

@media only screen and (min-width: 1025px){

	body {
		font-size: 16px;
	}

}


@media only screen and (max-width: 1024px){

	body {
		font-size: 14px;
	}

}

✔ JS + CSS - Proportion

Carrear

Erfahrenes Mitglied

Carrear

Erfahrenes Mitglied

Neue Beiträge