Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to align this button centre of the web page; any ideas how to do that?
<button id="user-button" class="Sign-in"> Sign in </button>
<style>
.Sign-in{
background-color: springgreen;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
font-family: Lobster, helvetica;
}
</style>
Try wrapping the button in a div and giving that div a text-align property of center.
CSS:
#button-container {
text-align: center;
}
<div id="button-container">
<button>Center Me</button>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want the burger to show up when my screen size is lesser than 1023px.
It is not happening only when using media query
.burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media only screen and (max-width: 1053px) {
.burger {
display: block;
}
}
<button
type="button"
class="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
But the burger icon is not appearing although I've tried creating burger from span and I tags
This seems to work perfectly for me when testing on codepen. Can you check how your stylesheet is connected in your HTML document, as in this piece of code.
<link rel="stylesheet" href="stylesheet.css"></link>
In the <head> section of your html document. I have a feeling that it might not be connected.
EDIT
html
<button
type="button"
id="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
CSS
#burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media screen and (max-width: 1053px) {
#burger {
display: block;
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Here is what I'm trying to do:
overlapping buttons http://dev.960design.com/98a5fad8-c3ed-4014-a732-15145a233b83.png
I would like the red, blue and green areas to be clickable links without overlapping in an HTML5 web page. For example, if I hover my mouse or tap on the far right edge of the Blue 'B' circle, I do not want the green to be clicked. I would also prefer to have the 'white-space' between the links to be inactive ( hover:pointer would sort of 'blink' as you hover from red to blue to green ).
My initial thoughts: SVG buttons. No problem creating/implementing the svg buttons, but the clickable areas (viewbox?) is causing me problems.
So what is the best way of accomplishing this?
Here's my try with SVG...
<a href="#">
<svg>
<path id="button-svg-right" d="M0,100 L100,100 L100,0 L0,0 C27.6142375,0 50,22.3857625 50,50 C50,77.6142375 27.6142375,100 0,100 L0,100 Z"></path>
</svg>
</a>
Add a central absolute white <span> circle that is not a button.
Play with paddings, borders, till you get the desired sizes.
.btns{
position: relative;
height: 30px;
}
.btns button{
cursor:pointer;
outline: none;
border:none;
height: inherit;
width: 50px;
color: #fff;
font-weight:bold;
font-size:24px;
}
.btns button:hover{
opacity:0.7;
}
.btns > button:first-child{
background: red;
padding-right:20px;
}
.btns > button:last-child{
background: green;
padding-left:20px;
}
.btns span{
left: 32px;
position: absolute;
z-index:1;
width: 30px;
height: inherit;
border-radius: 50%;
background: #fff;
border: 5px solid #fff; margin-top:-5px;
}
.btns span button{
width: inherit; border-radius: inherit;
background: blue;
}
<span class="btns">
<button>-</button>
<span>
<button>B</button>
</span>
<button>+</button>
</span>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have hidden div and there is some content when div is been displayed the content should displayed in horizontally not vertically ?
the div will be displayed when i click on button.
<div class = "firstHidden">
<h4> Account No </h4>
<h5> 123456789 </h5>
<h4> Service Address </h4>
<h5> 49, Rampasture Raod, Hampton</h5>
<h4> Amount Due </h4>
<h5> payment Date : 09/12/2015 </h5>
</div>
try this css
.firstHidden h4, .firstHidden h5{
float:left;
padding-right:10px;
}
Try the following in your CSS: Adjust the div's width to your requirement.
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
You can use this css class
.toCenterHorizontally{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Using this JSFiddle, edited to use two divs instead of two tables (#kellypockets and #birkinpockets), I'm trying to style the button whose content is currently being displayed.
I've written the following script, but it doesn't seem to work (obviously, I'm new at this):
$(document).ready(function() {
if ($("#kellypockets").css('display') === 'block') {
$('#button2').addClass("pockets-button-active");
}
if ($("#birkinpockets").css('display') === 'block') {
$('#button1').addClass("pockets-button-active");
}
});
.pockets-button-active {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-style: normal;
font-size: em(14px);
color: #373737;
text-align: center;
text-transform: uppercase;
letter-spacing: 0em;
border-style: solid;
border-bottom: 3px;
border-color: #f5591b;
#include at-query($max, $small) {
font-size: em(12px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" class="pockets-button" type="button">
<img src="//cdn.shopify.com/s/files/1/1079/2758/files/birkin-181x178-X2.png?3337508748521283727" width="89px" alt="Hermes Birkin icon" style="margin-left: auto; margin-right: auto; vertical-align: middle;" /> Hermes Birkin
</button>
<button id="button2" class="pockets-button" type="button">
<img src="//cdn.shopify.com/s/files/1/1079/2758/files/kelly-181x178-X2.png?3337508748521283727" width="89px" alt="Hermes Birkin icon" style="vertical-align: middle; margin-left: auto; margin-right: auto;" /> Hermes Kelly
</button>
<div id="kellypockets" class="grid pockets">Bla</div>
<div id="birkinpockets" class="grid pockets">Bla</div>
Can anyone help?
You've got syntax errors, missing ( and ) in the if statements
<script>
$(document).ready(function() {
if ($("#kellypockets").css('display') === 'block') {
$('#button2').addClass("pockets-button-active");
}
if ($("#birkinpockets").css('display') === 'block') {
$('#button1').addClass("pockets-button-active");
}
});
</script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to put my second div box inside my first div box how would i implement that ..
<style>
div {
width: 400px;
height:50px;
padding: 25px;
margin: 25px;
border-style: solid;
border-width: 1px;
}
#knob {
width: 50px;
height:50px;
background-color: grey;
}
</style>
</head>
<body>
<h1>Grade me in chrome</h1>
<form action="">
<input type="radio" name="angle" value="Horizontal" checked>Horizontal
<input type="radio" name="angle" value="Vertical">Vertical
my second div would need to take up 25% of my first div how shall i do that or do i need to implement it another way?
Ideally you shouldn't be styling the div like this.
Add a class and style based on the class.
.outer-div{
width: 400px;
height:50px;
padding: 25px;
margin: 25px;
border-style: solid;
border-width: 1px;
}
.inner-div{
width: 25%;
height: auto;
padding: 25px;
border-style: solid;
border-width: 1px;
}
<div class="outer-div">
<div class="inner-div"></div>
http://jsbin.com/yaqovokuce/edit
I have updated your jsfiddle here
http://jsfiddle.net/qe81taap/
Element selector should be only used if the style needs to be reflected across all the element, otherwise use class or id selector