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
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
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 5 months ago.
Improve this question
I've p-dropdown, and i need to make its placeholder to going up, when i choose one of the sort options, like on screenshots. Is there any way to achieve it with p-dropdow? Cause when i just add placeholder="Sort by" to p-dropdown, it disappears, when i choose sort options
You can do this with raw html and css as follows. You might be able to adapt it to suit your needs.
.input-container {
display: inline-block;
padding: 0.5rem 0.5rem;
position: relative;
border-radius: 0.25rem;
border: 1px solid lightgray;
}
.input-container>label {
display: none;
font-size: 0.6rem;
position: absolute;
background-color: white;
left: 0.5rem;
top: -0.4rem;
padding-inline: 0.25rem;
}
.input-container:focus-within {
border: 1px solid blue;
box-shadow: 0px 0px 8px 0px #0000ff;
}
.input-container:focus-within>label {
display: inline-block;
}
.input-container:focus-within input::placeholder {
opacity: 0;
}
.input-container>input {
outline: none;
border: none;
}
<div class=input-container><label id='placeholder-text' for='cats'>Choose a cat</label>
<input id='cats' placeholder='Choose a cat' type="text" list="catoptions" />
<datalist id="catoptions">
<option>Tiger</option>
<option>Lion</option>
<option>Jaguar</option>
<option>Kitten</option>
</datalist>
</div>
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 trying to hide my .dwBtn class button on hover, using the code below, but it's not working.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
display: none;
}
<button class="dwBtn">Test</button>
I've searched on Google and on StackOverflow but cannot find a solution. I have tried changing the opacity, like so:
opacity: 0;
But it still isn't doing anything as far as I can see. It looks as if there was a typo somewhere, but I can't find it.
When the element isn't displayed, you can't hover it, so the rule stops applying, so it springs back immediately.
Using opacity as you suggested will work, it just didn't seem to because of typo you have since fixed.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
opacity: 0;
}
<button class="dwBtn">Test</button>
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
Link: http://path.com.my/v2/gallery/
Try when you hover/mouseover one of the links in the tab, especially near EXTERIOR, ILLUMINATED, INTERIOR, PYLON , the items on the second row keep moves around.
I tried changing a few of the CSS on hover but it doesn't seems to work.
Anyone can help?
Remove float from .sortLink and use inline-block instead.
Use following css:
.sortLink {
display: inline-block;
vertical-align: top;
color: #999;
font-size: 14px;
padding: 5px 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
margin: 0 5px 5px 0;
transition-duration: 0.5s;
}
Solved:
margin: 0 6px 0 0 !important;
Remove the float:left; from a tag and display:inline-block;
.sortLink {
/* float:left; */
display: inline-block;
}
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 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 8 years ago.
Improve this question
Hello I am new to CSS and I am using quotes in a website I am building. However I do not really want to use an image to achieve the style when I might be able to use CSS. My problem is I have no idea where to start! THIS IS THE IMAGE I WILL USE IF THE SAME EFFECT IS NOT POSSIBLE IN CSS Can somebody please show me how to achieve this
Simplest way is to create a <blockquote> element and using pseudo elements to control the quotation marks. Note: some styles are added, mainly margins and paddings, to overwrite browser styles.
body {
font-family: sans-serif;
}
blockquote {
color: #aaa;
position: relative;
display: inline-block;
padding: 0 5px;
}
blockquote p {
margin-bottom: 5px;
}
blockquote:before,
blockquote:after {
content: "“";
font-size: 70px;
font-family: "Georgia", Serif;
color: #666;
position: absolute;
left: -30px;
top: 5px;
}
cite {
float: right;
color: black;
font-size: 12px;
margin: 0;
padding: 0;
}
blockquote:after {
content: "”";
right: -30px;
left: auto;
}
<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>
Article mentioned by #thomas should have all the relevant information you need here