1. Zuhause
  2. Frage und Antwort
  3. Kann 2 divs nicht verbinden

Kann 2 divs nicht verbinden

2017-05-20 3 views
0

Egal was ich in meinem Code ändern, die topnav und subbanner wird nicht verbinden. Zwischen ihnen ist immer etwas Platz.Kann 2 divs nicht verbinden

Ich hatte auch Probleme mit der Bildausrichtung, aber ich bin mir ziemlich sicher, dass ich das irgendwann lösen werde. Dieses Problem, glaube ich nicht, dass es so schnell weggehen wird.

Hier ist der Code:

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>

Quelle

2017-05-20 Puzzle Oz

Antwort

0

CSS:

Remove Überlauf und fügen padding-top

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

}

Ein anderer Weg:

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

Quelle

2017-05-20 12:14:34

0

Ändern Sie den CSS-Code #topnav ul ‚s height zu 10px.

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

Quelle

2017-05-20 12:35:26 Bramha

0

Ein Browser gibt automatisch ul-Elemente einen Spielraum. Sie können dies überschreiben, indem Sie 'margin-bottom: 0;' zu '#topnav ul', wie in der unten stehenden Code dargestellt:

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

Quelle

2017-05-20 12:57:15

0

Nur hinzufügen margin-bottom:0 wie folgt aus:

#topnav ul { 

    margin-bottom: 0; 

    //More code... 

}

Voll 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>

Quelle

2017-05-20 13:07:09 Ehsan

Verwandte Themen

 Verwandte Themen