無論我在我的代碼中更改什麼,divs topnav和subbanner將無法連接。他們之間總是留下一些空間。不能連接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ška ambulanta</h1>
\t <hr/>
\t <h1>M O D E N T L O P A R E</h1>
\t <p>Cara Duš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š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>