I don't want the large box to move when the buttons at the top move. The box will contain text, but on the hover of the buttons, the box moves. Any way to fix this? Code I use below:
<html>
<title>Website</title>
<head>
<style>
body {
background: url(bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.button {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
padding:35px 32px;
background: url("pic.png");
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
}
.button:hover {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
padding:68px 32px;
font-family: "Comic Sans MS", cursive, sans-serif;
border:none;
display: block;
}
.b-pos {
margin-top:50px;
margin-left:34%;
}
.box {
float: left;
top: 100px;
text-decoration:none;
text-align:center;
color: #000000;
text-shadow: 0 2px 2px #333333;
font-family: "Comic Sans MS", cursive, sans-serif;
border-radius: 8px;
margin-left: 80px;
margin-top: 190px;
width: 1000px;
height: 500px;
background-repeat: no-repeat;
transition: all ease-in-out 250ms;
box-shadow: 0 8px 8px -6px black, 0 -8px 8px -6px black, -8px 0 8px -6px black, inset 0px 0px 10px 0px #000000;
}
</style>
</head>
<body>
<div class="b-pos">
Home
Sales
About
</div>
<div class="box">
</div>
</body>
</html>
All the code that is needed is above. I don't think the background is needed.
You need to take either the buttons or the box out of the normal flow of HTML. You can do this by setting the CSS position attribute of, for example .box to absolute or fixed.
.box {
position: absolute;
}
This will "lock" the box in place.
Just add: position:fixed;
in the box css and it will not move.
The fixed attribute means that the element is positioned relative to the browser window. Hence it will stay where it is irrespective of the above movement when the button is hovered upon.
Also you can use position:absolute here. Absolute means the element is positioned relative to its first positioned (not static) ancestor element.
Related
I have a CSS file that has code looking like this...
.button{
width: 700px;
height: 100px;
text-align: center;
display: inline-block;
font-size: 50px;
font-family: Gauge;
color: white;
border: rgba(255,255,255,0.3) 11px solid;
box-shadow: 0 5px 10px white;
text-shadow: 0 0 10px #000;
margin: 15px 15px 15px 15px;
transition: 0.4s
}
button.oneshot{
background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
url("oneshot.png") center 60%;
button.lisatp{
background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed,
url("lisa the painful.jpg") 45% 60%;
}
...
...
As you can see, there is a line that is repeated in the subclasses oneshot and lisatp:
linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed
However, since each subclass also has an image as the background as well, I can't find a way to place the repeated line in .button.
Is it possible to somehow simplify this even more, or is this as simple as it is going to get?
Use CSS variable to simplify this then you will be able to easily change the gradient for all the element of each one individually:
.button{
width: 700px;
height: 100px;
text-align: center;
display: inline-block;
font-size: 50px;
font-family: Gauge;
color: white;
border: rgba(255,255,255,0.3) 11px solid;
box-shadow: 0 5px 10px white;
text-shadow: 0 0 10px #000;
margin: 15px 15px 15px 15px;
transition: 0.4s;
--grad:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.4),rgba(0,0,0,1)) no-repeat center center fixed;
background:var(--grad);
}
.button.oneshot{
background:var(--grad),url("https://lorempixel.com/400/200/") center 60%;
}
.button.lisatp{
background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}
.button.new-grad{
--grad:linear-gradient(rgba(0,190,0,1),rgba(0,190,0,0.4),rgba(0,180,0,1)) no-repeat center center fixed;
background: var(--grad),url("https://lorempixel.com/300/200/") 45% 60%;
}
<span class="button"></span>
<span class="button oneshot"></span>
<span class="button lisatp"></span>
<span class="button new-grad"></span>
I somehow managed to make the input box responsive but the button is not being aligned in center
here is the css code
.webdesigntuts-workshop button {
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 2px 0 #000;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
font-family: "Cabin", helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 20px;
padding: 0 10px;
padding-bottom: 2px;
text-shadow: 0 -1px 0 #000;
display: inline-block;
width:100%;
max-width:120px;
float:center;
}
Here is the whole Codepen link
https://codepen.io/anon/pen/XZrqzZ
Your code is messy, to much, in fact. Yet, the problem is not the button, but the input. The margins in the input is pushing it out of the screen because you have the width to 100%. So, the input take 100% of the screen plus the margin, pushing it out of the layout intended.
Try this in your css:
.webdesigntuts-workshop input{
margin: 0; /* Put 0 */
width: 100%;
}
.webdesigntuts-workshop button {
margin: 0 auto; /* Add this */
}
I got a textfield that expands when I start typing text, and indicates that it is OK since it has text - otherwise it's red, indicating it has not been filled out. I need left padding on this in all states, but when I write too much text and the text starts scrolling, the padding is ignored. Is there any way to fix this? I made a fiddle: https://jsfiddle.net/o1r9dp2L/1/
<div class="container"><div contentEditable=true id="test" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="Placeholder"></div></div>
CSS:
.container{
overflow: hidden;
margin:0px;
height:24px;
}
#test:not([value=""]) {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:0px;
padding-left:36px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
/*background-repeat: repeat-x 100% 100%;*/
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#000;
outline:0;
}
#test {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
#test:empty {
position:relative;
cursor:text;
width: 240px;
display: inline-block;
min-width: 240px;
overflow: auto;
left:26px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
padding-bottom: 10px;
border-top-left-radius: 3px;
border-top-right-radius:3px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
line-height:5px;
background-image:url('http://i65.tinypic.com/1z3xah4.png');
background-repeat: repeat-x 100% 100%;
font-family: 'Quicksand', sans-serif;
font-size:14px;
white-space: nowrap;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.5);
color:#FF0000;
outline:0;
}
The reason that there is a blank space to the left of the field is that I also have a checkbox there that can be used instead, that expands to cover the textfield and looks exactly the same. So either you fill in information, or you check the box to the left.
One way is to make the tick icon to have same white background color, so that it covers any overflowed text on the left. I also significantly reduced the size of the style code.
jsFiddle
body {
background: #fff;
}
.container {
position: relative;
margin: 20px 0;
}
.input {
cursor: text;
width: 100px;
display: inline-block;
vertical-align: top;
overflow: auto;
font-family: Quicksand, sans-serif;
font-size: 14px;
line-height: normal;
white-space: nowrap;
outline: 0;
border-radius: 3px;
border: 1px solid #999;
padding: 4px 10px;
box-sizing: border-box;
overflow: hidden;
}
.input:not(:empty) {
color: #000;
width: 130px;
right: 0;
padding-left: 24px;
}
.input:not(:empty):before {
content: "";
position: absolute;
left: 1px;
top: 1px;
bottom: 1px;
width: 22px;
border-radius: 3px;
background: #fff url(https://i.stack.imgur.com/A45oq.png) center / 70% no-repeat;
}
.input:empty {
background: pink;
color: red;
position: relative;
right: -24px;
}
.input:empty:before {
content: attr(data-placeholder);
}
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
<div class="container">
<div contentEditable=true class="input" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" onkeypress="javascript:return (event.keyCode != 13)" value="" data-placeholder="placeholder"></div>
</div>
Edit: The below is meant to show you that the padding is not being overwritten on overflow. What is happening is that the padding is increasing the width of the element and the background image is just that - a background. To get around this, you can use a psuedo element to allow that background image to go over text. The text is still there, but it is underneath the image.
If I were you, I would check out the following tutorial on bootstrap's input groups. It may be helpful for you to see how bootstrap does this. You can then use JavaScript to change the image or HTML structure based on the input's state.
The problem is that the checkmark image was being used as a background image within the div. There is no way to make a background image go over text.
However, you can use a psuedo element for this.
jsfiddle
I've edited the image in Photoshop to have a transparent background, and then converted to a base64 URL (so I didn't have to host the image).
The psuedo element uses two background images, the reddish background underneath the green checkmark. This psuedo element is positioned absolutely and therefore goes over the text as desired.
#test:not([value=""]):before {
content: '';
position: fixed;
top: 13px;
left: 9px;
display: inline-block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAABvElEQVQ4jZ2UQUgbQRSGPxMkG1QapaKVXAwVFCQKkqCIi4cGPEixWBFEpELAUqQX9VDEXFQQcUEkekoPxVNBsZQiSopQzUENoqJFxNaStBAPqe7FuBDDeBKiZKPsD+8w88//zYM3TA46EkLoWXcU2Z3vf//nV08QyTVT92FQ96AQ4uGKLne8XPRtWxd9Qv5x+lsIgelRbWRS6q9jfm9TDoILUy0zjeVdgHHg2c6X7r4k/SAx6Xw1UmNmyzjwcrdB+RcvB3AWtsW8DpRbyxBwf2elfRbewHMm3VW9ElwZB6phORDX7ACt9paQnMdquq0PTCUtqnpVpKWwpm9HjkKej9CJqZJBZ/Hw/Zgu0L88NlW2NvG/NrhxEUlRAYB24ArE1CKAbnvrV7fE+qOBTU9sagkQTXy39KyfrGhgVQ9DHgXeYarEW12gZMrpAmvktxOfCyUFIHyx4PAfxxIb8bNxAE9JczhTd1mBYL10y17lkwU/aPh+BhhKAJTirXo2rZfKPmVzcayj7sW31xCEa6IA+fV4bCwZAwKUNq2O2p+GbpcDZdVz6e/uvnL0jLu/TdKiqVqeZpawFeSeZ7v/BqqSqeSPBBXnAAAAAElFTkSuQmCC'), url(http://i65.tinypic.com/1z3xah4.png);
background-repeat: no-repeat, repeat-x;
height: 15px;
width: 25px;
}
I've also removed the other instance of the background image.
background: rgb(255,205,205) url('http://i64.tinypic.com/23hm3rn.png') no-repeat;
Update:
To handle the case where the text is then cleared, I've added the following:
#test:empty:before {
content: '';
background-image: none;
width: 0;
position: static;
}
I want to create a set of 3 circle buttons vertically aligned (see reference: http://i.imgbox.com/hAjYNmIq.jpg) but I can't get it done for some reason, the first button seems to cover the rest. I know this is a basic code thing but I'm stuck and I need to get this solved asap.
Here's a basic code for what I've got so far:
#pagination a {
color: {color:Link Shadow};
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
position: fixed;
float:left;
z-index: 999!important;
bottom: 28px;
display: none;
background-color: #fff;
border:3px solid {color:Link Shadow};
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
margin-left: -245px; }
<div id="pagination"> Back To Top<br> Prev Page<br> Next Page </div>
After updating your HTML (incorrect href's), here's what I've come up with. Your text will be overflowing because of your size constraints, though.
And here's a Fiddle of it
<div id="pagination">
Back To Top
Prev Page
Next Page
</div>
#pagination a {
color: #000;
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
z-index: 999!important;
background-color: #fff;
border:3px solid #00a;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
display:block;
margin-bottom:20px;
}
#pagination {
position:fixed;
}
I've searched everywhere for this but I haven't found anything (maybe because I don't know exactly how to put it into words). I'm a newbie with HTML and CSS.
What I basically have is a wrapper, nav, logo, content and footer. I added a fixed background image to the body and made my divs semi transparent. My divs have a fixed width of about 1152px, margin auto and a semi transparent background color that covers the background image.
What I want to do is to make the divs transparent background color to extend to the sides, covering the full width of the screen but keeping all the content in a fixed width.
Here is an example of what I want to do:
http://electricladystudios.com/
The content, nav bar, logo, it's all centered in a specific width, but the backgrounds go beyond that width.
This is my HTML body:
<body>
<div id="wrapper">
<div id="logo"> <img src="logo.png"></div>
<div id="nav">
<ul id="navbar">
<li>HOME</li>
<li>ABOUT</li>
<li>STUDIO</li>
<li>GALLERY</li>
<li>DEMOS</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="content">
<h1>Something </h1>
</div>
<div id=footer>
<p>WEBPAGE MADE BY ME lol</a></p>
</div>
</body>
And this is my CSS (I know there are a lot of things repeated in here, but this is my first try at coding by myself and I'm just trying to get everything to look right before I optimize the code) So please, bear with me.
#charset "utf-8";
/* CSS Document */
body {
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-position:center center;
background-attachment:fixed;
color: white;
font-family: Arial;
font-size: 1 em;}
#wrapper {
width: 1152px;
background: rgba(0, 0, 0, 0.8);
margin: auto;
margin-top: 20px;
padding: 30px;
height: 100px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); }
#logo {
display: inline-block;
width: 40%;
float: left; }
#nav {
width: 52%;
display: inline-block;
text-align: right;
float: right;
padding: 20px;
margin-top: 5px;
margin-bottom: 75px;}
#navbar li {
font-size: 12px;
display:inline;
padding: 12px; }
#navbar li a {
text-decoration: none;
color: white;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s; }
#navbar li a:hover {
color: #0062A4;
transition: .5s; }
a {
text-decoration: none;
color: #0062A4;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;}
a:hover {
color: #C33;
transition: .5s; }
#content {
clear:both;
width: 1152px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 30px;
height: 800px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
background: rgba(240, 240, 240, 0.6);
color: #333;
font-family: Arial;}
#footer {
width: 1152px;
background: rgba(0, 0, 0, 0.8);
text-align: right;
color: grey;
margin:auto;
padding:5px;
padding-left: 30px;
padding-right: 30px;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
font-size: 75%; }
Any help will be greatly appreciated!
Thanks
I managed to do it. This is the method I used:
I applied margin 0 to the body so as to remove any borders imposed to the rest of the divs.
Then I wrapped all my divs around another div and gave that parent div a width of 100% and the transparent background color and then specified the width of the content on the child div.
Result is, semi transparent black background takes the full width of the page while the content stays inside that same div but with a fixed width.
Like so:
#outwrap {
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75);
background: rgba(240, 240, 240, 0.6);
width: 100%; }
#content {
width: 1152px;
margin: auto;
padding: 30px;
color: #333;
font-family: Arial; }
Heres a quick demo on jsfiddle:
http://jsfiddle.net/Dasch/fK5aB/
The way they do the fixed background is this:
background: url(images/Hero.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
body {
background-image:url(bg2.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
color: white;
font-family: Arial;
font-size: 1 em;}
add
background-size:100% 100%;
and remove
background-position:center center;