stackoom
  简体   繁体   中英

Positioning of elements to different screen sizes

 原文  2014-12-30 04:48:57  6   2    html/ css

Question

 body { background: url('images/hero_2.jpg'); background-repeat: no-repeat; background-position: top; background-size: 100%; margin: 0px 0px; } #container_1 { width: 100%; height: 300px; position: absolute; top: 450px; left: 0; border-color: orange; border-style: solid; border-size: 1; } #valueprop_1 { text-align: left; width: 700px; max-height: 30px; font-family: calibri; font-weight: 100; font-size: 48; position: relative; left: 50px; top: 20px; line-height: 1; color: white; } #valueprop_2 { text-align: left; width: 500px; max-height: 30px; font-family: calibri; font-weight: 100; font-size: 22; position: relative; left: 44px; top: 110px; line-height: 1; margin: 10; color: white; } /* learn more button box*/ #learn_button { position: absolute; left: 55px; top: 250px; width: 100px; height: 25px; background: black; opacity: .4; } /* learn more button text*/ #learn_text { font-family: calibri; font-size: 16; font-weight: normal; text-align: center; position: absolute; left: 68px; top: 253px; } #learn_text a { text-decoration: none; color: white; } #learn_text ul { list-style-type: none; text-align: right; margin: 0px 0px; padding: 0; } /* register button box*/ #register_buttonA { position: absolute; left: 180px; top: 250px; width: 100px; height: 25px; background: #00ADEF; } /* register button text*/ #register_textA { font-family: calibri; font-size: 16; font-weight: normal; color: white; text-align: center; position: absolute; left: 198px; top: 253px; } #register_textA a { text-decoration: none; color: white; } #register_textA ul { list-style-type: none; text-align: right; margin: 0px 0px; padding: 0; } #container_2 { width: 100%; height: 1100px; position: absolute; top: 980px; left: 0; border-color: yellow; border-style: solid; border-size: 1; } #teens_1 { font-family: calibri; font-size: 24; font-weight: normal; text-align: center; position: absolute; left: 50px; top: 0px; background-color: transparent; height: 25px; width: 25px; } #teens_2 { font-family: calibri; font-size: 26; font-weight: normal; color: grey; text-align: center; position: absolute; left: 50px; top: 130px; } #under_18A { font-family: calibri; font-size: 14; font-weight: 100; color: grey; position: relative; text-align: left; width: 500px; left: 50px; top: 200px; } #under_18b { font-family: calibri; font-size: 14; font-weight: 100; color: grey; position: relative; text-align: left; width: 500px; left: 28px; top: 200px; } #under_18c { font-family: calibri; font-size: 14; font-weight: 100; color: grey; position: relative; text-align: left; width: 500px; left: 50px; top: 200px; } #over_18A { font-family: calibri; font-size: 14; font-weight: 100; color: grey; position: relative; text-align: left; width: 500px; right: -800px; top: -50px; } #teens_3 { font-family: calibri; font-size: 26; font-weight: normal; color: grey; text-align: center; position: absolute; left: 50px; top: 490px; } #parents { font-family: calibri; font-size: 14; font-weight: 100; color: grey; position: relative; text-align: left; width: 500px; left: 50px; top: 70px; } #feedback_1 { position: relative; right: -780px; bottom: 345px; } /* register button box*/ #register_buttonB { position: absolute; right: 50px; top: 150px; width: 100px; height: 25px; background: #00ADEF; } /* register button text*/ #register_textB { font-family: calibri; font-size: 16; font-weight: normal; color: white; text-align: center; position: absolute; right: 65px; top: 153px; } #register_textB a { text-decoration: none; color: white; } #register_textB ul { list-style-type: none; text-align: right; margin: 0px 0px; padding: 0; } 
 <html> <head> <title>California Driver Education & Training | GEARSTAD</title> <link href="gstGeneral.css" rel="stylesheet" type="text/css" /> <link href="gstTeens.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script src="scroll.js"></script> </head> <body> <div id="logo"> <a href="index.html"> <img src="images/gst_logo.png"/> </a> </div> <div id="navbar"> <ul> <li><a href="index.html">HOME</a></li> <li class="active"><a href="teens.html">TEENS</a></li> <li><a href="adults.html">ADULTS</a></li> <li><a href="seniors.html">SENIORS</a></li> <li><a href="recovery.html">RECOVERY</a></li> <li><a href="statement.html">STATEMENT</a></li> </ul> </div> <div id="container_1"> <h1 id="valueprop_1">Our Basic+ Training<br/>Provides New Drivers with<br/>Safe and Efficient Driving Skills</h1> <h2 id="valueprop_2">Convenient online, mobile, and driver training pickup</h2> <div id="register_buttonA"></div> <div id="register_textA"> <ul> <li><a href="registration.html">Start Now</a></li> </ul> </div> <div id="learn_button"></div> <div id="learn_text"> <a href="#teens_1">Learn More</a> </div> </div> <div id="container_2"> <h1 id="teens_1"></h1> <h1 id="teens_2">California Driving Requirements</h1> <div id="register_buttonB"></div> <div id="register_textB"> <ul> <li><a href="registration.html">Start Now</a></li> </ul> </div> <div id="under_18A"> <p><strong>UNDER 18 -</strong> In California, driving lessons for teens are required by the DMV. Driving students under the age of 18 must:</p> </div> <div id="under_18B"> <ol> <li>Pass drivers education online or in a classroom</li> <li>Earn a driving permit by passing a written driving test</li> <li>Take six hours of in-car driving lessons from a licensed driving school</li> <li>Pass the in-car driving test at the DMV</li> </0l> </div> <div id="under_18C"> <p>Driving lessons help you perfect your driving skills so you can safely handle all types of roadways in a variety of conditions. Learn to handle your car safely and confidently with us. Our excellent driving instructors are up-to-date on the latest techniques in crash avoidance, braking, driving safety, and California driving laws and they are passing that knowledge on to you!</p> </div> <div id="over_18A"> <p><strong>OVER 18 -</strong> The California DMV requires that driving students over the age of 18 pass the in-car driving test at the DMV. <br/><br/>Even though the DMV doesn't require driving lessons for adults, it is still a good idea to take driving lessons from a professional driving school. In California, driving laws are subject to change every year. Behind-the-wheel training with our certified driving instructors can keep you up-to-date on the latest driving laws and techniques in crash avoidance, braking, and driving safety on increasingly packed California roads. <br/><br/>Many adults take driving lessons to learn the latest defensive driving and safety procedures or master challenging or stressful driving situations, such as freeways, or busy city streets. Our patient and professional instructors can also help you gain confidence after a collision or behind-the-wheel scare.</p> </div> <h1 id="teens_3">Information for Parents</h1> <div id="parents"> <p><strong>DRIVING LESSONS -</strong> Your teen will learn in a BMW 3 Series with a top safety rating. Our curriculum covers all driving skills, from simple to complex. Our uniformed instructor picks up your teen from home or schoolÑfor free! We provide individual instruction with no distractions in the vehicle. At the end of each lesson, we will assess your teen's driving ability. Professional male and female driving instructors are available. <br/><br/>Parents trust GEARSTAD because we're California's largest driving school with over 25 years of experience in providing California driving lessons for teens. We're the only school that is both approved by the Road Safety Educators' Association and accredited by the Driving School Association of the Americas. <br/><br/>Our driving school operates locally with local driving instructors in areas across the state. Our certified instructors are smart, patient, and friendly. Your teen will get training on all driving skills, as well as the latest defensive driving methods and safety techniques. <br/><br/>Each lesson is tailored to the student's learning style, and all lessons are individualized and free from distractions. We have a fleet of BMWs for our driving lessons. Your teen will learn in a vehicle with the highest safety rating in the industry, so you know your teen is safe. Parents are always welcome to ride along and observe lessons.</p> </div> <img id="feedback_1" style="height:auto; width:auto; max-width:500px; max-height:417px;" src="images/feedback_1.jpg"/> <div id="googaloo"> </div> </div> <div id="footer"> <h1 id="copyright_1">© 2014 GEARSTAD Training Group, Inc. All rights reserved.</h1> <h1 id="copyright_2">Toll Free 800 GEARSTAD | 760.760.7607</h1> <div id="email"> <a href="mailto:mcaffin@live.com" target="_blank"> <img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_email.png"/> </a> </div> <div id="facebook"> <a href="https://www.facebook.com" target="_blank"> <img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_facebook.png"/> </a> </div> <div id="twitter"> <a href="https://twitter.com" target="_blank"> <img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_twitter.png"/> </a> </div> <div id="feeds"> <a href="https://www.rss.com" target="_blank"> <img style="height:auto; width:auto; max-width:25px; max-height:20px;" src="images/icon_feeds.png"/> </a> </div> </div> </body> </html>

I'm new to HTML and CSS.

I made my first school project final website on a 13" MBA and when displaying it on my 40" Samsung TV elements are shifting.

Currently, I div'd all elements placed them in 2 containers and positioned them all with "absolute". Yet, when switching to the Samsung TV both containers shift up (content within container stays at same position).

NOTES: I also have containers width at 100% and left at zero. Should I have height in % instead of px?

Any pointers would be helpful

Thanks.

2 answers

solution1
 0  2014-12-30 04:57:50

What you're looking for is to create 'responsive' pages. Bootstrap is a great and relatively simple way to introduce responsive functionality into a Web page. Check it out here: http://getbootstrap.com/2.3.2/

solution2
 0  2014-12-30 05:09:18

Since you haven't posted any code, I can't tell code corrections.

But absolute positioning is certainly creating problems here. Absolute positioning actually places the elements out of the normal document flow. So, on larger screens the elements lower down the document can come up if they find enough space. You must use width in % for elements inside the containers as well. They are the ones creating space for lower elements on larger screens. Height can be given in px.

Also you must set up a positioning context when using absolute positioning by setting position:relative for one of its parent element.

Try making the above corrections.

But it is advised to use bootstrap for responsive designs. It has a great documentation and pre-built elements for containers and grid layout like yours.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Different div positioning on different screen sizes HTML elements not positioning correctly across screen sizes positioning elements (different sizes) next to each other Positioning selectors with correct dimensions that scale on different screen sizes three.js positioning mesh cubes not working for different screen sizes Reorder DOM elements on different screen sizes How to position elements properly regarding different screen sizes Section elements not resizing/keeping format to different screen sizes? Positioning Half Circles for All Screen Sizes positioning elements off screen with margins
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM