Jump to content


  • Content count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About BobK

  • Rank
  1. Shifting elements

    Sorry about not using the code block, first time here and I was at work not much time to post. I thought about using float, and started with inline-block since I just found out about it. Is there a problem with a block inside a line-block? a block inside a block shouldn't matter with regard to positioning should it? I also read about flex-box I may tinker with that and see what happens. I'm not worried about backward compatibility with this project.
  2. Shifting elements

    Hi I am new to HTML and CSS and I am using Display: inline-block to layout some article elements, and when I put an h3 header in the first box it shifts it's position. and I cannot figure out why. I've read that inline-block does not like width / height values is this true? Here's the page code: <!DOCTYPE HTML> <html lang="en"> <head> <title>Blog - Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link href="_css/pj.css" type="text/css" rel="stylesheet"> <style> article { padding: 0; } .summaryBox { display: inline-block; width: 20%; height: 250px; margin: 1em 1em 1em 2em; padding: 0; border: 1px solid black; } .pgBanner { opacity: 0.5; filter: alpha(opacity=50); } /* For IE8 and earlier */ .artBanner ( position: relative; ) </style> </head> <header> <img src="_img/atomic_logo.png" width="100px" height="125px" class="pjLogo" alt="company logo"> <h1 class="pj_header">Blog Home</h1> </header> <body class="clearfix"> <nav id="headNav" class="upperBar headNav ulBars"> <ul id="topList"> <li><a href="about.html">About</a></li> <li><a href="blog_home.html">Blog</a></li> <li><a href="faq.html">Home</a></li> </ul> </nav> <section class="sumFont"> <h2>BLOG Under Construction</h2> <article class="summaryBox"> <h3>Heading</h3> </article> <article class="summaryBox"></article> <article class="summaryBox"></article> <article class="summaryBox"></article> <article class="summaryBox"></article> <article class="summaryBox"></article> </section> <footer> <nav id="footNav" class="lowerBar footNav ulBars"> <ul id="bottomList"> <li><a href="about.html">About</a></li> <li><a href="blog_home.html">Blog</a></li> <li><a href="faq.html">Home</a></li> </ul> </nav> <div id="footContact"> <br> <a style="margin: 20% 0 0 50%" target="_blank" title="Follow me on facebook" href="http://www.facebook.com/bob.kefurtii"><img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/facebook30x30.png" border="0"></a> <p style="text-align: center"> Plutonim Jelly<br> 94 Atomic way<br> Sparkling PU, 239239<br> Office: (555) 888-8080<br> Email: <a href="mailto:someone@example.com?Subject=New Interest">PuJy@atomicserver.com</a><br><br> <sub>Copyright© 2017 Bob Kefurt</sub></p> </div> </footer> </body> </html>