CSS: How would I select a specific Text and hide it - html

I don't have access to html, but i want to test something... How would I select the text boomboomboom and hide it with CSS...
the markup looks like this:
<div class="bla">
<div>
<strong>some text</strong>
<br />
boomboomboom
</div>
</div>
I tryed this:
.bla div {
text-indent: -9999px;
}
.bla div strong {
text-indent: 0px;
}
but this just hides "some text" instead of "boomboomboom"...
can anyone help me? http://jsfiddle.net/b26N7/1/

Check this topic, it's the same thing. Conclusion is, you can't select the text node with the css at this moment(without wraping it in a html element), but you can do it with JavaScript.

Remove <br /> to separate the "boomboomboom" in next line. You can use "display:block" to show the "boomboomboom" in next line.
Then your css will work properly.
Example: http://jsfiddle.net/uL9Rg/

Related

Give a line break without using <br/>

I have a button over my div.
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu">
Some code
</div>
The div is displayed right below the button. I want the button to be displayed with a line break. I know it is a bad practice to use <br/>. How do I give space without it?
With css:
.sidebarmenu{
margin-top: 20px;
}
Live example: http://jsfiddle.net/BhsYx/
You can use
#showmenu{
margin-bottom:10px;
}
Demo
The right way to make a line break is to use <br>.
To put some space between block elements though, you can use CSS properties like margin (external) or padding (internal). But margin is not line break. <br> means line break, and renders as an empty space. Margins are another way to render empty space, but this is not equivalent because it does not impact the same things.
You could make it a block level element...
button{
display: block;
}
see fiddle: http://jsfiddle.net/dwBG4/
You can try this :
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu" style="margin-top:20px" >
Some code
</div>
You can display block your button
button{display:block}
Not exactly bad practice in your given scenario really. It's only bad practice when you see something like:
<div>
</div>
<br />
<br />
<input />
<br />
<br />
But you're wanting to use it to control text, so use it! This reminds me of when you see people hating on tables, yet use display: table and display: table-cell on a divs!

HTML/CSS How to format Text and have an Image floating next to it

Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited

Strange html formating after aligning text and image on same line

I wanted to make my email as image, so I've put text and then email address as image. After that line goes another line, which is text and link on the same line.
But the problem is that for some reason second line (with text and link) is being formated with parameters on the first line, even though it is not on same div tag. I don't get it why it is being formated at all (when I delete first line and all formating for it, then www:link goes on one line as it should). I can only bypass it by using:
<br /> // or another spacings such as padding-bottom.
But I want spacings between lines to be minimal.
To make it more clear here is a screenshot, how it is looking now:
html code:
<div class="col3">
Email:
<img class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/>
</div>
<div>
www: http://www.test.com
</div>
css styles:
.col3 {
width:140px;
height:15px;
padding-bottom:10px;
}
.image-align {
float:right;
}
Also I'm using wordpress, but I have raw html plugin and tried raw tags and also disabled all wordpress formating, but it is the same thing.
Does anyone know what could be wrong?
What I want to do is second line should look like this:
www: http://www.test.com
Not like this:
wwww:
http://www.test.com
You can try this:
HTML
<div class="col3">
<div class="email">Email:</div>
<img class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> </div>
<div class="sitelink">www: </div>
<div class="link">http://www.test.com </div>
CSS
.col3 {
padding-bottom:10px;
}
.email {
float:left
}
.image-align {
display:inline-block;
margin-left:5px
}
.sitelink {
float:left
}
.link {
display:inline-block;
margin-left:5px
}
DEMO
Assign the class .col3 to the div, I think you may have specified a width for all div's earlier in your style sheet, and you need to overwrite it (make it as wide as the above div)
Your width is the problem, try putting bigger value instead. Let us know how it works.

Why a <BR> in v-align is putting the text under the image

Struggling with what should be a simple layout.
I want a logo, with a and a subtext on the right of it.
I have the following ASPX page (but is is plain html so the aspx is not so relevant)
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Image ID="Image1" CssClass="logo" ImageUrl="~/logo.png" runat="server" />
<h1>
headertext</h1>
<p>
<br />
subtitletext</p>
And the following CSS:
.logo
{
vertical-align: top;
}
h1,p
{ display: inline; }
Now the subtitletext ends up under the logo, and not under the headertext even though the logo is much higher that the two texts together. Any ideas why? The br is needed because I want the p under the H1 and not after it.
ps. i know with some extra DIV's or a table i can fix it easily, but can't it be done without them?
Why? Because the image, header and paragraph are all inline elements - image as this is its default display and the others because you forced them via CSS rule.
The line break tag tells the browser: get down one line from the point of this tag, so in your case everything until the <br /> is one line, then after this tag new line begins.
Most simple way to "solve" this is use float instead of inline display:
img, h1,p { float: left; }
Live test case.
Edit: in case of wider contents, the paragraph will appear "after" the header, not aligned properly. To solve this, one way is giving fixed width to them both:
h1, p { width: 250px; }
Updated fiddle.

right align an image using CSS HTML

How can I right-align an image using CSS.
I do not want the text to wrap-around the image. I want the right aligned image to be on a line by itself.
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
jsFiddle.
img {
display: block;
margin-left: auto;
}
Float the image right, which will at first cause your text to wrap around it.
Then whatever the very next element is, set it to { clear: right; } and everything will stop wrapping around the image.
There are a few different ways to do this but following is a quick sample of one way.
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
To make the image move right:
float: right;
To make the text not wrapped:
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
My workaround for this issue was to set display: inline to the image element.
With this, your image and text will be aligned to the right if you set text-align: right from a parent container.
Easier / more organized way to do this is with some css.
CSS Above, HTML below with the snippet.
div {
clear: right;
}
/*
img {
float:right
}*/
/* img part is unneeded unless you want it to be a image on the right the whole time */
<html>
<!-- i am using an image from my website as a quick example-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>My Text Here</div>
<!-- Text goes below the image, and not beside it.-->
<img src="https://raw.githubusercontent.com/ksIsCute/GtGraffiti/gh-pages/icon.ico" alt="my image!" style=float:right>
<div>
<h1> I support headers! </h1>
<blockquote> And blockquotes!! </blockquote>
and hyperlinks!
</div>
<!-- THE CODE BELOW HERE IS **NOT** NEEDED!! (except for the </html>) -->
<h2 style="text-align:center;color:Grey;font-family:verdana"> Honestly I hope this helped you, if there is any error to my work please feel free to tell me. </h2>
</html>