I've implemented one easy-peasy code which is all around the interwebz. I placed image inside textbox (type="text") field but it is touching the border of the empty box. Is there a way I can move image a little bit to the right to avoid touching with the border?! I've been struggling around but couldn't find a way.
My CSS code is:
.tbl1 {
background-image:url(images/v.png);
background-position:left;
background-repeat:no-repeat;
padding-left:20px;
}
input {
background: #fff;
display: block;
border: 2px solid rgba(0, 0, 0, .2);
padding: 8px;
font-size: 13px;
margin: 20px auto;
width: 600px;
font-family: "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
input.text:focus {
outline: none;
border-color: #09f;
color: #222;
}
Calling procedure:
<input type="text" id="url" name="web" name="ws" class="tbl1" placeholder="http://example.com/" maxlength="140" />
in photoshop, just edit the image so theres a white space to the left of it. Easy padding.
But its probably best to use background-position:15px;
Yes. there is a way you can move image a little bit to the right to avoid touching with the border.
Please try following.
.tbl1 {
background-image:url(images/v.png) no-repeat left;
background-position:8px;
padding-left:28px;
}
Related
I'm trying to create a mobile vertical dropdown menu but I'm having an issue with showing the items of the sub-menu by using :focus for both .
I found a workaround by using :focus for sub-menu and :focus-within for its items .
This solution is working and showing the sub-menu items for Google Chrome only while other browsers like Samsung internet and UC browser are not showing any except the :focus of sub-menu.
I found another solution by using :hover for both and it's working for almost all browsers.
I have two questions:
Why it was working only with chrome only?
How do I use :focus for both the sub-menu and its items?
CSS used :
.main-nav a {
color:black;
display: block;
padding: 10px 3px 10px 3px;
font-size: 20px;
text-align: center;
font-family: 'hayah';
border-radius: 25px;
transition: border-radius 0.2s ease-in;
}
.main-nav a:hover {
background:#D7D7D7;
border-radius:25px 25px 0 0;
-webkit-transition: border-radius 0.1s ease-in;
-moz-transition: border-radius 0.1s ease-in;
-o-transition: border-radius 0.1s ease-in;
transition: border-radius 0.1s ease-in;
display: block;
}
.main-nav-ul ul {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
background-color: #D9D9D9;
color: black;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 0 0 25px 25px;
font-size: 12px;
}
.main-nav-ul li:hover ul {
opacity: 1 !important;
max-height: 400px !important;
color: black;
background-color: #E2E2E2;
display: block;
}
Its hard to know what answer would work best for this situation without seeing how you implemented your HTML. :focus-within is not supported well: https://caniuse.com/#search=focus-within. Without seeing anything else I'm thinking maybe you would use JS to add and remove :hover/:focus like this answer: Can I disable a CSS :hover effect via JavaScript?. That way when you are not displaying sub-items you can get not use their hover effects.
Website: http://uniformserver.com
The bottom footer is not formatting accordingly. It should be at the end but when the site loads, it comes up the the image size.
http://imgur.com/XoqVqdg
Should look like this:
http://imgur.com/zQNlIWn
If you navigate to another page, it corrects itself.
Footer CSS
footer {
clear: both;
padding-top: 40px;
text-align: center;
cursor: default;
padding-bottom: 0px;
margin:0px auto;
}
footer p {
color: #c1c1c1;
font-size: 11px;
padding: 4px 8px 4px 8px;
background: #f7f7f7;
background: rgba(0,0,0,0.04);
display: inline;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition:color 0.2s ease-in, background 0.2s ease-in;
-moz-transition:color 0.2s ease-in, background 0.2s ease-in;
-o-transition:color 0.2s ease-in, background 0.2s ease-in;
transition:color 0.2s ease-in, background 0.2s ease-in;
}
footer p:hover {
background: #f1f1f1;
background: rgba(0,0,0,0.05);
color: #999;
}
Your footer has some padding at the bottom. If you reduce it, it will get closer to the bottom of the page.
footer.container { padding-bottom: 0; } would be a footer that touches the bottom completely, and footer.container { padding-bottom: 15px; } is probably close to what you're looking for.
However, because your page doesn't have a lot of content on it, your footer will appear higher when there just isn't enough content on the page to fill the full viewport.
A quick trick to experiment with this is zooming in and out on your browser. You can use the ctrl or cmd + +/- shortcuts.
EDIT: Hoping someone will see this one. I'm stuck and have tried several things since posting it, but to no avail.
I'm trying to display a textarea with a border shadow. For some weird reason, while other regular text input boxes on the page are displaying their inner shadows correctly, textareas do not show any inner shadows at all. How do I force textarea to display the shadow as the other input boxes do?
Here is the HTML I'm using.
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
Note that when I remove the entire class attribute of
class="form-control upladfieldset notes-field"
the inner border shadow appears, but then of course all my other styling is gone which is not ideal. So I also tried commenting out individual lines of CSS in those classes to see which line is causing a conflict, but the only thing that gets the inner shadow to appear is if I remove the class attribute declaration altogether.
Here is the CSS I'm using.
.form-control
{
color: #34495e;
border-color: transparent;
border: none !important;
border-bottom-width: 0px;
border-bottom: none;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
border: none;
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
Well... you have a lot of things going on here, but I believe I may have achieved your desired result (I'm not 100% sure I understand what you want, but I'm operating under the assumption that you want your textarea to include a border and box-shadow identical to your input field). I believe the main problem here is mainly to do with hierarchy fundamentals. Because of that, I feel like there's a few things that should be said before we tackle our actual code here. In principle, you should have more general rules towards the top of your stylesheet and more specific ones as you go down. Resets (the raw elements like textarea, input, etc.) should be at the top--or at the very least, above the classes you wish to apply to those elements.
Also, I strongly encourage you to avoid using !imporant. If you find yourself needing to use !imporant, that generally means that your real problem lies elsewhere. It shows that you're now trying to work against the natural flow of CSS to force it to cover up something else. And what happens when you need to override that rule? You're going to have to write an even more specific rule, and the whole thing can very quickly turn into a mess.
So with that said, for the sake of familiarity, I have taken your code and commented out the problematic lines and have included explanations as to why they're preventing you from achieving what you want.
.form-control
{
color: #34495e;
/*border-color: transparent; Because of this, even if you had a border, you wouldn't be able to see it (assuming you didn't override it later). */
/*border: none !important; 1. Use of !important. 2. Your border isn't showing because this is explicitly telling it not to. */
/*border-bottom-width: 0px; You're getting rid of the bottom border. */
/*border-bottom: none; You're getting rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; Explicitly telling it not to have a box-shadow */
/* box-shadow: none; Explicitly telling it not to have a box-shadow */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; Explicitly telling it not to have a border */
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
However, here, I have re-ordered some of your lines in order to implement some of the principles I mentioned earlier. Because I don't know what you're going to use this for, I tried not to tamper with things when it was not directly necessary. I also did not delete any of your lines. Instead, I simply commented them out so you can follow along and see what I actually did. You can delete them yourself if you so wish to.
input[type=text], textarea /* Moved to the top of your stylesheet */
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1); /* Reminder: You're defining your box-shadow here */
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1); /* Reminder: You're defining your border here */
}
input[type=text]:focus, textarea:focus /* Moved to the top of your stylesheet */
{
/*box-shadow: 0 0 5px rgba(89, 89, 89, 1); No need to redefine in :focus. It will be in inherited. */
padding: 3px 0px 3px 3px; /* See: padding in .uploadfieldset (below) */
/*margin: 5px 1px 3px 0px; No need to redefine in :focus. It will be in inherited. */
/*border: 1px solid rgba(204, 204, 204, 1); No need to redefine in :focus. It will be in inherited. */
}
.form-control
{
color: #34495e;
/*border-color: transparent; This will hide previously defined border. */
/*border: none !important; This will override previously defined border. Remember, don't use !important.*/
/*border-bottom-width: 0px; This will get rid of the bottom border. */
/*border-bottom: none; This will get rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; This will override previously defined box-shadows. */
/* box-shadow: none; This will override previously defined box-shadows. */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; This will override previously defined borders. */
border-radius: 0;
padding: 0; /* This tells your text field to not have any padding. However, when you click on your textarea, the padding set by textarea:focus will override THIS. */
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
If you try either of those with this markup:
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
<input type="text">
You can see that both fields are stylized likewise. I hope this helps.
I'm working in Dot Net Nuke on a website that has been previously setup. I want to add a css button I found on the internet. I put the html in the html fields and css in the stylesheet editor.
when a link is created it automatically adds ">>" after the link text. In other buttons css buttons I used I managed to remove that, but with this button I can't remove it. Also I want the button to link to another page using "a href". How would i make this possible?
Button HTML:
<div class="btn-container">
<input type="submit" value="button" id="button-blue"/>
<div class="ease"></div>
</div>
Button CSS:
#button-blue {
float: left;
width: 100%;
max-width: 500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
/* Change text color & background opacity on hover*/
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease {
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
well you want the button to link to another page, to do that you can simply style your href to look as a button like this (Run the following snippet) -
Submit
<style>
#submit-btn{
display :inline-block;
text-decoration:none;
background-color:blue;
border-radius:4px;
padding:5px 10px;
color:white;
}
</style>
Well for the issue of >> after every link it may be some css that is adding it, which you haven't posted in your question so try adding following code which may remove it..
a:after {
content: none !important;
}
OR this one -
a:after {
display: none !important;
}
or just for the link like button I posted above try this -
#submit-btn:after {
content: none !important;
}
OR
#submit-btn:after {
display: none !important;
}
NOTE - Since you are overwriting CSS don't forget to add !important..
Change to button to href
<div class="btn-container">
Button
<div class="ease"></div>
</div>
CSS
#button-blue{
float:left;
width: 100%;
max-width:500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
}
/* Change text color & background opacity on hover*/
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
#button-blue:after{content:">>"}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease{
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
demo link
https://jsfiddle.net/0zctLenb/
I currently have this JSfiddle.
HTML:
<div class="refTable">
<div class="refRow">
<div class="refCell"><img src="images/test.jpg" /><p>Test 1</p></div>
<div class="refSep"></div>
<div class="refCell"><img src="images/test.jpg" /><p>Test 2</p></div>
<div class="refSep"></div>
<div class="refCell"><img src="images/test.jpg" /><p>Test 3</p></div>
</div>
</div>
CSS:
.refTable {
display:table;
max-width:919px;
width:100%;
margin:0px auto;
}
.refRow {
display:table-row;
}
.refCell {
display:table-cell;
width:291px;
text-align: center;
font-size:16px;
border:1px #ffffff solid;
padding:0px 0px 10px 0px;
background:#eaeaea;
color:#333333;
-webkit-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
resize: none;
outline:0;
transition-duration: 0.2s;
}
.refCell img {
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
padding-bottom:5px;
}
.refCell p {
line-height: 20px;
}
.refCell:hover {
border-color:#b32f01;
background:#ffffff;
-webkit-transition: color background 0.2s ease-in-out;
-moz-transition: color background 0.2s ease-in-out;
-ms-transition: color background -0.8s ease-in-out;
-o-transition: color background 0.2s ease-in-out;
transition: color background 0.2s ease-in-out;
cursor:pointer;
color:#cacaca;
}
.refCell:hover img {
opacity:0.4;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity -0.8s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.refSep {
display:table-cell;
width:20px;
}
In the fiddle, no images display in the boxes. However, there normally would be. On hover, the boxes change background color, font color, and, provided there is an image, image opacity. That's fine.
Now, I would like to make it so that, on hover, an image or div "slides" up from the bottom/side/top that says "Visit this website", possibly with some sort of icon.
What is the best approach? I've really been thinking about it, but I can't come up with a solution.
I did this with just css :hover and css3 transitions.
This is the css I wrote,
.info {
position: absolute;
top: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
text-align: center;
-webkit-transition: top 0.6s ease-in-out;
left: 0;
color: #f7f7f7;
text-decoration: none;
}
.refCell:hover .info {
top: 0;
display: block;
}
I also added this to the .refCell class,
position: relative;
overflow: hidden;
The html I added,
<span class="info">Click to view website</span>
Here is the JSFIDDLE to see how it works.