I've been struggling with connecting the divs topnav and subbanner in my code. No matter what I try, there always seems to be some space left between them.
Picture alignment has also been causing me some issues, but I'm confident that I'll figure that out eventually. However, this particular problem is proving to be quite stubborn.
Below is the code snippet:
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;
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;
}<!DOCTYPE html>
<html>
<head>
<title>Modent - naslovna</title>
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<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ška ambulanta</h1>
<hr/>
<h1>M O D E N T L O P A R E</h1>
<p>Cara Duš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š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. godine. Organizovana je na taj nacin da strucnim radom i visoko profesionalnom stomatoloskom aparaturom pruzi sve usluge pacijentima iz oblasti stomatoloske zdravstvene zastite.</p>