Zagadka Posted September 4, 2014 Share Posted September 4, 2014 I know the fault here is somewhere that I defined a 100% height that CSS parses as expanding the full page. The primary example is http://zagadka.net For some reason, it even adds the horizontal scrollbar for just a few pixels, but the main thing, obviously, is that it doubles the page height after the page ends. Like I said, .I'm sure that it is a 100% height problem somewhere. Also of note is the .news section needing to be at 80%, or it extends to the right of the page. Again, I'm sure this is because it is doing 80% relative to the entire window, not just the remainder of the size of its own div. body { background-color: #ffffff; color: #041D3C; position: absolute; margin: 0; padding: 0; padding-top: 70px; width: 100%; height: 100%; font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-size: 16px;}a{ color:#041D3C; text-decoration: none;}a:hover{ text-decoration: underline;}.menu{ position: absolute; right: 10px; top: 65px;}.min_eye{ position: absolute; left: 0px; top: 0px;}.min_block{ position: absolute; background: #4E6780; width: 54px; height: 56px; border-right: 2px solid #152434; border-bottom: 1px solid #152434; left: 0px; top: 0px;}.min_line{ position: absolute; top: 48px; width: 100%; border: 1px solid #152434;}.min_title{ position: absolute; right: 10px; top: 9px;}.zagadka{ font-size: 48px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}.year{ color: #ADADAD; font-size: 24px;}a.year:hover{ text-decoration: none;}.vert_line{ position: absolute; top: 0px; left: 54px; width: 0px; height: 447px; border: 1px solid #152434; z-index: 99;}.leftside{ position: absolute; top: 58px; height: 538px; z-index: 10;}.logo{ position: relative; top: 150px; height: 400px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 34px;}.large_eye{ position: absolute; left: 30px; top: 415px; z-index: 9; background-color: #828F9E;}.sub_eye{ position: absolute; top: -50; border: 137px solid #848C9C; height: 100%;}.news{ position: relative; top: -62px; left: 274px; width: 80%; font-size: 14px; color: #848C9C;}.news_text{ width: 100%; padding: 5px;}.zrotw_line{ width: 100%; border: 1px solid #848C9C;}.zrotw_line_title{ width: 400px; border: 1px solid #848C9C;}.tail{ width: 100%; height: 100%; background-color: #828F9E;} <body><div class="min_block"></div><hr class="min_line"><hr class="vert_line"><div class="min_title"> <font class="year">mmxiv</font> <a href="./index.php"><font class="zagadka">з а г а д к а</font></a></div><div class="menu" align="right"> <font color="#8E8E8E">[ </font> <a href="http://zagadka.net/consulting.php/">c o n s u l t i n g</a> <font color="#8E8E8E">| </font> <a href="http://zagadka.net/portfolio.php">p o r t f o l i o</a> <font color="#8E8E8E">| </font> <a href="http://zagadka.net/albums/">a l b u m s</a> <font color="#8E8E8E">| </font> <a href="http://zagadka.net/fedsyn.php">f e d s y n</a> <font color="#8E8E8E">| </font> <a href="mailto:alyosha@zagadka.net">c o n t a c t</a> <font color="#8E8E8E"> ]</font></div><div class="leftside"> <img src="./images/leftside_text.png" alt="Mysterious Text"><br></div><div class="logo" align="center"> z a <u> g<font color="#383838"> a</font><font color="#717171"> d</font><font color="#868686"> k</font><font color="#9D9D9D"> a</font><font color="#C5C5C5"> n</font><font color="#D3D3D3"> e</font><font color="#DADADA"> t <font color="#E9E8E7"> </font></u></div><div class="large_eye"> <img src="./images/bottom_center_eye.png" alt="Big scary eye"></div><hr class="sub_eye"><div class="news"> <hr class="zrotw_line"> <b>Good Enough For Who it is For</b> <b>[</b>August 30th, 2014<b>]</b><br> <hr class="zrotw_line_title" align="left"> <div class="news_text"> As you may be able to tell, there are a few... quirks. Such as the bottom down there stretching on for a bit, which isn't intentional, but is oddly difficult to fix with only using modern CSS standards.<br> <br> I'll get to that when it is necessary. Or I have a lot of free time. Otherwise, most everything turned out pretty well. This page structure only uses 2 images and is insanely easy to fix. </div> <br> <hr class="zrotw_line"> <b>LIVE WORK UNDERWAY</b> <b>[</b>August 21st, 2014<b>]</b><br> <hr class="zrotw_line_title" align="left"> <div class="news_text"> Currently converting the page to more of a CSS3 base. Things may look weird or broken or stupid. The purpose of this - beyond being an exercise and serving as demonstration of my work - is to make a fully CSS3/HTML4 compliant site with as few images as possible while formatting properly through different browsers and screen resolutions.<br> <br> This does have practical effects in work - for one, updating data on a page is much easier if it is just some text in an include file than it is to change embedded images. It is more flexible, as well, and easier to update. </div> <br> <hr class="zrotw_line"> <b>Page Being Adapted</b> <b>[</b>July 29th, 2014<b>]</b><br> <hr class="zrotw_line_title" align="left"> <div class="news_text"> This page is a temporary filler until I decide what content I want to publish on my public website.<br> <br> Things I am considering range from various photo albums, a portfolio of web design, political and social writings, previous content I have published, content from the games I am invested in (and have fond memories of, this may be rolled into the albums), archives of websites I deem important enough, reviews of media... whatever I deem both important and open to the public.<br> <br> Until then, I will keep various aspects of my life segregated and this page a welcome to you, however you got here. You may contact me at the link above or by <a href="mailto:alyosha@zagadka.net" style="color:#041D3C; text-decoration:none">clicking here</a>. Thanks, have a great day! </div></div><div class="tail"> </div></body> So my basic question, as a student, would be how the CSS is parsed in relative association to the other div elements. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 4, 2014 Share Posted September 4, 2014 Fell into beginnings trap, thinking that you must use position absolute, DON'T! only, and i mean only use position absolute where floating, margins and padding will not give you the desired result. position: absolute is mainly used for positioning a element onto another. By using width: 100%; height: 100%; you are telling the element to stretch to whole width available, then when you add margin, padding, borders etc the width extends beyond, as in this case the browser window height/width resulting in scrollbars appearing; position absolute elements are out of the flow from other elements they occupy no space, other elements fill the space these elements would occupy. div block element by default will stretch to the width available to them (when not used with float)., and stretch height-wise along with content within it, with position absolute you would have to adjust its height, and adjust other elements to accommodate changes of height within this position absolute element. Link to comment Share on other sites More sharing options...
Zagadka Posted September 4, 2014 Author Share Posted September 4, 2014 Alright, I fixed most of the issues (I may have to go back and redo some of the absolute layout positions later) So, I put the eye bit and the div in the lower left into a container div. I need the div in the lower left corner that needs to stretch vertically to the size the news div takes up, which is variable. How do I match that height? 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