I am using the bootstrap jumbotron but the header wont wrap in next line when long text is used. any way to fix it?
This is what I am using in my html
<div class="jumbotron">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<p class="lead">Help visualize leadership networks in the Upper Midwest</p>
</div>
Try the following on the text that you want to wrap on to the next line.
h1 {
word-wrap:break-word;
}
This will break up the long word at any character though. See the links below for more information.
mdn doc for word-break
css-tricks
Related
Hi i am new to CSS and i might be asking some school boy questions. I want to but a line break at the top of my post before and after my h1 tags. I might be trying to do this by the wrong method. Maybe i need some padding at the top but defiantly need a line break after each H1.
This is my css for posts
#kopa-post-content p,h1,h2,h3,h4 {text-align:left;margin-right:20px;margin-left:20px}
Example of what i am trying to do.
Any help will be gratefully received
Thanks
Danny
A h1 tag is a block element. It already has a "line break" before and after it. If you wish to increase the space above and below the element, use margin.
eg.
h1 {
margin-top: 10px;
margin-bottom: 10px;
}
You should not use <br> for styling. You should use CSS, and you'll have a lot more control, too.
What you're talking about is referring to HTML not CSS. You can use the tag in HTML to accomplish this.
<body>
some text
<br>
<h1>Some Title</h1>
<br>
some more text
</body>
I have three elements that I am trying to layout horizontally. Currently, I have the following HTML:
<div>
<h1>h1. Heading</h1>
<h1 class="subheader">subheader</h1>
<h1><small>segment header</small></h1>
</div>
When I run this, I see something like the following:
h1. Heading
subheader
segment header
However, I'd really like to get things laid out like the following:
h1. Heading subheader segment header
How do I setup this up via CSS in my root DIV?
Thank you
LIVE DEMO
Add a class to your DIV
<div class="align_H1">
and do:
.align_H1 h1{
display:inline;
}
So the trick is to display:inline; your <h1> elements, cause by default they are display:block; level elements.
Think about inline like on the content positioning flow,
while on block as for layout
Are you familiar with inline vs block elements? It sounds like what you want is
H1 {display:inline}
That said, it's usually not a great idea to break an element's default style when you might want its normal behaviour somewhere else. Instead, maybe give them a class, as per #Roko's answer.
CSS tricks has a handy reference on how to use the display property http://css-tricks.com/almanac/properties/d/display/
Hi I have a text widget with one line of text "Connect with me on Facebook" that displays at the bottom of this page http://contemporaryinteriordesigns.com.au/. It displays on 1 line for every browser except for IE8.
Does anyone know why IE8 is creating a line break and how I could fix it?
Thanks, Dan
I think IE8 is acting weird because you're styling the text in the div selector. Try wrapping that text into a tag:
<div class="textwidget">
<a><img/></a>
<p>Connect with me on Facebook</p> <!-- Wrap it in a paragraph -->
</div>
The <div> tag defines a division or a section in an HTML document. and The <p> tag defines a paragraph. Wrapping the text in <p> is more semantically correct. Then style the <p> till you get it right. Since I can't edit the code and I'm testing with IETester I can't try it out.
Hi there I am not sure how to go about a particular problem so here it is.
Without using a Table I would like to display a paragraph with multiply lines of text then have an image on the right.
So far I have tried this:
<div id="container">
<p>
Some Text
Some Text
Some Text
Some Text
</p>
<p>
<img src="image.jpg"/>
</p>
</div>
I use a separate stylesheet
and have tried such things as display inline with no luck.
I will be grateful for any suggestions although I do not want to use a table as I am not a fan of using tables for layout.
Thank you.
You need another set of containers indie your container:
<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>
If you may consider using flexbox (which is fairly well supported now : https://caniuse.com/#feat=flexbox )
You just need to make your container a display : flex; (example : https://codepen.io/anon/pen/GvZYwj)
#container {
display: flex;
}
For more infos about flexbox you can start out by reading MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.
And if you want to get more about flexbox, there is this amazing tutorial : http://flexboxzombies.com/p/flexbox-zombies
If I understand what you're wanting to do. You could give the tag a class/style and do float:right in the CSS. Which would look like this:
<p style="float:right;"><img src="image.jpg" /></p>
Do yo want text flow around image? If yes then it is something like this:
http://jsfiddle.net/2FMPf/1/
If you want separate column for image, then it is something like this:
http://jsfiddle.net/2FMPf/2/
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */