May_68

Esmi . the . before is for classes and the # is fir id,

Lets say a class you will use in multiple places. an and id is an unique identifier of a single element in this case the go to top button. Beacuse there is only one . now if it was an h2 you can use that multiple time accross the same page or a <p> .. then use classes to style them . . If you notice on the code you hava .. <p id=”totop”>
<and some where in there there is also a <div class=”site-info”>

The css file , style.css uses these id’s and class to know what find them in the html code .. in the html code you also have lots of style=”blabla : blabla”
the css file simply is assigning all those styles to the html elements.
so :

<p id=”totop”> —> in the css is —> p#totop or just #totop
<div class=”site-info”> —> in the css is —> div.site-info , or just .site-info

Now to make your life easier .
Download chrome > install it > delete IE from you computer . or any computer you come accros . ( the world will thank you for that kind action ) and then once you have chrome installed fire up your webpage and right click on the go to top button and do inspect element.

A very cool window will pop up that will allow you to edit the css so you can test what works ,,, figure out how to use that window and you are on a good way to getting things done … U can also use safari . or firefox’s firebug ..

Nothing wrong with absolute positioning if you know what you are doing. and IE .. my god .. can wait for that to die once and for all .. what a cancer .

If it gets too anoying just send me the link of the page you are working on and I will have a look at it .
and post the css right css here so you can added to you style.css

Cheers mate .. 😀

open style.css
and in the
#main {
position: relative;
}

p#totop {posittion: absolute;
bottom: 10px;
right: 0px;
}
Now taking in cosideration that your button is inside the #main div you need to tell your css that that div’s postion is relative , so what ever element with absolute position on it will see it has the pivot poins of coordenates ‘0,0’.
Then tell the element p#totop to be in an absolut position of bottom: 0 , and right: 0 .

now it would be better to put that <p> element inside the <footer> and make the footer{position: relative; overflow: visible} and the p#totop {position:absolute; right:0; top:-20px;
}

this way nomater what height or float the #main may have you make sure that that p#top always styas stuck to the footer
<footer id=”colophon” role=”contentinfo”>

<p id="totop" style="text-align: right;"><a href="#">Back to Top</a></p> 

<--- all the stuff inside the footer here -->
</footer>

[Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]