2013-11-23 56 views
0

我想學習div的方式,並且我正在嘗試將我正在編寫的網站與屬性float對齊,儘管它看起來並不像我想要它。你能看看我的代碼嗎?謝謝!不能使浮動屬性和div正常工作

enter image description here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <title>Walt Disney Concert Hall</title> 
     <meta http-equiv = "Content-type" content = "text/html; charset=UTF-8" /> 
     <link rel = "stylesheet" type = "text/css" href = "style.css" /> 
    </head> 
    <body> 
     <div id = "container"> 
      <!-- HEADER --> 
      <div id = "header">Walt Disney concert hall</div> 
      <!-- MENU --> 
      <div id = "menu"> 
       <a href = "home.html">Home</a> 
       <a href = "familyprograms.html">Family programs</a> 
       <a href = "visit.html">Visit</a> 
       <a href = "tickets.html">Concert tickets</a> 
      </div> 
      <!-- TEXT --> 
      <div id = "text"> 
       <h3>Holiday sing-along</h3> 
       <p>End the year in song by bundling up and celebrating the sounds of the season 
       under the cool wintry skies. Sing-along with live musical accompaniment. Lyric 
       sheets are provided. No experience necessary. 
       <p>FREE admission. Tickets are distributed beginning at 6:00 p.m., while supplies 
       last. One ticket per person to those waiting in line. Seating capacity is limited. 
       First come, first served.</p> 
      </div> 
      <!-- IMAGES --> 
      <div id = "images"> 
       <img src = "6_1.jpg" alt = "Classical" /> 
       <img src = "6_2.jpg" alt = "Jazz" /> 
       <img src = "6_3.jpg" alt = "World" /> 
       <img src = "6_4.jpg" alt = "Pop" /> 
       <img src = "6_5.jpg" alt = "Family and others" /> 
      </div> 
      <!-- VOTE AND EVENTS --> 
      <div id = "voteandevents"> 
       <form method = "get" name = "form_mostliked" action = "send.php"> 
        <fieldset> 
         <legend>Vote</legend> 
         What do you like the most? 
         <br /> 
         <input type = "radio" name = "radio_mostliked" value = "Ballet" checked = "checked" /> 
         <br /> 
         <input type = "radio" name = "radio_mostliked" value = "Operett" /> 
         <br /> 
         <input type = "radio" name = "radio_mostliked" value = "Opera" /> 
         <br /> 
         <input type = "radio" name = "radio_mostliked" value = "Other" /> 
         <br />   
         <input type = "submit" name = "btn_submit" value = "send" /> 

         <h3>Upcoming events:</h3> 
         <ol> 
          <li>Spotlight awards</li> 
          <li>Grupo Corpo</li> 
          <li>Deneve conducts Debussy</li> 
          <li>Natalie Cole - JAZZ</li> 
         </ol> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html> 

CSS

body{ 
    background: url("bg6.gif") repeat; 
} 

#container{ 
    width: 795px; 
    margin: auto; 
    overflow: hidden; 
    border: 5px dashed #000; 
} 

#header{ 
    background-image: url("header6.jpg"); 
    width: 800px; 
    height: 150px; 
    text-align: right; 
} 

#menu{ 
    float: left; 
    height: 35px; 
    width: 550px; 
    background: url("cell-bg6.gif") repeat-x; 

} 

#text{ 
    width: 550px; 
    float: left; 
    text-align: justify; 
} 

#text p { 
    text-indent: 20px; 
} 

#images{ 
    float: left; 
    height: 173px; 
    background-color: #000; 
    clear: left; 
    padding: 7px; 
    width: 550px; 
} 

#voteandevents{ 
    float: right; 
    width: 200px; 
} 

回答

2

可以只是你#menu 並沒有關於你的CSS改變之前將您的#voteandevents