SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting rid of left over white space from relative positioned elements?

    I'm wanting to center the main div of my site and position other divs within it, but the divs with relative positioning are leaving their white space behind where they would normally be placed in the flow of the page, leaving a lot of empty space at the bottom of the page.

    Is there any way to get rid of that white space and still be able to accomplish the centering that I want?

    Thanks!

    Code:
    <html>
      <head>
        <title>
          jQuery background image fade-in test
        </title>
        <link href="css/jquery.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $('#backgroundDiv')
            .hide()
            .css({'backgroundImage':'url("images/winter.jpg")'})
            .fadeIn('slow');
          });
        </script>
      </head>
    
      <body>
        <div id="container">
          <div id="backgroundDiv"></div>
          <div id="mainCopy">
            <div id="navBG"></div>
            <div id="navigation">
              <ul id="navLinks">
                <li><a class="nav" href="">Home</a> | </li>
                <li><a class="nav" href="">Blog</a> | </li>
                <li><a class="nav" href="">Products</a> | </li>
                <li><a class="nav" href="">Video</a> | </li>
                <li><a class="nav" href="">Links</a></li>
              </ul>
            </div>
            <img id="logo" src="images/logo.png" />
          </div>
        </div>
      </body>
    </html>
    Code:
    body           {background-color:#3E5171;}
    #container     {width:100%;}
    #backgroundDiv {position:relative; height:800px; width:1024px; margin-right:auto; margin-left:auto;}
    #mainCopy      {position:relative; top:-790px; width:1024px; margin-right:auto; margin-left:auto;}
    #navBG         {position:relative; top:54px; height:40px; width:1024px; background-color:#5555FF; opacity:0.5;}
    #navigation    {position:relative; top:10px; height:40px; padding-right:10px; float:right;}
    #navLinks li   {display:inline; list-style-type:none;}
    #logo          {position:relative; top:-20px; left:10px;}
    John

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Yeah, don't use relative positioning/top to do flow and/or negative margin's job. Might also help to not have your CSS be a confusing blob of single lines... and it may also be of benefit to NOT use so many DIV, though I'd have to see it rendering. You aren't setting ANYTHING on #backgroundDIV that you couldn't be using #container for... you're declaring fixed heights on elements for christmas only knows what reason, you seem to have multiple completely unnecessary width declarations (since if the outer container has the width, the children expand to fit!), you've got classes on your anchors that you don't need (if they all get the same class inside a parent they do NOT NEED CLASSES)... and that's before we talk the goofy jquery bloat for some annoying animooted nonsense.

    I'd have to see what it is you're trying to pull off, but I have the suspicion there is little if any good reason for the markup there to be much more than:
    Code:
    </head><body>
    
    <div id="container">
    
    	<h1>
    		Site title
    		<span><!-- image replacement --></span>
    	</h1>
    	
    	<div id="mainMenuOpacityBG"></div>
    	
    	<ul id="mainMenu">
    		<li><a href="">Home</a></li>
    		<li><a href="">Blog</a></li>
    		<li><a href="">Products</a></li>
    		<li><a href="">Video</a></li>
    		<li class="last"><a href="">Links</a></li>
    	</ul>
    	
    <!-- #container --></div>
    
    </body></html>
    With this for CSS:

    Code:
    body {
    	text-align:center; /* center #pageWrapper IE 5.x */
    	background:#3E5171;
    }
    
    #pageWrapper {
    	width:976px; /* since 1024 is NOT 1024 friendly! */
    	margin:0 auto;
    }
    
    /* assuming 64px tall and sufficient width logo image */
    
    h1 {
    	position:relative;
    	padding:16x;
    	font:bold 32px/48px arial,helvetica,sans-serif;
    	zoom:1; /* trip haslayout, fix IE positioning bugs */
    }
    
    h1 span {
    	position:absolute;
    	left:0;
    	top:0;
    	width:100%;
    	height:64px;
    	background:url(images/logo.png) 0 0 no-repeat;
    }
    
    #mainMenu {
    	list-style:none;
    	font:bold 14px/20px arial,helvetica,sans-serif;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu a {
    	display:inline-block;
    	padding:0 4px 0 2px;
    	border-right:2px solid #000;
    }
    
    #mainMenu .last a {
    	padding-right:0;
    	border:none;
    }
    Though I'm guessing wildly since I'm not seeing what you're aiming for on appearance... I suspect you've GREATLY overthought how to build your markup/layout and are misusing/abusing relative positioning; which is why I can't even figure out what you're even trying to do with all that.

  3. #3
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    It's a test page. Sheesh! :)

    *chuckles*

    Thanks for the feedback.

    Ok, ignoring the title of my test page and all the spew about code formatting, let's get to the heart of it.

    Go here to see a PART of what I am trying to do: https://comfortinthecold.com/tests/ Please note all of the empty space below the background image.

    It's entirely possible that I'm over thinking it, however, I won't know that until I go through a few iterations of these tests and find out how to remove all that empty crap at the bottom.
    John

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, the fixed height background image falls into what I call "non-viable for web deployment" in concept. It's something you don't see done on a lot of successful websites for a reason. (like that one image alone being 2/3'rds what I consider the ideal page size all by itself)... likewise your logo image ALSO falls into the same category in my book since you'e using alpha transparent .png -- so you cannot do image replacement or have graceful degradation images off... Basically, the very concept of what you have for layout is flawed.

    Though I think what you are looking for is called 'min-height'... of course with no doctype you've got no chance of it EVER rendering the same cross browser... but let's take a stab at this...

    http://www.cutcodedown.com/for_other.../template.html

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/PHPJohn/

    is unlocked for easy access to the gooey bits and pieces. Tested working just fine all the way back to IE 5.5... I also changed the backgound image to fade at the bottom into a solid color for when content is taller than the image (which should be very likely with real content) and swapped out the alpha .png for a 8 bit palette one, so you don't need any 'assistance' to make it work IE7-. (and it shaves a couple bytes off it).

    Simplifies the markup WAY down and gets a proper heading in there -- with proper images off graceful degradation. The nested empty spans build most of your image appearance -- Most all of your DIV getting a giant axe swung at them.

    It's all APO inside the h1, except the menu -- which I ride up over the H1 with a negative top margin. You may end up wanting/needing a wrapper around the content below the menu though -- just to be sure it clears that right float; though honestly it should be a non-issue.


    Hope this helps.

  5. #5
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! I'm fairly new to CSS. I will go over this and post back with any questions.

    Your help is greatly appreciated.
    John

  6. #6
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DS60, or someone else, I have some follow-up questions.

    Forgive me for using divs again, but I'm not familiar with any other way, and I'm not sure what you are doing in the examples above.

    So, my questions are these:

    1 - Why do you reference the background image more than once? Shouldn't once be sufficient for the background?
    2 - If you look at this link again https://comfortinthecold.com/tests/, why would the text in a div with a defined dimension be WAY outside of that div's boundaries? It appears that the text itself flows as it would normally, even though it is placed within the div that shows up elsewhere?
    3 - Why can't you use an "id" on a span to make them work, instead of nesting them to make them unique?

    Code:
    /* null margins and padding to give good cross-browser baseline */
    html,
    body,
    address,
    blockquote,
    div,
    form,
    fieldset,
    caption,
    h1,h2,h3,h4,h5,h6,
    hr,
    ul,li,ol,
    table,tr,td,th,
    p,
    img {
      margin: 0;
      padding:0;
    }
    
    img,fieldset {
      border:none;
    }
    
    body {
      padding:    8px 0;
      text-align: center; /* center #pageWrapper IE 5.x */
      /*
        never trust font defaults for line-height or face
        I like mine taller anyhow...
      */
      font:       normal 100%/150% "times new roman",times,serif;
      background: #3E5171;
    }
    
    #pageWrapper {
      width:      976px; /* 1024 - 48 to be 1024 friendly! */
      min-height: 800px;
      margin:     0 auto;
      text-align: left;
      color:      #FFFFFF;
      background: #3F4C6E url(../images/pageWrapperBackground.jpg) top left no-repeat;
    }
    
    * html #pageWrapper {
      /*
        IE6- knows not the min-height, but will incorrectly
        treat height as such!
      */
      height:800px;
    }
    
    h1 {
      position:   relative;
      width:      100%; /* fix IE positioning bugs */
      font:       bold 32px/40px "times new roman",times,serif;
      color:      #FFFFFF;
      text-shadow:0 0 2px #000;
    }
    
    h1 span {
      position:  absolute;
      top:       0;
      left:      0;
      width:     100%;
      height:    144px;
      background:url(../images/pageWrapperBackground.jpg) top left no-repeat;
    }
    
    h1 a span {
      width:     360px;
      background:url(../images/H1Logo.png) 14px 28px no-repeat;
    }
    
    h1 span span {
      top:         64px;
      height:      40px;
      background:  #55F;
      opacity:     0.5;
      -moz-opacity:0.5;
      filter:      alpha(opacity=50);
    }
    
    h1 a {
      display:    block;
      width:      360px;
      padding:    64px 0 40px;
      text-indent:16px; /* can't trust padding here thanks to width */
      color:      #FFFFFF;
    }
    
    #productLinks {
      padding-left:2em;
      float:left;
    }
    
    #mainMenu a,
    #productLinks a {
      text-decoration:none;
      color:          #FFFFFF;
    }
    
    #mainMenu a:    active,
    #mainMenu a:    focus,
    #mainMenu a:    hover,
    #productLinks a:active,
    #productLinks a:focus,
    #productLinks a:hover {
      color:#FD8;
    }
    
    #mainMenu {
      list-style:none;
      float:     right;
      position:  relative; /* to depth sort over H1 */
      margin-top:-70px; /* ride up over h1 */
      font:      18px/20px "times new roman",times,serif;
    }
    
    #mainMenu li {
      display:inline;
    }
    
    #mainMenu a {
      float:          left;
      padding:        0 10px;
      text-decoration:none;
      border-right:   2px solid #000000;
    }
    
    #mainMenu .last a {
      border:0;
    }
    
    #mainCopy {
      border: 1px solid #000000;
      position:relative;
      float:  left;
      padding:5px;
      height: 615px;
      width:  800px;
      }
    
    #cart {
      border: 1px solid #000000;
      position:relative;
      top: 200px;
      width: 130px;
      height:50px;
      }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang = "en">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="en" />
        <title>
          jQuery background image fade-in test
        </title>
        <link type="text/css" rel="stylesheet" href="css/template.css" media="screen,projection,tv" />
        <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
          });
        </script>
      </head>
    
      <body>
        <div id="pageWrapper">
    
          <h1>
            <!-- empty spans are image sandbags, do not remove -->
            <span><span></span></span>
            <a href="#">
              Comfort in the Cold &trade;
              <span></span>
            </a>
          </h1>
    
          <ul id="mainMenu">
            <li><a href="">Home</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Products</a></li>
            <li><a href="">Video</a></li>
            <li class="last"><a href="">Links</a></li>
          </ul>
    
          <ul id="productLinks">
            <li style="list-style-type:none; font-size:20px; font-weight:bold; text-decoration:underline;">Products</li>
            <li><a href="">Rapture</a></li>
            <li><a href="">Cocoon</a></li>
            <li><a href="">Kits</a></li>
            <li><a href="">Instructions</a></li>
            <li><a href="">Hot Socks</a></li>
            <li><a href="">Hot Sock inserts</a></li>
            <li><a href="">Zebralight</a></li>
          </ul>
    
          <div id="mainCopy">Main copy</div>
          <div id="cart">Cart</div>
    
        </div><!-- #pageWrapper -->
      </body>
    </html>
    John

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PHP John View Post
    DS60, or someone else, I have some follow-up questions.

    Forgive me for using divs again, but I'm not familiar with any other way, and I'm not sure what you are doing in the examples above.
    Nothing wrong with DIV -- it's best for grouping a bunch of sectional elements.... Just don't throw it around block level containers when you haven't applied style to those containers. That's the point of the whole semantic markup/separation of presentation from content thing -- say what things are using semantic tags, NOT what they are going to look like. Appearance? that's CSS' job. It's why as a rule of thumb I consider it flawed to be making a layout in CSS or to screw around in Photoshop making pretty pictures before you have the ENTIRE content (or a reasonable facsimile) marked up semantically and logically grouped. Content should dictate the layout, not the other way around... and as I always say, if you are choosing your HTML tags based on their default appearance, you're probably choosing the wrong tags.

    Quote Originally Posted by PHP John View Post
    1 - Why do you reference the background image more than once? Shouldn't once be sufficient for the background?
    Painters algorithm... View the page images disabled with CSS on -- the entire reason to use image replacement is so that if bandwidth hogging images are turned off, the user still gets something meaningful to look at. The first span overlaps the text, and uses the #pageWrapper background to erase it. If we didn't do that, the text would show through the purple opacity span and the transparent logo span. Text is there for non-CSS or images disabled users; we then hide it behind the image-replacement spans. If you were using a pre-composited or opaque logo file, that extra call would be unnecessary... part of why as a rule I don't use transparencies in my own designs a whole lot... waste of bandwidth, extra code...

    Quote Originally Posted by PHP John View Post
    2 - If you look at this link again https://comfortinthecold.com/tests/, why would the text in a div with a defined dimension be WAY outside of that div's boundaries? It appears that the text itself flows as it would normally, even though it is placed within the div that shows up elsewhere?
    It's the float. DIV pass underneath floats... their CDATA does not. Not sure where you want cart (or maincopy for that matter), but a clear:both would fix it if you want it below it. Not sure why the text isn't appearing next to it, but the relpo+top on Cart is the most likely culprit. again, relative positioning + top/left/right/bottom is rarely if ever used in CSS layouts; best left for the handful of times you want to manually do something like a drop shadow with a double-nest.

    Float behaviors take a while to master, but they're the cornerstone of most CSS based layouts.

    Quote Originally Posted by PHP John View Post
    3 - Why can't you use an "id" on a span to make them work, instead of nesting them to make them unique?
    You could... but it's more markup. More markup bad... See, CSS is cached across page-loads on a site while markup is not. You use elements that have the same style across several pages, putting it in the CSS not only handles the current page, it pre-caches the others... as such having more CSS instead of more HTML will save you bandwidth every time you have a visitor that's anything more than a bounce. (see Yahoo's numbers used to justify the use of the YUI compressor which say 20% of their pageviews come in cache empty -- which would mean the average visitor goes to five pages per visit) -- it's bad enough we're wasting span to do all that, something we could probably skip IE7 (or is it 8... I can never remember which) didn't completely screw up depth sorting generated content.

    CSS 101 -- do not waste classes in your markup if you can style off a parent element using inheritance. This is why things like:
    Code:
    <div id="nav">
      <ul id="navUL">
        <li class="navLI"><a href="#" class="navA">Home</a></li>
        <li class="navLI"><a href="#" class="navA">Forums</a></li>
        <li class="navLI"><a href="#" class="navA">Links</a></li>
        <li class="navLI"><a href="#" class="navA">About</a></li>
        <li class="navLI"><a href="#" class="navA">Contact</a></li>
      </ul>
    </div>
    ... is laughably bad and shows a failure to grasp the basics of the "cascading" part of CSS... even if it is common practice amongst developers like the nimrods who wrote turdpress (to the point it's hardcoded outside their theming system)

    Side note -- avoid vague/meaningless filenames on your CSS like "style" or "template" -- since that doesn't help you know what target it's for. There's a reason I call mine "screen.css" -- to go hand in hand with "print.css" and "handheld.css" -- since that's what the media attribute is for.

    Oh, and on your demo, you forgot to close HTML. Yer in strict now, no skipping tags allowed

  8. #8
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DS60,

    Thanks! You've given me more to digest. I'll be back.
    John

  9. #9
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DS60,

    1. When are you going to write your book?
    2. Some of the terminology you use is foreign to me. I may call them by something different.


    • The acronym CDATA = "contained data"?
    • "Sectional elements" = tags like h1, h2, h3, input, form, p, ul, etc.?
    John

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PHP John View Post
    [*]The acronym CDATA = "contained data"?
    Character Data -- basically in HTML, that's anything that isn't a tag. In the DOM (document object model) used to build/access the page by the browser (and javascript) CDATA get's it's own child node (element) under the parent tag. As much as the art f... f... folks don't want it to be true, text is the only first class citizen on the web -- so CDATA, aka plaintext, is probably the most important thing on a page... folllowed by putting tags around that CDATA to say what it is. Headings for starts of subsections, paragraphs on actual grammatical paragraphs (common mistake you'll see -- semantic markup is NOT about slapping P around everything).

    Quote Originally Posted by PHP John View Post
    [*]"Sectional elements" = tags like h1, h2, h3, input, form, p, ul, etc.?
    Just elements that all belong to the same 'section'... be it CDATA or tags. DIV actually means DIVISION, it's there to divide code into sections, without applying any extra meaning to that content. It's why I consider it superior to the allegedly semantic new tags from HTML 5 like 'article' and 'section' to be pointless redundant crap -- if you're using heading tags properly and paragraph tags properly and the occasional HR properly (HR indicates a change of topic, best used when the new section doesn't have a higher order or same order heading) there should be no reason to apply more meaning atop the already semantic tags. When you already have meaning, you don't need more!

    ... and that's the thing about both DIV and SPAN, they're semantically neutral and exist solely as hooks to apply 'unspecified style' without screwing up the tags that are applying meaning.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •