0
Ich bin immer noch ein Anfänger ...Warum gibt es oben und unten auf meiner Seite schwarze und weiße Balken?
Das erste Mal, als ich die Seite erstellt habe, hat alles gut funktioniert. Der Hintergrund img überdeckte alles und die Navigation war transparent. Aber sobald ich die Links zum Bootstrap eingegeben habe, hat sich alles geändert was fehlt mir?
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>WILDA Designs</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar transparent navbar-inverse">
<div class="nav">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div> <!-- end nav here -->
</div> <!-- end navbar bar here -->
<div class="jumbotron-contact">
<div class="container">
<div class="main">
<h1>Contact</h1>
<p class="main-text">If you have any inquires for WILDA please reach us at:
</p>
<p><span class="glyphicon glyphicon-map-marker"></span><strong>50 Franklin St, Worcester, MA 01608 </strong></p>
<p><span class="glyphicon glyphicon-phone"></span>Phone:
<strong>774.535.7475</strong></p>
<p><span class="glyphicon glyphicon-envelope"></span>E-mail: <strong><span style="color: #FF3300">[email protected]</span></strong>
</p>
</div> <!-- end main -->
</div> <!-- end container here -->
</div> <!-- jumbotron -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
.jumbotron-contact {
height: 800px;
background-image: url(../img/largecontactimg.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.main {
position: relative;
top: 40px;
text-align: left;
font-family: freight-text-pro;
}
.main h1 {
color: #333;
font-family: freight-text-pro;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 10px;
text-transform: capitalize;
}
.main p {
font-size: 22px;
}
.main-text {
font-weight: 550;
}
span {
padding-right: 10px;
}
/*Navigation*/
.nav ul li {
display: inline-block;
float: right;
}
.navbar .transparent .navbar-inverse .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: transparent;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop(0% , rgba(0,0,0,0.00)),color-stop(100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.nav ul li a {
text-align: right;
font-size: 16px;
white-space: nowrap;
color: white;
text-transform: uppercase;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
padding-right: 10px;
font-family: freight-text-pro;
}
.nav a:hover {
color: #FF3300;
text-decoration: none;
}
was sich genau geändert hat – depperm
Die einzige neue Sache, die sich geändert hat, ist, dass ich Bootstrap-Links hinzugefügt habe. –