I am creating a website for a small project. One of the web pages includes a slideshow that should be manually operated using two buttons. How can i have the buttons placed infront of the slideshow image?
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
}
.slideshow-buttons {
display: flex;
justify-content: space-around;
}
<section class="slideshow-container">
<img id="slideShowImage" src="https://via.placeholder.com/450x150" alt="slideshow">
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
<footer class="footer">
</footer>
I have tried changing the position on the image to absolute and the buttons to relative (& the other way around because i dont know what im doing)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Womxn Skate History</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="..\css\bootstrap.min.css">
</head>
<header>
</header>
<body >
<section class="slideshow-container">
<img id="slideShowImage" src="img1.jpeg" alt="slideshow"/>
<div class="slideshow-buttons">
<button class="slideshow-button-right" onclick="plusDivs(-1)">❮</button>
<button class="slideshow-button-left" onclick="plusDivs(+1)">❯</button>
</div>
</section>
</div>
</body>
<footer class="footer">
</footer>
<script src="JS/script.js"> </script>
</html>
CSS:
.slideshow-container {
border: solid black 5px;
border-radius: 20px;
margin: 70px;
box-shadow: -40px -40px 0px 10px #f0f030, -40px -40px 0px 15px black;
width: 550px;
position: relative;
}
#slideShowImage {
width: 100%;
border-radius: 3%;
display: block;
object-fit: cover;
}
.slideshow-button-right {
position: absolute;
left: 15px;
top: 50%;
}
.slideshow-button-left {
position: absolute;
right: 15px;
top: 50%;
}
I am making a site and the text that says what's new in the code snippet below is not fitting at the top of the box I created.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: var(--border-width, 100px);
height: var(--border-height, 200px);
padding: 50px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
[BETA]</div> Transformation</li>
</ol>
</div>
</body>
</html>
As you see, this makes a background with a box and text. Please show me how to position the <h1> at the top of the box with the border I created.
This should help. That 50 px padding was removed and then width and min-width were used to control the width of the box. Also applied margin css to the h1.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: 50%; /* changed */
min-width: 200px; /* added */
height: var(--border-height, 200px);
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
.content { /* added */
margin: 0 .5rem; /* added */
} /* added */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
<a href="linkoftruth">
<li>
<div id="beta">[BETA]</div> Transformation</li>
</a>
</ol>
</div>
</body>
</html>
There were a few problems with your code. Firstly, the header was being smushed, because you used padding to give your div its size, as opposed to a width and a height. Next, you were calling on variables from :root, but also trying to pass values into those variables. To achieve your solution, I fixed the issues mentioned, as well as created two new div sections - one for the header, and one for the list. Also, you were wrapping your li elements in a tags. It should be the other way around.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
body {
background-color: var(--background-color);
}
.lftSector {
width: 300px;
height: 300px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
.lftSector > div {
width: 100%;
text-align: center;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 80%;
}
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<div>
<h1 class="content">What's New?</h1>
</div>
<div id="content">
<ol>
<li><span id="beta">[BETA]</span>Transformation</li>
</ol>
</div>
</div>
Additionally, I'd recommend usually setting your widths to be percentages, or based on vw/vh. Just a tip.
I'm trying to make stopwatch and I want to put these 3 buttons in a circle but responsive. I have already make a circle that is responsive now I just want to add 3 buttons inside the circle under the timer.
Here is the code: https://jsfiddle.net/obh0mru4/1/
See my result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Watch</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5 h-position-relative">
<div>
<h1 class="title">Stop Watch</h1>
</div>
<div class="circle mt-5">
<div>
<h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
<h1 id="msec" class="circleContent">00</h1>
</div>
</div>
<div class="h-position-absolute h-tl">
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</html>
body {
background: #000428;
background: -webkit-linear-gradient(to right, #004e92, #000428);
background: linear-gradient(to right, #004e92, #000428);
}
.title {
text-align: center;
color: #fff;
}
.circle {
margin: 0 auto;
width: 350px;
height: 350px;
line-height: 320px;
border-radius: 50%;
text-align: center;
border: 10px solid #666;
border-style: double;
}
.circleContent {
display: inline-block;
color: #fff;
font-size: 40px;
width: 60px;
}
.circleContent-span {
color: #fff;
font-size: 40px;
}
.h-position-relative {
position: relative;
}
.h-position-absolute {
position: absolute;
}
.h-tl {
top: smth;
left: smth;
}
You will have to fiddle around with the numbers to get exactly what you want, but this is a start:
.h-tl {
top: 275px;
left: 50%;
transform: translateX(-50%);
}
What it does is place the buttons vertically at 275px.
It also places the left hand side horizontally to the center, but you don't want that so you move it back 50% of it's own width. (This is a common 'trick', you can remove the translate once to see what it exactly does).
This will put your buttons under your digits
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>