23-06-2013, 13:18
To będzie trudne za pomocą samego css-a jak kolega atp powiedział. Ponieważ jak wywalisz nagłówek po za body to znika pasek przewijania ale zobacz to :
<style>
html,body{
width: 100%;
height: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, sans-serif;
}
#header
{
height: 200px;
background: #991A23;
margin-top: -170px;
position: relative;
color:#fff;
}
span
{
position: absolute;
bottom: 5px;
left: 0;
color: #CC1317;
font-weight: bold;
text-transform: uppercase;
font-size:.8em;
padding-right: 30px;
}
span:after{
content: " ";
display: block;
width: 0px;
height: 0px;
background: #CC1317;
position: absolute;
right:0;
top:4px;
border-left:#991A23 10px solid;
border-right:#991A23 10px solid;
border-top:#fff 10px solid;
}
#header:hover span{
display: none;
}
#header:hover
{
margin-top: 0;
}
</style>
A html to
<div id="header">to jest header
<span>Nawigacja</span>
<a class="jsbin-embed" href="http://jsbin.com/inucod/3/embed?live">Welcome to JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
</div>
<div id="con">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, molestiae, blanditiis, error, eius voluptates doloremque enim quo nobis distinctio aut a magni dignissimos ipsam fugit quos est sint similique quisquam!
</div>
Mam nadzieje że skopiowałem jak trzeba.
<style>
html,body{
width: 100%;
height: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
font-family: Arial, sans-serif;
}
#header
{
height: 200px;
background: #991A23;
margin-top: -170px;
position: relative;
color:#fff;
}
span
{
position: absolute;
bottom: 5px;
left: 0;
color: #CC1317;
font-weight: bold;
text-transform: uppercase;
font-size:.8em;
padding-right: 30px;
}
span:after{
content: " ";
display: block;
width: 0px;
height: 0px;
background: #CC1317;
position: absolute;
right:0;
top:4px;
border-left:#991A23 10px solid;
border-right:#991A23 10px solid;
border-top:#fff 10px solid;
}
#header:hover span{
display: none;
}
#header:hover
{
margin-top: 0;
}
</style>
A html to
<div id="header">to jest header
<span>Nawigacja</span>
<a class="jsbin-embed" href="http://jsbin.com/inucod/3/embed?live">Welcome to JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
</div>
<div id="con">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, molestiae, blanditiis, error, eius voluptates doloremque enim quo nobis distinctio aut a magni dignissimos ipsam fugit quos est sint similique quisquam!
</div>
Mam nadzieje że skopiowałem jak trzeba.