Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Video background header: buttons not working + text not selectable

    Hey there guys,
    I hope that this post finds you all keeping well, and that you are having a great day.

    I am a CSS newbie who is coding a header with a video background. The other elements in this header are two blocks of text (<h1> + <span>) and a button.

    I am experiencing the following problems:

    1. The button background is displaying but its behaviours (hover, click etc.) are not working.
    2. The text is displaying, but it cannot be selected.

    The header can be seen at https://mediolana.myshopify.com/ (password: Ermedin14;).

    The HTML markup is as follows:

    <body>
    <!-- Content -->
    <article>
    <br><br><br><br><h1 style="font-size:50px">GET HIGHER GRADES FASTER!™ <br />
    </font></font><font face="Franklin Gothic Medium"><b><font size="4">
    <span>Grab the world's only educational product featuring five international fashion models.</span></h1></b>
    <center><a href="http://mediolana.com"><button class="button" style="vertical-align:middle"><span>➠Order Now! </span></button></center></a>
    </article>
    <!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback -->
    <video autoplay loop id="video-background" muted plays-inline>
    <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    </video>
    </body>

    I would be sincerely grateful for any guidance that you guys may have.

    With very best wishes/AM

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,954
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    Good Morning Alex,
    Welcome to the forums. Hope you use us as your go to while you learn HTML/CSS
    First: What your using to learn HTML/CSS is from the last century. Start over again here is a good (even thou some one on this site hates it - he'll be along in a bit to condemn it) https://www.w3schools.com/
    Second: When you open a number of tags you close them in the reverse order. Last opened is the first to be closed. You do this wrong in a few places.
    You have
    Code:
    <center><a href="http://mediolana.com"><button class="button" style="vertical-align:middle"><span>➠Order Now! </span></button></center></a>
    S/B:
    Code:
    <center><a href="http://mediolana.com"><button class="button" style="vertical-align:middle"><span>➠Order Now! </span></button></a></center>
    Third: aesthetically speaking, your video is too large. Needs to be smaller - less height.
    Fourth: Why all the <span>s you have nothing in them?
    Fifth: Can't get into the site - It asks for email address and not a password.

    but its behaviours (hover, click etc.) are not working.
    You don't have those behaviors defined anywhere, so they won't work.

    The text is displaying, but it cannot be selected.
    Don't know what that means.

    Here is a corrected 21 cenurty reworking of the text - no vid.:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
        font: bold 3.1rem serf;
        margin-top: 120px;
    }
    #myHeader h2 {
        font:bold 1.13rem Franklin Gothic Medium;
    }
    .button {
      background-color: #008cba;
      border: none;
      color: white;
      //padding: 10px 0;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      font-size: 16px;
    }
    #tom{
    display: flex;
    justify-content: center;
    }
    .button:hover{
        background-color: pink;
        color:black;
    }
    </style>
    </head>
    
    <body>
    
    <first id="myHeader">
    <h1>GET HIGHER GRADES FASTER!™</h1>
    <h2>Grab the world's only educational product featuring five international fashion models.</h2>
    </first>
    
    <div id="tom">
    <form action="http://mediolana.com">
    <input class="button" type="submit" value="➠Order Now!"></input>
    </form>
    </div>
    
    <!-- Below not looked at for accuracy --> 
    <!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback
    <video autoplay loop id="video-background" muted plays-inline>
    <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    </video> -->
    </body> 
    
    </html>
    Last edited by sunfighter; Jan 31st, 2019 at 08:09 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. Users who have thanked sunfighter for this post:

    Alex Maxim (Jan 31st, 2019)

  4. #3
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Good Morning Alex,
    Welcome to the forums. Hope you use us as your go to while you learn HTML/CSS
    First: What your using to learn HTML/CSS is from the last century. Start over again here is a good (even thou some one on this site hates it - he'll be along in a bit to condemn it) https://www.w3schools.com/
    Second: When you open a number of tags you close them in the reverse order. Last opened is the first to be closed. You do this wrong in a few places.
    You have
    Code:
    <center><a href="http://mediolana.com"><button class="button" style="vertical-align:middle"><span>➠Order Now! </span></button></center></a>
    S/B:
    Code:
    <center><a href="http://mediolana.com"><button class="button" style="vertical-align:middle"><span>➠Order Now! </span></button></a></center>
    Third: aesthetically speaking, your video is too large. Needs to be smaller - less height.
    Fourth: Why all the <span>s you have nothing in them?
    Fifth: Can't get into the site - It asks for email address and not a password.

    You don't have those behaviors defined anywhere, so they won't work.

    Don't know what that means.

    Here is a corrected 21 cenurty reworking of the text - no vid.:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
        font: bold 3.1rem serf;
        margin-top: 120px;
    }
    #myHeader h2 {
        font:bold 1.13rem Franklin Gothic Medium;
    }
    .button {
      background-color: #008cba;
      border: none;
      color: white;
      //padding: 10px 0;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      font-size: 16px;
    }
    #tom{
    display: flex;
    justify-content: center;
    }
    .button:hover{
        background-color: pink;
        color:black;
    }
    </style>
    </head>
    
    <body>
    
    <first id="myHeader">
    <h1>GET HIGHER GRADES FASTER!™</h1>
    <h2>Grab the world's only educational product featuring five international fashion models.</h2>
    </first>
    
    <div id="tom">
    <form action="http://mediolana.com">
    <input class="button" type="submit" value="➠Order Now!"></input>
    </form>
    </div>
    
    <!-- Below not looked at for accuracy --> 
    <!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback
    <video autoplay loop id="video-background" muted plays-inline>
    <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    </video> -->
    </body> 
    
    </html>
    Dear Mr Sunflghter,
    Firstly, thank you very much indeed for your exceptionally kind response, which is enormously appreciated!

    Secondly, please accept my apologies for my poor explanation of the situation. As you correctly allude to, my HTML is sort of antediluvian and incredibly ropey. (In a previous life I was actually a web designer, but I used a technology called Macromedia Flash; sadly, I have not worked in this field for nearly 20 years.) Your guidance is greatly valued, and we will be sure to try and incorporate the new styles that you have so kindly set out in the final version.

    I have created a pen which may shed some light on the scenario:

    https://codepen.io/anon/pen/qgrEPw

    As I hope you can see from the above link, the main problem is that the button is not working as per the code, and I have no real idea why.

    The text is also not selectable - as in, you can't copy and paste it - which leads me to suspect that both the text and the button are somehow 'behind' the video background.

    I read something somewhere about a 'z element' tag, but my tinkering did more harm than good.

    Do you (or anyone else) have any idea as to how to bring the text elements and the button to the foreground?

    With very best wishes/AM

  5. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,954
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    You just looked at the code I gave. You should run it - put it in a browser. The button I gave you works - try it.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. Users who have thanked sunfighter for this post:

    Alex Maxim (Feb 1st, 2019)

  7. #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,451
    Thanks
    3
    Thanked 608 Times in 594 Posts
    Hi there Alex Maxim,

    your .mov video is the wrong format, it needs to be .mp4.

    At 51.5MB, it is also unacceptably too large.

    Also note that video backgrounds should really be avoided whatever the size.

    Check out this link...

    Alex_Maxim.zip

    ...which contains a 6.15MB mp4 video conversion. which is still too large though.

    coothead
    ~ the original bald headed old fart ~

  8. Users who have thanked coothead for this post:

    Alex Maxim (Feb 1st, 2019)

  9. #6
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    You just looked at the code I gave. You should run it - put it in a browser. The button I gave you works - try it.
    Dear Mr Sunfighter,
    The code you kindly wrote out is great insofar as the button and text work perfectly. The only problem was that in your version, we couldn't see our video background anywhere.

    In our earlier version (https://codepen.io/anon/pen/qgrEPw), we can see the video background and the text + button. The issue we have in the earlier version is that the text + button are not active or in the foreground, and we don't know why. We were thinking it might be something to do with the order of the CSS elements, but it seems this is not the case.

    Basically, we would be delighted to use your code if we could see our video background. Alternatively, if you can see what we are doing wrong in our code at https://codepen.io/anon/pen/qgrEPw, please do say. We are sincerely grateful for your guidance.

    With very best wishes/AM

  10. #7
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Alex Maxim,

    your .mov video is the wrong format, it needs to be .mp4.

    At 51.5MB, it is also unacceptably too large.

    Also note that video backgrounds should really be avoided whatever the size.

    Check out this link...

    Alex_Maxim.zip

    ...which contains a 6.15MB mp4 video conversion. which is still too large though.

    coothead
    Dear Mr Coothead,
    Thank you very much indeed for your kind message and compressed file, which is enormously appreciated.

    You are absolutely correct about the file size.

    Re: video backgrounds more generally, we were strongly considering using a still image instead.

    However, when we tried out the following W3 Schools Hero Image tutorial, for some reason we just could not get our background image to display:

    https://www.w3schools.com/howto/tryi...css_hero_image

    We input our image as follows:

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster! Dani1 Header (Alex Maxim).png");

    Are we doing something wrong here?

    Additionally, are video backgrounds worse than still images for conversion reasons? We have read conflicting articles on this issue from respected sources.

    With very best wishes/AM

  11. #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,451
    Thanks
    3
    Thanked 608 Times in 594 Posts
    Hi there Alex Maxim,


    your background-image link does not show an image.

    Also, you really need to simplify this...

    Higher Grades Faster! Dani1 Header (Alex Maxim).png

    ...to something better, say...

    alex-maxim.png

    coothead
    Last edited by coothead; Feb 1st, 2019 at 09:54 PM.
    ~ the original bald headed old fart ~

  12. Users who have thanked coothead for this post:

    Alex Maxim (Feb 2nd, 2019)

  13. #9
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,954
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    @ In post two just before the code block, I wrote this line:
    Here is a corrected 21 cenurty reworking of the text - no vid.:
    This is why you don't see it.
    Add to that if you looked at the code block you would see
    Code:
    <!-- Below not looked at for accuracy --> 
    <!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback
    <video autoplay loop id="video-background" muted plays-inline>
    <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    </video> -->
    The video is commented out, so no show in browser.

    In your code from post one the video appears under the section I worked on.

    What do you think of this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
        font: bold 3.1rem serf;
        margin-top: 120px;
    }
    #myHeader h2 {
        font:bold 1.13rem Franklin Gothic Medium;
    }
    .button {
      background-color: #008cba;
      border: none;
      color: white;
      //padding: 10px 0;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      font-size: 16px;
    }
    #tom{
    display: flex;
    justify-content: center;
    display: :inline-block;
    }
    .button:hover{
        background-color: pink;
        color:black;
    }
    #container{
    	object-fit: cover;
    }
    video{
    position: absolute;
    top:0px;
    z-index: -1;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<first id="myHeader">
    		<h1>GET HIGHER GRADES FASTER!™</h1>
    		<h2>Grab the world's only educational product featuring five international fashion models.</h2>
    	</first>
    
    	<div id="tom">
    		<form action="http://mediolana.com">
    			<input class="button" type="submit" value="➠Order Now!"></input>
    		</form>
    	</div>
    	<video autoplay loop id="video-background" muted plays-inline>
    		<source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    	</video>
    </div>
    </body> 
    </html>
    Again => I did not check anything in the video section, just uncommented and positioned it.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  14. Users who have thanked sunfighter for this post:

    Alex Maxim (Feb 2nd, 2019)

  15. #10
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Alex Maxim,


    your background-image link does not show an image.

    Also, you really need to simplify this...

    Higher Grades Faster! Dani1 Header (Alex Maxim).png

    ...to something better, say...

    alex-maxim.png

    coothead
    Dear Mr Coothead,
    Many thanks for your kind message, which is sincerely appreciated.

    We tried the code with a different image which is accessible from Google:

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://mediolana.files.wordpress.com/2018/12/cropped-H12019altheader.png");

    However, no image is showing. Please see the following link:

    https://codepen.io/anon/pen/YBVrNw

    Have we got the format of the URL wrong, or is there something else amiss?

    With very best wishes/AM

  16. #11
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    @ In post two just before the code block, I wrote this line:This is why you don't see it.
    Add to that if you looked at the code block you would see
    Code:
    <!-- Below not looked at for accuracy --> 
    <!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback
    <video autoplay loop id="video-background" muted plays-inline>
    <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    </video> -->
    The video is commented out, so no show in browser.

    In your code from post one the video appears under the section I worked on.

    What do you think of this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
        font: bold 3.1rem serf;
        margin-top: 120px;
    }
    #myHeader h2 {
        font:bold 1.13rem Franklin Gothic Medium;
    }
    .button {
      background-color: #008cba;
      border: none;
      color: white;
      //padding: 10px 0;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      font-size: 16px;
    }
    #tom{
    display: flex;
    justify-content: center;
    display: :inline-block;
    }
    .button:hover{
        background-color: pink;
        color:black;
    }
    #container{
    	object-fit: cover;
    }
    video{
    position: absolute;
    top:0px;
    z-index: -1;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<first id="myHeader">
    		<h1>GET HIGHER GRADES FASTER!™</h1>
    		<h2>Grab the world's only educational product featuring five international fashion models.</h2>
    	</first>
    
    	<div id="tom">
    		<form action="http://mediolana.com">
    			<input class="button" type="submit" value="➠Order Now!"></input>
    		</form>
    	</div>
    	<video autoplay loop id="video-background" muted plays-inline>
    		<source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
    	</video>
    </div>
    </body> 
    </html>
    Again => I did not check anything in the video section, just uncommented and positioned it.
    Dear Mr Sunfighter,
    Thank you very much indeed for your comprehensive explanation, which is enormously appreciated.

    We have tried out the revised code that you kindly posted. It is almost perfect. The text is now selectable, and the button works brilliantly. A million thanks!

    There is just one slight problem: the part of the page directly under the header is now seeping into it:

    -screen-shot-2019-02-02-11-40-30-jpg

    At first, we got around this by typing the <br> tag 35 times at the top of the section directly below the header. However, we then tried the following code:

    <p style="margin-top: 20.5cm">

    which seems a much more elegant solution.

    With very best wishes/AM

  17. #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,451
    Thanks
    3
    Thanked 608 Times in 594 Posts
    Hi there Alex Maxim,

    as the image link is now good, I would assume that you
    must have made an error with the codepen thingy.

    Be that as it may, I would have coded it responsively
    something like this...


    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>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    html {
        box-sizing: border-box;
     }
    
    *, *::before, *::after {
        box-sizing: inherit;
     }
    
    body, html {
        height: 100%;
        margin: 0;
        font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #header {
        display: table;
        width:100%;
        height: 50%;
        background-image:linear-gradient(rgba(0, 0, 0, 0.5) , rgba(0, 0, 0, 0.5)),
          url(https://mediolana.files.wordpress.com/2018/12/cropped-H12019altheader.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
     }
    
    #header > div {
        display: table-cell;
        padding: 1em;
        vertical-align: middle;
        color: #fff;
        text-align: center;
     }
    
    h1 {
        font-size: 3.125em;
        line-height: 1em;
     }
    
    #header button {
        display: inline-block;
        padding: 0.625em 1.5em;
        border: 0;
        color: #000;
        background-color: #ddd;
        text-align: center;
        cursor: pointer;
     }
    
    #header button:hover,
    #header button:active {
        background-color: #555;
        color: #fff;
     }
    
    #content {
        padding: 1em;
     }
    </style>
    
    </head>
    <body> 
    
     <div id="header">
      <div>
        <h1>I am John Doe</h1>
        <p>And I'm a Photographer</p>
        <button>Hire me</button>
      </div>
     </div>
    
     <div id="content">
      <h2>Page Content..</h2>
     </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  18. Users who have thanked coothead for this post:

    Alex Maxim (Feb 2nd, 2019)

  19. #13
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,954
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    One of the problems with using positioning, it pulls the object out of the normal flow of things and almost always depends the content use of it to make things fit. I personally would have used css grid.
    Anyway I re - positioned elements in the HTML and changed things in the CSS. You can use margin-top again as you like.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #myHeader h1 {
        font: bold 3.1rem serf;
        margin-top: 120px;
    }
    #myHeader h2 {
        font:bold 1.13rem Franklin Gothic Medium;
    }
    .button {
      background-color: #008cba;
      border: none;
      color: white;
      text-align: center;
      display: inline-block;
      border-radius: 12px;
      font-size: 16px;
    }
    #the_button{
    display: flex;
    justify-content: center;
    display: height : ;
    width : ;inline-block;
    }
    .button:hover{
        background-color: pink;
        color:black;
    }
    #container{
    	object-fit: cover;
    }
    #top_main{
    position: absolute;
    top:0px;
    left:20px;
    }
    #AllTheRest{
        color:red;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
        <video autoplay loop id="video-background" muted plays-inline>
            <source src="http://mediolana.com/sites/all/themes/Mediolana/images/Advertising/HGFLP/Higher Grades Faster!™ (Mediolana® Productivity + Organisation Luxury Product Secret Launch™ Movie).mov" type="video/mp4">
        </video>
    <div id="top_main">
    	<div id="myHeader">
    		<h1>GET HIGHER GRADES FASTER!™</h1>
    		<h2>Grab the world's only educational product featuring five international fashion models.</h2>
    	</div>
    
    	<div id="the_button">
    		<form action="http://mediolana.com">
    			<input class="button" type="submit" value="➠Order Now!"></input>
    		</form>
    	</div>
    </div>
    </div>
    <div id="AllTheRest">
        <p>All the news that fits</p>
        <p>All the news that fits</p>
        <p>All the news that fits</p>
        <p>All the news that fits</p>
        <p>All the news that fits</p>
    </div>
    </body> 
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  20. Users who have thanked sunfighter for this post:

    Alex Maxim (Feb 2nd, 2019)

  21. #14
    New Coder
    Join Date
    Jan 2019
    Location
    Europe
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Alex Maxim,

    as the image link is now good, I would assume that you
    must have made an error with the codepen thingy.

    Be that as it may, I would have coded it responsively
    something like this...


    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>untitled document</title>
    
    <!--<link rel="stylesheet" href="https://www.codingforums.com/screen.css" media="screen">-->
    
    <style media="screen">
    html {
        box-sizing: border-box;
     }
    
    *, *::before, *::after {
        box-sizing: inherit;
     }
    
    body, html {
        height: 100%;
        margin: 0;
        font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
     }
    
    #header {
        display: table;
        width:100%;
        height: 50%;
        background-image:linear-gradient(rgba(0, 0, 0, 0.5) , rgba(0, 0, 0, 0.5)),
          url(https://mediolana.files.wordpress.com/2018/12/cropped-H12019altheader.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
     }
    
    #header > div {
        display: table-cell;
        padding: 1em;
        vertical-align: middle;
        color: #fff;
        text-align: center;
     }
    
    h1 {
        font-size: 3.125em;
        line-height: 1em;
     }
    
    #header button {
        display: inline-block;
        padding: 0.625em 1.5em;
        border: 0;
        color: #000;
        background-color: #ddd;
        text-align: center;
        cursor: pointer;
     }
    
    #header button:hover,
    #header button:active {
        background-color: #555;
        color: #fff;
     }
    
    #content {
        padding: 1em;
     }
    </style>
    
    </head>
    <body> 
    
     <div id="header">
      <div>
        <h1>I am John Doe</h1>
        <p>And I'm a Photographer</p>
        <button>Hire me</button>
      </div>
     </div>
    
     <div id="content">
      <h2>Page Content..</h2>
     </div>
    
    </body>
    </html>

    coothead
    Dear Mr Coothead,
    This looks perfectly coded – many, many thanks! The picture now shows up in our editor:

    -screen-shot-2019-02-02-19-50-22-jpg

    We think there might be a problem with accessing the previous image files on our server, so we will endeavour to get around that by using another Internet location to host the images.

    With very best wishes/AM

  22. #15
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,451
    Thanks
    3
    Thanked 608 Times in 594 Posts

    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~


 
Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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