I decided to implement bootstrap carousel in my website, I got the code from W3Schools website I followed the instructions on how to apply the slideshow in my website and the slideshow worked perfectly but it messes up elements of my website.
An example is that when I apply the slideshow in my website my font which is Merriweather serif turns lighter than before even though in the CSS the font-weight is bold. This also happens to my links as well.
Another thing is that it increases the width of my footer and navigation bar.
I tried to research more about this problem but I couldn't find anyone who has a similar problem.
Here is an image of my website WITHOUT the bootstrap carousel slideshow code:
I really want my website to have the bootstrap carousel slideshow because it adds interactivity but at the same time I don't want my content and elements to change drastically.
Any help would be greatly appreciated to help solve this problem.
This is the CSS and HTML (If you want to see the effect the bootstrap carousel slideshow has on the elements and content on my website, run the code snippet below)
html,
body {
background-color: #09018a;
}
#container {
width: 1200px;
height: 1300px;
border: 3px solid #ffbd1e;
background-color: #FFFFFF;
position: absolute;
left: 140px;
top: 8px;
}
#nav {
width: 1200px;
height: 75px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background-color: #d7001f;
position: absolute;
top: 250px;
}
#footer {
width: 1200px;
height: 100px;
position: relative;
background-color: #d7001f;
top: 570px;
font-family: 'Merriweather', serif;
}
#footer a:hover {
color: rgb(0, 0, 255);
font-weight: bold;
}
#myCarousel {
width: 400px;
height: 300px;
position: absolute;
top: 450px;
left: 750px;
padding: 10px;
margin: 30px;
z-index: 3;
border: 3px solid #000000;
}
header img {
position: relative;
left: 500px;
}
#nav li {
display: inline;
font-family: 'Merriweather', serif;
}
#nav a {
text-decoration: none;
}
#nav a:link {
display: inline-block;
width: 200px;
color: #5c3205;
border-radius: 8px;
box-shadow: 1px 1px 2px 2px #f26522;
background-color: #e79806;
text-shadow: 3px 2px 3px #aaa;
position: relative;
top: 20px;
left: 5px;
}
#nav a:hover {
color: #ff0000;
}
#nav a:visited {
color: #5c3205;
}
p {
font-size: 18px;
}
h3 {
font-size: 15px;
}
h4 {
font-size: 15px;
font-style: italic;
}
.story1 {
width: 700px;
height: 600px;
position: relative;
left: 50px;
top: 300px;
padding: 5px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 {
width: 450px;
height: 200px;
position: absolute;
right: 700px;
top: 900px;
margin-top: 20px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 li {
margin-bottom: 15px;
font-size: 18px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Course Outline</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Testing.css" type="text/css">
</head>
<body>
<div id="container">
<header>
</header>
<div id="nav">
</div>
<div class="story1">
<h1>Computer Science at Tawa College</h1>
<h2>DITCS101</h2>
<p>In DITCS101 you will learn programming languages such as Python, CSS3, HTML5 and Scratch, you will also learn to use Webflow to design your website without any coding. You will be tested on these programming languages by means of doing various assesments
like using Python to construct a basic computer program for a specified task and using Notepad++ to make a prototype (like a website) to address a brief.
</p>
<h2>DITCS201</h2>
<p>In DITCS201 your knowledge of programming languages like Python, CSS3, HTML5 will be expanded and you will be taught new techniques and features that you will be utilising in various assesments. You will also be taught PHP which is a server-side
scripting language designed for web development and also MYSQL which is the world's second most used relational database management system.
</p>
<h2>DITCS301</h2>
<p>In DITCS301, your knowledge of Python, CSS3, HTML5, PHP and MYSQL will be further expanded for you to use in various assesments as well as learning JQUERY to create animations for websites.
</p>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/Person1.jpg" alt="Masterchief">
</div>
<div class="item">
<img src="images/Person2.jpg" alt="Tuna pasta bake">
</div>
<div class="item">
<img src="images/Person3.jpg" alt="Chickpea and tomato curry">
</div>
<div class="item">
<img src="images/Person4.jpg" alt="Asian beef and noodle salad">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<h2>Bootstrap Carousel Slideshow</h2>
</div>
<div class="story3">
<h2>Course booklets on E2Learn</h2>
<ul>
<li><a href="http://e2learn.school.nz/pluginfile.php/22162/mod_resource/content/0/2016%20-%20DITCS101.pdf">DITCS101 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22163/mod_resource/content/0/2016%20-%20DITCS201.pdf">DITCS201 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22164/mod_resource/content/0/2016%20-%20DITCS301.pdf">DITCS301 2016</a>
</li>
</ul>
</div>
<div id="footer">
<h4>Website logo by Kyle Josef, used under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY</a> /Forward slash,less than sign and shield outline resized. Shield outline colour changed to yellow.
</h4>
</div>
</div>
</body>
</html>
