I am going to use bootstrap input spinner for my cart web page some old version bootsrap.min.css clashing to align the content correctly ,Can any one help me how to fix it
my code
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-input-spinner</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
h2 {
margin-top: 2rem;
}
h3 {
margin-top: 1rem;
}
/*noinspection CssUnusedSymbol*/
.input-group,
input.test-value-input {
max-width: 250px;
}
.code {
background-color: #f1f2f3;
font-family: Courier, monospace;
}
</style>
</head>
<body>
<section class="container pt-3">
<h3>Simple Integer</h3>
<p>
<input type="number" value="1" min="1" max="10" />
</p>
</section>
<!-- bootstrap needs jQuery -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="src/bootstrap-input-spinner.js"></script>
<script>
$("input\[type='number'\]").inputSpinner()
</script>
</body>
</html>][1]
i want output like thisoutput
but am getting this design wrongdesing
Related
This question already has answers here:
CSS :first-letter not working
(3 answers)
Closed 12 months ago.
Want to make capitals letters by default generated by website . I have a problem my code make first letter capital in other else but in attachemnt and span it doesn't work . i make it in * becouse in attachment body doesnt work. I want do it only for first word in every seqience Here is my co
#import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100&display=swap");
/*
*/
body {
background: rgb(43, 42, 42);
color: aliceblue;
font-family: "Noto Sans JP", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::first-letter {
text-transform: capitalize;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<link rel="stylesheet" href="style.css" />
<!-- shortcut icon / title-->
<title>AAAA</title>
<link rel="icon" sizes="any" href="images/skyview.jpg" />
</head>
<body>
<div>
<h1>first letter big</h1>
<h1>first letter big</h1>
no big first letter
</div>
<span>no big first letter</span>
</body>
</html>
de
css selector ::first-letterdoesn't work on inline element as span
one way to solve your issue is to apply display:block or display:inline-block on wanted element
#import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100&display=swap");
/*
*/
body {
background: rgb(43, 42, 42);
color: aliceblue;
font-family: "Noto Sans JP", sans-serif;
}
span, a {
display:block;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::first-letter {
border: solid red 1px;
text-transform: capitalize;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<link rel="stylesheet" href="style.css" />
<!-- shortcut icon / title-->
<title>AAAA</title>
<link rel="icon" sizes="any" href="images/skyview.jpg" />
</head>
<body>
<div>
<h1>first letter big</h1>
<h1>first letter big</h1>
no big first letter
</div>
<span>no big first letter</span>
</body>
</html>
his is the CSS code that I already have in place for fixed-sized buttons. I want to increase the size of the icon inside of these buttons. The style of the button is |text + icon|. Thank you
.nectar-button.fixed-size {
width: 250px;
height: 75px;
font-size: 18px;
line-height: 30px;
}
give another class name on icon tag and give css like:
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
</style>
</head>
<body>
<button class="btn"><i class="fa fa-home"></i> Home</button>
</body>
</html>
try these code, I think your problem will be solved, Thank you.
I have this .html file and that form, sometimes stretches across all width. Tested with Opera, Firefox and Edge.
.html file:
<!DOCTYPE html>
<head>
<title>LOGIN</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/index.js"></script>
</head>
<body>
<div class="w3-container">
<h1>Login</h1>
<div class="w3-card-4 form">
<form class="w3-container" action="/login" method="post">
<label for="username">Nome de utilizador</label>
<input class="w3-input" type="text" name="username" placeholder="Nome de utilizador" required id="username">
<label for="password">Password</label>1
<input class="w3-input" type="password" name="password" placeholder="Password" required id="username">
<button class="w3-button" type="submit">Submit</button>
</form>
</div>
</div>
</body>
style.css file:
.big {
background: rgb(150, 150, 150);
width: 100vw;
height: 40vw;
max-height: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.lightgray {
background-color:#c5c5c5!important;
}
.bordergray {
border-color:#6e6e6e!important;
}
.rightalign {
float: right !important;
}
.form {
width: 50vw;
/*margin-left: 2vw;*/
}
body {font-family: "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {
padding: 16px;
font-weight: bold;
}
I can say that it is CSS fault, but I don´t know what or how a rule could be causing this.
This HTML was generated by compiling a .pug file, so I don't have a pretty version of it, feel free to edit this question if you could format the HTML.
EDIT:
Sometimes I get IMG1, others I get IMG2 but only if I open a new tab, why?
IMG1
IMG2:
(I set the background color to black, so its more visible the size of the fields)
Tanks for all the help, but further debugging show me that the file style.css was not being imported, so I changed
<link rel="stylesheet" href="assets/css/style.css">
to
<link rel="stylesheet" href="/assets/css/style.css">
and works all the time, thanks for all the help.
So im trying to create a zoomable image using css transform: scale and and overflow on the container div. However when the scale is put on the image, i am unable to scroll up or left.
Ive included my test code:
<!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, minimal-ui">
<!-- CSS INCLUDES-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS INCLUDES -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TITLE -->
<title>test</title>
</head>
<style>
#zoom-wrapper {
overflow: auto;
height: 90vw;
width: 90vw;
border: 1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
.zoom {
transform: scale(2);
transition: transform ease .2s;
}
</style>
<script>
$(document).ready(function() {
$('#zoom').click(function() {
$(this).addClass('zoom')
});
});
</script>
<body id="gallery-wrapper" style="background-color: #efefef">
<br><br>
<div id="zoom-wrapper">
<img id="zoom" class="img-responsive center-block" alt="zoom" src="https://i.ytimg.com/vi/7ecYoSvGO60/maxresdefault.jpg">
</div>
</body>
</html>
i have been doing this website but i got stuck at the point where the blusih grey blank space at the bottom of the screen refused to go.
i have moved the of the page. Any ideas on how to fix that blank area ?
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
body {
background: #08121A;
background-image: url('../img3.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;
}
.stretch {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/** element defaults **/
table {
width: 100%;
text-align: left;
}
th,
td {
padding: 10px 10px;
}
th {
color: #666;
background: #141517 none repeat-x scroll left top;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
</html>
Body css is wrong. Try this:
background-size:cover;
try to put img {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
and move the img as last element in body tag
in your case body will take height from all the elements in it. so if u put img - background always will take the height of body( this is calculate form all the elements in the body) ,so if you put as a tag <img src='myimg'/> will take space and don't forget to put img tag low z-index
Please correct your html code.
You must end your tag before start before tag. not end of tag. so your html code will be like this:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
Put here your body content
</body>
</html>
Then follow the css.
.yourcssClass {position: fix; left:0px; top:0px; right:0px; bottom:0px;}