Currently having an issue with my button. I want to be able to center my 'a' tag but at the moment it will only stick to the left side. I have tried using "display:block" but this will make my button take up the full width of any div it's been put in.
HTML:
Apply Now
CSS:
.button {
padding:1em;
text-align: center;
display:inline-block;
text-decoration: none !important;
margin:0 auto;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Use a div to center the link
.button {
padding:1em;
text-align: center;
display:inline-block;
text-decoration: none !important;
margin:0 auto;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.container{
width: 100%;
text-align: center;
}
<div class="container">
Apply Now
</div>
Use the text-align: center; on a parent element to center align all the child elements inside it. They(child elements) do not have to be block level elements for the same. Your question has the concern that you do not want to take up the full space of the parent div by using display:block on your a tag.
You don't have to, even if you specify display:inline-block on your a tag and wrap it inside a parent with text-align: center;, it will solve your task.
Alternatively, you can use margin-left:25% or so, in case the above answer does not suit your need.
Feel free to drop in the code in case you need more help on this.
Thanks,
Yaman
I agree with Yaman, the easiest way I used is a < p > tag, just put it before and after your link
<p align="center">
Apply Now
</p>
the issue is simple. Just add a paragraph tag before the button and inside the tag, add the alignment. This should work
<p align="center">
Hi
If text-align: center does not work than You can add a style tag in the respective tag and use
justify-content: center;
Related
I'm trying to center align several crossfade icons within a widget. So far, I've only managed to align them either left or right. If I try to do anything else, it just stacks each icon vertically. Here's the CSS:
.icon {
float:left;
position:relative;
height:32px;
width:32px;
padding:4px;
}
.icon img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.icon img.top:hover {
opacity:0;
}
And the HTML for one icon:
<div class="icon">
<img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter-1.png" class="bottom" />
<img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter.png" class="top" />
</div>
I'm trying to do it with five icons, but can't figure it out. Seems to be a problem with how the crossfade effect stacks the images.
Here it is on JFiddle.
Try surrounding them with a 100% width div, removing float:left, and adding display:inline-block
http://jsfiddle.net/3on0x2Ly/2/
You can do that with one more div tag, which will wrap the icon. First you have to remove the float: left property of the class .icon.
Now one of the ways is to set the .icon class to inline block and the new div tag, which wrap them, you have to give it a text-align property to center. And that will center the each icons.
Here is the code - http://jsfiddle.net/syrup/3on0x2Ly/1/
My work so far is here - http://jsfiddle.net/WDz6R/.
I'm trying to make each section of the accordion have an automatic height, but when i use 'height:auto' or a percentage instead of a pixel based height the sections are the correct height, but the transitions break.
Does a fixed height have to be used in order to use css transitions or is there another workaround?
This is the relevant part of the css:
#accordion section {
overflow:hidden;
height:220px;
}
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
Short answer, to animate it you need fixed heights. There's a sloppy max-height workaround shown here:
http://jsfiddle.net/WDz6R/3/
#accordion section.ac_hidden {
max-height:44px;
}
#accordion section {
overflow:hidden;
height:auto;
max-height: 400px;
}
Or use jQuery's slideUp() / slideDown()
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.
I'm trying to modify named elements in my design. I've simplified the situation as you can see in this fiddle:
http://jsfiddle.net/6THpF/
Simply, when I try to modify one named element from the other, it works, but when I try to do the same modification from the opposite direction (other element) it does not work.
Here is the sample code:
body{
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
#div_one:hover ~ #div_two{
background-color:red;
}
#div_two:hover ~ #div_one{
background-color:red;
}
From MDN:
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
So since div_one is not preceded by div_two the second rule won't work. In other words, there is no "previous sibling" selector.
Try this.I answered:
HTML:
<div id="div_one">This is div 1</div>
<div id="div_two">This is div 2</div>
CSS:
body{
background-color:lightgrey;
}
#div_one, #div_two{
background-color:darkred;
display:block;
width:300px;
text-align:center;
padding:30px;
margin:10px;
color:white;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
JAVASCRIPT:
$(document).ready(function(){
$("#div_one").mouseover(function(){
$("#div_two").css("backgroundColor","blue");
});
$("#div_one").mouseout(function(){
$("#div_two").css("backgroundColor","darkred");
});
$("#div_two").mouseover(function(){
$("#div_one").css("backgroundColor","blue");
});
$("#div_two").mouseout(function(){
$("#div_one").css("backgroundColor","darkred");
});
});
remember that use and embed the jquery.js core to your web page.
I am not solving the sibling selector issue (that I think that can not be solved), but the effect intended.
You need to group both divs in one:
<div>
<div id="div_one">This is div 1</div>
<div id="div_two">This is div 2</div>
</div>
and now target the hover state of the group div:
div:hover #div_two{
background-color:red;
}
div:hover #div_one{
background-color:red;
}
of course the later can be written better, (or shorter) I just wanted to change as little as possible in your example
This has some drawbacks that you may be will need to address.
If you want the divs to have space between them (and this space not responsive to the hover), then I think that you will need to change them to absolute positioning.
see the fiddle
edited
I missed the requirement about not hovering the hovered div. Change css to
div:hover #div_two:not(:hover){
background-color:red;
}
div:hover #div_one:not(:hover){
background-color:red;
}
Now I think it's what you wanted edited fiddle
I have a DIV that's wrapped in an anchor tag; all of the DIV is clickable, even the whitespace that doesn't contain any text (and this is desired, for my purposes).
I have another anchor tag that's absolutely positioned over this DIV with a higher z-index. This anchor tag wraps an image (a "close" icon).
This all works correctly, EXCEPT that I only want the close icon to appear on hover. As currently implemented, the close icon is always visible. I'm not sure if I'm going about this the right way. As a further wrinkle, I need to implement this without using JavaScript, since I'm running on an embedded system and I can't afford to invoke a JavaScript engine.
This only needs to work with WebKit (even more specifically, it only needs to work with Chrome).
Can someone give me a nudge in the right direction?
Here's the CSS I'm using:
.content {
border-top: 1px solid #eff1f2;
border-bottom: 1px solid #c5c5c5;
padding: 8px 11px;
border-left: 1px solid #c5c5c5;
}
div.content:hover {
background-color: #d1d6de;
}
.close {
position: absolute;
right: 100px;
top: 10px;
z-index: 0;
}
Here's my HTML:
<div>
<a href="native://action1/">
<div class="content">
<p>This is my content</p>
</div>
</a>
<a href="native://action2/">
<img class="close" src="images/close.png"/>
</a>
</div>
Here's a jsFiddle that contains my source.
All you need, given your current HTML, is a simple revision of your CSS:
.close {
display: none; /* Added this to hide the element */
/* other CSS */
}
div:hover a .close { /* to make the element visible while hovering the parent div */
display: block;
}
JS Fiddle demo.
With the use of the CSS transition properties, you can also use fade in/fade out:
.close {
opacity: 0; /* to hide the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
/* other CSS */
}
div:hover a .close {
opacity: 1; /* to reveal the element */
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
JS Fiddle demo.
It's also worth noting that, prior to HTML 5, it's invalid to wrap a block-level element inside of an inline-level, the a, element. In HTML 5, though, this seems to be valid (though I've yet to find the W3 documentation to support this).