So , i want to make the button wider , not auto size to the text , i want it like 300px , i just try to add width on every class , but nothing seems working , is it because the button box line from text border ? i think its because the button from text border , so its auto resize with the text , am i right about it ? if that was the problem, can i click on a col-md-6 div for example ?
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure css popup box</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Popup/Modal Windows without JavaScript</h1>
<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
EDITED Can i add href on col-md-6 class ?
SOLVED add display:inline-block;
a-tag is an inline element so your height and width set are ignored. Add display: inline-block; and width: 300px; in the class button.
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display: inline-block;
width: 300px;
}
you do not need to add col-md-6 unless you want to use such space. Just add width property in the button class or in the custom class as per your need.
.button {
width: 300px;
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display:block;
}
Related
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result:
I am trying to show an overlay for full page when button on click. I intended to add an iframe in the content div for pop up. Here is my HTML:
And CSS to show and hide the overlay:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<div style="height: 1200px;">
<div class="box">
<a class="button" href="#popup1">Show Overlay</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Content
</div>
</div>
</div>
</div>
My jsfiddle
However, there is a slight issue with the styling. The overlay does not cover the part below when scrolling down. It only covers the part before start scrolling down. I tried to set the height to 100% but to no futile.
Any ideas how to fix this?
Thanks!
Use position: fixed; instead of position: absolute;. position absolute set an auto height based on window height not body.
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<div style="height: 1200px;">
<div class="box">
<a class="button" href="#popup1">Show Overlay</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
Content
</div>
</div>
</div>
</div>
I am trying to keep the the form elements in one line and as to keep it exactly like this way for all type of resolutions i.e to keep it responsive in the same state but whenever I try to minimize the screen resolution so the form contents get messed up and the Search button goes to the second line as I do not want it to be like that..I simply want it to be in the same state i.e the Search button to stay along next to the input even when the window is minimized so how easily that would be achievable??? As I do know that it can be achieved with the use of CSS Media Queries..!
Here is the GIF :
LIVE PAGE LINK : http://huntedhunter.com/extratorrent/
Here is Code :
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 7%;margin-top: 100px;">
<h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
<form>
<input class="icon" name="search" placeholder="Search Torrent Name" type="text"> <input class="btn btn-secondary" name="search" type="submit" value="Search">
</form>
</div>
<footer class="footer">
<p>Copyrighted By <strong>Hunted Hunter Solutions</strong>.A Script By <strong>Umair Shah Yousafzai</strong></p>
</footer>
</body>
</html>
CSS :
input[type=text].icon {
width: 89%;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: 10px 13px;
background-repeat: no-repeat;
padding-left: 42px;
}
h1 {
font-family: Arial;
opacity: 0.6;
text-align: center;
}
span {
font-size: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #eee2e2;
margin-left: -0.5%;
}
body {
overflow-x: hidden;
}
p {
text-align: center;
font-family: Arial;
opacity: 0.7;
}
a {
text-decoration: none;
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
cursor: pointer;
}
.btn:focus, .btn:hover {
text-decoration: none;
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #adadad;
}
.btn {
border: 1px solid turquoise;
padding: 1.2% 1.5rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
You could use a flex-box for this.
Add the .flex class to your <form> tag, along with the rules:
.flex {
display:flex;
flex-wrap:nowrap;
justify-content:center;
}
replace width: 89%; with flex-grow:4; on the input[type=text].icon selector,
Finally add flex-grow:1; and margin-left:5px; to the .btn selector
input[type=text].icon {
flex-grow: 4;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(searchicon.png);
background-position: 10px 13px;
background-repeat: no-repeat;
padding-left: 42px;
}
h1 {
font-family: Arial;
opacity: 0.6;
text-align: center;
}
span {
font-size: 70%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #eee2e2;
margin-left: -0.5%;
}
body {
overflow-x: hidden;
}
p {
text-align: center;
font-family: Arial;
opacity: 0.7;
}
a {
text-decoration: none;
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad;
cursor: pointer;
}
.btn:focus,
.btn:hover {
text-decoration: none;
}
[type=reset],
[type=submit],
button,
html [type=button] {
-webkit-appearance: button;
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #adadad;
}
.btn {
flex-grow: 1;
margin-left: 5px;
border: 1px solid turquoise;
padding: 1.2% 1.5rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.flex {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 7%;margin-top: 100px;">
<h1>E<span>XTRATORRENT</span> A<span>UTOMATIC</span> D<span>OWNLOADER</span></h1>
<form class="flex">
<input class="icon" name="search" placeholder="Search Torrent Name" type="text" /> <input class="btn btn-secondary" name="search" type="submit" value="Search" />
</form>
</div>
<footer class="footer">
<p>Provided without garanties by a <strong>Welldoer</strong>. A Script By <strong>Lars</strong></p>
</footer>
</body>
</html>
I'm just wondering how something like this is done
I searched on google but I only found informations about ad pop ups
Thanks in advance
There you go,
<h1>Popup without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thanks for pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
**CSS**
body {
font-family: Arial, sans-serif;
background: url(4.jpg);
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Try the snippet below:
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container{
width:100%;
height: 100%;
margin: 0;
position: absolute;
background: rgba(220,220,220, .5);
}
.modal{
position: relative;
top: 40%;
margin: 0 auto;
height: 100px;
width: 150px;
background: white;
border: 1px solid #aaa;
}
p{
margin: 0;
}
<div class='container'>
<div class='modal'>Modal window</div>
</div>
<p> other content</p>
Try with absolute positioned container div and a child div with actual content. I added paragraph with content Other content to illustrate the effect
I've got a layout bug with the snippet below in IE11, Chrome, Firefox - the second button is not correctly inline with the first button.
The problem goes away as soon as I add any non-whitespace content to the inner span on the second button.
Is there a CSS fix that will bring the buttons inline without requiring actual content, ideally without changing the rest of the CSS?
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder { padding: 20px; background-color: #254669 }
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
Just add vertical-align:middle to button clas like this: Demo
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
vertical-align:middle; /* added this */
}
You need to add
display: table-row;
vertical-align: middle;
in your button and
box-sizing: border-box;
display: table;
in .mainBorder class
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder {
background-color: #254669;
box-sizing: border-box;
display: table;
padding: 20px;
width: 100%;
}
button {
background-color: #254669;
border: 1px solid #53779d;
color: white;
display: table-row;
font-family: Verdana;
font-size: 13px;
height: 24px;
outline: medium none;
padding: 0 8px 1px;
position: relative;
transition: all 150ms ease-out 0s;
vertical-align: middle;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
I would suggest to not have all the spaces if you intend to have space between elements because that is hard to manage at times but if you want to keep it the same markup this css for the .iconButton:
button.iconButton{
width: 24px;
top: 7px;
padding: 0;
}
but if you want to rid yourself of the spaces then you can, optionally, the spaces would definitely affect the layout
button.iconButton{
width: 24px;
top: 3px;
padding: 0;
margin: 0 15px;
}