I am trying to get a background color to stick strictly to the text of the heading and not span the entire width of the page. I understand that block level elements take up the entire width of the page, so I was wondering if there was a way around this besides forcing inline styles.
EDIT: If I were to use display: inline-block; why is it that even though I specify text-align: center; my headers are still left aligned? Should I use a float instead?
Or displaying as an inline-block could meet most use cases:
h1 {
background-color: red;
display: inline-block;
}
Perhaps something like this:
In HTML:
<div id="Heading">
<span id="HeadingText">HEADING TEXT</span>
</div>
In CSS:
#Heading
{
/* Formatting of full heading */
}
#HeadingText
{
/* Formatting for just heading text */
background-color: #00ff00;
}
Guessing from your question, this isn't the answer you are looking for, but it may be useful.
EDIT:
Alternatively, this should work as well. But I'm pretty sure this is what you want to avoid (inline, right?)...
<h1 style="background-color:#660000; display:inline;">Heading<h1>
This would solve this problem I think:
<div id="Heading">
<div id="HeadingText">HEADING TEXT</div>
</div>
And your css would be:
#Heading{
background-color:#CCC;
}
#HeadingText{
display:inline-block;
background-color:#FF0000;
}
You must specify the text-align:center; attribute to the parent element containing your div block to center your header and its background with display:inline-block;
Related
I want the header of a paragraph to be centered, but I can´t get it working.
The whole and the paragraph have the property text-align:left and the header has text-align:center but still it´s not centered.
body{
text-align:center;
}
main{
text-align:left;
}
b{
text-align:center !important;
}
<main>
<b>Header:</b>
</main>
Can somone give me some advice what I´m doing wrong or missing?
Put a div around it. The <b> tag cannot be centered.
body {
text-align: center;
}
main {
text-align: left;
}
.header {
text-align: center !important;
}
<main>
<div class="header">
<b>Header:</b>
</div>
</main>
A <b> element is display: inline by default.
The text-align property says: Applies to: block containers.
It therefore has no effect on a <b> element by default.
You need to apply it to a block container instead. There are three ways to do this:
Find (or add) an ancestor element which is a block container
Change the <b> (using the CSS display property) so that it is a block
Replace the <b> with a different element which is a block.
In this case, the apropriate thing to do is to replace the <b>.
You should select markup based that describes what content is and not how it should look. (This has been true since CSS 1 was released in 1996 and began the process of separating style from structure in webpages).
You have been calling the element "the header". HTML provides elements specifically for that purpose.
Aside from the <header> element itself, there are the <h1> - <h6> heading elements.
You content makes it look like an <h1> would be appropriate.
h1 {
text-align: center;
}
<main>
<h1>Header</h1>
</main>
You can also remove the !important flag. It is usually more trouble than it is worth and provides no benefit here.
header seems a better tag to group "introductory or navigational aids...heading elements but also other elements like a logo, a search form, and so on.", documentation at MDN.
main would be better suited for "content...unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).", documentation at MDN.
To be clear, text-align property is inherited by child elements, documentation at MDN.
That said, consider the following code:
body{
text-align: center;
}
header{
text-align: left;
}
h1{
text-align: center;
}
<header>
<h1>Header:</h1>
<p>Content in a paragraph (should be left aligned, inheriting from `header`)</p>
</header>
A easy solution may be using positioning. Something like this:
body {
text-align:center;
position: relative;
}
main {
text-align:left;
}
b {
position: absolute;
left: 45%;
}
Another solution would be to just
display: block
the b element.
You can not align b tag content.
Just change in your jsfidle like this.
html
<main>
<p><b>Header:</b></p>
</main>
and css
p{
text-align:center !important;
}
I have the following code
HTML:
<div>
<h3> Lorem ...</h3>
<a>some link</a>
</div>
CSS:
a {
float: left;
}
h3 {
display: inline-block;
}
If there is enough horizontal space both elements sit nicely next to each other, but if not enough space, the anchor is pushed down (not what I want) I would like to see the h3 element's text wrap instead. Furthermore, the text inside the elements can be anything, meaning that their width is variable. Any suggestions ?
JSFIDDLE
either
h3{
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
or give them widths
h3{
width:50%;
}
a{
width:50%;
}
or whichever values u want so that they won't get out of their boundries
I don't exactly understand how you want the output to be, i've given two outputs below.
1) <h3> and <a> tag side by side without width:
You can use display:table property which requires no width
DEMO
CSS:
div
{
display:table;
}
a {
display:table-cell;
}
h3 {
display: table-cell;
}
2) <a> tag continuing with the text in the <h3> tag:
You can use display:inline
DEMO
CSS:
a {
display:inline;
}
h3{
display:inline;
}
float doesn’t work this way on elements higher up in the DOM tree. (The only reason that the link did not get pushed down under the text content of the h3 to begin with was that you did display the latter as inline-block.)
If you can place your link before the h3, then it’s easy (you just have to remove inline-block form the h3 as well) – http://jsfiddle.net/ygnbgL7k/9/
EDIT:
[ from comment]: but the only problem with that solution is that the wrapped text starts at the beginning of the next line (under the floated anchor).
If you don’t want that, add
h3 { overflow:hidden; }
http://jsfiddle.net/ygnbgL7k/15/
h3{
white-space: nowrap;
overflow: hidden;
}
I need to align pic-text-pic in a row.
<style type="text/css">
#element1 {background: url('url1'); margin-right: 10px}
#element2 {margin-right: 10px}
#element2 {background: url('url2')}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
<div id="element3">
element 2 markup
</div>
I tried playing with it, just cant make it happend.
Any ideas?
You need to research the various display properties of CSS and how these create layout in the browser. DIVs are by default "block level elements" which means they're each going to break onto a new line.
For your example, you'll want to look into the "inline" or "inline-block" display properties, which will get your elements to line up next to each other (as long as there is enough space in the parent container). So, try this:
#element1,
#element2,
#element3 {
display: inline-block;
}
Try using <span> tags instead of <div>s.
Use display: inline-block:
#element1,
#element2,
#element3 {
display:inline-block;
}
use <span> and not <div>
For some reason this text isn't being centered.
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<span id="highlightheader">example text</span>
http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)
EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.
span is an inline tag
add display:block to css
http://tinkerbin.com/oBgV5mcU
a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.
You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.
Try that:
div.center{
text-align:center;
}
#highlightheader
{
background-color:#006600;
color:white;
font-size:30px;
font-weight:bold;
}
<div class=center>
<span id="highlightheader">example text</span>
</div>
Add a display: block; to the #highlightheader. <span> is an inline element!
Hi there try to use this with your css
padding:0px 50px 0px 50px;
Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.
Edit:
#highlightheader {
text-align:center;
}
#highlightheader span {
background-color:#006600;
color:white;
font-size:30px;
text-align:center;
font-weight:bold;
}
<p id="highlightheader"><span>example text</span></p>
Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.
You can see a demo here
I have a div and in that div I want to create another div with a different class and have the inner div completely separated from the outer div CSS settings.
Like this:
<div class="outer">
<div><h1> h1 </h1><div>
<div class="inner">
<h2> h2 </h2>
</div>
<h2> h2 </h2>
</div>
.outer h1{ color:blue; }
.outer h2{ color:red; }
.inner { height: 111px; }
What I want is to unset the red color from the h2 in the "inner" div
It might seem stupid not to just overweight the color to black here, but what if I have a lot more arguments in the CSS or even if it's dynamic.
Edit: I guess it isn't clear, but what I need is actually kind of the opposite of the answers I got so far. I have a main-container div and it has alot of settings in the CSS. Now I want to insert a div into the main-container without it having any of the main-container CSS settings.
.outer > h2 { color:red; }
this way only the direct child of the outer div get this color value, should fix the job.
.outer .inner * { color: #000; }
sets all elements within the inner container as having the color black.
Demo here
I think what you need is
.inner h2 {color: inherit}