Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
div {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background-color: #F00;
}
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
'http://www.w3.org/TR/html4/loose.dtd'>
<HTML>
<HEAD>
<link rel='stylesheet' type='text/css' href='format4.css'>
</HEAD>
<DIV class='buehne'>
<DIV class='links'>
<DIV class='menue'>
</DIV>
</DIV>
<DIV class='rechts'>
<DIV class='topic'> Willkommen ..</DIV>
</DIV>
<DIV class='menue_rechts'></DIV>
<DIV id='gallerybody'>
<DIV class="textheadline"> heading</DIV>
<DIV class='gallerytext'>
text menue0
</DIV>
</DIV>
<DIV id='gallerybody1'>
<DIV class="textheadline"> menue1</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
<DIV id='gallerybody2'>
<DIV class="textheadline"> menue2</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
<DIV id='gallerybody3'>
<DIV class="textheadline"> menue3</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
<DIV id='gallerybody4'>
<DIV class="textheadline"> menue4</DIV>
<DIV class='gallerytextx'></DIV>
</DIV>
</DIV>
<DIV class='footer'>
<DIV class='footer_txt'>
footer
</DIV>
</DIV>
</DIV>
</body>
</html>
body {
padding:0;
margin:0;
background-image:url(images/master-bg.png);
}
.buehne {
margin:30px auto auto auto;
width:1000px;
}
.links{
float:left;
width:200px;
height:600px;
}
.menue {
margin-top:50px;
margin-left:40px;
}
.menue_rechts {
margin-top:25px;
margin-left:40px;
}
*html .menue_rechts {
margin-top:50px;
margin-left:40px;
}
.rechts{
float:right;
width:800px;
height:600px;
}
.topic{
margin-top:50px;
margin-left:40px;
}
*html .topic{
margin-top:50px;
margin-left:40px;
}
.textheadline{
width:650px;
margin-bottom:10px;
}
#gallerybody{
visibility:visible;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody1{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody2{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody3{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
#gallerybody4{
visibility:hidden;
position:absolute;
right:330px;
top:195px;
width:650px;
height:400px;
}
.gallerytextx{
}
.gallerytext{
margin-left:5px;
}
.gallerybild{
margin-right:5px;
margin-left:5px;
}
.footer{
clear:both;
width:1000px;
height:20px;
}
.buehne {
margin:30px auto auto auto;
width:1000px;
position:relative;
}
var divElements = new Array();
window.onload = function() {
var elems = document.getElementsByTagName("div");
for( var i=0; i<elems.length; i++ ) {
if( elems[i].className.match(/(?:^|\s+)foobar(?:\s+|$)/) ) {
divElements.push(elems[i]);
}
}
}
function showDivElement( objId )
{
for( var i=0; i<divElements.length; i++ ) {
divElements[i].style.visibility = "hidden";
}
if( document.getElementById(objId) ) {
document.getElementById(objId).style.visibility = "visible";
}
}
<DIV class='menue_rechts'>
<a href=# onmouseover="showDivElement('gallerybody')" onmouseout="showDivElement()">menue0</a> |
<a href=# onmouseover="showDivElement('gallerybody1')" onmouseout="showDivElement()">menue1</a> |
<a href=# onmouseover="showDivElement('gallerybody2')" onmouseout="showDivElement()">menue2</a> |
<a href=# onmouseover="showDivElement('gallerybody3')" onmouseout="showDivElement()">menue3</a> |
<a href=# onmouseover="showDivElement('gallerybody4')" onmouseout="showDivElement()">menue4</a>
</DIV>
<DIV id='gallerybody'>
<DIV class="textheadline"> heading</DIV>
<DIV class='gallerytext'>
text menue0
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody1'>
<DIV class="textheadline"> menue1</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody2'>
<DIV class="textheadline"> menue2</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody3'>
<DIV class="textheadline"> menue3</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
<DIV class="foobar" id='gallerybody4'>
<DIV class="textheadline"> menue4</DIV>
<DIV class='gallerytextx'>
</DIV>
</DIV>
.buehne {
margin:30px auto auto auto;
width:1000px;
position:absolute;
top:4%;
left: 15%;
}
.buehne {
margin:30px auto auto auto;
width:1000px;
position:absolute;
top:4%;
left: 2%;
}
Aus diesem Grund habe ich die relative Positionierung des Elements vorgeschlagen, damit die horizontale Zentrierung über die margin-Deklaration weiterhin funktioniert, und sich die Positionsangaben der "Menü-Layer" auf die Grenzen dieser Box beziehen, denn durch die absolute Positionierung ist diese Formatierung hinfällig bzw. überflüssig, weil sie nun nicht mehr greift.was macht dann: margin:30px auto auto auto; denn genau?
30px von oben und reechts,links,unten automatisch zentrieren, oder nicht?