Skuggor på kanterna av centrerad design
Ibland bara händer det, ibland får man till något man tycker att man jobbat med i evigheter. Man tycker att man vridit och vänt på problemet för att få till det men så en dag så bara fungerar det. Idag är en sådan dag!
Det är ju väldigt inne med skuggningar, gärna på kanterna av en centrerad design. Så för att ni ska slippa söka och labba med att få till det berättar jag här hur man enkelt kan få till det:
I masterpage:
precis innan <div id=”s4-workspace”> lägger ni till:
<div class="container"> <div class="shadowLeft"><!-- Start Shadow Left --> <div class="shadowRight"><!-- Start Shadow Right -->
i slutet av masterpagen precis innan </body> och </html> stänger ni divarna:
</div><!-- End Shadow Right --> </div><!-- End Shadow Left --> </div><!-- End Container -->
I CSS för sida/sidor som detta ska gälla:
form{
margin: auto;
}
body #s4-workspace{
height: 100%;
overflow: visible;
background-repeat:repeat;
background-color:white;
}
.s4-ca{
max-height:700px;
max-width: 990px;
}
.container{
width:1046px;
margin:0 auto;
padding:0;
}
.shadowLeft {
background:url("../../Style%20Library/images/shadow-left.png") 0 0 repeat-y;
padding:0 0 0 28px;
height:900px;
}
.shadowRight {
background:url("../../Style%20Library/images/shadow-right.png") 100% 0 repeat-y;
padding:0 28px 0 0;
height:900px;
position:relative;
}
Där bredden 1046px under .Container är bredden på sidan (990px) plus skuggbilderna på sidorna (28px). Paddingen på skuggorna under .shadowLeft och .shadowRight är bredden på skuggbilden.
Och här har ni resultatet:
SharePointDiver 