Jump to content


Photo

Shifting elements


  • Please log in to reply
6 replies to this topic

#1 BobK

BobK

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 30 January 2017 - 08:25 PM

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....cebook30x30.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&copy; 2017 Bob Kefurt</sub></p>   </div>   </footer>   </body>   </html>

 



#2 davej

davej

    davej

  • Moderator
  • PipPipPipPipPip
  • 3,892 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning web development.

Posted 30 January 2017 - 08:45 PM

You should paste that code into a codeblock...

 

Hmmm... I see what you are saying. Something odd happens when you put a block inside an inline-block.

<!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>   
  
 <body class="clearfix">   
 
 <header>   
 <img src="_img/atomic_logo.png" width="100" height="125" class="pjLogo" alt="company logo">   
 <h1 class="pj_header">Blog Home</h1>   
 </header>  
 
 <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.sslfacebook30x30.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%20Interest">PuJy@atomicserver.com</a>
 <br><br>   
 <sub>Copyright&copy; 2017 Bob Kefurt</sub>
 </p>   
 </div>   
 </footer>   
 </body>   
 </html>

This concludes this test of our sanity -- we will now return to our regular programming.


#3 davej

davej

    davej

  • Moderator
  • PipPipPipPipPip
  • 3,892 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning web development.

Posted 30 January 2017 - 11:05 PM

The easy fix seems to be just to use float rather than inline-block...

 .summaryBox { 
 float:left;
 width: 20%; 
 height: 250px; 
 margin: 1em 1em 1em 2em; 
 padding: 0; 
 border: 1px solid black; 
 }   
 footer{clear:both;}

This concludes this test of our sanity -- we will now return to our regular programming.


#4 dsonesuk

dsonesuk

    My username is not sacred member! LOOK UP

  • Members
  • PipPipPipPipPipPipPip
  • 8,375 posts
  • Gender:Male

Posted 31 January 2017 - 01:08 AM

Inline elements are initially set to a vertical alignment default of baseline, and that is what you are seeing the text showing at baseline, use vertical-align: top; to fix.


Fed-up with those annoying ads at top of this forum, Try AdBlock Plus, guaranteed to remove these ads.


#5 BobK

BobK

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 31 January 2017 - 01:17 AM

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. 



#6 CNT

CNT

    Member

  • Members
  • PipPip
  • 156 posts

Posted 15 February 2017 - 08:56 PM

Maybe you need to use FRAME instead?



#7 dsonesuk

dsonesuk

    My username is not sacred member! LOOK UP

  • Members
  • PipPipPipPipPipPipPip
  • 8,375 posts
  • Gender:Male

Posted 16 February 2017 - 01:23 AM

Frame? Or iframe maybe, either way I can't see how using either of these would help in this situation.

On the note about block in inline-block, block elements can be used in inline-block elements with no problem.

Fed-up with those annoying ads at top of this forum, Try AdBlock Plus, guaranteed to remove these ads.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users