I'm a bit confused. I'm building an To-Do List app and I'm trying to set the header as 100% of the screen width. I have the correct meta tags, I believe, but setting the header at 100% width is stretching the element past the right side of the screen. Is there something I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
<link rel="stylesheet" text="text/css" href="style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activity...">
<button></button>
</header>
</body>
</html>
#charset "UTF-8";
header {
width: 100%;
height: 80px;
position: fixed;
padding: 15px;
top: 0px;
left: 0px;
z-index: 5;
background: #25b99a;
box-shadow:0px 2px 4px rgba(44, 62, 80, 0.15);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
header input {
width: 100%;
height: 50px;
float: left;
background: rgba(255,255,255,0.2);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-radius: 5px;
border: 0px;
box-shadow: none;
outline: none;
}
You need to include the box-sizing property.
Info from MDN
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
header {
width: 100%;
height: 80px;
position: fixed;
padding: 15px;
top: 0px;
left: 0px;
z-index: 5;
background: #25b99a;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
header input {
width: 100%;
height: 50px;
float: left;
background: rgba(255, 255, 255, 0.2);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-radius: 5px;
border: 0px;
box-shadow: none;
outline: none;
}
<header>
<input type="text" placeholder="Enter an activity...">
<button></button>
</header>
Related
I am playing with CSS pseudo elements. As soon as the menu button gets hovered it receives a small orange underline. This element should stay as soon as the dropdown-container is visible. Is there a light weight solution to achieve such behaviors?
In case pseudo elements aren´t the best solution for my need, I am open minded for different solutions.
https://jsfiddle.net/j3g49fwd/
$(".dropdown-btn").click(function() {
this.classList.toggle("increase")
$(".dropdown-container").toggle()
})
.wrapper {
position: relative;
top: 5vh;
margin: 40px 30px 30px 30px;
height: fit-content;
background: white;
border-radius: 10px;
box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
15px 15px 15px rgba(70, 70, 70, 0.12);
padding: 1vw;
}
.dropdown-btn {
display: flex;
justify-content: center;
padding: 10px 0px 10px 20px;
text-decoration: none;
display: block;
border: 1px solid transparent;
background: none;
height: fit-content;
min-height: 5vh;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
transition: all 0.3s ease-in-out;
}
.dropdown-btn:after {
content: "";
display: block;
margin: 3px 0 0 0;
width: 0;
height: 1px;
background: rgb(242, 123, 57);
transition: all 0.4s;
}
.dropdown-btn:hover::after {
width: 100%;
}
.dropdown-container {
display: none;
padding: 10px 20px 10px 20px;
margin: 0 0 2vh 0;
}
.increase {
font-size: 20px !important;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<button class="dropdown-btn">I am a menu button
<label class="menu-title" id="flow-menu-title"></label>
<i class="fa-solid fa-gear col-1 dropdown-icon"></i>
</button>
<div class="dropdown-container">
Hello Stackoverflow
</div>
</div>
</body>
</html>
if I understand you correctly, you should be able to edit the CSS just like this:
.dropdown-btn.increase::after,.dropdown-btn:hover::after {
width: 100%;
}
https://jsfiddle.net/bkefg9dt/
This question already has answers here:
Transparent space between div and border with a border radius
(2 answers)
Closed 11 months ago.
I am trying to create a button with box-shadow like below:
with transparent space between the button and the shadow. How can it be implemented?
I don't think box-shadow is the best approach. You can instead try outline css property.
.btn {
display: inline-block;
margin: 20px;
padding: 15px 30px;
background-color: #aaa;
border-radius: 25px;
outline: 4px solid #aaa;
outline-offset: 4px;
}
<div class="btn">
Action
</div>
.button-wrapper {
margin: 0 auto;
display: table;
padding: 100px 0;
background-color: #625e5e;
width: 100%;
text-align: center;
}
.button-wrapper button.custom-btn {
border: 0;
background-color: transparent;
padding: 0px 0px;
border-radius: 100px;
color: #fff;
border: 5px transparent solid;
outline: 5px rebeccapurple solid;
}
body {
margin: 0;
}
.button-wrapper button.custom-btn span {
border: 0;
background-color: rebeccapurple;
padding: 10px 0px;
border-radius: 100px;
min-width: 115px;
color: #fff;
font-size: 15px;
letter-spacing: 2px;
display: block;
border: 5px transparent solid;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="button-wrapper">
<button type="button" class="custom-btn">
<span class="">Action</span>
</button>
</div>
</body>
</html>
Look My animation.
I made this for using a button for showing and hiding passwords.
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 175px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
/* .eye::before{
animation: slash infinite 5s;
} */
}
#keyframes slash{
from{width:1px;}
to{width:175px}
}
<div class="eye"></div>
look that...
I want to run the animation slash on .eye::after
when the .eye is :active
and also make it so until again click(that is once the eye is clicked draw a slash and make it show until the again click )
that is I want to trigger the slash animation on .eye::after when .eye:active is triggered only using css.
I've added an example, you don't need to use #keyframes and animation to animate this eye on click - just use transitions. Also, example works with :active pseudo-class as you use it in your example, but looks like you need to have it switch on click, that way just add and remove class .active on click and replace :active with .active in CSS
.eye{
margin: 50px;
color: black;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5;
transition: all 0.3s ease-in;
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: all 0.3s ease-in;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
.eye:active::after{
width: 175px;
background-color: rgb(174, 0, 0);
}
<div class="eye"></div>
you can achieve this by just simply adding one liner code of javascript i.e. classList.toggle()
const myfun = () => {
const eye = document.querySelector(".eye");
eye.classList.toggle('changed')
};
.eye{
margin: 50px;
color: black;
transition-duration: .3s;
width: 100px;
height:100px;
border: 10px solid currentColor;
transform: rotate(45deg);
border-radius: 90px 5px;
opacity: .5
}
.eye::before{
content: "";
border: 10px solid currentColor;
width: 50px;
height:50px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: 15px;
margin-left: 12px;
}
.eye::after{
content: "";
border-bottom: 7.5px solid rgb(255, 255, 255);
width: 0px;
height: 5px;
background-color: currentColor;
display: block;
border-radius: 50px;
margin-top: -50px;
position: absolute;
margin-left: -35px;
transition: 1s;
}
.changed:after {
width: 175px;
transition: 1s;
}
.eye:hover{
opacity: 1;
}
.eye:active{
color: rgb(174, 0, 0);
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="style.js"></script>
</head>
<body>
<div class="eye" onclick="myfun()"></div>
</body>
</html>
I have a button spanning the right side of the window that will open a menu when clicked. When the scroll-bar appears on the page, however, the button nearly disappears behind it. My question is simply: how do I use CSS or JavaScript to take the scrollbar's width into consideration when calculating either the position or the width of the button? Thanks in advance.
HTML:
<body>
<div id='ui'>
<div id='menu' class='x'>
<div id='menuBtn'></div>
</div>
</div>
</body>
CSS:
#ui{
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#menu{
float: right;
height: 100%;
width: 600px;
background-color: white;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
transition: all .5s;
}
#menu.x{
margin-right: -595px;
box-shadow: 0px 0px 15px black;
}
#menu.x:hover{
margin-right: -575px;
box-shadow: 0px 0px 30px black;
}
#menu.o{
margin-right: 0px;
box-shadow: 0px 0px 45px black;
}
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
}
You can try this:-
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
position: absolute; // try with fixed
right: 0px;
}
I have used inline styling to put a radiused border around the five images in my index file. How do I apply this style to them by declaring css attributes/values in the external style sheet. Here is a demo of the index file http://jsfiddle.net/23nfM/embedded/result/
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>pedrosdigitalsolutions.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pds/images/cheat_1.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<?php include 'header.php' ?>
<div id="content">
<p class="tab"><font size="7"><b>For all things</b></font><br>
<font size="7"><b>Electronic Arduino</b></font><br>
<font size="7"><b>and "other stuff"</b></font><br>
<font size="6"><b>Love ♥ The Duino</b></font>
</p>
<img style="position:absolute; top:515px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual Shift Register 300x225.gif">
<img style="position:absolute; top:215px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual LCD 300x225.gif">
<img style="position:absolute; top:515px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/LCDBitmap_via_SR.gif">
<img style="position:absolute; top:815px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/8_LED_Array.gif">
<img style="position:absolute; top:815px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Nicks Clock 300x225.gif">
</div>
<?php include 'footer.php' ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
</body>
</html>
body {
background: #efefef;
border: none;
color: #3F4C6B;
font: normal 13px Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center; }
#content {
height: 950px;
margin-bottom: 25px;
margin: 0 auto;
padding: 30px 0;
text-align: justify;
width: 950px;
}
.default {
-moz-box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
box-shadow: 0 5px 20px #888;
height: 50px;
width: 100%; }
.fixed {
-moz-box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
left: 0px;
position: fixed;
top: -5px;
width: 100%; }
#footer {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #98B0D9;
background: -webkit-linear-gradient(#98B0D9);
height: 70px;
position: relative;
z-index: 1;
}
h1 { line-height: 15px; }
#header {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(#606C88, #3F4C6B) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(#606C88, #3F4C6B);
border-color: #0F1620 #000000;
border-image: none;
height: 93px;
margin: 0;
width: auto; }
#logo {
border: medium none;
float: left;
margin: 0; }
#menu {
-moz-border-radius: 5px;
background: -webkit-linear-gradient(#c3d9ff, #98b0d9);
background: linear-gradient(#c3d9ff, #98b0d9) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px;
line-height: 50px;
margin: 0 135px;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
z-index: 5;
float: center;
}
#navi {
height: 50px;
margin-top: 0; }
ul { padding: 0; }
ul li {
display: inline;
list-style-type: none;
margin-right: 15px; }
ul li a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
border-radius: 5px;
color: #fff;
padding: 3px 7px;
text-decoration: none;
text-shadow: 1px 1px 1px #000; }
ul li a:hover {
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
background: #606C88;
color: #ff0; }
Strip out the inline styles, and put something like this in your external style sheet:
#content img {position:absolute; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px}
Some styles specific to each image have been left out. For those, add a class or id to the image and then write styles for that image. E.g. the first image could have a class of .lalala and then you'd do this in your style sheet:
.lalala {top:515px; left:692px;}
There are a lot of ways to do that, but the easiest path for your current code would be to declare the border and some other styles in the stylesheet, and then position the images with inline styles.
So in the stylesheet, add:
#content img {
position:absolute;
width:300px;
height:225px;
border: 1px solid #000000;
border-radius: 8px;
}
Then in the html, remove all of the inline styles on each image except top and left.