Sun, 2016-10-02 08:25
Hello,
I'm trying to create a header in the style of Amazon or Facebook, so that you have a background with width to fit the size of the display, but a specific height. I try to do that, and it looks OK when the browser is at default 100% zoom, but when I start zooming in, the elements start to go on top of each other, and basically it's a mess.
In my header, there's the Website name and to the right there is the login form (User ID and Password). How can I make them stay? (I also created a wrapper to fit the entire display so I will just see the background all the time)
Here is the code:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { height: 100%; margin: 0; } #wrapper { min-height:100%; background-color: d6e4f9; } #header { position: absolute; width: 100%; height: 10%; background-color: #6699ff; margin: 0; } #header h1 { position: absolute; font-size: 2em; color:#e5e4d7; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; margin: 0; top: 40%; left: 23%; } form { position: absolute; top: 45%; right: 23%; font-size: 1em; color:#e5e4d7; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; margin:0; padding:0; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Sitename</h1> <form method="POST"> <label>Username:<input type="text" name="firstname"></label> <label>Password:<input type="password" name="lastname"></label> <input type="submit" value="Log In"> </form> </div> </div> </body>
Sun, 2016-10-02 17:57
#1
position: absolute;
If you use absolute positioning, you're just asking for this type of problem. Positioned elements are not in the flow and in effect allow only for limited or no size changes (and that includes changing content).
Try to leave everything you can in the flow and let the browser re-flow as needed.
Generally, until you have a comprehensive understanding of how the position property works, you should avoid using it. Of course, once you grok in fullness, you'll find very few instances of needing it.
See for example:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ html { padding: 0;} body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0;} p { font-size: 1em;} h1, h2 { font-family: serif; margin-bottom: 0;} /* end boilerplate */ #wrapper { background-color: d6e4f9;} #header { background-color: #6699ff; margin: 0 auto; overflow: hidden; text-align: center;} #header h1 { color:#e5e4d7; display: inline-block; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; font-size: 2em; margin: 0 2em;} form { color:#e5e4d7; display: inline-block; font-size: 1em; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; margin: 1em 0; padding:0;} /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Sitename</h1> <form method="POST"> <label for="username">Username: <input type="text" name="firstname" id="username"> </label> <label for="password">Password: <input type="password" name="lastname" id="password"> </label> <input type="submit" value="Log In"> </form> </div> </div> </body> </html>
cheers,
gary