Avatar billede d.kryger Praktikant
08. april 2011 - 13:28 Der er 7 kommentarer og
1 løsning

Div bliver når man scroller - problem når browser er mindre end sidebredden

Hej eksperter.

Jeg har en side hvor jeg gerne vil vise nogle links/reklamer for andre områder på min hjemmeside i højre side. Jeg vil gerne have det sådan at når man scroller ned på min side, så bliver links/reklamer på "deres plads"...

Det har jeg prøvet at lave her: http://test.kryger.name/index.html

Det virker også fint og efter hensigten så længe at ens browser er breddere end de 1000 px, som siden er bred. Hvis man har en mindre browser, og man så prøver at scrolle ud til der hvor links/reklamerne skulle være, ja så er de der ikke!!!

Kan nogen hjælpe mig med at få det til at virke efter hensigten (også ved mindre browservinduer)?

Min CSS ser sådan ud:
html, body
{
    padding:0;
    margin:0;
}

body
{
    background-color: #E7E7E7;
}

#wrapper
{
    width:100%;
    margin: auto;
}

#pagecontainer_menu, #pagecontainer_content
{
    width:1000px;
    margin: auto;
    background-image:url('images/background.png');
}

#sidebar-a_menu, #sidebar-a_content
{
    float: left;
    width:25px;
}

#sidebar-b_menu, #sidebar-b_content
{
    float: right;
    text-align: right;
    width:250px;
}

#content_menu, #content_content
{
    margin-left: 25px;
    margin-right: 250px;
    text-align: justify;
}

#menu
{
    height: 150px;
    text-align: left;
    position: relative;
    background-image: url('images/menu_top_background.png');
    background-repeat: repeat-x;
    background-position: left top;
}

#sidebar-b_content_stay
{
    position: fixed;
    top: 170px;

}

/* Primary navigation - START */
#primary_navigation ul
{
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 8px;
}

#primary_navigation li
{
    list-style: none;
    margin: 0;
    padding: 0px 10px 0px 0px;
    text-align: left;
    display: inline;
}

#primary_navigation a
{
    font-family: Georgia;
    font-size: 12px;
    letter-spacing: -.5px;
    text-transform: uppercase;
    padding: 0;
    text-decoration: none;
    color: #000000;
}

#primary_navigation a:hover, #primary_navigation a.activeitem
{
    color: #000000;
    padding-bottom: 10px;
}
/* Primary navigation - END */

/* Secondary navigation - START */
#secondary_navigation
{
    height: 50px;
    text-align: right;
    position: relative;
}

#secondary_navigation ul
{
    padding: 0;
    margin: 0;
    position: absolute;
    top: 8px;
    right: 0;
}

#secondary_navigation li
{
    list-style: none;
    margin: 0;
    padding: 0px 0px 0px 15px;
    text-align: right;
    display: inline;
}

#secondary_navigation a
{
    font-family: Georgia;
    font-size: 12px;
    padding: 0;
    text-decoration: none;
    color: #000000;
}

#secondary_navigation a:hover, #secondary_navigation a.activeitem
{
    color: #000000;
    padding-top: 10px;
}
/* Secondary navigation - END */

#clear_menu, #clear_content, #clear_bottom_links, #clear_footer
{
    clear: both;
}

h1, h2, h3, h4, h5, h6
{
    margin: 0;
    padding: 0;
    font-weight: normal;
}

h1
{
    font-family: Georgia,Verdana,Helvetica,sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #126525;
    margin-bottom: 15px;
}

h2
{
    font-family: Georgia,Verdana,Helvetica,sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    color: #969696;
}

h3
{
    font-family: Verdana,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: normal;
    color: #969696;
}

hr
{
    color: #8C8C8C;
    background-color: #8C8C8C;
    border: 0;
    height: 1px;
    padding: 0;
    margin: 0;
}
Avatar billede olebole Juniormester
09. april 2011 - 01:09 #1
<ole>

Jamen, din kode virker da præcist, som den skal. Du sætter elementets position til fixed, så den forbliver, hvor den er, når der scrolles.

Når elementet i udgangspunktet ligger udenfor browservinduet, så skal det jo blive udenfor, når du scroller. Ellers ville din CSS kommando jo ikke virke  =)

/mvh
</bole>
Avatar billede d.kryger Praktikant
09. april 2011 - 16:16 #2
Ja, det tænkte jeg også nok, men der findes ikke en funktion hvor den kun bliver hvor den er når man scroller ned og ikke til siden?

Eller kan koden "skrives om", så den ikke nødvendigvis er fixed?
Avatar billede olebole Juniormester
09. april 2011 - 17:07 #3
Nej, der findes ikke en færdig funktionalitet, der kan klare opgaven - så du må skrive dig ud af det.

En mulighed kunne være at gøre, som før fixed blev bredt implementeret: At bruge JavaScript til at sætte en top-værdi på onscroll (men det bliver sjældent særlig pænt).

Derudover er det slet ikke umuligt, man kan 'hacke' sig ud af det med CSS, hvis man tager sig lidt tid til at tænke lidt kreativt over problemet. Det agter jeg dog - med al respekt - ikke at gøre  =)
Avatar billede d.kryger Praktikant
11. april 2011 - 13:45 #4
Hej igen...

Jeg faldt over denne kode på nettet:
<html>

<head>
<script language="javascript">
var top = 200
function move() {
test.style.top = document.body.scrollTop + top
}
</script>
</head>

<body onscroll="move()" onload="move()">

<div id="test" style="width:200;height:200;border:1x solid black;position:absolute;left:400">Test</div>

<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>
<br>Test<br>Test<br><br>Test<br>Test<br>

</body>

</html>

Virker super fint, men lige så snart sætte doctype til:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Så virker koden ikke! Kan nogen hjælpe mig?
Avatar billede d.kryger Praktikant
11. april 2011 - 16:02 #5
Ovenstående kode virker som sagt ikke helt efter hensigten, men det gør denne: http://www.knowledgesutra.com/forums/topic/58900-how-to-make-an-item-scroll-with-you-on-the-page/

olebole, vil du ikke ligge et svar så kaster jeg lige nogle point i din retning, da du fik mig på ret køl med dette problem...

Tak for det!
Avatar billede d.kryger Praktikant
11. april 2011 - 16:06 #6
Avatar billede olebole Juniormester
11. april 2011 - 16:36 #7
Ellers tak, jeg samler ikke points  =)

Husk altid at tjekke i forskellige browsere - siden virker ikke i IE. Det skyldes denne udkommentering af targetX:


                var floatingMenu =
                {
                    //targetX: 0,
                    targetY: 175,



Fejlen i validatoren skyldes, at din scriptblok ikke er escaped som CDATA. Konverter dokumentet til HTML4.01 Strict - eller HTML5. Så forsvinder fejlen  =)
Avatar billede d.kryger Praktikant
12. april 2011 - 08:54 #8
Helt ok med point, jeg napper dem selv for at lukke spørgsmålet så.

Men mht. til browsere, så virker koden fint i min IE9: http://test.kryger.name/

Også selvom targetX er udkommenteret, hvilket bare gør at reklamekassen kommer til at være der hvor jeg har sat koden ind (er det rigtigt?)

Jeg jeg sætter <![CDATA[ script ]]>, så kan siden valideres, men så virker scriptet ikke...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester