I have edited the default checkboxes look of HTML and created my own styles, the thing is that the property position of the checkbox makes it bypass other elements, how can I avoid that?
Example of what is happening: https://www.screencast.com/t/ELwluGBaX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
background-color: #FF6E0B;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
Position absolute removes the item from the flow of the DOM.
Elements that are not positioned absolutely act as if the ones that are dont even exist.
I suggest using something like Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Or i suggest using the normal positioning, position: static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,500,700&display=swap" rel="stylesheet">
<!-- Our css -->
<title>Session Asigment</title>
<style>
label::before {
content: "";
border: solid 1px #FF6E0B;
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 3px;
}
input[type=checkbox] {
display: none !important;
}
.checkbox-titles [type=checkbox]:checked + label:after {
/* check */
font-family: "Font Awesome 5 Free";
color: #fff;
content: "\f00c";
font-weight: 900;
padding-left: 0.2em;
padding-bottom: 0.2em;
/* Label */
position: absolute;
width: 1.4em;
height: 1.4em;
display: inline-block;
border-radius: 3px;
background-color: #FF6E0B;
}
.checkbox-titles label {
width: 1.4rem;
height: 1.4rem;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="checkbox-titles">
<input type="checkbox" value="test" id="test">
<label for="test"></label><span>Test Bla Bla Bla</span>
</body>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!--select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
</html>
Related
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed last year.
I know this is a stupid question, but I'm having trouble with the small screen media query. I gave the image a class, so it should work. Also, when I tried to add an id, it didn't work, so is there something wrong with my code or the media query thing? Any assistance or advice would be greatly appreciated.
#media only screen and (max-width : 600px){
.mondaycont .monday{
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont{
width: 84%;
}
.mondaycont .monday{
position: relative;
width: 40em;
margin-top: 20px;
}
.mondaytext{
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold{
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>body{background-color: #262626;}</style>
<div class="container text-center"><p class=" mondaytext">This page feels like a monday...</p>
<p class=" mondaytextbold">Go Home</p> </div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
Your media query is followed by a declaration that applies to all resolutions, overwriting your media query width definition. Media queries do not affect specificity, so the normal "last rule wins" applies.
Exchange the position of these two rules:
.mondaycont .monday {
position: relative;
width: 40em;
margin-top: 20px;
}
#media only screen and (max-width: 600px) {
.mondaycont .monday {
position: relative;
width: 20em;
margin-top: 10px;
}
}
.mondaycont {
width: 84%;
}
.mondaytext {
font-family: 'Inter', sans-serif;
font-weight: 400;
color: white;
margin-top: 50px;
position: relative;
}
.mondaytextbold {
font-family: 'Inter', sans-serif;
font-weight: bold;
color: white;
margin-top: 10px;
position: relative;
}
<!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">
<title>ERROR 404</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<style>
body {
background-color: #262626;
}
</style>
<div class="container text-center">
<p class=" mondaytext">This page feels like a monday...</p>
<a href="./index.html">
<p class=" mondaytextbold">Go Home</p>
</a>
</div>
<div class="container-fluid mondaycont text-center">
<img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>
i cant style my hr tag between h1 and button,if i use a older version of bootstrap that is working,but with 5.0.0 isnt.
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
</body>
</html>
this is the style sheet
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
}
hr{
border-color: #F05F44;
border-width: 3px;
max-width: 65px;
You need to override the bootstrap style. That can be done by using !important on the style.
body,
html {
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
font-family: 'Montserrat', sans-serif;
height: 100vh;
width: 100vw;
}
hr {
border-color: #F05F44 !important;
height: 3px !important;
max-width: 65px !important;
}
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</div>
do hr.<className> for edit any hr tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<style>
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
background-size: cover;
}
hr.new1 {
border-top: 1px solid red;
}
/* Dashed red border */
hr.new2 {
border-top: 1px dashed red;
}
/* Dotted red border */
hr.new3 {
border-top: 1px dotted red;
}
</style>
<body>
<div class="row">
<h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
<hr class="new1">
<hr class="new2">
<hr class="new3">
<button class="btn btn-primary btn-xl">Find out more</button>
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've developed a header and a footer in bootstrap and styled them in CSS. But there's a white space above the header and also below the footer. I'm not sure what is causing the white space to appear there.
Here's the code:
header.php
<html dir="ltr" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="css/main.css" rel="stylesheet">
<meta charset='utf-8' />
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
</head>
<nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
<img src="images/logo.png" alt="Logo">
</nav>
footer.php
<footer class="footer">
<div class="container">
<p class="m-20 text-center text-white"><br></p>
</div>
</footer>
main.css
body {
margin-top: 60px;
margin-bottom: 100px;
}
.footer {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #CC0033;
}
#topNav {
position: sticky;
width: 100%;
height: 70px;
line-height: 60px;
background-color: #CC0033;
}
I don't know what you're exactly trying to do but here's what I got,
the problem was with the CSS, but check what the classes in the nav are doing
html,body {
height:100%;
}
body{
position:relative
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #CC0033;
left:0;
}
#topNav {
position: fixed;
top:0;
left:0;
width: 100%;
height: 70px;
line-height: 60px;
background-color: #CC0033;
}
<html dir="ltr" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="css/main.css" rel="stylesheet">
<meta charset='utf-8' />
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
</head>
<nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
<img src="images/logo.png" alt="Logo">
</nav>
<footer class="footer">
<div class="container">
<p class="m-20 text-center text-white"><br></p>
</div>
</footer>
How do I format the paper-icon-button-lite to match the paper-icon-button? (i.e., No outline and no shadow.) How did they accomplish this in this paper-icon-button-lite demo? Whatever they did, it apparently was not necessary in this paper-icon-button demo. Why not? What am I missing?
Here is my jsBin.
http://jsbin.com/vatuyopodu/1/edit?html,output
<!doctype html>
<head>
<meta name="description" content="iron-data-table beta3">
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="paper-icon-button/paper-icon-button-lite.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<style is="custom-style">
:host {
font-family: arial, sans-serif;
}
button[is=paper-icon-button-light] {
width: 40px;
height: 40px;
padding: 8px;
margin: 10px;
}
button[is=paper-icon-button-light]> img {
width: 24px;
height: 24px;
}
</style> <template>
<p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<code>paper-icon-button</code>
</p>
<p>
<button is="paper-icon-button-light" title="octocat">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
</button>
<code>paper-icon-button-lite</code>
</p>
<p>How do I format the <code>paper-icon-button-lite</code> to match the <code>paper-icon-button</code>? (i.e., No outline and no shadow.) How did they accomplish this in the demo? What am I missing?</p>
<a href="https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/paper-icon-button-light.html&active=paper-icon-button-light">
Here is the demo</a>.
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
Adding transparent background and removing border to button[is=paper-icon-button-light] should do the trick
button[is=paper-icon-button-light] {
width: 40px;
height: 40px;
padding: 8px;
margin: 10px;
border:none;
background-color:transparent;
}
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="paper-icon-button/paper-icon-button-lite.html" rel="import">
<dom-module id="x-foo">
<style>
:host {
font-family: arial, sans-serif;
}
button[is=paper-icon-button-light] {
width: 40px;
height: 40px;
padding: 8px;
margin: 10px;
border: none;
background-color: transparent;
}
button[is=paper-icon-button-light] > img {
width: 24px;
height: 24px;
}
</style>
<template>
<p>
<paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
<code>paper-icon-button</code>
</p>
<p>
<button is="paper-icon-button-light" title="octocat">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
</button>
<code>paper-icon-button-lite</code>
</p>
</template>
<script>
Polymer({
is: 'x-foo'
});
</script>
</dom-module>
<x-foo></x-foo>
I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!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">
<meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.