+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [html] [css] jak ustawić 'wyjściową' pozycję strony? (/thread-html-css-jak-ustawic-wyj%C5%9Bciowa-pozycje-strony)
[html] [css] jak ustawić 'wyjściową' pozycję strony? - eeo - 21-06-2013
Witam i pytam: czy i jak da się przy pomocy css ustawić pozycję wyświetlania strony, żeby w momencie załadowania była 'przewinięta' o zadaną wartość np procentową? Inaczej: jeśli strona składa się z dwóch bloków - nagłówek, treść to jak spowodować żeby nagłówek był 'przewinięty' do góry, poza górny bok okna a wyświetlanie zaczynało się od bloku treści?
RE: [html] [css] jak ustawić 'wyjściową' pozycję strony? - atp - 21-06-2013
Przy pomocy samego css będzie ciężko
RE: [html] [css] jak ustawić 'wyjściową' pozycję strony? - Kartofelek - 21-06-2013
Przy pomocy kotwicy #. Ma to o tyle znaczenie że potem takiego linka możesz sobie udostępnić np
jestem_szczesliwym_posiadaczem_psa.pl/#akapit_dwa
chociaz powyzszy przyklad jest sredni
RE: [html] [css] jak ustawić 'wyjściową' pozycję strony? - wad - 23-06-2013
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.