I have a div with an image and text. I only want to style the text from this div. With an image you can only style the image with .content img{ }, can you do this with text as well?
<div class="footer">
<div class="telefoon"><img src="images/media/telefoon.png" width="30">06-123456</div>
<div class="mail"><img src="images/media/mail.png" width="30">example#gmail.com</div>
<a class="instagram" href=https://www.instagram.com/example/><img src="images/media/instagram.png" width="30">#example</a>
</div>
In this case I want the text to have margin-bottom: 15px; and the images not.
Or when someone has a different solution for the whole problem because basically my telephone, mail and instagram information is at the bottom of the icon instead of the middle.
to style your text, insert your text in a p tag for example and with the css use .content p {}
Assuming there is no block element around the text (e.g. p, span, h1-h6, etc), try using :not for the image - although I don't see how the img would inherit any typography styling
Add a span tag for the text and style the span tag that shd solve your problem
Related
So I'm trying to move from PNG to SVG, but I'm having some growing pains. I'd like to use embedded SVG so I can change their CSS attributes for their colour as well as having fewer resource loads. Although an issue I'm having is when the SVG is embedded it appears above the box provided, although if I use an img tag with linking to the SVG, the formatting is perfect.
In my picture, the box on the right has the img tag while the left box is embedded.
http://jsfiddle.net/fLWhu/684/
<span>
#Html.Raw(File.ReadAllText(Server.MapPath("~/Content/images/icons/1.svg")))
</span>
<span>
<img src="~/Content/images/icons/1.svg" alt="our linked in" />
</span>
Update:
After adding the
display:inline-block;
vertical-align:middle;
into the span, the result is.
The SVG part seems ok, you could try set a display:inline-block and vertical align:middle to the div.header .right p span element
I have a widget on my website which generates content which looks like this:
<div class="wrapper">
some title
<p>some content</p>
</div>
I want to give the title text padding and the <p> padding
I already tried this:
.wrapper > * {padding:15px;}
But that doesnt apply to the plain text. Is there some sort of selector for plain text?
I also created a fiddle to visualize it.
http://jsfiddle.net/62v59s3j/
If I understood correctly, think you should apply padding to your wrapper, and remove left and right padding from the <p>
.wrapper > p {
padding:15px 0px;
}
.wrapper {
border:1px solid #ddd;
padding:15px;
}
jsFiddle
No.
With a couple of very limited exceptions (like :first-letter), CSS only allows you to select elements.
If you want a block to have a title, then it should probably be a heading (<h1> et al), and that would give you an element to select. For that matter the block may be better represented as a <section> rather than a <div>.
Let your web browser help you in developing.
Right click on the element and select inspect element from the context menu
In the source code, right on the element and from the context menu select copy selector, paste in your css
I ran into a situation where I have a link that is set as a display:block. I'm trying to fill the background-color property with a color, but only behind the text; instead, it's filling the entire background of that row, which is logical, but not what I want. How can I fill only the background of the text without being an inline element? Or is this not possible?
HTML:
mylink
CSS:
a {
display:block;
background-color:blue;
}
If you need to keep the link as a block, you can wrap the text in a <span> and apply the background colour to that.
Simple code would be something like this:
<a href="#" style="display: block">
Hello<span style="background: blue; color: white">blue</span>link
</a>
You can then add padding and other style to the span tag.
You can add a ID tag to the span if its a special once off thing for specific styling.
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.