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 1 year ago.
Improve this question
im creating a calculator with html,css and js.
now i have a problem in html and css.
my calculator has a section for a paragraph that displays users entered number and operators. the problem is here: when user enters a lot of number, p will go out of calculator but it should go to new line! you can see what i mean in this link
here is the important part of html and css code:
.container div {
font-size: x-large;
border: 1px solid rgba( 255, 255, 255, 0.60);
border-radius: 5px;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
cursor: pointer;
transition: 0.30s;
}
.container div:not(.result):hover {
background: rgba( 255, 255, 255, 0.70);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
backdrop-filter: blur( 3.5px);
-webkit-backdrop-filter: blur( 3.5px);
}
.result {
grid-area: 1 / 1 / 3 / 6;
}
.result p {
height: 100%;
width: 100%;
padding: 10px;
}
<section class="container">
<div class="div1 result"><p class="show"></p></div>
<div class="div2"><p>+/-</p></div>
<div class="div3 number"><p>1</p></div>
<div class="div4 number"><p>4</p></div>
<div class="div5 number"><p>7</p></div>
<div class="div6 clean"><p>C</p></div>
<div class="div7"><p>( )</p></div>
<div class="div8 number"><p>8</p></div>
<div class="div9 number"><p>5</p></div>
<div class="div10 number"><p>2</p></div>
<div class="div11 number"><p>0</p></div>
<div class="div12"><p>%</p></div>
<div class="div13 number"><p>9</p></div>
<div class="div14 number"><p>6</p></div>
<div class="div15 number"><p>3</p></div>
<div class="div16"><p>.</p></div>
<div class="div17"><p>÷</p></div>
<div class="div18"><p>×</p></div>
<div class="div19"><p>_</p></div>
<div class="div20"><p>+</p></div>
<div class="div21"><p>=</p></div>
</section>
thanks for helping
try using this
When the text overflows in width use ---> word-break: break-word; to break up the text(or numbers in this case)
you can also add height: fit-content; to ajust the height of the div to your text or numbers
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 months ago.
Improve this question
I'm currently trying to recreate a rock paper scissors game using HTML CSS & JS
Everything is going well, except the design of the buttons.
I have no idea how to create a radial gradient like the one below.
Any help is appreciated
This could be achived with a combination of border,box-shadow and a inset box-shadow
I've added a little snippet below to illustrate my solution
html {
background-color: #999;
}
body {
margin: 0;
padding: .5rem;
}
.choices {
display: flex;
flex-direction: row;
gap: 2rem;
}
.wrapper {
background-color: #e3e3e5;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 0.5rem solid #dc3550;
box-shadow: inset 0 0.125rem 0 1px rgb(64 64 64 / 25%), 0 0.25rem 0 0px rgb(162 21 47);
cursor: pointer;
user-select: none;
transition: box-shadow .125s, margin .125s;
}
.wrapper:hover {
background-color: #efd6c0;
}
.wrapper:active {
margin-top: .25rem;
box-shadow: inset 0 0.125rem 0 1px rgb(64 64 64 / 25%);
}
<div class="choices">
<div class="wrapper">
<!-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height -->
F
</div>
<div class="wrapper">
<!-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height -->
S
</div>
<div class="wrapper">
<!-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height -->
P
</div>
</div>
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 2 years ago.
Improve this question
I would like to create a field to choose sizes for my page exactly like "Case size" in the link below. I just started learning HTML, CSS, and javascript.
https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT42LL/A&option.watch_bands=MXP72AM/A&preSelect=false&product=Z0YQ&step=detail#
table {
table-layout:auto;
width: 100%;
border-collapse: collapse;
border: 2px solid black;
height: 30px;
font-size: large;
font-weight: bold;
}
table tr td {
padding: 10px;
}
<div class="case-size">
<table id="my-table" onclick="changeBorderColor()">
<tr>
<td>40mm</td>
<td rowspan="2" style="text-align: right;">From $399</td>
</tr>
<tr>
<td><small>Case fits 130-200mm wrists.</small></td>
</tr>
</table><br>
<table>
<tr>
<td>44mm</td>
<td rowspan="2" style="text-align: right;">From $429</td>
</tr>
<tr>
<td><small>Case fits 140-220mm wrists.</small></td>
</tr>
</table>
</div>
These pieces of codes should help you. You do not need JavaScript for doing that. Plain CSS has the necessary logic for this purpose.
Use a radio input so that only one of the given options can be selected. Checking if the input is checked is done with the CSS pseudo-class selector :checked. Using an input removes all the worries for the onclick logic you are trying. The + selector is adjacent sibling selector, it selects its sibling directly next to it.
Talking of functionality, use the onchange event handler instead of onclick.
Reading the code should explain itself to you. Check out the Further Reading section at the bottom of this answer. Don't hesitate to comment your query.
/*Do not focus on the numbers,
they are taken from the webpage given in your question to match the exact style*/
input.size-button-input[type="radio"] {
display: none;
}
label.size-button-label {
font-family: 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
font-size: 17px;
line-height: 1.23543;
font-weight: 400;
letter-spacing: -.022em;
color: #333;
width: 400px;
min-height: 4.88235rem;
padding: .70588rem .88235rem;
margin-top: .82353rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
border: 1px solid #d6d6d6;
border-radius: 4px;
box-sizing: border-box;
border-spacing: 0;
background-color: hsla(0, 0%, 100%, .8);
overflow: hidden;
cursor: pointer;
}
.size-button-label .size-text {
font-weight: bold;
}
.size-button-label .desc {
margin-top: 4px;
font-weight: normal;
font-size: 12px;
line-height: 1.33341;
font-weight: 400;
letter-spacing: -.01em;
}
input.size-button-input:checked+label.size-button-label {
box-shadow: 0 0 0 .11765rem #0070c9;
border-color: transparent;
}
label.size-button-label:hover {
border-color: #888;
}
label.size-button-label:active {
box-shadow: 0 0 0 0.17647rem rgba(131, 192, 253, .5);
outline: none;
}
<input type="radio" name="size" id="size1" class="size-button-input" onchange="//Your Function" checked>
<label for="size1" class="size-button-label">
<div class="size-text">40mm
<div class="desc">Case fits 130-200mm wrists.</div>
</div>
<div class="price-text">From $399</div>
</label>
<input type="radio" name="size" id="size2" class="size-button-input" onchange="//Your Function">
<label for="size2" class="size-button-label">
<div class="size-text">44cm
<div class="desc">Case fits 140-220mm wrists.</div>
</div>
<div class="price-text">From $429</div>
</label>
Further Reading:
CSS Selectors: Combinators on MDN
:checked - CSS on MDN
:checked on CSS Tricks
onchange event handler on MDN
I have a container that holds images of work. How do I use JS to bring up a button and some extra info on the image when I hover over it.
I tried using CSS and the hover tag but it would apply the effect I needed below the image, Not on top of it. The page is HTML, with CSS and the only JS code will be for this effect. The site is for my portfolio so each image is different but the class is all the same. The code below is what the original code is without the effect. If you could show me how to correctly do this I would really appreciate it, thanks.
I don't have the code I tried using before as I tried that many it felt pointless. I'll edit the question when I attempt another solution and post either the failed attempt or the successful attempt.
Here is a JSFiddle link
Welcome to StackOverflow!
So it seems like you only wanted to use the JavaScript as a fallback since you couldn't get the CSS to work. I would recommend against this as you may run into various compatibility issues between browsers and browser versions if you're not using a Polyfill.
To do this in CSS, I would recommend creating a container for each work item. In my example, I created a .item class and used that to contain the image and text. Once that was created, we can now look for a :hover on each .item and use that to modify the elements inside of our .item.
Let me know if you need me to clarify any part of my explanation or if I misunderstood any parts of your question.
.item {
width: 50%;
margin: 0 auto;
}
.wrapper {
text-align: center;
}
.work_container {
display: inline-block;
position: relative;
/* width: 1200px; Removed for testing */
height: 100%;
text-align: center;
}
.work_title {
display: inline-block;
width: 100%; /* Changed for testing */
height: 30px;
position: relative;
top: 30px;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 500;
color: black; /* Changed for testing */
/* Used for the animation */
opacity: 0;
transition: 0.3s;
}
.work-hub {
width: 100%; /* Added for testing */
position: relative;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
-webkit-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
-moz-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
}
/* Run the hover on the container */
.item:hover .work_title {
opacity: 1;
}
<main>
<div class="wrapper">
<div class="work_container">
<div class="item">
<h1 class="work_title">Logo Visualisation</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Rock Banner</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Forest Fire</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
<div class="item">
<h1 class="work_title">Beach Body</h1>
<img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
</div>
</div>
</div>
</main>
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>
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>