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.
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.
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/
At my personal website, I'm using the CSS3 Transition property on the top nav to animate the margins and padding of an element with a border, to make the border swell on hover.
Relevant markup:
<nav>
<a class="email" href="mailto:notmyrealemailaddress">
<div class="icon-border">
<img src="images/mail_icon.png" width="14" height="12">
</div>Email Me</a>
<a class="phone" href="tel:4075555555">
<div class="icon-border">
<img src="images/phone_icon.png" width="11" height="18">
</div>Call Me</a>
<a class="behance" href="http://behance.net/dannymcgee" target="_blank">
<div class="icon-border">
<img src="images/behance_icon.png" width="21" height="13">
</div>See My Work</a>
</nav>
CSS:
header nav .icon-border {
display: inline-block;
border: 2px solid #000;
border-radius: 30px;
padding: 5px;
margin: 0 10px;
transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}
header nav a:hover .icon-border {
padding: 10px;
margin: -10px 5px;
border: 2px solid #ddd;
transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out;
}
See what it's doing? By decreasing the margins and increasing the padding on hover, the circular border effectively gets bigger without altering the position of the image it's wrapped around.
It works pretty well, but the problem is that if I quickly move the mouse from EMAIL ME to CALL ME and vice versa, before the first animation completes, the whole nav "jumps" up and down by about a pixel. However, this issue doesn't happen between CALL ME and SEE MY WORK, which leads me to believe it's an issue that can be fixed. Any ideas?
I believe the issue is because you are transitioning the margins (and using negative margins which is always a little wonky).
A smoother solution might be using transform: scale(x)
someting like:
header nav .icon-border {
display: inline-block;
border: 2px solid #000;
border-radius: 30px;
padding: 5px;
margin: 0 10px;
transform: scale(1); /* you need a scale here to allow it to transition in both directions */
transition: 0.15s all ease;
}
header nav a:hover .icon-border {
transform: scale(1.2);
border: 2px solid #ddd;
}
Maybe this works:
header nav a {
display: inline-block;
}
div {
transition: all 0.5s ease;
padding: 13px;
}
div:hover {
padding: 23px;
}
or
* { transition: all 0.5s ease; }
div {
padding: 13px;
}
div:hover {
padding: 23px;
}
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
Here is my Code:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.
Sorry I couldn't comment, my rep isn't high enough...
I found a solution while tinkering around.
People who directly wanna see the results:
With click: https://jsfiddle.net/dt52jazg/
With Hover: https://jsfiddle.net/7gkufLsh/1/
Below is the code:
HTML
<ul class="list">
<li>Hey</li>
<li>This</li>
<li>is</li>
<li>just</li>
<li>a</li>
<li>test</li>
</ul>
<button class="click-me">
Click me
</button>
CSS
.list li {
min-height: 0;
max-height: 0;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.active li {
min-height: 20px;
opacity: 1;
}
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
I faced the problem with display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
Jsfiddle
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
I also made these changes:
position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
max-height
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
https://www.codehive.io/boards/bUoLvRg
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
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;
}