2017-05-20 19 views
0

無論我在我的代碼中更改什麼,divs topnavsubbanner將無法​​連接。他們之間總是留下一些空間。不能連接2 div

我也一直在面對圖片對齊問題,但我很確定我最終能夠解決這個問題。不過,這個問題我認爲不會很快消失。

下面的代碼:

body \t \t { 
 
\t background-color: #0066CC; 
 
} \t \t 
 

 
#top \t \t { 
 
\t background-color: #333399; 
 
\t border-bottom: 1px #eeeeee solid; 
 
\t height: 200px; 
 
\t width: 900px; 
 
\t padding-bottom: 20px; 
 
\t margin: auto; 
 
} 
 

 
#logo \t \t { 
 
\t margin-left: 20px; 
 
\t margin-top: 30px ; 
 
\t padding: 0; 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t clear: both; 
 
\t vertical-align: middle; 
 
} 
 

 
#logo img \t { 
 
\t margin-top: 20px; 
 
\t vertical-align: middle; 
 
\t margin: auto; 
 
\t position: relative; 
 
\t width: 170px; 
 
\t height: 170px; 
 
} 
 

 
#title { 
 
\t float: right; 
 
\t margin-top: 10px; 
 
\t margin-right: 155px; 
 
\t text-align: justify; 
 
\t height: 150px; 
 
} 
 

 
#title h1 { 
 
\t line-height: 60%; 
 
\t color: #ffffff; 
 
\t text-align: center; 
 
\t font-family: Arial, Arial, Helvetica, sans-serif; 
 
} 
 

 
#title p { 
 
\t color: #ffffff; 
 
\t text-align: center; 
 
\t font-size: 12px; 
 
\t font-family: Arial, Arial, Helvetica, sans-serif; 
 
} 
 

 
#topnav { 
 
\t width: 900px; 
 
\t margin: auto; 
 
\t background-color: #333399; 
 
\t height: 40px; 
 
\t border-top: 2px white solid; 
 
} 
 

 
#topnav ul { 
 
\t margin-top: 0; 
 
\t float: left; 
 
\t height: 40px; 
 
\t padding: 0; 
 
} 
 

 
#topnav ul li { 
 
\t display: inline; 
 
\t background-color: #339999; 
 
} 
 

 
#topnav ul li a \t { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 15px; 
 
\t text-decoration: none; 
 
\t float:left; 
 
\t padding: 10px 20px; 
 
\t text-align: center; 
 
\t height: 20px; 
 
\t width: 140px; 
 
} 
 

 
#topnav a:link \t \t { color:#ffffff; } 
 
#topnav a:visited \t { color:#ffffff; } 
 
#topnav a:active \t { color:#ffffff; } 
 
#topnav a:hover \t { background-color: #0077CC; } 
 
#topnav a:focus \t \t { color:#ffffff; } 
 

 
#subbanner { 
 
\t height: 200px; 
 
\t background-color: #2687D7; 
 
\t width: 900px; 
 
\t margin: auto; 
 
\t padding-bottom: 5px; 
 
\t overflow: hidden; 
 
\t 
 
} 
 

 
#subbanner h2 { 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t color: #ffffff; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
#subbanner p { 
 
\t margin: 0px 150px; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
#dobrodosli \t { 
 
\t float: left; 
 
\t margin-left: 10px; \t 
 
\t margin-right: 15px; 
 
\t border-width: 5px; 
 
\t border-top-style: outset; 
 
\t border-right-style: inset; 
 
\t border-bottom-style: inset; 
 
\t border-left-style: outset; 
 
\t border-top-color: DodgerBlue; 
 
\t border-left-color: DodgerBlue; 
 
\t border-right-color: Cyan; 
 
\t border-bottom-color: Cyan; 
 
\t vertical-align: middle; 
 
\t align: middle; 
 
} 
 

 
#picture1 \t \t \t { 
 
\t float: right; 
 
\t margin-left: 15px; 
 
\t margin-right: 10px; 
 
\t border-width: 5px; 
 
\t border-top-style:outset; 
 
\t border-right-style:inset; 
 
\t border-bottom-style:inset; 
 
\t border-left-style: outset; 
 
\t border-top-color: cyan; 
 
\t border-left-color: cyan; 
 
\t border-right-color: DodgerBlue; 
 
\t border-bottom-color: DodgerBlue; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Modent - naslovna</title> 
 
<link href="CSS/styles.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
    <div id="top"> 
 
    \t <div id="logo"> 
 
     \t <a href="index.html"><img src="Slike/logo2.png" /></a> 
 
     </div> 
 
    \t <div id="title"> 
 
     \t <h1>Zdravstvena ustanova</h1> 
 
     \t <h1>stomatolo&#353;ka ambulanta</h1> 
 
     \t <hr/> 
 
     \t <h1>M O D E N T &nbsp; &nbsp; L O P A R E</h1> 
 
     \t <p>Cara Du&#353;ana 32 A Lopare</p> 
 
    \t \t </div> 
 
    </div> 
 
    <div id="topnav"> 
 
    \t <ul> 
 
\t \t \t <li><a href="index.html">Naslovna</a></li> 
 
\t \t \t <li><a href="about.html">O nama</a></li> 
 
\t \t \t <li><a href="team.html">Tim</a></li> 
 
\t \t \t <li><a href="galerija.html">Galerija</a></li> 
 
\t \t \t <li><a href="contact.html">Kontakt</a></li> 
 
\t \t </ul> 
 

 
    </div> 
 
    <div id="subbanner"> 
 
    \t <h2>Dobrodo&#353;li u Modent!</h2><br /> 
 
     <img id="dobrodosli" src="Slike/dobrodosli.jpg" /><img id="picture1" src="Slike/op_1.jpg" /> 
 
     <p>Zdravstvena ustanova stomatoloska ambulanta <b><i>MODENT Lopare</i></b> pocela je sa radom 03.02.2004. \t \t \t \t \t \t \t \t \t \t \t   godine. Organizovana je na taj nacin da strucnim radom i visoko profesionalnom stomatoloskom aparaturom   pruzi sve usluge pacijentima iz oblasti stomatoloske zdravstvene zastite.</p>

回答

0

CSS:

刪除溢出,並添加填充頂

#subbanner { 
    height: 200px; 
    background-color: #2687D7; 
    width: 900px; 
    margin: auto; 
    padding-bottom: 5px; 
    padding-top: 1px; 

} 

另一種方式:

#subbanner { 
    ... 
    //overflow: hidden; 
    ... 
} 
#subbanner h2{ 
    .... 
    margin-top: 0 
    ... 
} 
0

更改CSS代碼#topnav ulheight10px

#topnav ul { 
    margin-top: 0; 
    float: left; 
    height: 40px; /*change the height to 10px it will work */ 
    padding: 0; 
} 
0

瀏覽器自動給ul元素留有餘量。您可以通過添加'margin-bottom:0'來覆蓋它。爲下面的代碼顯示 '#topnav UL':

#topnav ul { 
    margin-top: 0; 
    margin-bottom: 0; 
    float: left; 
    height: 40px; 
    padding: 0; 
} 
0

只添加margin-bottom:0像這樣:

#topnav ul { 

    margin-bottom: 0; 

    //More code... 

} 

全碼:

body  { 
 
      background-color: #0066CC; 
 
      }   
 
       
 
#top  { 
 
    background-color: #333399; 
 
    border-bottom: 1px #eeeeee solid; 
 
    height: 200px; 
 
    width: 900px; 
 
    padding-bottom: 20px; 
 
    margin: auto; 
 
    } 
 
     
 
#logo  { 
 
    margin-left: 20px; 
 
    margin-top: 30px ; 
 
    padding: 0; 
 
    float: left; 
 
    overflow: hidden; 
 
    clear: both; 
 
    vertical-align: middle; 
 
    } 
 
    
 
#logo img { 
 
    margin-top: 20px; 
 
    vertical-align: middle; 
 
    margin: auto; 
 
    position: relative; 
 
    width: 170px; 
 
    height: 170px; 
 
    } 
 
    
 
#title { 
 
    float: right; 
 
    margin-top: 10px; 
 
    margin-right: 155px; 
 
    text-align: justify; 
 
    height: 150px; 
 
    } 
 

 
#title h1 { 
 
    line-height: 60%; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-family: Arial, Arial, Helvetica, sans-serif; 
 
    } 
 

 
#title p { 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    font-family: Arial, Arial, Helvetica, sans-serif; 
 
    } 
 
    
 
#topnav { 
 
    width: 900px; 
 
    margin: auto; 
 
    background-color: #333399; 
 
    height: 40px; 
 
    border-top: 2px white solid; 
 
    } 
 
    
 
#topnav ul { 
 
    margin-top: 0; 
 
    float: left; 
 
    height: 40px; 
 
    margin-bottom: 0; 
 
    padding: 0; 
 
    } 
 

 
#topnav ul li { 
 
    display: inline; 
 
    background-color: #339999; 
 
    } 
 
    
 
#topnav ul li a { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 15px; 
 
    text-decoration: none; 
 
    float:left; 
 
    padding: 10px 20px; 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 140px; 
 
    } 
 
    
 
#topnav a:link  { color:#ffffff; } 
 
#topnav a:visited { color:#ffffff; } 
 
#topnav a:active { color:#ffffff; } 
 
#topnav a:hover  { background-color: #0077CC; } 
 
#topnav a:focus  { color:#ffffff; } 
 

 
#subbanner { 
 
    height: 200px; 
 
    background-color: #2687D7; 
 
    width: 900px; 
 
    margin: auto; 
 
    padding-bottom: 5px; 
 
    overflow: hidden; 
 
    
 
    } 
 

 
#subbanner h2 { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    } 
 

 
#subbanner p { 
 
    margin: 0px 150px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    } 
 
     
 
#dobrodosli { 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-right: 15px; 
 
    border-width: 5px; 
 
    border-top-style: outset; 
 
    border-right-style: inset; 
 
    border-bottom-style: inset; 
 
    border-left-style: outset; 
 
    border-top-color: DodgerBlue; 
 
    border-left-color: DodgerBlue; 
 
    border-right-color: Cyan; 
 
    border-bottom-color: Cyan; 
 
    vertical-align: middle; 
 
    align: middle; 
 
    } 
 
     
 
#picture1   { 
 
    float: right; 
 
    margin-left: 15px; 
 
    margin-right: 10px; 
 
    border-width: 5px; 
 
    border-top-style:outset; 
 
    border-right-style:inset; 
 
    border-bottom-style:inset; 
 
    border-left-style: outset; 
 
    border-top-color: cyan; 
 
    border-left-color: cyan; 
 
    border-right-color: DodgerBlue; 
 
    border-bottom-color: DodgerBlue; 
 
    } 
 
    
<div id="top"> 
 
     <div id="logo"> 
 
      <a href="index.html"><img src="Slike/logo2.png" /></a> 
 
     </div> 
 
     <div id="title"> 
 
      <h1>Zdravstvena ustanova</h1> 
 
      <h1>stomatolo&#353;ka ambulanta</h1> 
 
      <hr/> 
 
      <h1>M O D E N T &nbsp; &nbsp; L O P A R E</h1> 
 
      <p>Cara Du&#353;ana 32 A Lopare</p> 
 
     </div> 
 
    </div> 
 
    <div id="topnav"> 
 
     <ul> 
 
      <li><a href="index.html">Naslovna</a></li> 
 
      <li><a href="about.html">O nama</a></li> 
 
      <li><a href="team.html">Tim</a></li> 
 
      <li><a href="galerija.html">Galerija</a></li> 
 
      <li><a href="contact.html">Kontakt</a></li> 
 
     </ul> 
 

 
    </div> 
 
    <div id="subbanner"> 
 
     <h2>Dobrodo&#353;li u Modent!</h2><br /> 
 
     <img id="dobrodosli" src="Slike/dobrodosli.jpg" /><img id="picture1" src="Slike/op_1.jpg" /> 
 
     <p>Zdravstvena ustanova stomatoloska ambulanta <b><i>MODENT Lopare</i></b> pocela je sa radom 03.02.2004. </p>