0
Web sitemde bootstrap carousel kullanmaya karar verdim, W3Schools website kodunu aldım. Web sitemde slayt gösterisi nasıl uygulanacağını ve slayt gösterisinin nasıl mükemmel bir şekilde uygulanacağını takip ettim ama çok sıkıcı oldu web sitemin öğeleri kadar.Bootstrap Carousel slayt gösterisi web sitesi içeriği ve içeriği bozuyor
Örneğin, slayt gösterisini web siteme uyguladığımda, yazı tipi ağırlığının CSS olmasına rağmen Merriweather serif yazı tipinin daha öncekinden daha açık hale gelmesidir. Bu aynı zamanda benim bağlantılar da olur.
Başka bir şey, altbilgi ve gezinme çubuğumun genişliğini artırmasıdır.
Bu sorun hakkında daha fazla araştırma yapmayı denedim, ancak benzer bir sorunu olan birini bulamadım. İşte
OLMADAN önyükleme atlıkarınca slayt kodu web siteme bir resimdir:
Gerçekten etkileşim ekler fakat Web sitem önyükleme atlıkarınca slayt sahip olmak istiyorum aynı zamanda I'de İçeriğimin ve öğelerin önemli ölçüde değişmesini istemiyorum.
Bu sorunun çözülmesine yardımcı olacak herhangi bir yardım büyük ölçüde takdir edilecektir.
Bu
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.
\t \t \t </h4>
</div>
</div>
</body>
</html>