Fixation

Fra Molrikwiki

Skift til: Navigation, Søgning

[redigér] Hold elementer fast på skærmen

[redigér] Toplogo og menu

Vil man have toplogo og/eller menu til at blive 'hængende' for oven, så det altid er synligt, selvom man scroller i teksten, kan man style f.eks. som følger:

/* Header */

div#top{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:80px;
	z-index: 100;
	background-color: #FFFFFF;
 }
 
@media screen {
  body>div#top {
   position: fixed;
  }
 }
/* Main body */

* html body{
  overflow:hidden;
 } 
 
* html div#contentContainer{
  height:100%;
  overflow:auto;
 } 

#contentContainer { 
	clear: left;
	padding-right: 20px;
	padding-left: 20px;
	width: 280px; /* 440px; */
	position: relative;
	top: 45px;
}
/* Menu- og weblink-button */

div#aalkat_mobil_buttonsholder {
	position:absolute;
	top:80px;
	left:0;
	width:320px; /* 480px; */
	height: 25px;
}
@media screen {
  body>div#contentContainer>div#aalkat_mobil_buttonsholder {
   position: fixed;
  }
 }

Så scroller man 'bag ved' disse elementer, som derfor altid er tilgængelige.

[redigér] Fasthold baggrund

iPhone respekterer mærkeligt nok IKKE fixed på body-background, så man er nødt til at benytte en anden fremgangsmåde. Step 1 er på selve html'en:

<div id="container" class="container_mobil">
 <p>Egl. indhold</p>
</div>
<div id="backgroundImageHolder">
 <img src="uploads/media/MobilBaggrundVandmasse.jpg" alt="dsukbg" width="320" height="480">
</div>

Dette styles derefter á la:

.container_mobil {
	background-color: transparent;
	min-height: 100%;
	position: relative;
	width: 320px;
	height:auto;
	background-image: none;
	background-position: left top;
	z-index: 10;
}

#backgroundImageHolder,
#backgroundImageHolder * {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
} 
#backgroundImageHolder {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
#backgroundImageHolder img {
	width: 100%;
	height: auto;
	z-index: 1;
}

Det indsatte billede ligger her bagved indholdet og får automatisk samme bredde som skærmen og forbliver på sin plads, når brugeren scroller i indholdet.

Personlige værktøjer