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 am working with a list that needs to work with mobile. When I shrink the window width down, most li elements shrink with the page but "SETUP" is dropping down. I'm using bootstrap.
.dollar {
font-size: 20px;
font-weight: 600;
vertical-align: top;
position: relative;
top: 17px;
}
.price {
font-size: 83px;
line-height: 1em;
padding: 0 3px;
font-weight: 200;
vertical-align: middle;
margin-right: -15px;
}
.price.in.table2 {
margin-bottom: 20px;
}
.price.in.table2 span {
color: #262626;
}
<ul>
<li>
<div class="price in table2">
<sup class="dollar">$</sup>
<span class="price">5000</span>
<span class="afterprice">/ ONE-TIME SETUP</span>
</div>
</li>
</ul>
You can set the whitespace property, but if it doesn't wrap it's going to overflow its container, which is worse from a design perspective. You're better off reducing the font size in a media query so that neither happens at that minimal break point.
you can use in css white-space: nowrap for <li> or for css class .price on <div> tag.
Related
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 1 year ago.
Improve this question
I'm making a website and I have one problem: the middle button is located differently from the other buttons. Here's what the source code looks like:
<!DOCTYPE HTML>
<html>
<h1 style="text-align:center;color:darkblue;font-family:franklin gothic"><b><i>DAVE J'S OFFICIAL WEBSITE</b></i></h1>
<button style="text-align:center;color:slateblue;background:lightgreen;font-family:courier new;height:50px;width:75px;font-size:17px"><b><i>HOME</i></b></button>
<button style="text-align:center;color:slateblue;background:lightgreen;font-family:courier new;height:50px;width:75px;font-size:17px;position:relative;"><b><i>SOCIAL MEDIA</i></b></button>
<button style="text-align:center;color:slateblue;background:lightgreen;font-family:courier new;height:50px;width:75px;font-size:17px"><b><i>BLOG</i></b></button>
</div>
</html>
Can you please tell me where's the problem? Thank you for help! :-)
Interesting. I didn't realize that the text inside a button behaves that way. Seems to have a life of its own.
A couple of errors to begin with:
missing opening div
b and i reversed in h1
Fix:
add flex to wrapping div.
h1 {
color: darkblue;
font-family: franklin gothic;
font-style: italic;
font-weight: bold;
text-align: center;
}
div {
display: flex;
}
button,
.btn {
background: lightgreen;
color: slateblue;
font-family: courier new;
font-size: 17px;
font-style: italic;
font-weight: bold;
height: 50px;
text-align: center;
width: 75px;
}
<h1>DAVE J'S OFFICIAL WEBSITE</h1>
<div>
<button>HOME</button>
<button style="position:relative;">SOCIAL MEDIA</button>
<button>BLOG</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 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>
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 wanted to have a navigation bar that has white text links without it underlined but instead it has appeared with basic links in a div so hasn't worked but I don't know what is missing.
Any suggestions would be apricated.
<html>
<style>
.box3{
padding:7px;
background: black;
font-family: arial;
font-size:15px;
}
</style>
<div class="box3">
Home
About
Contact
</div>
</html>
You will need to add style to your links, for example you can add
.box3 a {
color: white;
text-decoration: none;
}
This will change the color to white and remove the underline.
.box a { css } will only target the a tags inside of the box3 div
.box3 {
padding: 7px;
background: black;
font-family: arial;
font-size: 15px;
}
.box3 a {
color: white;
text-decoration: none;
}
<div class="box3">
Home
About
Contact
</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 5 years ago.
Improve this question
Hi I have following code:
.fotoRating {
color: #c5c5c5;
font-size: 50px;
position: relative;
text-shadow: 0px 1px 0 #a2a2a2;
}
.fotoRating .selectedStars {
color: #e7711b;
position: absolute;
top: 0;
overflow: hidden;
}
<div class="fotoRating">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<div class="selectedStars" style="width:150px;">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
When I put span on a new line, the stars will break: http://jsfiddle.net/mozkomor05/6hkpj0L4/1/
I think there is a small mistake, but I can't find it.
The set width on your selected stars container is causing the characters to break into another line to fit. If you want to prevent line-breaks, add this rule to .selectedStars
white-space: nowrap;
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
If you simply want to have different colors on the stars, you don't need two rows of them. You can just add a class to each star as needed:
.fotoRating {
color: #c5c5c5;
font-size: 50px;
text-shadow: 0px 1px 0 #a2a2a2;
}
.is-selected {
color: #e7711b;
}
<div class="fotoRating">
<span class="is-selected">★</span>
<span class="is-selected">★</span>
<span class="is-selected">★</span>
<span>★</span>
<span>★</span>
</div>
While #webdevdani approach works, it doesn't give the same result. Which is why I suggest this:
.fotoRating span {
display: table-cell;
}
This way the browser thinks they're cells and ignore the white space between the elements, while preserving the functionality
Here you go: http://jsfiddle.net/6hkpj0L4/4/
You need a fixed height on .selectedStarts. When you decrease the width to show a fewer number of stars, the stars are wrapping and your container is defaulting to height: auto; therefore showing all it's content.
Using a fixed width (here I used 70px) in combination with the overflow: hidden; which you already had in place does the job.
.fotoRating {
color: #c5c5c5;
font-size: 50px;
position: relative;
text-shadow: 0px 1px 0 #a2a2a2;
}
.fotoRating .selectedStars {
color: #e7711b;
position: absolute;
top: 0;
overflow: hidden;
height; 70px;
}
<div class="fotoRating">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<div class="selectedStars" style="width:150px;">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
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.