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 1 year ago.
Improve this question
I am making a website for a school project and i'm trying to make the height of a border fit the size of the text. however, whenever i adjust the height the text doesn't go with it and i'm not sure how to fix this.
Code:
#slidercompare {
font-size: 17px;
font-family: sans-serif;
border-style: solid;
border-color: grey;
opacity: 87%;
position: absolute;
top: 5px;
right: 10px;
}
#slidercompare {
width: 355px;
height: 40px; /* for some reason I can't adjust the height smaller than this or else the border goes through the text. */
color: white;
background-color: black;
}
<html>
<head>
<link rel="stylesheet" href="css/boardgames.css">
</head>
<body>
<h1 id="slidercompare"><br>Chess.com (left) vs Video Chess (right)</h1>
</body>
</html>
Any ideas? Thanks
May this be what you are trying to achieve?
#slidercompare {
font-size: 17px;
border-style: solid;
border-color: grey;
opacity: 87%;
}
#slidercompare {
width: fit-content;
color: white;
background-color: black;
}
<h1 id="slidercompare">Chess.com (left) vs Video Chess (right)</h1>
I inserted <br> to <h1>. Used that to seperate a thing earlier i dont need to seperate now. So, removing the <br> tag fixed the issue.
Related
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 2 years ago.
Improve this question
This is my first question on stack overflow so sorry if I'm doing anything wrong.
The lower half of the button is only working and the top part isn't.
How can I fix it?
Thanks in advance
Here's my code:
.music{
position: absolute;
top: 5px;
right: 93%;
}
<div class="music">
<audio id="sound1" src="static/assets/sound/dreams.mp3" preload="auto"></audio>
<button style="box-shadow: none; border: none;height:100px;width:120px; background: url(static/assets/img/button.png)" onclick="document.getElementById('sound1').play();"></button>
</div>
It is working completely fine.
There may be some other things overlapping it.
button {
box-shadow: none;
border: none;
height: 100px;
width: 120px;
color: white;
background: url(https://source.unsplash.com/eHH_5rn3xnU/);
background-position: center;
background-size: cover;
}
<div class="music">
<audio id="sound1" src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">play</button>
<button onclick="document.getElementById('sound1').pause();">pause</button>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/wvzVXwg?editors=1100
Is it being cut off or is it not clickable?
Also, try to avoid inline styles.
For example:
Change:
<button style="box-shadow: none; border: none;height:100px;width:120px; background: url(static/assets/img/button.png)" onclick="document.getElementById('sound1').play();">
To:
button {
box-shadow: none;
border: none;
height: 100px;
width: 120px;
background: #000;
}
<button onclick="document.getElementById('sound1').play();"></button>
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 6 years ago.
Improve this question
I have a problem with styling my navigation ID. I feel like I am doing everything correctly, but my HTML is not recognising my styling when I refresh it. What am I doing wrong?
Here is the HTML code -
<body>
<div id="Navigation">
<ul>
<li> Marketing </li>
</ul>
</div>
And here is the styling of that id -
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto
}
You are never closing your div tag.
<div id="Navigation"></div>
And make sure you have a closing curly bracket for your CSS.
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto;
}
Looks like your CSS file has a UTF-8 BOM. Try recreating the file, or add /* */ in front of every rule. Eg:
/* */
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto;
}
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 years ago.
Improve this question
I am trying to achieve a desired effect where the div that holds the sections background is slanted to one direction. I was able to make a div diagonally over the top portion of the div using This solution, but I realized There is another background that needs to be seen and adding a div on top of the main content would just be a line instead of the div just slanting on top.
Is there a way to pull this effect off through Css ?
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
try this example
or go to http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency
hope this helps
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 years ago.
The community reviewed whether to reopen this question 8 months ago and left it closed:
Needs details or clarity Add details and clarify the problem by editing this post.
Improve this question
While making a form in HTML which will get converted to PDF, I just realized there is no HTML tag that conveys the meaning that the underlined block is a signature (or should be signed).
Any suggestions on how to use a semantically correct HTML element for a signature?
Why not use an input? This way, you get the correct semantics. For example, screen readers will understand that the user is expected to submit information.
.signature {
border: 0;
border-bottom: 1px solid #000;
}
<input type="text" class="signature" />
You can make an input tag, then style it so that it only has a border on the bottom
input {
border: none;
border-bottom: 1px solid black;
}
Simple codepen to illustrate the idea
Edit: Just noticed somebody else posted the same solution while I was typing this. What's with all the downvotes of these answers?
There are a couple of things you could do to achieve this. Option number one is a div with a border-bottom, but that is not editable. That can be viewed here:
#signaturename {
text-align: center;
font-weight: bold;
font-size: 150%;
}
#signature {
width: 100%;
border-bottom: 1px solid black;
height: 30px;
}
<div id="signaturename">
Signature:
</div>
<div id="signature">
</div>
The seconds option, which is editable, would be just a simple input box:
#signaturetitle {
font-weight: bold;
text-align: center;
font-size: 150%;
}
#signature {
width: 100%;
border: 0px;
border-bottom: 1px solid black;
height: 30px;
}
<div id="signaturetitle">
Signature:
</div>
<input type="text" id="signature">
EDIT
Now just thinking of another way to achieve what you would like! :)
You could perhaps use _, but there would be spaces right? False, there is a work around! View here:
#signaturetitle {
text-align: center;
font-weight: bold;
font-size: 200%;
}
#signature {
text-align: center;
height: 30px;
word-spacing: 1px;
}
<div id="signaturetitle">
Signature:
</div>
<div id="signature">
______________________________
</div>
As you can see with this one I am simply just adding the CSS property word-spacing.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I want to add two triangles using pseudo elements after the text in a table header cell. You guessed it, they would represent that the column is sortable. Of course, I can do that using a background image but I want to avoid that traditional solution.
I can add one triangle using the pseudo element :after. That's easy. I cannot use pseudo element :before to add the other triangle because it is placed before the text in the "th" element. If I have to position it, using the :before pseudo element, to be placed after the text, that will not work as a generic solution because each column header has, of course, different text.
Any idea on how to get around this?
DEMO: http://jsfiddle.net/7Wfc8/
HTML
<table>
<tr>
<th>Short</th>
<th>Really much longer</th>
</tr>
</table>
CSS
th {
border: 1px solid red;
padding-right: 30px;
position: relative;
}
th:after,
th:before {
content: " ";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
position: absolute;
right: 5px;
}
th:after {
top: -2px;
border-bottom-color: lime;
}
th:before {
top: 10px;
border-top-color: lime;
}
Here's a FIDDLE
<table>
<tr>
<th>Text</th>
<th>Text</th>
</tr>
</table>
th {
width: 160px;
padding: 5px;
border: 1px solid #999;
}
th:after {
display: inline-block;
float: right;
width: 10px;
line-height: 11px;
font-family: sans-serif;
font-size: 12px;
color: #0296cc;
content: '▲ ▼';
}