Trying to select a certain block of text within a div using CSS attribute.
Doesn't seem to be taking, any other options? I have tried variences of
.welcome [text~="You are logged in as"]{
display:none;
}
The HTML text is
<div id="welcome">
You are logged in as Me <b>(</b> Logout <b>)</b> </div>
You can use [ ] only for html attributes (like id, class...), not for text. You have to use javascript or something else for this.
Btw, it's #welcome, not .welcome :)
You could alter the html slightly, to target the whole text or parts of it:
<div id="welcome">
<span class="target_one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="target_two">Aenean quis augue gravida, ornare arcu quis, gravida arcu.</span>
</div>
Then the css becomes easy enough:
#welcome .target_one { color:red; }
#welcome .target_two { color:green; }
Related
I am trying to apply absolute/relative position to an image inside an email. There's an image inside a span which needs absolute positioning to preserve line height of the paragraph.
Here's an image of what I'm trying to accomplish.
I got to know absolute and relative positioning can't be used inside email templates, is it possible to fix the image positioning without using absolute positioning.
The position CSS property has very poor support in email clients, even the ones considered to have decent CSS support.
You're best bet is to try negating the image's line-height, something like this:
<p style="margin: 0 0 10px; line-height: 130%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam dictum varius. Integer mollis, elit nec commodo elementum, justo nunc faucibus lectus. <img src="" style="display: inline; mso-line-height-rule:exactly; line-height: 0;">
Line heights vary depending on the font and email clients tends to treat line-height a little differently. This isn't perfect, but it'll get you closer to your screenshot above.
This actually has a code entity:
U+026A0 UNICODE
⚠ HEX CODE
⚠ HTML CODE
which you could then just style inline with more code:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126">⚠</strong></p>
Snippet:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126; back">⚠</strong></p>
The thing with using position: absolute in html emails is that they will 100% break on Outlook.
I have this problem with the glyphicons from TB. In this jsFiddle you can see the glyphicon glyphicon-search appear on top of the div that slides under the purple square.
To see this effect, press the button on the right side.
My question is, how can I avoid that? By default, those glyphicons are position:relative, and I'd like to keep that.
Can't post this unless I show some code..
$("#btn").click(function(){
$('#slider').remove();
var sliderDiv = "<div id='slider' " +
"class='alert alert-info alert-dismissable' " +
"style='position: absolute; width:240px;'> " +
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare condimentum sapien, vitae pulvinar libero ultrices sit amet.</div>";
$(sliderDiv).insertAfter('#testing').hide().fadeIn('slow').wait(50000).slideUp('slow');
});
Since .alert-info is positioned on click, just add:
.alert-info {
z-index: 10;
}
fiddle
I have added a property to the .glyphicon class :
.glyphicon
{
z-index : -5;
}
I have a block of text with unknown width and I would like to place another text right after it that would always stick to the last word. If the first block is one line then setting them both to 'inline' or 'inline-block' is enough, but if the first block is more than one line, the second block always goes to the next line.
Code:
html
<div id="text">sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.</div>
<div id="new">New</div>
css
div {
float: left;
display: inline-block;
}
http://jsfiddle.net/nmuUd/1/
'New' needs to always stick to the last word of the previous block. How can I do this?
EDIT: To clarify, I cannot change the markup. The content is always in two separate divs.
Like this:
html
<div id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.
<div id="new">New</div></div>
css
#new {
background: red;
}
div {
display: inline;
}
Getting rid of the float:left; on your fiddle seems to do what you're looking for.
Your text is pushed down because if you have an 'inline-block' element, and the text is long enough to fill 100% width of a parent container the second line will also have 100% width. That's why the second div will start rendering below that first div.
If you want your divs in one line you have to give them 'display: inline;' property.
If it's a static and short text, for example name of an author, you can use pseudo-element ':after', like this:
div.text:after{
content: ' put you text here'; /*remember to put whitespace on the beginning*/
background-color: red;
}
but if you want to use 'div' as inline element just use 'display: inline;' without float:
div.text{
display: inline;
}
Hope I helped.
Just remove the float, if the two divs are display: inline that should be enough.
fiddle
you can make use of span
<span id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. </span>
<span id="new">New</span>
Like this
demo
css
#new {
background: red;
}
div {
display: inline-block;
}
I have the following jquery mobile code:
<div data-role="collapsible">
<h3>I like to read a lot but sometimes I simply can't bring myself to do it</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis interdum felis, et tempor nunc commodo sit amet. Ut fringilla.
</p></div>
I need the h3 tag to word wrap as opposed to truncating as jquery mobile does by default.
I've tried changing the above h3 tag to:
<h3 style="white-space:normal;">
or adding the following to the style sheet
h3 { white-space:normal; }
or
.h3 { white-space:normal; }
None of which works...any ideas? I could wrap it with line breaks but that's no good as it looks ugly if someone changes the orientation of their phone.
Thanks
Darren
You had the right idea. JQM just does some funky markup and you were targeting the wrong thing in the end.
.ui-collapsible h3 .ui-btn-text{white-space:normal;}
I have a padded DIV (containing other/sub-DIVs and a DL) followed by some text:
<div> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
How come there appears no padding at the bottom of the main DIV?
(There is no padding space between the main div's content and the following text.)
Thanks for any help with this!
Tom
You are confusing padding with margin. margin is the property that would define space between the main div and the bottom text.
In your example, it appears that you are trying to use a newline to cause spaceing within html. This will not work. As stated in previous answers, you must set the css margin-bottom property to cause spaec to appear after the bootom of a div and the start of the next HTML element
If you want to use padding and not margin then change to add some way to identify the outer div (I used an ID):
<div id="outerdiv"> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
and add CSS such as:
#outerdiv
{
padding-top: 1em;
padding-bottom: 1em;
}
EDIT: see it a work here: http://jsfiddle.net/yvaPG/
Thanks for your quick hints!
I was finally able to track the problem down:
The
<dd></dd>
element had a "float:left;". This apparently caused the following text to move "left/up".
My solution:
I inserted an empty
<div></div>
with a "clear:both;" between the dd element and the following text.
If anybody has a more elegant solution, I'd still be interested!
Tom a more reasonable approach would have been to define a seperate CSS class of;
.clearfix {clear:both; display:block;}
This would then allow you to call this div should you require it in other places throughout the page. Simply replace the with to ensure this change continues throughout and isn't reset by the removal of a CSS reset throughout the rest of the page/setup
Regards