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 can't seem to find the answer to this question.
I am trying to change the text color of the words "Pro Tip" in this code
<div style="background-color: #f7f7f7; padding: 1.0em; max-width: 45.0em; margin: 1.0em 0; border: solid 1.0px #cccccc;">
<strong><text-color-#ff9800&g>tPRO TIP</></> -
</strong> Text 2
</div>
NO matter what I Google nothing works. How can I figure it out? Also how can I write the code that fixes this?
https://www.screencast.com/t/U6KqJ9dIHVu
You can use the CSS property color to style the <strong> element.
<div style="background-color: #f7f7f7; padding: 1.0em; max-width: 45.0em; margin: 1.0em 0; border: solid 1.0px #cccccc;">
<strong style="color: #ff9800;">PRO TIP -
</strong> Text 2
</div>
You should remove &g from hex color. And there is no valid tag like text-color. That's why you should use style attribute in strong tag. font is not supported by HTML5. so better ignore it. Here this code works perfectly.
<div style="background-color: #f7f7f7; padding: 1.0em; max-width: 45.0em; margin:
1.0em 0; border: solid 1.0px #cccccc;">
<strong style="color:#ff9800">tPRO TIP</></> -
</strong> Text 2</div>
The structure of what the code you have makes it hard to read and use. The attribute you need to target to change the colour of your text is 'color'. As you're using inline styles rather than a CSS stylesheet I'd use this instead:
<div style="background-color: #f7f7f7; padding: 1.0em; max-width: 45.0em; margin: 1.0em 0; border: solid 1.0px #cccccc;">
<div style="font-weight: bold; color: #ff9800">
<p>PRO TIP</p>
</div>
<div>
<p>Your text here</p>
</div>
</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 last month.
Improve this question
I have no idea about CSS, please help me to write CSS to make look the list items as in the image. These are 3 list items here but it's dynamic. I tried to play around with but it's the last time I am working with CSS so I do not want to put too much into it, what looks like fairly simple task. Please help.
This is how I want it to look
li {
display: flex;
list-style: none;
}
.style {
padding: 3px 10px;
border-radius: 10px;
background-color: #15dfc8;
margin-right:20px;
}
Something like this:
It will look more like you want it when the fonts from your site are applied
.lines, .line{
display:flex;
}
.lines{
flex-direction: column;
gap: 10px;
}
.line{
align-items: center;
gap: 5px;
}
.number{
padding: 3px 10px;
border-radius: 10px;
background-color: #15dfc8;
}
<div class="lines">
<div class="line">
<div class="number">45</div>
<div class="text">Fit (Very Good)</div>
</div>
<div class="line">
<div class="number">46</div>
<div class="text">Fit (Very Good)</div>
</div>
<div class="line">
<div class="number" style="background-color: lightgray;">47</div>
<div class="text">Fit (Good)</div>
</div>
</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 3 years ago.
Improve this question
Locally the progress bars shows up. but when hosted it only shows the percentage text.
So far when hosted locally everything works fine but I can't seem to find the problem when hosting it on a website, no errors are given either.
I'd like it to show up when I'm actually visiting the website. But for now it shows only the text between the span tags.
Inline css and seperate .css file.
#skills{
width:100%;
height:20px;
border:1.2px
solid black;
}
#HTML {
width: 90%;
background-color: #c5e5ef;
height: 20px;
text-align: center;
position: relative;
}
#PHP {
width: 71%;
background-color: #c5e5ef;
height: 20px;
text-align: center;
}
#MySQL {
width: 66%;
background-color: #c5e5ef;
height: 20px;
text-align: center;
}
#CSS {
width: 88%;
background-color: #c5e5ef;
height: 20px;
text-align: center;
}
#Java {
width: 45%;
background-color: #c5e5ef;
height: 20px;
text-align: center;
}
<p>HTML</p>
<div id="skills">
<div id="HTML"><span style="color: black;"><b>90%</b></span>
</div>
</div>
<br>
<p>PHP</p>
<div id="skills">
<div id="PHP"><span style="color: black;"><b>71%</b></span>
</div>
</div>
<br>
<p>MySQL</p>
<div id="skills">
<div id="MySQL"><span style="color: black;"><b>66%</b></span>
</div>
</div>
<br>
<p>CSS</p>
<div id="skills">
<div id="CSS"><span style="color: black;"><b>88%</b></span>
</div>
</div>
<br>
<p>Java</p>
<div id="skills">
<div id="Java"><span style="color: black;"><b>45%</b></span>
</div>
</div>
This is clearly just a browser caching issue, as it seems to work in the code snippet you included above.
To avoid this kind of issues in the future, try developing the habit of refreshing using Ctrl+F5 while changing HTML & CSS code in your web pages, which forces the browser to redownload and parse your page.
Just a note: you should be using Classes to assign CSS to your Div blocks instead, and ID attributes should be unique, as they're generally used in JavaScript to retrieve and manipulate the contents of said blocks
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
This is an angular app that displays a list of movies.
Link to plunker here: https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview
In short, there are 6 elements in the ng-repeat loop to display the movies, and they are placed one next to the other with no margin, but with varying widths and colors depending on the order in which they appear(based on my limited understanding).
Index.html:
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div ng-repeat="show in shows">
<div class="rank">{{$index + 1}}</div>
<div class="img_container">
<img class="img-responsive" ng-src="{{show.series_img}}">
</div>
<h2 class="series">{{show.series}}</h2>
<p class="genre">{{show.genre}}</p>
<p class="run-start">{{show.run_start}}</p>
<p class="description">{{show.description}}</p>
</div>
</div>
</div>
</div>
The interaction of these rules is what I find particularly confusing:
div.ng-scope:nth-child(odd) h2 {
width: 400px;
}
div.ng-scope:nth-child(even) p+p {
width: 400px;
}
p {
background: #f9f9f9;
display: block;
float: left;
font-size: 18px;
height: 200px;
margin: 0;
padding: 30px;
width: 200px;
}
div.ng-scope p+p {
background: #e5e5e5;
}
div.ng-scope p+p+p {
background: #000;
color: #fff;
font-size: 14px;
width: 800px;
}
I would also appreciate any links to tutorials explaining how ng-scope works in this context.
div.ng-scope selects the <div ng-repeat="show in shows"> element because the ng-repeat adds the ng-scope class to the element when it renders.
nth-child(odd) and nth-child(even) set the styles of the odd and even children of the elements' respective containers, respectively.
p affects all <p> elements, while p+p affects all <p> elements following immediately after another <p> element. p+p+p affects all <p> elements immediately following two <p> elements.
Check out this article for more information about the plus symbol in css: What does the "+" (plus sign) CSS selector mean?
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 8 years ago.
Improve this question
I want to make the default size of the input fields and button on my form 3X larger than normal as well as the text that appears inside the input fields be 3X larger than the default.
I've seen this done before but I'll be damned if I can even find any code to get me started.
To make the input fields and buttons bigger, you will need to use CSS Selectors to carry this out, I'll give you a quick example on a basic form:
HTML:
<form ID="Form" action="Contact.php" method="post">
<!-- Standard input text boxes -->
<input type="Text" name="FirstName" placeholder="First Name">
<input type="Text" name="Surname" placeholder="Surname">
<!-- Submit button -->
<input type="submit" value="Submit" name="Submit">
</form>
CSS:
input[name=FirstName] {
font-family: Arial;
font-size: 16px;
width: 300px;
height: 150px;
font-weight: bold;
}
input[name=Surname] {
font-family: Arial;
font-size: 16px;
width: 300px;
height: 150px;
font-weight: bold;
}
input[type=submit] {
width: 300px;
height: 300px;
font-family: Arial;
font-size: 16px;
background: #DF0101; /* red */
box-shadow: #6E7849 1px 1px 10px;
color: white;
}
Here is a jsfiddle.net example of what I have just done, all the widths and heights etc can then be modified to suit your preference in the CSS stylesheet.
http://jsfiddle.net/tduagdnt/
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 9 years ago.
Improve this question
Can you rewrite my code table on the div so that it is the most optimal and consistent with the standards?
Giving you the most basic layout:(P.S. Haven't tried it in browser)
HTML:
<div>
<div class = "forumline bigRow" >
<div class="cat row">
{FORUM_NAME}
</div>
<div class="cat row">
{FORUM_DESC}
</div>
</div>
</div>
CSS:
.bigRow{width:100%;}
.row{width: 100%;}
P.S: This works when I use twitter Bootstrap in my project very well.
Here's what i've created for you.
<ul class="forumline">
<li><span class="gensmall_new_h1">{FORUM_NAME}</span></li>
<li><span class="gensmall_new">{L_TAGS}: {SEOTAGS}</span></li>
</ul>
Here's the css for it
.forumline {background:#fff; padding:3px; list-style: none;}
ul.forumline li{background-color:#e7e7e7;border-bottom: 1px solid #c7c7c7; padding: 10px; }
ul.forumline li:hover{background-color:#fff;border-bottom: 1px solid #c7c7c7; padding: 10px; cursor: pointer; }
ul.forumline li:first-child{border-top: 4px solid #333;}
Other wise you can also use other plugins like
http://bit.ly/OsLoYO
Click here to see demo!