I'm making use of the <small> tag within a heading tag in Bootstrap to deliver a sub message per section of my website. The code is simple:
<h3>This is my main part of the Heading 3 tag: <small>This is the small part of my h3 tag</small></h3>
I just think it looks rubbish when the browser is resized to a narrow width and the <small> content is wrapping. Is there anyway to make the small tag clear is starts to spill onto a second line?
Guess this css should just about do what you want..
h3 small {
display: block;
}
small is normally a display: inline inline element, so thats why it stays behind the text of your heading. Turning it into a block level elemment, it will automatically take 100% with and will start on a new line.
The css above will basically turn all the <small> tags within any <h3> into block elements.
Related
This is on my portfolio website (Using Side Full Width theme and Ebor Portfolio) on Wordpress 4.0.
My text is full width as are my images. But this makes the line-length far too long to be comfortable. I have successfully added p {max-width: 800px;} to the custom.css file, but this includes the images (which are placed inline in the portfolio edit page and thus fall under the p tag).
I want the images to remain full width. How can I do this?
Edit
Thank Tplummer. That didn't work though. I went to the text editor, entered it exactly like you wrote. The IMG writeup however, is not actually inside the same p tag as the text.
Edit 2
I tried placing images inside the unused h6 tag and left those full width. That seems to have worked! Now the is floating in the center....which doesn't look bad actually...but my titles are still left....ahhh code is tricky...
If they're nested within the <p> tags you're going to have a bad time.
If it's content based, try wrapping the text you want to style inside a span, inside the <p> tag.
CSS
.limit-size { max-width: 800px; }
HTML
<p><span class="limit800">Text text text</span><img src="pic.jpg"></p>
I'm attempting to get a drop caps (or initial caps; whatever you may call it) effect on a heading. Here is an example of what I'm trying to accomplish.
I've found success with inline span tags that are floated, but when the heading wraps into a second line, the paragraph section breaks onto its own line. See this jsfiddle for an example and adjust the viewing window to see the effect I'm referring to. http://jsfiddle.net/fEn4U/
The structure in the first two jsfiddle examples (with the h1 and p tags) is how I would prefer to have the html. But I can settle for a span in the p tag if that's the only solution. As you can see, I'm further away from a solution with the h1, p structure than I am with the span and p tags.
Also note that the container will be a fixed width, and the content within will be dynamic, so I can't always rely on the heading breaking into two lines or staying on one.
Try to make your small text inline-block and set a maximum size.
http://jsfiddle.net/fEn4U/2/
p {
display: inline-block;
max-width:150px;
}
Can anybody help me correct this: http://jsfiddle.net/ShgRr/ so that the div displays it's content consistently with the ol?
The main problem is that the right-positioned span is breaking outside the div.
I did consider making the div a li item but that would obviously be un-semantic.
Something else I was wondering - is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?
Thanks
Why use a <div>? Your CSS will work just fine if you move the contents into a new <li> with that class name: http://jsfiddle.net/ShgRr/2/
I'd argue that making the <div> an <li> is perfectly fine. <table> elements contain both table headers and table rows without problems.
"is it correct to use negative margin on an anchor so it covers the li bullet and makes the whole link clickable?"
it is more correct to remove the bullet entirely if you don't want it there.
if you do want ti these - I don't tend to make bullets themselves clickable - they're a very small target compared to whatever they're bulleting. Easier to click the text than the bullet
your can add this class in your CSS, html part
div a span > i
{
margin: 0 8px;
}
I find that images floated right won't sit alongside a heading tag such as H3. The H3 tag wants to have its own line so it will always appear below the image.
If I put the image also inside the H3 tag then it works but I would prefer to correct this in the CSS somehow as some of our editors aren't used to delving into the html.
Is this a standard way that H tags behave? Or is it a quirk of my CSS that I can tweak?
I'm doing this in Wordpress using a child theme based on the Thematic theme.
This is a normal behaviour as H tags are block level elements. See this explanation for more information.
Also note that you can make a block level element not to expand all the width (as it's normal for a block element), for example if you make it float (and decrease its width), changing its display propery, etc. See this fantastic tutorial for more information.
try putting the h3 tag after the image tag.... they should appear side by side.....
like this:
<img src="path/to/some/image" style="float:right;" />
<h3>some heading</h3>
All you should need to do is add float:left; to your h3 tag.
See this fiddle.
I have a block of text, and inside the block I have an h1 tag floated left. I would like the first line of text to align with the bottom of the first line of text.
Here is the sample site:
http://myhealthsense.abyteshosting.com/
The block in question is the block under the header that says "Welcome! I am a..."
I want the 'Welcome!' to have it's bottom aligned with the rest of the sentence, and for the next line to wrap under the 'Welcome!'. As it is now, there are two lines wrapped to the right of 'Welcome!'.
Of course I could do this easily if all the text was together in a line, and I could use spans to set the sizes. But, since this is all generated out of drupal, the content comes as it is. In other words, the text in the block comes from the database, and is generated in a div, but the 'welcome!' has to be in the template. If I put it in the content div, my user will mess it up every time they edit the content.
Any hints are appreciated.
The <h1> is semantically incorrect for this usage. <h1> is a semantic tag used to indicate the title of an article or primary section of content. In this case you are attempting to use the <h1> tag to alter the presentation of the text rather than the purpose of it. For this, you would be better served by using the span tag and assigning a class style:
<p><span class="welcome">Welcome!</span> blah blah blahbitty blah</p>
Different idea:
Add a line-height to the first line of your paragraph tag to be equal to your Welcome line's expected height:
p:first-line
{
line-height: 1.5em;
}
This might cause an odd space in some browsers I think (I haven't tried it out yet).
Another idea:
You could add a style with top-padding to the block element you're using for your primary content area. This would prevent text from starting until it is ready to start. Keep in mind this approach adds this padding to the overall size of the block element, so a block element with a height of 100px and a top padding of 20px will actually be 120px.
You could put your text in <p></p> and specify display:inline; for both h1 and p. IE:
<h1>Welcome!</h1><p>Mytext here</p>
Then a float is unnecessary.