I'm trying to allow the buttons to not be on top of each other! I am pretty sure there is a simple attribute that I need to put into the CSS Code, but I can't seem to figure it out! Also, is there a way to allow the buttons to fill the entire screen, without a lower scroll bar appearing! I tried to used the 100% part in the padding, but that made the page very large!
<style>
div#menubar2 > a{
font-family:Aria, Helvetica, sans-serif;
font-size: 18px;
background: #333;
padding: 150px 50%;
color:#999;
margin-right: 30px;
margin-bottom: 30px;
margin-top: 30px;
text-decoration:none;
border-radius: 3px;
-o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
div#menubar2 > a:hover{
background: #0099CC;
color:#FFF;
}
</style>
</head>
<body>
<div id="menubar2">
Home
<br>
Shop
<br>
News
<br>
Contact Us
<br>
Support Us!
<br>
Requests
</div>
</body>
</html>
You need to add
display:inline-block;
to your " div#menubar>a " css
Also, it is good practice to use an unordered list for this sort of thing.
As for the second part of your question, you are using a lot of absolute sizing (px) instead of percentages, so you'd probably need some refactoring to make that work. As it stands it'd take some refactoring.
Hey bud welcome to web design. You need to use what we call a float.
Float example.
http://jsfiddle.net/fhu6v5L4/1
I'd advice you to learn using
box-sizing: border-box
It solves a lot of problems by preventing div to get bigger when you add paddings, borders etc.
Related
I've made a series of six boxes which when the user hovers over the fonts-size inside is increased, however this moves the boxes as you can see in my example. How do I fix this?
Also the border size is 2px, but where two boxes meet it appears to be 4px, how would I get the two touching sides to overlap (preferably without negative margins as this would get confusing once the screen is resized).
Thanks for any help in advance.
https://jsfiddle.net/frw95vdL/
#main-content a {
color: #000;
border: #000 solid 2px;
display: table-cell;
text-align: center;
vertical-align: middle;
text-decoration: none;
-webkit-transition: font-size ease 3s, background-color ease 0.7s;
-moz-transition: font-size ease 3s, background-color ease 0.7s;
-o-transition: font-size ease 3s, background-color ease 0.7s;
transition: font-size ease 3s, background-color ease 0.7s;
}
font-size cause of this and I recommend you a solution that use transform: scale() instead of font-size. Actually I think font-size is a bad idea for do this and transform scale will better. I made some change to your fiddle.
#main-content a:hover {
background-color: rgba(255, 0, 0, 0.5);
transform: scale(1.5);
}
jsFiddle
So, I've barely done any design and am trying my hand at it, but I guess I'm thinking of things wrong when it comes to using class and id in my html and css since I'm thinking of it from a programming perspective. I was thinking of class as a sort of parent class and id representing a child, where they can inherit properties while at the same time having their own; however, though in some regard this seems to work, my transitions don't work as I expect them to when I hover over them.
I have an unordered list of buttons like this
<li><button type = "button" id = "first">Press Me</button></li>
and this css:
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
#first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
#second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
#third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#9bffcd;
}
For first only the color transition works, for second only the border transition works, and for third only the background and color transitions work. It seems that the transitions only work for the properties I haven't overridden. Is there anyway of preserving these transitions while keeping their individual properties? I might override these transitions for other buttons, but I was just curious how I would go about maintaining it for some. Thanks
While writing reusable code always prefer to class rather that id which will help you to override the properties very easily and you don't have to be explicit.
So, here is example as you need. I think it will work for you.
HTML
<button type="button" class="first">Press Me</button>
<button type="button" class="second">Press Me</button>
<button type="button" class="third">Press Me</button>
CSS
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
.first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
.second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
.third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#fff;
}
Link to Fiddle .
Have a nice code day.
Put the pseudo :hover selector to each button ID selector.
Try: #first:hover { ... } #second:hover { ... } #third:hover { ... }
I was hoping someone could help explain the strange behaviour I'm experiencing in Webkit browsers with unwanted delays in CSS transitions.
Here is a link to the page I'm working on: http://demo.daised.com/help-me
The desired outcome is for the menu bar to shrink as the user scrolls down the page. This animates perfectly in Firefox.
However, in Webkit browsers the transition for font-size of the nav items is delayed by 6(!) seconds.
Thanks for helping me understand this better.
The issue is caused by stacked transitions on elements that inherit the transition property.
a, span {
transition: 0.5s;
}
a {
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
The section of css a, span applies the transition to both elements.
The span inherits the color from the a, but does not apply the animation color until the a has finished its animation.
The best fix for the above example would be to remove the rule for a, span
and place transition: 0.5s; inside the rule for a:
a {
transition: 0.5s;
padding: 0.5em 0.75em;
border: 1px solid red;
color: #000;
display: inline-block;
}
a:hover{
color: #f00;
background-color: #0f0;
}
<a>
<span>Text Content</span>
</a>
user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.
Anyway what you've done in the header is dangerous, and may trigger weird behaviors :
header * {
transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
}
You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).
Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.
This quick and nice answer sums up pretty much everything :
CSS3, WebKit Transition Order? How to queue to the transitions?
I ran into the same problem. My issue was that I was trying to transition properties that were originally being inherited from a parent. It turns out Webkit browsers (not Firefox) require each property that you're transitioning to actually be applied to that element. It seems they cannot transition properties that have been inherited.
For example, I was trying to do this:
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
color: #000;
}
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
}
.child.active {
border-color: #ff0000;
color: #ff0000;
}
Firefox managed to accomplish this but both Chrome and Safari required this:
.child {
transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
border-top: 10px #000 solid;
// even though the color property is inherited,
// webkit requires it for transitions
color: #000;
}
Another reason for unwanted delays is with overflow: hidden;. If you have a dropdown toggle navbar for example: When it is toggled open, and the max-height is set to 1000px, whilst also having the CSS property overflow: hidden;, it will take longer to transition from its max-height to closed.
Came accross this issue as I had the same bug.
I had this in my CSS :
:root {
--duration-fast: 0.2s ease-in-out;
}
* {
transition: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
text-shadow var(--duration-fast);
}
Turned out it wasn't such a great idea... Here's how I fixed it:
:root {
--duration-fast: 0.2s ease-in-out;
--transition-fast: color var(--duration-fast),
border-color var(--duration-fast),
border var(--duration-fast),
transform var(--duration-fast),
opacity var(--duration-fast),
margin var(--duration-fast),
box-shadow var(--duration-fast),
background var(--duration-fast),
text-shadow var(--duration-fast);
}
Now, when I want to have an element with transitions (without specifying all of them), I just do this:
.my-component {
transition: var(--transition-fast);
}
I'm attempting to create a small animation on an image (the image grows slightly) when a link is hovered over using only CSS3 animations.
The relevant snippets from my code
HTML:
<img id="enterimg" src="img.png" alt="" />
<a id="enterbutton" href="home.php">Enter</a>
CSS:
#enterimg {
width: 350px;
height: 350px;
-webkit-transition: width 1s ease-out, height 1s ease-out;
-moz-transition: width 1s ease-out, height 1s ease-out;
-o-transition: width 1s ease-out, height 1s ease-out;
transition: width 1s ease-out, height 1s ease-out;
}
a:hover ~ #enterimg{width:400px;height:400px;}
I'm sure the transitions themselves are correct, but none of the different "calls" (the last line of CSS) I've tried have worked.
(This is similar to a number of other questions, but I've looked through them and as far as I can tell none of them answer my question)
Thanks to Lokesh Suthar.
The order of the sibling selector required I placed the link first in the markup. Since the selection was written:
a:hover ~ #enterimg{width:400px;height:400px;}
The markup needed to be in that order
<a id="enterbutton" href="home.php">Enter</a>
<img id="enterimg" src="img.png" alt="" />
If you wrap the content in the trigger, then position the content absolutely, you can achieve something similar to triggering a sibbling with CSS. At least it'll look and act that way.
HTML
<a href="">Click Me
<img id="enterimg" src="http://www.druglessdrs.com/wp-content/uploads/2012/07/google-logo-small.jpg" alt="" />
</a>
CSS
a img {
display:block;
position:absolute;
top:80px;
left:0;
border:solid 1px black;
-webkit-transition: width 1s ease-out, height 1s ease-out;
-moz-transition: width 1s ease-out, height 1s ease-out;
-o-transition: width 1s ease-out, height 1s ease-out;
transition: width 1s ease-out, height 1s ease-out;
}
a:hover img {
left:50px;
}
Fiddle
please check out this code in jsfiddle
HTML:
<div id="main">
<div id="menu">
Home
About Us
Pictures
Contact Us
</div>
</div>
CSS:
#main
{
width: 64em;
height: 25em;
}
#menu
{
background-color: #00b875;
height: 3em;
}
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover
{
background-color: #0d96d6;
}
when switching from one button to another very quickly, you'll notice that there is actually some gap in between two buttons. i want to get rid of this space. any ideas? if you do answer the question, please also explain why a certain property will fix this.
i know that it is tweakable using padding and margin, but the result is likely to get distorted upon zoom. please point out a stable way of solving the problem.
thanks
Look at this jsFiddle
I've updated display:inline-block; to display:block; on the menu links and added float:left to them.
When you use inline-block you will have this ugly inline gap between elements caused by the whitespace between the elements in your HTML markup..
Any whitespace between tags in HTML is collapsed into a single space character, which is why you have that gap.
You could:
Float your elements left,
Put the </a> and <a> next to each other in the source or
Use a font-size: 0 trick
In this case, personally I'd float all my <a>s left although removing whitespace from your source comes with the fewest caveats, the only one being that it's more difficult to read.
Get rid of the spaces themselves: this may look messy but actually it's the cleanest thing you can do. Anything you achieve with CSS tricks is just putting the spaces there and then denying their existence. Instead, you might want to omit them; the only problem to solve is readability.
So let's make it readable:
<div id="main">
<div id="menu">
<!--
-->Home<!--
-->About Us<!--
-->Pictures<!--
-->Contact Us<!--
-->
</div>
</div>
Again, I know it seems weird, yes, but think about it. The real weirdo here is HTML itself, not giving you a clear way to do this. Consider it a special markup! It could as well be part of the HTML standard; technically, btw, it is 100% standard, you are free to use comments...
here is your solution
http://jsfiddle.net/NPqSr/7/
.buttons
{
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left: 10px;
float:left;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
It's 2017: wrap them inside an element with display: inline-flex and flex the inner buttons with something like flex: 0 1 auto:
<div style="display: inline-flex">
<button style="flex: 0 1 auto">...</button>
Try this(JSFiddle)
CSS
#main {
height: 25em;
}
#menu {
background-color: #00b875;
height: 3em;
}
.buttons {
text-decoration: none;
color: #ffffff;
line-height: 3em;
display: inline-block;
padding-left:5px;
padding-right:5px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.buttons:hover {
background-color: #0d96d6;
}
I think with latest CSS possibilities a cleaner solution is to use display:inline-flex on menu and display:flex on buttons, and maybe width:100% on menu:
http://jsfiddle.net/NPqSr/212/
Add the below style to your button. If required, make the margin negative for first of the few buttons.
button{
margin: 0px;
}
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons.