I'm trying to get an asterix "*" to appear directly above the "pp", however if I try to insert this in a span adjacent to the span containing the "pp" or directly after the price, it does not sit above as desired..
Can somebody please help? My html is below
<div class="fist-div">
<span>
<span data-bind="text: '£' + price">£731*</span>
<small>pp</small>
</span>
</div>
You can use sup tag to do this. Try this.
CSS & HTML
sup{color:red}
<div class="fist-div">
<span>
<span data-bind="text: '£' + price">£731</span>
<small>pp<sup>*</sup></small>
</span>
</div>
You can rearrange it wherever you want * to appear. Hope this help.
If you want * directly above pp, you need to adjust the position.
.first-div small {
position: relative;
left: -10px;
top: 2px;
}
<div class="first-div">
<span>
<span data-bind="text: '£' + price">£731*</span>
<small>pp</small>
</span>
</div>
You can do like this..
sup {
color: green;
position: relative;
left: 10px;
}
<div class="fist-div">
<span>
<span data-bind="text: '£' + price">£731<sup>*</sup></span>
<small>pp</small>
</span>
</div>
Related
I have a movie card where the content is dynamic. I'm trying to select the first child DIV of the left-side-bar, however, since the content is dynamically generated, the background-color is changed to all divs.
#left-side-bar div:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
The :first-child selector is intended, like the name says, to select the first child of a parent tag.
But in your example there is a tag as a parent element on the div. So if you apply nth-of-type to it, you will solve your problem. So this example will work as follows.
#left-side-bar a:nth-of-type(1) .card-sb {
background:red;
}
#left-side-bar .card-sb:first-child {
background-color: #e50914 !important;
}
<div id="left-side-bar">
<h3 style="border-bottom: 1px solid red; padding-bottom: 7px">
Top 5 movies
</h3>
#foreach (var movie in Model.SidebarData.TopMovies) {
<a asp-controller="Home" asp-action="Detail" asp-route-id="#movie.Id">
<div class="card-sb">
<center><img src="#movie.ImageUrl" /></center>
<p>#movie.Title</p>
<span class="crown">
<i class="fas fa-crown" style="color: goldenrod"></i>
#movie.Views
</span>
</div>
</a>
}
</div>
Add an Id to your div, then refer to it to change the attribute of that specific element.
<div class="card-sb" id="CardSb">
then refer to it in your style sheet:
#CardSb {background-color: #e50914}
or try this:
/* Selects every first element among any group of siblings */
#left-side-bar a:nth-child(1n) {color: #e50914;}
I have a jumbotron, which has a placeholder on top to handle errors on the page. The error has a <p> tag with its own class, and I want to modify the size of the element. However, the in-built paragraph styles of the jumbotron (Bootstrap) seem to override whatever I've set. I don't want to change the global <p> size, just of this particular element.
HTML:
<div class='jumbotron'>
<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span>
<p class = "error-message"> Sign-Up Error </p>
</div>
CSS:
#landing-page-error {
width: 100%;
position: absolute;
top: 0; /* this and the position: absolute has the error message pop up right below the header nav bar in landing page */
height: 10%;
}
.error-message {
font-size: 10px;
}
It's a Rails app, and here's a screenshot of the CSS inside the browser -
Please help me set the size of the <p> tag specifically for the error element. Thank you in advance.
.jumbotron .error-message {
font-size: 14px;
}
if this doesn't work, then try this:
.jumbotron p.error-message {
font-size: 14px;
}
it will effect all the error-messages inside jumbotron without affecting other <p> tags inside your page.
Nothing Problem just close the Div class before P tag
<div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>×</span></button>
<span class='glyphicon glyphicon-warning-sign' aria-hidden='true'> </span> </div>
<p class = "error-message"> Sign-Up Error </p>
I need the style to alternate when classes are nested in a repeating pattern. Sadly right now, all the code does is override based on the order of the CSS and not the order of the HTML.
In the example below, each word needs to be the color it names. This needs to work for an indefinite number of nestings (could be a crazy huge number of nestings), and also needs to work when other CSS styles are applied, which means that the HTML cannot be changed. Also, there is no guarantee that there won't be anything between those elements which means they won't be direct parents all the time (So the > selector will not work).
Anyone know how to do this? (Or if it is even possible?)
span {
color: black;
}
.foo a {
color: red;
}
.bar a {
color: green;
}
<html>
<body>
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<strong>black green</strong>
</span>
<strong><br>black red</strong>
</span>
<strong><br>black green</strong>
</span>
<strong><br>black red</strong>
</span>
<strong><br>black green</strong>
</span>
<strong><br>black red</strong>
</span>
</body>
</html>
By putting class within a class, the proper way of calling it in CSS is through the > operator.
If the CSS is as such ( see fiddle or below), there will be a yellow and green element. This is because the CSS is only at parent/first level. I put a new line of CSS below and you see 4 red elements because it only reached until the second level CSS. The rest will follow the parent elements because they do not have any style. Therefore the closest parent that have a style defined in CSS is .bar > .foo a, resulting in red for the remaining 3 elements.
span {
color: black;
}
.foo a {
color: yellow;
}
.bar a {
color: green;
}
.bar > .foo a {
color: red;
}
Html code:
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<span class="foo">
<span class="bar">
<strong>1black green</strong>
</span>
<strong><br>2black red</strong>
</span> <strong><br>3black green</strong>
</span> <strong><br>4black red</strong>
</span> <strong><br>5black green</strong>
</span> <strong><br>6black red</strong>
</span>
http://jsfiddle.net/de9ppead/
I've got an anchor tag with multiple lines of text and at the beginning a span tag which includes an iconfont. Now I want to have all lines of text to be on the same intend. How can I achieve this?
HTML-Code:
<div class="controlls">
<p class="catalogue-pdf">
<span class="icon-pdf"></span> PDF download
<span class="separation-point">·</span> 82,0 kB
</p>
<p class="catalogue-link">
<span class="icon-book"></span> Stack Overflow Question Two Line Texts
</p>
</div>
Is this about what you're going for?
HTML:
<p class="catalogue-link">
<a href="http://www.google.com/" class="text-link" target="_blank">
<span class="icon-book"></span>
<span class="link-text">Stack Overflow Question Two Line Texts</span>
</a>
</p>
CSS:
.catalogue-link a {
display: flex;
align-items: flex-start;
}
.catalogue-link .link-text {
margin-top: 15px;
margin-left: 0.5rem;
}
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.