Ich kann etwas Hilfe verwenden, da ich neu im HTML-Code bin. jedenfalls, Ich habe ein Karussell mit Bootstrap gemacht. Das Karussell selbst funktioniert gut. Aber nachdem ich einen Knopf in das Karussell gelegt habe, (mit top: (px) und rechts: (px), da ich nicht weiß, wie ich es an anderer Stelle platzieren soll), funktioniert es immer noch gut. Bis ich anfange, das Fenster zu verkleinern. Der Hintergrund wird kleiner, aber die Art der Schaltfläche bleibt gleich. So beginnt es sich zu bewegen und was einst 2 Tasten nebeneinander waren, sind jetzt 2 Tasten mit viel Platz dazwischen. Hier haben Sie einen Blick auf meinem Code: HTMLWie kann ich verhindern, dass sich eine Schaltfläche bewegt, wenn ich die Größe des Fensters ändere?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="mercury" src="mercury.png"> <br>
(text) <br>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="earth" src="earth.png"> <br>
(text)<br>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="venus" src="venus.png"> <br>
(text) <br>
<a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 100px 0 0 0;
width: 100%;
height: 550px;
text-align: center;
color: black;
background: #DCDCDC;
position: relative;
}
@media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
bottom: 35px;
right: -90px;
-webkit-border-radius: 5px;
line-height: 50px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
bottom: 35px;
right: 100px;
-webkit-border-radius: 5px;
line-height: 50px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
im Grunde, was ich will, ist, dass die Tasten + der Text innerhalb der Schaltflächen auch die Größe, wenn das Fenster kleiner wird. Als ob die Tasten Teil des Bildes wären.
Vielen Dank für Ihre Zeit. -Michael
durch die zwei sehr unterschiedlichen Antworten zu urteilen, könnte es sei eine gute Idee, deine Frage mit einer http://codepen.io oder http://jsfiddle.net Demo zu klären – ryantdecker
möglich dupliziere mit [diese Frage] (http://stackoverflow.com/questions/1495407/maintain-the -Aspekt-von-einem-Div-mit-CSS. Wenn Sie in Zukunft SCSS anstelle von reinem CSS schreiben möchten, können Sie auch [this mixin] (https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/) nachsehen. – andreim