Setting up first responsive page

HTML & CSS
1

Still dabbling with responsive design, and would like to create my first fully responsive web page.

This is going to sound dumb, but I’m not sure where to begin as far as the base container.

I am looking at old, non-responsive web pages I wrote years ago, and I have things like Floats, Position: Relative, Overflow: hidden and other things that I am guessing are big no-no’s in modern web design.

For my first page, I would like to do the following…

  • Have a company name in the header
  • With a horizontal line that goes the full width of the page beneath it
  • Ideally have the header “frozen” so that as you scroll down, you can still see the header
  • The header should be responsive, so if I make the browser more narrow, the company name will remain left aligned and the horizontal line will simply get more narrow.
  • Then I need a page “container” to drop in all of the body content.

With the help of people like @coothead and @Ray.H, I have made some really neat responsive pages, but they weren’t fully responsive because I dropped the body content into my old-style web page containers that had things like Floats and Position:Relative.

This time I am trying to make a pure responsive “template” so i can then use that as a base for any new pages I create. (Plan to buy lots of books on this after X-mas, but in the mean time would appreciate some help here!)

I have been reading about FlexBox on MDN, and it seems like that should be the container I use for every responsve web page, but just because I sorta understand FlexBox doesn’t mean I am proficient enough yet to know when and where and how to implement it!

Could you guys help me get started on the above requirements?

This is about all I know right now…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>first_responsive.php</title>

  <style media="screen">
    body{
      background-color: #f9f9f9;
      font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
    }

  </style>
</head>

<body>
  <h1>My Company</h1>
  <div class="mast-line"></div>

</body>

</html>
2

Try this template which has been:

  1. W3.org HTML validated
  2. W3.org CSS Jigsawed
  3. FireFox CSS Plugin :slight_smile:

Source

<?php // OPTIONAL PHP Page
declare(strict_types=1);
# echo error_reporting(-1);
# echo ini_get('display_errors');

?><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>first_responsive.php</title>

<style media="screen">
body{
  background-color: #f3f3f3; color: #00f;
  font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
/* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
pre {
 white-space: pre-wrap;       /* css-3 */
}
.bd1 {border: solid 1px #ccc;}
.bgb {background-color: #bbb;}
.bgs {background-color: snow;}
.dib {display: inline-block;}
.fsl {font-size: large;}
.ftr {
  position: fixed; left: 0; bottom: 0;
}
.fwb {font-weight: 700;}
.mga {margin: 0 auto;}
.ooo {margin:0; padding: 0;}
.p42 {padding: 0.42em;}
.tac {text-align: center;} .tal {text-align: left;}
.w88 {width: 88%; max-width: 1024px;}.w99 {width: 100%;}
</style>
</head>

<body>
  <h1>My Company</h1>
  <div class="mast-line"></div>
  <div class="tac">
    <dl class="w88 dib bgs p42 bdr tal">
      <dt class="ooo bgb fsl fwb"> UpstateLeafPeeper </dt>
      <dd > 
        <pre>
Still dabbling with responsive design, and would like to create my first fully responsive web page.

This is going to sound dumb, but I’m not sure where to begin as far as the base container.

I am looking at old, non-responsive web pages I wrote years ago, and I have things like Floats, Position: Relative, Overflow: hidden and other things that I am guessing are big no-no’s in modern web design.

For my first page, I would like to do the following…

Have a company name in the header
With a horizontal line that goes the full width of the page beneath it
Ideally have the header “frozen” so that as you scroll down, you can still see the header
The header should be responsive, so if I make the browser more narrow, the company name will remain left aligned and the horizontal line will simply get more narrow.
Then I need a page “container” to drop in all of the body content.
With the help of people like @coothead and @Ray.H, I have made some really neat responsive pages, but they weren’t fully responsive because I dropped the body content into my old-style web page containers that had things like Floats and Position:Relative.

This time I am trying to make a pure responsive “template” so i can then use that as a base for any new pages I create. (Plan to buy lots of books on this after X-mas, but in the mean time would appreciate some help here!)

I have been reading about FlexBox on MDN, and it seems like that should be the container I use for every responsve web page, but just because I sorta understand FlexBox doesn’t mean I am proficient enough yet to know when and where and how to implement it!

Could you guys help me get started on the above requirements?

This is about all I know right now…        
</pre>
      </dd>
    </dl>
  </div>

  <div class="ftr w99 bgb tac">
    Footer goes here
  </div>
</body>

</html>

Output:

Screenshot%20from%202019-11-29%2012-06-06
Screenshot%20from%202019-11-29%2012-06-06826×778 58.9 KB

3

HTML will provide you with a pure responsive “template” :winky:

It is only your use of CSS that can spoil this idyllic state. :wonky:

Our deceased member @Felgall described the method to use…

Progressive enhancement:

  1. You write your page content as if both CSS and JavaScript are off.
  2. You write CSS to style the page the way you want it to look when
    JavaScript is off.
  3. You write additional CSS to change the way you want the page to
    look when JavaScript is turned on.
  4. You write CSS for the way you want the page to look when specific
    JavaScript commands are supported by the browser.
  5. You add a few lines of JavaScript to the head of the page to add
    the necessary classes to the html tag for the styles you wrote in
    steps 3 and 4 to be applied.

You may also find this article…

How to make a web page

…to be of interest. :biggrin:

coothead

1 Like
4

Thanks @John_Betong, but that doesn’t exactly meet what I described above.

With responsive design, is it okay to still use Float?

And do you still need to use Position: Relative?

5

A lot of the requirements were satisfied, fixed header can be achieved similar to the supplied fixed footer,

Validation links were supplied and the idea was to replace the existing content with new content and to test to see if it satisfies validation and keep within the content div.

Float and relative can be used but they are both relative to their immediate parents. Sample script is required,

Did you try new content and did it pass validation?

6
  1. Yes
  2. Yes, if it is it is required to complete a task in hand.

coothead

7

@John_Betong,

Here is my next attempt at things…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>sp_first_responsive_02.php</title>

  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;
    }
    
    h1, h2, h3, h4{
      padding: 0.5em 0 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    p{
      padding: 0 0 1em 0;
    }

    #containerMast_fixed{
      position: fixed;
      padding: 0 0 20px 0;
      width: 100%;
      height: 1em;
      background-color: #EEE;
    }
    
    #mastLine{
      border-bottom: solid 2px #000;
    }
    
    #containerBody{
      position: relative;
      margin: 250px 0 0 0;
    }
  </style>
</head>

<body>
  <div id="containerMast_fixed">
    <h1>My Company</h1>
    <div id="mastLine"></div>
  </div>
  
  <div id="containerBody">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

    <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

    <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>

    <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

    <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

    <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>

    <p>Aenean magna nisl, tempus sed quam sit amet, tincidunt euismod velit. Aenean eleifend, diam in ultricies pulvinar, justo eros viverra ligula, sit amet facilisis ipsum erat et metus. Nunc finibus, turpis ut hendrerit pharetra, leo risus sollicitudin mi, vel porttitor est diam eu odio. Mauris euismod, dolor quis molestie malesuada, libero mauris lobortis eros, eu euismod massa mi at tortor. Nulla dictum, metus eget pulvinar feugiat, leo enim varius mauris, nec tincidunt lorem neque at elit. Fusce sodales nisi arcu, eu porttitor enim lacinia id. Pellentesque aliquet eget augue vel sodales. Aliquam quis elementum mauris. Proin luctus luctus convallis. Pellentesque cursus dolor vel eleifend consequat. Integer metus nibh, pharetra id interdum in, accumsan sed leo. Ut tortor urna, placerat quis suscipit quis, convallis sit amet diam.</p>

    <p>Fusce varius nibh in maximus commodo. Fusce vel fermentum velit, et dictum tortor. Sed at ligula molestie, tempus diam non, auctor magna. Mauris odio magna, molestie vitae rhoncus et, mollis quis purus. Pellentesque feugiat turpis tristique, dictum lectus id, iaculis sapien. Maecenas ut maximus nulla. Nunc mattis risus erat, id consequat quam bibendum at. Aliquam ultrices egestas orci, lacinia porta ante efficitur in. Nulla eget enim lobortis, lobortis felis at, molestie mi. Aliquam placerat lorem metus, id finibus velit ultrices vitae. Vestibulum est nulla, malesuada sed interdum at, ultrices sit amet nisl. Nunc elementum vestibulum elementum. Proin auctor vulputate enim vitae vulputate. Integer lacinia urna sed ipsum consectetur, nec fermentum mi porta. Integer at ante quis sem ornare rutrum in vel massa.</p>

    <p>Mauris eget luctus dui. Maecenas fringilla enim vitae turpis eleifend gravida. Pellentesque ex arcu, porta ut lectus porta, imperdiet mollis metus. Nam maximus lectus ac dapibus lobortis. Cras ultricies tincidunt nunc, at malesuada eros interdum ut. Nullam sed ante ac erat gravida pretium. Duis elementum, magna venenatis scelerisque suscipit, turpis massa volutpat urna, vel sollicitudin mauris arcu vitae turpis. Nunc vehicula ultrices accumsan. Cras viverra libero urna, id suscipit mi blandit nec. Nam tincidunt arcu enim, semper fermentum quam porta ut. Pellentesque ornare non odio et pharetra. Curabitur in ornare ipsum.</p>

    <p>In vitae tellus sapien. Morbi nisl erat, facilisis sit amet eros vitae, blandit consequat quam. Quisque sed accumsan justo. Nam fermentum vulputate neque a tincidunt. Quisque malesuada mi eget est pretium venenatis. Nullam posuere nec lorem eu consectetur. Ut dictum pellentesque interdum. Nunc sapien orci, vestibulum sed finibus ac, aliquam a lectus. Fusce congue massa vitae fringilla ornare. Morbi ligula lacus, facilisis vel maximus non, aliquam nec augue. Sed rutrum posuere risus, sed consectetur ipsum scelerisque nec. Sed pretium magna ut tortor consequat, sed maximus dui tempor.</p>
  </div>

</body>

</html>

I cannot figure out how to get the fixed mast to work. :frowning:

Here are some things which confuse me…

1.) You would think that adding a bottom margin to #containerMast_fixed would give some breathing room between the fixed header and the body text.

2.) I tried adding a top margin to #containerBody but that seems to stretch out the mast like you are adding a top margin/padding to #containerMast_fixed.

3.) Do I need postion: relative on #contanerBody ?

4.) Anything else I should adjust to make this better CSS code?

8

Hi there UpstateLeafPeeper,

`

  1. No
  2. …
  3. No.
  4. Test amended code.
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>sp_first_responsive_02.php</title>

  <style media="screen">
*{
      margin: 0;
      padding: 0;
    }
    
body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;
    }
    
h1, h2, h3, h4{
      padding: 0.5em;
      /*font-weight: bold;*/
      /*text-align: left;*/
    }

p{
      padding: 0 1em 1em;
    }

#containerMast_fixed{
      position: fixed;
      top: 0;
      z-index: 1;
      padding: 0 0 1.25em 0;
      width: 100%;
      /*height: 1em;*/
      background-color: #EEE;
      border-bottom: solid 2px #999;
      box-shadow: 0 0.5em 0.5em rgba( 0, 0, 0, 0.3 );

    }
/*    
#mastLine{
      border-bottom: solid 2px #000;
    }
*/    
#containerBody{
      /*position: relative;*/
      margin: 6em 0 0 0;
    }
  </style>
</head>

<body>
  <div id="containerMast_fixed">
    <h1>My Company</h1>
    <!--<div id="mastLine"></div>-->
  </div>
  
  <div id="containerBody">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>

    <p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>

    <p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>

    <p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>

    <p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>

    <p>Vivamus vestibulum molestie lectus, ut tristique tellus imperdiet at. Vivamus pretium luctus diam in congue. Mauris urna quam, eleifend non magna eu, scelerisque pulvinar erat. Donec ac velit quam. Vivamus fringilla, ligula vel sodales iaculis, quam lorem auctor arcu, eget dictum enim lacus et sapien. Praesent nec ipsum nec velit rutrum ultrices. Nullam facilisis sem pretium felis maximus tempor. Morbi cursus mollis convallis. Curabitur vel justo consequat sapien gravida malesuada. Mauris sit amet arcu vel lacus condimentum finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum eu sapien quis interdum.</p>

    <p>Aenean magna nisl, tempus sed quam sit amet, tincidunt euismod velit. Aenean eleifend, diam in ultricies pulvinar, justo eros viverra ligula, sit amet facilisis ipsum erat et metus. Nunc finibus, turpis ut hendrerit pharetra, leo risus sollicitudin mi, vel porttitor est diam eu odio. Mauris euismod, dolor quis molestie malesuada, libero mauris lobortis eros, eu euismod massa mi at tortor. Nulla dictum, metus eget pulvinar feugiat, leo enim varius mauris, nec tincidunt lorem neque at elit. Fusce sodales nisi arcu, eu porttitor enim lacinia id. Pellentesque aliquet eget augue vel sodales. Aliquam quis elementum mauris. Proin luctus luctus convallis. Pellentesque cursus dolor vel eleifend consequat. Integer metus nibh, pharetra id interdum in, accumsan sed leo. Ut tortor urna, placerat quis suscipit quis, convallis sit amet diam.</p>

    <p>Fusce varius nibh in maximus commodo. Fusce vel fermentum velit, et dictum tortor. Sed at ligula molestie, tempus diam non, auctor magna. Mauris odio magna, molestie vitae rhoncus et, mollis quis purus. Pellentesque feugiat turpis tristique, dictum lectus id, iaculis sapien. Maecenas ut maximus nulla. Nunc mattis risus erat, id consequat quam bibendum at. Aliquam ultrices egestas orci, lacinia porta ante efficitur in. Nulla eget enim lobortis, lobortis felis at, molestie mi. Aliquam placerat lorem metus, id finibus velit ultrices vitae. Vestibulum est nulla, malesuada sed interdum at, ultrices sit amet nisl. Nunc elementum vestibulum elementum. Proin auctor vulputate enim vitae vulputate. Integer lacinia urna sed ipsum consectetur, nec fermentum mi porta. Integer at ante quis sem ornare rutrum in vel massa.</p>

    <p>Mauris eget luctus dui. Maecenas fringilla enim vitae turpis eleifend gravida. Pellentesque ex arcu, porta ut lectus porta, imperdiet mollis metus. Nam maximus lectus ac dapibus lobortis. Cras ultricies tincidunt nunc, at malesuada eros interdum ut. Nullam sed ante ac erat gravida pretium. Duis elementum, magna venenatis scelerisque suscipit, turpis massa volutpat urna, vel sollicitudin mauris arcu vitae turpis. Nunc vehicula ultrices accumsan. Cras viverra libero urna, id suscipit mi blandit nec. Nam tincidunt arcu enim, semper fermentum quam porta ut. Pellentesque ornare non odio et pharetra. Curabitur in ornare ipsum.</p>

    <p>In vitae tellus sapien. Morbi nisl erat, facilisis sit amet eros vitae, blandit consequat quam. Quisque sed accumsan justo. Nam fermentum vulputate neque a tincidunt. Quisque malesuada mi eget est pretium venenatis. Nullam posuere nec lorem eu consectetur. Ut dictum pellentesque interdum. Nunc sapien orci, vestibulum sed finibus ac, aliquam a lectus. Fusce congue massa vitae fringilla ornare. Morbi ligula lacus, facilisis vel maximus non, aliquam nec augue. Sed rutrum posuere risus, sed consectetur ipsum scelerisque nec. Sed pretium magna ut tortor consequat, sed maximus dui tempor.</p>
  </div>

</body>
</html>

coothead

9

@coothead,

Wow, very strange how the code works!

In this code…

    #containerMast_fixed{
      position: fixed;
      padding: 0 0 1.25em 0;
      width: 100%;
      background-color: #EEE;
    }
    
    #containerBody{
      position: relative;
      margin: 6em 0 0 0;
    }

It appears that if you don’t have a Top: 0; on #containerMast_fixed then it scoots down by the margin (6em) that is on #containerBody.

Why is that?!

Another strange thing is that if I add 1em margins to both containers, the right margin does not appear for #containerMast_fixed. Maybe that has something to do with it being position: fixed?

BTW, @John_Betong, thanks for the links, and yes my HTML and CSS validated.

10

CSS position:fixed instructs the div to be in a fixed position relative to its immediate parent but also requires the location of the exact position.

It appears from @coothead’s script there is a default left zero position but it is essential to specify top or bottom. The latter was used to prevent the footer from scrolling. I believe the default width acts like display:inline-block; The footer width was set at 100%. Try temporarily setting a background colour to ensure exactly what is being rendered.

11

@John_Betong,

It appears that without Top: 0 the Position: fixed container “floats” above my other container and mimics its position - for example, add a margin or padding on #containerBody and #containerMast_fixed moves with #containerBody.

I am also learning that margins seem to have limited use when working with containers. They either broke things with width: 100% or didn’t work at all.

Attached is what I have so far. It looks pretty good, but I’m concerned that I had to resolve my issues with padding and not margins.

sp_first_responsive_03.php (7.8 KB)

13

Here is the amended code, which includes the padding
being removed from <div id="containerBody"> and
replaced with margins and also the correction of a small
case of “divitis”. infestation :rofl:

sp_first_responsive_03.html (7.5 KB)

coothead

14

Your end product looks good, but I don’t see how it works with you removing width: 100% from #containerBody ??

Please explain…

Also, in a later version of this code, inside of #containerBody{ } I add a Flexbox like this…

.flexBox{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     margin: 0 auto;

Not sure why your #containerBody doesn’t collapse with no width?

Ah, yes, I see how I can leverage my H1 now.

Thanks! :slight_smile:

15

Well, this <div id="containerBody">, being a block-level
element, has 100% width by default. :winky:

coothead

16

DOH!!

So does that mean I can remove width: 100% from #containerMast_fixed as well?

Also, I sure seem to remember people placing width: 100% on stuff to make sure the container expanded to fill the screen and also adapted to different screen-sizes. So what was the logic behind that?

Hmmm…

17

I have made a tweak to your code, coothead, to use a css variable to replace the dependency between the height of the mast element and the container’s 6em upper margin. I find is useful to use variables in such cases, to that later down the road, if the mast gets larger for some reason, the container will automatically move away from it. Obviously a better answer would be that these dependencies weren’t in the layout at all, but when they are (in this case due to the mast being a fixed element out of the flow), at least they will be in one place rather than two.

test-resp.html (7.9 KB)

18

@tracknut,

Wow!

I think I follow what you are trying to accomplish here, but where does this variable come from?

Is that CSS?

Also, in my IDE it is complaining about “HTML file - Error parsing file” as well as “Unexpected token COLON found”

How do I get rid of those?

19

That’s a “css variable” - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

They are relatively new, but most browsers support them. As to the IDE, I can only assume it is not new enough to be able to parse the syntax. If it were me, I’d ignore the error and see if there’s an update to the IDE.

1 Like
20

No, you may not. :unhappy:

The position:fixed and position:absolute override
the element’s default display:block.

If you did, it’s width would be the width of the h1 element’s
text plus 4em padding. :wink:

coothead

1 Like
21

@coothead,

Thanks for the advanced knowledge!! :wink: