And I also have a question: In your promo you linked a Belle theme (that's gorgeous btw) and I noticed that it's set to the far right of the page but when you don't have the browser at 100% it moves the whole thing to the left instead of cutting it off like so many themes (mine included) do. Could you teach me how to achieve that? It took me weeks to learn to code from scratch but there is so much for me to learn yet.
Absolutely, I would love to! (And thank you so much for the compliment!)
For othersâ reference, this is the theme weâre discussing. What youâre describing is that, as you make the browser window larger or smaller, the background image and posts move along with the window, like this:
I accomplished this by placing all the necessary items (the background image, the post markup) inside a div, then making the div positioned. After that, I made use of the top, right, bottom, and left properties to place the div where I wanted it on the page. You can position any element on a page this way using these properties!
Here is the code I used to style the div, with relevant properties in bold!
 #postcontainer {   background-image:url(http://i.imgur.com/ABkGi50.png);   width:1000px;   height:696px;   position:fixed;   right:0px;   bottom:0px;  }
The position property is a bit tricky to explain! To put it as simply as I can, position:fixed; lets me put my div anywhere I want on the page, and to position it using, in this case, the right and bottom properties. Iâm going to add some links at the bottom of the page which have fuller explanations, and if youâre confused about this part, please let me know and Iâll talk more about it!
The right and bottom properties, as you can see, are both set to 0px. This puts my #postcontainer div flush with the right and bottom sides of the page â it is 0 pixels away from either one, and it wants to stay that way. When you make the browser smaller like in the above gif, #postcontainer stays in its spot, 0 pixels away from the right and the bottom.
You can see this if you try to make the browser smaller in other ways, too!
When I pull in the browser from the left side, the #postcontainer div doesnât care. It stays where it is, on the right, because thatâs where I positioned it. If I pull up the browser from the bottom, the #postcontainer div moves with it, because it wants to always stay flush against the bottom of the browser.
(As you might notice in the gif, it is the bubble on the bottom left â which is actually the updates tab â that moves when you pull in the browser from the left side. Thatâs because the updates tab is positioned 0px away from the left, as opposed to #postcontainer, which is 0px away from the right.)
As an addendum, the reason that the blog posts themselves move with #postcontainer is because they are actually in a div nested inside #postcontainer, like this:
         âŠÂ  Â
When #postcontainer moves with the browser (or doesnât), it takes the posts with it.
Here are some helpful links that discuss positioning elements:
The âpositionâ page of LearnLayouts.com
âPositionâ on Css-Tricks.com (one of my favorite websites!)
âPositionâ on the Mozilla Developer Network (NB: the language here is more technical and may not be as clear as the two pages above)
I hope Iâve answered this clearly! If thereâs anything I can clarify, or anything else I can help you with, please let me know. nwn
jacobvanloon
jbbartram-illu
stormborns
annaxmalina
2087
pixelskylines
kaledo-art
ellievsbear
