menü fest fixieren, während content mittels jquery gescrollt wird

svenbei · 20.02.2010

Hallo zusammen,

ich habe im web mal wieder etwas gefunden...
ist für viele von euch bestimmt sehr einfach, ich jedoch komme nicht drauf wie...vielleicht zu einfach

bsp-site:
Carolina Jesus - Environment Artist

wie ich die seite mittels jquery zum scrollen bekomme, ist kein problem.
die frage ist, wie kann ich die menü-leiste genauso positionsfix machen.
es soll also nur der content scrollen.

handelt es sich hierbei nur um eine div-angelegenheit?

vielen dank für eure hilfen und tipps

Dragor · 20.02.2010

AW: menü fest fixieren, während content mittels jquery gescrollt wird

mit css wird das gemacht.

position: fixed;

und dann kann man mit top,left oder right die position vom bildschirmrand aus bestimmen

sokie · 20.02.2010

AW: menü fest fixieren, während content mittels jquery gescrollt wird

also nach dem Blick auf die Seite aht die navigation (ul#nav) position:fixed.
wie sieht denn dein script aus, womit du die Seite scrollen lässt?

svenbei · 20.02.2010

AW: menü fest fixieren, während content mittels jquery gescrollt wird

vielen dank dragor,

manchmal sieht man(n) den wald vor lauter bäumen nicht...ist also wie vermutet den div-angelegenheit

svenbei · 20.02.2010

AW: menü fest fixieren, während content mittels jquery gescrollt wird

hallo sokie,

ich hatte an das jquery-tut von daniel koch gedacht.
(jQuery - sanftes scrollen)

währe dies der richtige weg...oder kommt dir etwas in den sinn?

TimeePic · 20.02.2010

AW: menü fest fixieren, während content mittels jquery gescrollt wird

Sieh dir doch einfach den Quelltext der Seite an, dann fallen die die DIV Bereiche mit den ids schnell ins Auge.
Es handelt sich hier um nur eine seite mit Sprungmarken auf die verschiedenen DIVs.

PHP:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; dir=&quot;ltr&quot; lang=&quot;pt-PT&quot;>
<head profile=&quot;http://gmpg.org/xfn/11&quot;>
  <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
  <title>Carolina Jesus - Environment Artist</title>
  <link rel=&quot;stylesheet&quot; href=&quot;http://mcjdj.com/wp-content/themes/mcjdj/inc/style.css&quot; type=&quot;text/css&quot; media=&quot;screen,projection&quot; />
  <script src=&quot;http://mcjdj.com/wp-content/themes/mcjdj/inc/jquery.js&quot; type=&quot;text/javascript&quot;></script>
  <script src=&quot;http://mcjdj.com/wp-content/themes/mcjdj/inc/jquery.plugins.js&quot; type=&quot;text/javascript&quot;></script>
  <script src=&quot;http://mcjdj.com/wp-content/themes/mcjdj/inc/carol.js&quot; type=&quot;text/javascript&quot;></script>
  <link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;Carolina Jesus RSS Feed&quot; href=&quot;http://mcjdj.com/feed/&quot; />
  <link rel=&quot;pingback&quot; href=&quot;http://mcjdj.com/xmlrpc.php&quot; />
  <link rel=&quot;EditURI&quot; type=&quot;application/rsd+xml&quot; title=&quot;RSD&quot; href=&quot;http://mcjdj.com/xmlrpc.php?rsd&quot; />
<link rel=&quot;wlwmanifest&quot; type=&quot;application/wlwmanifest+xml&quot; href=&quot;http://mcjdj.com/wp-includes/wlwmanifest.xml&quot; /> 
<link rel='index' title='Carolina Jesus' href='http://mcjdj.com' />
<meta name=&quot;generator&quot; content=&quot;WordPress 2.8.4&quot; />

<!-- All in One SEO Pack 1.6.5 by Michael Torbert of Semper Fi Web Design[291,333] -->
<meta name=&quot;description&quot; content=&quot;Online portfolio and information about Carolina Jesus - Environment Artist&quot; />
<meta name=&quot;keywords&quot; content=&quot;environment artist, 3d artist, 3d freelancer, 3d games, 3d texture, texture artist&quot; />
<!-- /all in one seo pack -->
  <!--[if lt IE 7]>
  <link rel=&quot;stylesheet&quot; href=&quot;http://mcjdj.com/wp-content/themes/mcjdj/inc/ie6.css&quot; type=&quot;text/css&quot; media=&quot;screen,projection&quot; />
  <![endif]-->
</head>
<body>
<div class=&quot;wrap&quot;>
<h1>Carolina Jesus</h1>
<em class=&quot;tagline&quot;>Environment Artist</em>
<div class=&quot;cont&quot;>
<ul class=&quot;nav-a&quot; id=&quot;nav&quot;>
  <li class=&quot;home&quot;><a href=&quot;#home&quot;>Home</a></li>
  <li class=&quot;portfolio&quot;><a href=&quot;#portfolio&quot;>Portfolio</a></li>
  <li class=&quot;about&quot;><a href=&quot;#about&quot;>About</a></li>
  <li class=&quot;contact&quot;><a href=&quot;#contact&quot;>Contact</a></li>
  <li class=&quot;none&quot;>&para;</li>
</ul>
<!-- About // -->
<div id=&quot;about&quot;>
  <div class=&quot;env&quot;>
    <h2>About me</h2>
    <h3 class=&quot;sub&quot;>About <em>Carolina Jesus</em> Environment Artist</h3>
    <div class=&quot;in&quot;>
      <p>In my childhood I used to hang around the ZX spectrum with my brothers and wondered how those tiny dots on screen could make such amazing worlds.<span id=&quot;more-&quot;></span> With the years those dots would gain volume and an entirely new perspective with 3D rendering would arrive, making it altogether more fascinating.</p>
<p>My interest in technology and photography allowed to further develop my artistic skills, which unexpectedly crossed over to videogames. Unsurprisingly, it felt like a natural process to me.</p>
<p>Hopefully, you?ll be able to see that in my texturing and modelling portfolio.</p>
<blockquote><p>My name is <em>Carolina Jesus</em> and<br />
I am a <em>videogame environment artist</em></p></blockquote>
    </div>
  </div>
</div>
<!-- Home // -->
<span class=&quot;head&quot;>
<!-- (00) -->
</span>
<div id=&quot;home&quot;>
  <div class=&quot;env&quot;>
    <h2>Home</h2>
    <h3 class=&quot;sub&quot;>Welcome to <em>Carolina Jesus's</em> Online Portfolio</h3>
    <div class=&quot;in&quot;>
            <h4 class=&quot;show&quot;><a href=&quot;#portfolio&quot; title=&quot;My Last Work&quot;><img src=&quot;http://mcjdj.com/wp-content/media/temple1-400x250.jpg&quot; width=&quot;400&quot; height=&quot;250&quot; alt=&quot;Temple Overview - Garden and main Door&quot; /></a></h4>
      <div class=&quot;right&quot;>
        <h4>About</h4>
        <p>In my childhood I used to hang around the ZX spectrum with my brothers and wondered how those tiny dots on screen could make such amazing worlds. <a href=&quot;#about&quot; title=&quot;More about me&quot; class=&quot;more&quot;>more +</a></p>
      </div>
    </div>
  </div>
</div>
<!-- Portfolio // -->
<div id=&quot;portfolio&quot;>
  <div class=&quot;env&quot;>
    <h2>Portfolio</h2>
    <h3 class=&quot;sub&quot;>Portfolio of <em>Carolina Jesus</em> Environmental Artist</h3>
    <div class=&quot;in&quot;>
      <div id=&quot;selector&quot;>
        <h4>Select a project</h4>
        <div><a href=&quot;#&quot; class=&quot;prev&quot;>◄</a>
          <ul>
                        <li><a href=&quot;http://mcjdj.com/temple/&quot; title=&quot;Temple&quot;>1</a> <em>Temple</em></li>
                        <li><a href=&quot;http://mcjdj.com/temple-models/&quot; title=&quot;Temple ? Models&quot;>2</a> <em>Temple ? Models</em></li>
                        <li><a href=&quot;http://mcjdj.com/ugo-volt/&quot; title=&quot;Ugo Volt&quot;>3</a> <em>Ugo Volt</em></li>
                        <li><a href=&quot;http://mcjdj.com/ugo-volt-untaurah/&quot; title=&quot;Ugo Volt ? Untaurah&quot;>4</a> <em>Ugo Volt ? Untaurah</em></li>
                        <li><a href=&quot;http://mcjdj.com/floribella/&quot; title=&quot;Floribella&quot;>5</a> <em>Floribella</em></li>
                        <li><a href=&quot;http://mcjdj.com/hippoblast/&quot; title=&quot;Hippoblast&quot;>6</a> <em>Hippoblast</em></li>
                      </ul>
          <a href=&quot;#&quot; class=&quot;next&quot;>►</a> </div>
      </div>
            <div id=&quot;projecto&quot;>
        <h3>Temple</h3>
        <div id=&quot;info&quot;>
          <dl class=&quot;details&quot;>
                        <dt>Project</dt>
            <dd>Personal Project - Temple</dd>
                        <dt>Date</dt>
            <dd>2008</dd>
                        <dt>Role</dt>
            <dd>Environment Artist /<br />
Texturer and modeler</dd>
                      </dl>
          <p>Developed in collaboration with my friend Marco Leal &amp; assembled in Unreal in partnership with Level Designer Rogério Silva.<br />
The aim with this project was to create a strong organic game environment based on ancient civilizations, fusing traditional architecture and iconic decorative elements from Africa and Asia.</p>
<p>Modeled in 3D Studio Max, detailed in Mudbox and Zbrush and Textured in Adobe Photoshop.</p>
                  </div>
        <div id=&quot;show&quot;>
          <div class=&quot;show&quot;><a href=&quot;http://mcjdj.com/wp-content/media/temple1.jpg&quot; title=&quot;Temple Overview - Garden and main Door&quot;><img src=&quot;http://mcjdj.com/wp-content/media/temple1-400x250.jpg&quot; width=&quot;400&quot; height=&quot;250&quot; alt=&quot;Temple&quot; /><span title=&quot;Zoom&quot;>zoom</span></a></div>
                    <div class=&quot;shownav&quot;><a href=&quot;#&quot; title=&quot;Previous&quot; class=&quot;prev&quot;>◄</a><a href=&quot;#&quot; title=&quot;Next&quot; class=&quot;next&quot;>►</a>
            <ol>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple1.jpg&quot;><img class=&quot;size-thumbnail wp-image-104&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple1-45x30.jpg&quot; alt=&quot;Temple Overview - Garden and main Door&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple2.jpg&quot;><img class=&quot;size-thumbnail wp-image-105&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple2-45x30.jpg&quot; alt=&quot;Temple ? Columns and arcs Details&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple3.jpg&quot;><img class=&quot;size-thumbnail wp-image-106&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple3-45x30.jpg&quot; alt=&quot;Temple ? Column overview&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple4.jpg&quot;><img class=&quot;size-thumbnail wp-image-107&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple4-45x30.jpg&quot; alt=&quot;Temple Overview&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple5.jpg&quot;><img class=&quot;size-thumbnail wp-image-108&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple5-45x30.jpg&quot; alt=&quot;Temple -Arc Detail&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple6.jpg&quot;><img class=&quot;size-thumbnail wp-image-109&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple6-45x30.jpg&quot; alt=&quot;Temple Overview&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple7.jpg&quot;><img class=&quot;size-thumbnail wp-image-110&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple7-45x30.jpg&quot; alt=&quot;Temple Overview ? Doorway Detail&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple8.jpg&quot;><img class=&quot;size-thumbnail wp-image-112&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple8-45x30.jpg&quot; alt=&quot;Temple -Inside wall Details&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple91.jpg&quot;><img class=&quot;size-thumbnail wp-image-113&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple91-45x30.jpg&quot; alt=&quot;Temple Background&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                            <li><a href=&quot;http://mcjdj.com/wp-content/media/temple10.jpg&quot;><img class=&quot;size-thumbnail wp-image-114&quot; title=&quot;Temple&quot; src=&quot;http://mcjdj.com/wp-content/media/temple10-45x30.jpg&quot; alt=&quot;Temple- Inside Texturing Details and Decals&quot; width=&quot;45&quot; height=&quot;30&quot; /></a></li>
                          </ol>
          </div>
                  </div>
      </div>      
    </div>
  </div>
</div>
<!-- About // -->
<div id=&quot;contact&quot;>
  <div class=&quot;env&quot;>
        <h2>Contact</h2>
    <h3 class=&quot;sub&quot;>Contact <em>Carolina Jesus</em> Environment Artist</h3>
    <div class=&quot;in&quot;>
      <div class=&quot;left&quot;>
        <div class=&quot;formcontainer&quot;>
    <p class=&quot;information&quot;>Required fields are marked <span class=&quot;required&quot;>*</span></p>
    <form class=&quot;contact-form&quot; action=&quot;http://mcjdj.com/contact/&quot; method=&quot;post&quot;>
        <fieldset>
            <legend>Your information</legend>
            <div class=&quot;form-label&quot;><label for=&quot;ec_name&quot;>Name <span>*</span></label></div>
            <div class=&quot;form-input&quot;><input id=&quot;ec_name&quot; name=&quot;ec_name&quot; class=&quot;text required&quot; type=&quot;text&quot; value=&quot;&quot; size=&quot;30&quot; maxlength=&quot;50&quot; /></div>
            <div class=&quot;form-label&quot;><label for=&quot;ec_email&quot;>Email <span>*</span></label></div>
            <div class=&quot;form-input&quot;><input id=&quot;ec_email&quot; name=&quot;ec_email&quot; class=&quot;text required&quot; type=&quot;text&quot; value=&quot;&quot; size=&quot;30&quot; maxlength=&quot;50&quot; /></div>
            <div class=&quot;form-label&quot;><label for=&quot;ec_url&quot;>Website</label></div>
            <div class=&quot;form-input&quot;><input id=&quot;ec_url&quot; name=&quot;ec_url&quot; class=&quot;text optional&quot; type=&quot;text&quot; value=&quot;&quot; size=&quot;30&quot; maxlength=&quot;50&quot; /></div>
        </fieldset>
        <fieldset>
            <legend>Your message</legend>
            <div class=&quot;form-label&quot;><label for=&quot;ec_subject&quot;>Subject <span>*</span></label></div>
            <div class=&quot;form-input&quot;><input id=&quot;ec_subject&quot; name=&quot;ec_subject&quot; class=&quot;text required&quot; type=&quot;text&quot; value=&quot;&quot; size=&quot;30&quot; maxlength=&quot;50&quot; /></div>
            <div class=&quot;form-label&quot;><label for=&quot;ec_message&quot;>Message <span>*</span></label></div>
            <div class=&quot;form-textarea&quot;><textarea id=&quot;ec_message&quot; name=&quot;ec_message&quot; class=&quot;text required&quot; cols=&quot;40&quot; rows=&quot;8&quot;></textarea></div>
        </fieldset>
        <fieldset>
            <legend>Confirmation</legend>
            <div class=&quot;form-label&quot;><label for=&quot;ec_challenge_a&quot;>4+1+2 = <span>*</span></label></div>
            <div class=&quot;form-input&quot;><input id=&quot;ec_challenge_a&quot; name=&quot;ec_challenge_a&quot; class=&quot;text required&quot; type=&quot;text&quot; value=&quot;&quot; size=&quot;30&quot; maxlength=&quot;50&quot; /></div>
            <div class=&quot;form-option&quot;><input id=&quot;ec_option_cc&quot; name=&quot;ec_option_cc&quot; class=&quot;check optional&quot; type=&quot;checkbox&quot; value=&quot;true&quot; /> <label for=&quot;ec_option_cc&quot;>Email yourself a copy?</label></div>
            <div class=&quot;form-submit&quot;>
                <input type=&quot;submit&quot; name=&quot;submit&quot; class=&quot;button&quot; value=&quot;Send →&quot; />
                <input type=&quot;hidden&quot; name=&quot;ec_stage&quot; value=&quot;process&quot; />
                <input type=&quot;hidden&quot; name=&quot;ec_referer&quot; value=&quot;http://www.psd-tutorials.de/modules/Forum/45_php-und-andere-scriptsprachen/100952-menue-fest-fixieren-waehrend-content-mittels-jquery-gescrollt-wird.html&quot; />
                <input type=&quot;hidden&quot; name=&quot;ec_orig_referer&quot; value=&quot;http://www.psd-tutorials.de/modules/Forum/45_php-und-andere-scriptsprachen/100952-menue-fest-fixieren-waehrend-content-mittels-jquery-gescrollt-wird.html&quot; />
            </div>
        </fieldset>
    </form>
</div>
              </div>
      <dl class=&quot;contacts&quot;>
        <dt>Address:</dt>
        <dd>Parsonage Street, <br />
19 North Terrace<br />
Midsummer Common<br />
CB5 8DJ<br />
Cambridge<br />
Uk<br />
<br />
carolina.jdj@NOSPAMgmail.com</dd>
        <dt>Phone:</dt>
        <dd>+44   7905404799<br />
+351 968 446 005</dd>
      </dl>
    </div>
      </div>
</div>
<!-- Rodape // -->
<div class=&quot;foot-b&quot; id=&quot;footer&quot;>
  <div>
    <ul>
      <li>&copy; Carolina Jesus - all rights reserved</li>
      <li><a href=&quot;http://jigsaw.w3.org/css-validator/validator?uri=http://mcjdj.com&amp;profile=css21&quot;>CSS</a> &amp; <a href=&quot;http://validator.w3.org/check?uri=http://mcjdj.com&quot;>XHTML</a> valid | by <a href=&quot;http://www.arkikstudio.com&quot;>Arkikstudio</a></li>
      <li><a href=&quot;http://mcjdj.com/feed/&quot; title=&quot;Works (RSS)&quot;>subscribe updates</a></li>
    </ul>
  </div>
</div>
</div>
</div>

<!-- Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ -->
<script type=&quot;text/javascript&quot;>
    var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;);
    document.write(unescape(&quot;%3Cscript src='&quot; + gaJsHost + &quot;google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E&quot;));
</script>
<script type=&quot;text/javascript&quot;>
    try {
        var pageTracker = _gat._getTracker(&quot;UA-71428-25&quot;);
    } catch(err) {}
</script>
<script src=&quot;http://mcjdj.com/wp-content/plugins/google-analytics-for-wordpress/custom_se.js&quot; type=&quot;text/javascript&quot;></script>
<script type=&quot;text/javascript&quot;>
    try {
        // Cookied already: 
        pageTracker._trackPageview();
    } catch(err) {}
</script>
<!-- End of Google Analytics code -->
<!-- by ARKIKSTUDIO ( www.arkikstudio.com ) -->
<!-- 22 queries 0,567 sec -->
</body>
</html>

hier das css file der seite:

PHP:

/* reset */
* { text-decoration:none; font-size:1em; outline:none; margin:0; padding:0; font-weight:400; border:0; }
textarea, input, select { font:inherit; white-space:normal; }
i, cite, address, em { font-style:normal; }
caption, th, td { text-align:left; }
html { background:#1a1a1a; color:#c6c6c6; line-height:1; font-family:arial, sans-serif; }
ul, ol { list-style:none; }
sub, sup { vertical-align:baseline; }
a { color:inherit; }
img { border:none; margin:0 }
ol { list-style-type:decimal }
body { background-color:transparent; }
tr, th, td { width:auto; height:auto; background-color:transparent; vertical-align:inherit; border:none; border-collapse:collapse; }
/* Geral */
html, body { height:100%; width:100%; }
html { font-size:125%; }
body { font-size:50%; }
a { text-decoration:underline }
strong, th, thead td, dt { font-weight:700; }
cite, em { font-style:italic; }
sup, sub { font-size:85%; }
sup { vertical-align:super; }
sub { vertical-align:sub; }
abbr, acronym { text-transform:uppercase; font-size:85%; letter-spacing:.1em; cursor:help; border-bottom:1px dotted #000; }
blockquote { padding-left:2.2em; }
hr { display:none; }
input, select, button { cursor:pointer; }
input[type='hidden'] { display:none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
/* Base */
.cont { font-size:1.3em; line-height:1.55em }
.cont h1 { font-size:1.6em; line-height:1; margin:1em 0 .5em }
.cont h2 { font-size:1.5em; }
.cont h3 { font-size:1.4em; }
.cont h4 { font-size:1.85em; line-height:1; margin:1.23em 0 .615em; }
.cont h5 { font-size:1.2em; line-height:1; margin:1.33em 0 .67em; }
.cont h6 { font-size:1em; line-height:1; margin:1.6em 0 .8em; }
.cont hr { display:block; background:inherit; color:inherit; width:100%; height:1px; border:none; }
.cont ul { list-style:disc outside; }
.cont ol { list-style:decimal outside; }
.cont hr, .cont p, .cont ul, .cont ol, .cont dl, .cont pre, .cont address, .cont table, .cont form { margin-bottom:1.6em; }
.cont p+p { margin-top:-.8em; }
.cont fieldset>*:first-child { margin-top:0; }
.cont textarea, .cont input { font-size:100%; padding:0.475em; background: #0a0a0a; border: none; color: #ccc; cursor:text; }
.cont select { padding:.2em .1em 0; }
.cont option { padding:0 .4em .1em; }
.cont button { padding:.3em .5em; }
.cont input.radio { position:relative; bottom:-.2em; }
.cont dt { margin-top:.8em; margin-bottom:.4em; }
.cont ul, .cont ol { margin-left:2.2em }
.cont caption, .cont form div { padding-bottom:.8em; }
.cont ul ul, content ol ul, .cont ul ol, content ol ol { margin-bottom:0; }
/* LAYOUT */
div.wrap { height:100%; width:100%; }
div.cont { height:100%; width:100%; }
h1 { height:9px; display:block; font-size: 2em; background: url(../imagens/bg_diag.png) repeat fixed left top; position: fixed; top: 0; right: 9px; left: 9px; text-indent: -9999px; }
div.env { height:100%; padding-left: 9px; background: url(../imagens/bg_diag.png) repeat-y fixed left top; text-align:center; overflow:hidden; }
div.in { width:890px; margin:0 auto; text-align: left; }
em.tagline { height: 100%; width: 9px; position: fixed; top: 0; right: 0; bottom: 0; background: url(../imagens/bg_diag.png) repeat fixed left top; display: block; text-indent: -9999px; }
/* nav */
ul#nav { position: fixed; top: 120px; right: 9px; height:41px; max-width:34.428%; overflow:hidden; }
ul#nav li { float:left; list-style: none; height: 41px; margin-right:1px; background: url(../imagens/bg_diag-light.png) repeat fixed left top; }
ul#nav.nav-a li { background: url(../imagens/bg_diag.png) repeat fixed left top; }
ul#nav li.home { width:59px; }
ul#nav li.portfolio { width:95px; }
ul#nav li.about { width:67px; }
ul#nav li.contact { width:83px; }
ul#nav li.none { width:100em; margin: 0; float: none; text-indent: -9999px; }
*:first-child+html ul#nav li.none { margin: -41px 0 0 308px; }
.safari ul#nav li.none { margin: 0 0 0 308px; }
ul#nav a:link, ul#nav a:visited { text-decoration: none; text-transform: uppercase; color: #fff; display: block; padding: 0px; height: 41px; text-indent: -9999px; }
.nav-a a:link, .nav-a a:visited { background:url(../imagens/bg_nav-a.png) no-repeat; }
.nav-b a:link, .nav-b a:visited { background:url(../imagens/bg_nav-b.png) no-repeat; }
ul#nav .home a:link, ul#nav .home a:visited { background-position:0 top; }
ul#nav .home a:hover, ul#nav .home a:active, ul#nav .home a:focus, ul#nav .home a.active { background-position:0 bottom; }
ul#nav .portfolio a:link, ul#nav .portfolio a:visited { background-position:-60px top; }
ul#nav .portfolio a:hover, ul#nav .portfolio .portfolio a:active, ul#nav .portfolio a:focus, ul#nav .portfolio a.active { background-position:-60px bottom; }
ul#nav .about a:link, ul#nav .about a:visited { background-position:-156px top; }
ul#nav .about a:hover, ul#nav .about a:active, ul#nav .about a:focus, ul#nav .about a.active { background-position:-156px bottom; }
ul#nav .contact a:link, ul#nav .contact a:visited { background-position:-224px top; }
ul#nav .contact a:hover, ul#nav .contact a:active, ul#nav .contact a:focus, ul#nav .contact a.active { background-position:-224px bottom; }
/* about */
div#about { width:100%; height:100%; padding-bottom:1em; display:block; background: #d26b13 url(../imagens/bg_carolina.jpg) no-repeat right bottom; }
div#about div.env { padding-bottom:13px; }
div#about div.in { width:440px; padding:0 300px 0 150px; margin-top: 6%; }
div#about h2 { width:624px; height:120px; background: url(../imagens/headings/h2_about.png) no-repeat left top; color: #d26b13; text-indent: -9999px; margin: 40px auto 0 9px; }
div#about h3.sub { color: #703d0d; width:458px; height:21px; background: url(../imagens/headings/h3_about.png) no-repeat left top; text-indent: -9999px; margin: -31px auto 0 154px; text-align: left; }
div#about p { color:#fff; }
div#about blockquote { margin:0 -300px 0 0; padding:0.85em 0; }
div#about blockquote p { color:#f98715; font-size: 2.765em; line-height: 1.3em; padding:1px 10px 1px 5px; background: url(../imagens/bg_diag.png) repeat fixed left top; display: inline; }
div#about blockquote br { margin:0 40px; display:block; }
div#about blockquote em { color:#fff; font-style: normal; }
/* home */
div#home { width:100%; height:100%; display:block; background: url(../imagens/bg_home.jpg) no-repeat right top; }
span.head { display:block; height: 170px; margin: 0 0 -170px; background: #d26b13; }
div#home div.in { width:830px; padding:0; margin-top: 6.5%; }
div#home h2 { width:368px; height:122px; background: url(../imagens/headings/h2_home.png) no-repeat left top; color: #d26b13; text-indent: -9999px; margin: 39px auto 0 18px; }
div#home h3.sub { color: #703d0d; width:492px; height:21px; background: url(../imagens/headings/h3_home.png) no-repeat left top; text-indent: -9999px; margin: -32px auto 0 104px; text-align: left; }
div#home .show { float:left; width:410px; }
div#home .right { float:right; width:230px; margin-right:40px; }
a.more:link, a.more:visited { text-transform: uppercase; color: #fff; background: url(../imagens/bg_diag-393.gif) repeat; padding: 2px 5px; text-decoration: none; font-size: 1.15em; }
a.more:hover, a.more:active, a.more:focus { background: #373737; }
/* portfolio */
div#portfolio { width:100%; height:100%; display:block; }
div#portfolio div.in { width:830px; padding:0; margin-top: 3.2%; }
div#portfolio h2 { width:560px; height:123px; background: url(../imagens/headings/h2_portfolio.png) no-repeat left top; color: #d26b13; text-indent: -9999px; margin: 39px auto 0 18px; }
div#portfolio h3.sub { color: #703d0d; width:503px; height:21px; background: url(../imagens/headings/h3_portfolio.png) no-repeat left top; text-indent: -9999px; margin: -33px auto 0 109px; text-align: left; }
/* selector */
div#selector { height: 21px; padding-left: 422px; overflow:hidden; }
div#selector div { width:408px; height:20px; border-bottom: 1px solid #3c3e3f; }
div#selector h4 { font-size: 1em; font-weight: normal; color: #696969; text-transform: lowercase; width: 410px; text-align: right; line-height: 21px; margin: 0 0 -20px -422px; height: 20px; }
div#selector ul { margin: 0; float:left; }
div#selector li { list-style: none; float:left; }
div#selector li em { display: none; }
div#selector a:link, div#selector a:visited { list-style: none; height: 20px; width: 20px; float:left; margin-right: 1px; text-align: center; font-weight: bold; background: url(../imagens/bg_diag-393.gif) repeat fixed left top; text-decoration: none; padding: 0; overflow: hidden; color: #9f9f9f; }
div#selector a.off:link, div#selector a.off:visited { background: url(../imagens/bg_diag-2e.gif) repeat fixed left top; }
div#selector a.prev:link, div#selector a.prev:visited, div#selector a.next:link, div#selector a.next:visited { color:#000; font-size: 0.95em; line-height: 21px; }
div#selector a:hover, div#selector a:active, div#selector a:focus, div#selector .active a { background: #874100; }
/* info */
div#portfolio h3 { font-size:1.75em; margin:0.5em 0 0.875em; letter-spacing: 1px; }
div#portfolio #info { width:408px; float:right; }
div#portfolio .details { line-height: normal; }
div#portfolio .details dt { font-weight: normal; text-transform: lowercase; text-align: right; width: 4.3em; margin: 0.25em 0 -1.15em; }
div#portfolio .details dd { font-weight: bold; text-transform: capitalize; margin-left:5.3em; }
/* show */
div#show { width:410px; }
div.shownav { text-align:center; padding:0 32px; }
div.shownav .prev, div.shownav .next { background: url(../imagens/bg_diag-525.gif) repeat left top; height: 17px; width: 16px; display: block; line-height: normal; text-decoration: none; color: #1a1a1a; }
div.shownav .off { background: url(../imagens/bg_diag-2e.gif) repeat fixed left top; }
div.shownav .prev { float:left; margin: 22px 0 0 -24px; padding-right:1px; }
div.shownav .next { float:right; margin: 22px -24px 0 0; padding-left:1px; }
div.shownav ol { margin:0 auto; width:346px; height:64px; }
div.shownav ol li { float: left; list-style: none; padding:12px 7px; }
div.shownav a:link img, div.shownav a:visited img { background: url(../imagens/bg_diag-393.gif) repeat left top; padding: 5px; display: block; display: block;}
div.shownav .active a:link img, div.shownav .active a:visited img { background: #874100; }
div.shownav a:hover img, div.shownav a:active img, div.shownav a:focus img { background: #373737; }
.show a:link img, .show a:visited img { background: url(../imagens/bg_diag-393.gif) repeat left top; padding: 5px; display:block; }
.show a:link img.loading, .show a:visited img.loading { background: #1a1a1a; color:#1a1a1a; }
.show a:hover img, .show a:active img, .show a:focus img { background: #373737; }
div.show a:link span, div.show a:visited span { width:23px; height:21px; display: block; background: url(../imagens/bt_zoom.gif) no-repeat left top; text-indent: -9999px; margin:-26px 5px 0px 0px; float:right; position: relative; }
div.show a:hover span, div.show a:active span, div.show a:focus span { background: url(../imagens/bt_zoom.gif) no-repeat left bottom; }
/* contactos */
div#contact { width:100%; height:100%; display:block; }
div#contact div.in { width:700px; padding:0 0 0 130px; margin-top: 5%; }
div#contact h2 { width:505px; height:125px; background: url(../imagens/headings/h2_contact.png) no-repeat left top; color: #d26b13; text-indent: -9999px; margin: 38px auto 0 15px; }
div#contact h3.sub { color: #703d0d; width:476px; height:21px; background: url(../imagens/headings/h3_contact.png) no-repeat left top; text-indent: -9999px; margin: -34px auto 0 136px; text-align: left; }
form.contact-form { padding: 0.65em 0 0; }
form.contact-form fieldset { padding: 0 0 0 150px; }
form.contact-form legend { display:none; }
form.contact-form div { margin:0; padding:0; }
form.contact-form div.form-label { margin-left: -130px; }
form.contact-form label { display:block; color: #7d7d7d; font-size: 1.3em; float: left; width: 110px; text-align: right; }
form.contact-form label span { margin-right:-11px; }
form.contact-form input, form.contact-form textarea { margin:-0.25em 0 1.5em; width:94.5%; overflow:auto; }
form.contact-form textarea { height:7em; }
form.contact-form #ec_challenge_a { width:15%; }
form.contact-form .form-option { margin: -3.45em 0 2.1em 15%; text-align: right; }
form.contact-form .form-option input { margin:0; width:auto; background:transparent; }
form.contact-form .form-option input:hover { cursor:pointer; }
form.contact-form .form-option label { margin:-1.6em 2em 0 0; width:auto; font-size: 0.95em; display: block; float: none; }
form.contact-form input.button { display:block; border-style: none; background: transparent url(../imagens/bg_diag-393.gif) repeat left top; padding: 7px 5px; text-transform: uppercase; color: #c9c9c9; width: 5.5em; font-size: 0.97em; cursor:pointer; }
.formcontainer p.success { font-weight: bold; color: #99CC33; }
.formcontainer p.error { font-weight: bold; color: #CC0000; }
.formcontainer p.important { font-weight: bold; color: #CC6600; }
.formcontainer p.important em { font-weight: normal; color: #999; font-size: 0.95em; font-style: normal; display: block; }
div#contact div.left { width:420px; float:left; }
dl.contacts { color: #7d7d7d; float:right; width:140px; padding-left:75px; margin-top: 3.9em; }
dl.contacts dt { font-size: 1.3em; font-weight: normal; width:65px; text-align: right; margin: 0.9em 0 -1.175em -75px; }
/* rodape */
div#footer { position: fixed; left: 9px; right: 9px; bottom: 0; height: 42px; background: url(../imagens/bg_diag.png) repeat fixed left top; padding:9px 0; color: #a5a5a5; }
div#footer div { background: url(../imagens/bg_hover.png) repeat; font-size: 0.85em; height: 42px; }
div#footer ul { margin: 0; padding-right:165px; float: right; }
div#footer li { float:left; list-style: none; padding: 11px 27px; }
div#footer a:link, div#footer a:visited { padding: 2px 5px; text-decoration: none; color: #a5a5a5; }
.foot-a a:link, .foot-a a:visited { background: url(../imagens/bg_footer-linklar.gif) repeat fixed left top; }
.foot-a a:hover, .foot-a a:active, .foot-a a:focus { background: #7c420e; }
.foot-b a:link, .foot-b a:visited { background: url(../imagens/bg_footer-linkcin.gif) repeat fixed left top; }
.foot-b a:hover, .foot-b a:active, .foot-b a:focus { background: #2d2d2d; }
/* fancybox */
div#fancy_overlay { background:#000; left:0; position:absolute; top:0; width:100%; z-index:90; }
div#fancy_loading { cursor:pointer; display:none; height:40px; overflow:hidden; position:absolute; width:40px; z-index:100; }
div#fancy_loading div { background:url(fancy/fancy_progress.png) no-repeat; height:480px; left:0; position:absolute; top:0; width:40px; }
div#fancy_close { background:url(fancy/fancy_closebox.gif) no-repeat left top; cursor:pointer; display:none; height:23px; width:23px; position:absolute; right:-12px; top:-12px; z-index:100; }
div#fancy_content { height:100%; left:0; margin:0; padding:0; position:absolute; top:0; width:100%; z-index:96; }
#fancy_frame { display:none; height:100%; position:relative; width:100%; }
img#fancy_img { border:0; height:100%; left:0; margin:0; padding:0; position:absolute; top:0; width:100%; z-index:92; }
div#fancy_title { bottom:-2.5em; display:none; left:0; position:absolute; width:100%; z-index:100; text-align: center; }
div#fancy_title_main { background:#1a1a1a; margin:0 auto; padding:.75em; font-size: 1.1em; }
div#fancy_outer { display:none; left:0; margin:0; overflow:hidden; padding:18px 18px 58px; position:absolute; top:0; z-index:90; }
div#fancy_inner { background:#FFF; height:100%; position:relative; width:100%; }
a#fancy_left, a#fancy_right { background:url(data:image/gif;base64,AAAA); bottom:10px; cursor:pointer; height:100%; position:absolute; width:35%; z-index:100; }
a#fancy_left { left:0; }
a#fancy_right { right:0; }
a#fancy_left:hover { background:url(fancy/fancy_left.gif) no-repeat 0 100%; }
a#fancy_right:hover { background:url(fancy/fancy_right.gif) no-repeat 100% 100%; }
#fancy_bigIframe, #fancy_freeIframe { height:100%; left:0; position:absolute; top:0; width:100%; z-index:10; }
div#fancy_bg { display:none; }
div.fancy_bg { display:block; position:absolute; z-index:70; }
/* ? */
h2.error404 { text-transform: uppercase; font-size: 1.2em; padding: 130px 0 0 100px; }
h2.error404 em { font-size: 0.9em; color: #999; font-style: normal; padding-left: 0.5em; }
div.loading { width:100%; height:350px; background: url(../imagens/loader.gif) no-repeat center center; }

svenbei · 20.02.2010

AW: menü fest fixieren, während content mittels jquery gescrollt wird

Danke TimeePic!

Leider bin ich noch nicht ganz so versiert bzgl. coding.
Ich wollte mich nur vergewissern.

Gibt es einen Unterschied zw. Sprungmarken und Ankern?

Eine weitere Frage habe ich jetzt doch noch. Wenn ich die Seite geladen habe und das Browserfenster vergroessere, dann wächst der Hintergrund ja auch mit. Wo finde ich das im Code?

MfG Sven