Strawbeanerry Posted July 11, 2013 Share Posted July 11, 2013 (edited) oFrom recent events I have been really inspired to pick coding back up, it seems as if HTML codes have become more complex than before. So I went to w3schools to just re-fresh the basics and to see what's new. So far I am having a really hard time understanding div blocks. I remember before (and most likely now still) people really loved having layouts that had an image as a header (sometimes links under), and a footer. In between the header and footer would be two columns with navigation on the left and content on the right. Sort of like this:I created a container div, and inside the container div I have nav and ontent both floating left to make it side by side. But I mean I am trying to code this with tumblr use, and I want to have nav div and the header fixed so only content would scroll through any sort of tumblr posts infinitely. People always have tumblr where they have fixed user info and what not. I think what I am describing is kind of like what an iframe would do, positioning them somewhere and then have a page displayed there. But I am not sure if infinite scrolling would allow me to have a footer always displayed. The footer will also be an image, and just text on top of the image. I apologize if it makes very little sense... I don't know how to go about approaching it in terms of position. So I went to a really simple approach, and it came close to what I want. But the footer is not quite..I can't get it to stay UNDER both links and content (drew the image a little wrong) <!DOCTYPE html><html><head><!--hello info--><title>This is a title!!</title><style type="text/css">html, body {background: #f8fede;}#container {margin: 90px auto;padding: auto;background: #ffffff;width: 800px;}#header {background:transparent url(http://25.media.tumblr.com/tumblr_m7eo63r9HD1rvj3dyo1_500.jpg) no-repeat scroll center top;background #transparent;height: 500px;}#footer {background #transparent;height: 100px;width: 1000px;}#nav {background: #e994fe;float: left;width: 250px;}#content {background:#71d4da;float: left;width: 400px;}</style></head><body><div id="container"><div id="header" align="center">test sss</div><div id="nav" align="center">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div><div id="content">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div></div><div id="footer">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div></body></html> Also, I am having a hard time distinguishing when to use div class and div ids. I know id's are unique but people use both for layouts and I don't quite understand >.< Tumblr already has a lot of present elements as it is that they require that you must include in the theme. Link transitions are fancier now and what not...oye I feel outdated. I would appreciate any sort of help or any sort of direction to somewhere I can learn more about things like meta-tags and {/block} element and {if:widelayout content="0"} <-example elements...w3school is nice but I think I am definitely beyond "What a <br> tag does" Thanks for anyone who would help! I am truly stuck. Edited July 11, 2013 by Strawbeanerry 1 Link to comment Share on other sites More sharing options...
jeffman Posted July 12, 2013 Share Posted July 12, 2013 Something like this? Link to comment Share on other sites More sharing options...
Strawbeanerry Posted July 12, 2013 Author Share Posted July 12, 2013 (edited) Wow...that is awesome, yes that is exactly what I mean! Thank you so much! So I could just add a background image for header & footer and still have text? Would you be able to briefly explain what you added to achieve that? I have seen the elements min-height and margins and padding before but the way w3school explained it, I didn't quite understand what it actually did. Edited July 12, 2013 by Strawbeanerry Link to comment Share on other sites More sharing options...
jeffman Posted July 12, 2013 Share Posted July 12, 2013 You should be able to add background images to any of those elements. The real trick is that the top, left, and bottom divs are all fixed, so they don't scroll when the rest of the page scrolls. If you add a background image to the body element, you will see that everything else scrolls, not just the content div. Fixing a div creates problems that must be corrected. First, those divs no longer expand horizontally to fill their containers. So even if a div stretches from one side to another, you must define the width. Second, fixed divs are taken out of "the flow." That is why the #nav div has it's top coordinate equal to the height of the header. If it didn't, it would be at the top of the wrapper. That is also why the #content div has margin on every side that contacts a fixed div. If it didn't, it would also be at the top left of the wrapper; at the bottom, its content would be hidden by the footer. So its top margin is the height of the header, bottom margin is the height of the footer, and left margin is the width of the #navigation div. This really is the way margins work under normal circumstances. It just doesn't seem that way when you first look at it. The footer is fixed also, but it has to be pinned to the bottom, not the top. That is why its bottom coordinate is specified rather than the top. The #navigation div has a min-height so that it is guaranteed to fill the space between the top and the bottom. Without it, it would be only as high as its content, which is the UL element. The same trick could be applied to the #content div, but that one uses a more traditional trick, which is to make its background color the same as the background of the wrapper. So if it is ever shorter than the space between the header and the footer, you would not be able to see that. Finally, with all those fixed divs and crazy margins, the wrapper also has to be taken out of the flow. That creates a new "problem." The typical technique for centering it in the page won't work (setting left-right margins to auto. So it is centered by placing its left coordinate at 50% the width of the page (too far, in other words) and its left margin is negative half the width of the wrapper, which pushes it back to the left. All that stuff follows "the rules," but they are not applications of the rules the way they are discussed in most references. Hope that helps. And FWIW, don't be surprised if someone shows up with a whole other set of techniques to get the job done. CSS can be like that. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now