2014-12-30 2 views
0

위치는

\t \t \t 
 
\t \t \t body { 
 
       background: url('images/hero_2.jpg'); 
 
       background-repeat: no-repeat; 
 
       background-position: top; 
 
       background-size: 100%; 
 
       margin: 0px 0px; 
 
      } 
 
\t \t \t 
 
\t \t \t #container_1 { 
 
       width: 100%; 
 
       height: 300px; 
 
       position: absolute; 
 
       top: 450px; 
 
       left: 0; 
 
\t \t \t \t border-color: orange; 
 
\t \t \t \t border-style: solid; 
 
\t \t \t \t border-size: 1; 
 
       
 
      } 
 
\t \t \t 
 
\t \t \t #valueprop_1 { 
 
       text-align: left; 
 
\t \t \t width: 700px; 
 
\t \t \t 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; 
 
\t \t \t width: 500px; 
 
\t \t \t 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; 
 
      } 
 
      
 
\t \t \t /* 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; 
 
      } 
 
\t \t \t 
 
\t \t \t /* 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; 
 
      } 
 
\t \t \t 
 
\t \t \t #container_2 { 
 
       width: 100%; 
 
       height: 1100px; 
 
       position: absolute; 
 
       top: 980px; 
 
       left: 0; 
 
\t \t \t \t border-color: yellow; 
 
\t \t \t \t border-style: solid; 
 
\t \t \t \t border-size: 1; 
 
      } 
 
\t \t \t 
 
      #teens_1 { 
 
       font-family: calibri; 
 
       font-size: 24; 
 
       font-weight: normal; 
 
       text-align: center; 
 
       position: absolute; 
 
       left: 50px; 
 
       top: 0px; 
 
\t \t \t \t background-color: transparent; 
 
\t \t \t \t height: 25px; 
 
\t \t \t \t 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; 
 
      } 
 
      
 
\t \t \t #teens_3 { 
 
       font-family: calibri; 
 
       font-size: 26; 
 
       font-weight: normal; 
 
       color: grey; 
 
       text-align: center; 
 
       position: absolute; 
 
       left: 50px; 
 
       top: 490px; 
 
      } 
 
\t \t \t 
 
\t \t \t #parents { 
 
       font-family: calibri; 
 
       font-size: 14; 
 
       font-weight: 100; 
 
       color: grey; 
 
       position: relative; 
 
       text-align: left; 
 
       width: 500px; 
 
       left: 50px; 
 
       top: 70px; 
 
      } 
 
\t \t \t 
 
      #feedback_1 { 
 
       position: relative; 
 
       right: -780px; 
 
       bottom: 345px; 
 
      } 
 
\t \t \t 
 
\t \t \t /* register button box*/ 
 
      #register_buttonB { 
 
       position: absolute; 
 
       right: 50px; 
 
       top: 150px; 
 
       width: 100px; 
 
       height: 25px; 
 
       background: #00ADEF; 
 
      } 
 
\t \t \t 
 
      /* 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; 
 
      } 
 
      
 
\t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t
<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"> 
 
      \t <img src="images/gst_logo.png"/> 
 
      </a> 
 
     </div> 
 
     <div id="navbar"> 
 
     \t <ul> 
 
      \t <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 \t 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:[email protected]" 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>

내가 HTML과 CSS에 새로 온 사람 크기.

13 인치 MBA에서 첫 번째 학교 프로젝트 최종 웹 사이트를 만들었고 40 인치에 표시 할 때 삼성 TV 요소가 바뀌고 있습니다.

현재 모든 요소는 2 개의 컨테이너에 배치되고 모두 절대적으로 배치됩니다. 그러나 삼성 TV로 전환 할 때 두 콘테이너가 위로 이동합니다 (콘테이너 내의 콘텐트는 같은 위치에 있습니다).

참고 : 용기의 너비가 100 %이고 0으로 남았습니다. px 대신 높이가 %로 표시되어야합니까?

모든 포인터가 도움이 될 것입니다.

감사합니다.

+1

특정 답변을 얻으려면 코드도 게시해야합니다. –

+0

절대적으로 (말장난 의도가없는) 이미지를 배치하기 위해'position : absolute'를 사용하지 않아야합니다 : 그리고 그것의 소리에서 당신은 할 필요가 없습니다. – jmore009

+0

고정 레이아웃을 원한다면 px 값을 가져야합니다. '

'과 같은 메시지입니다. mediaplayer가 유용 할 것입니다. – argentum47

답변

0

'반응하는'페이지를 만드는 것이 좋습니다. 부트 스트랩은 반응 형 기능을 웹 페이지에 도입하는 비교적 간단하고 훌륭한 방법입니다. 여기에서 확인하십시오 : http://getbootstrap.com/2.3.2/

+0

답변으로 도움말을 사용하지 마십시오 – ImAtWar

+0

@James Stott! 감사합니다! 내 코드를 게시했습니다. – Disavio

+0

부트 스트랩 제안을 해주셔서 감사합니다. @ James Stott - 읽어 보겠습니다. – Disavio

0

코드를 게시하지 않았으므로 코드 수정을 말할 수 없습니다.

그러나 절대 위치 지정은 확실히 여기에 문제를 만듭니다. 절대 위치 지정은 실제로 요소를 일반 문서 플로우에서 제외시킵니다. 따라서 큰 화면에서는 충분한 공간을 찾으면 문서 아래쪽의 요소가 올 수 있습니다. 컨테이너 내부의 요소에 대해서도 너비를 %로 사용해야합니다. 그것들은 큰 화면에서 낮은 요소를위한 공간을 만드는 것들입니다. 신장은 px로 주어질 수 있습니다.

또한 절대 위치 지정을 사용할 때 부모 요소 중 하나에 position:relative을 설정하여 위치 지정 컨텍스트를 설정해야합니다.

위의 수정을 시도하십시오.

그러나 반응이 나오는 디자인에는 부트 스트랩을 사용하는 것이 좋습니다. 컨테이너와 그리드 레이아웃을위한 훌륭한 문서와 기본 요소가 있습니다.

+0

ur 피드백 @Tapan Anand에 감사드립니다! 내 HTML과 CSS 코드를 게시했습니다 – Disavio

+0

내가 제안한 수정을 시도하십시오. – tapananand

+0

감사합니다 .Tapan 아난드 감사합니다. 부트 스트랩에서 추천 할만한 훌륭한 읽을 거리? – Disavio