A very simple task in hand.. but my browser is laughing on my face with my futile attempts.
How do I style a div class just around the text
So I am using jinja on backend and my html looks like this
<div class="content">
<pre> {{contents}}</pre>
</div>
and my css is
div.content {
background-color: #add8e6;
}
But what is happening is.. if "content" is half the line.. this styling is running across the whole horizontal line..
I just want to gracefully wrap the color across the text rather than whole horizontal page.
When I try
display: inline;
all the background color vanishes.
Use display:inline-block
div.content {
background-color: #add8e6;
display:inline-block
}
DEMO
Difference between inline and inline-block
inline-block - This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline - This value causes an element to generate one or more inline boxes.
Try this:
div.content * {
background-color: #add8e6;
}
This will apply the style to all the elements within the div block.
Related
Its like few days pass and again when I try to recall what I read about line-height is something misleading what I am seeing
<span>Color me</span>
span {
line-height: 52px;
background: red;
font-size: 14px;
}
Why it does not color complete box (i.e complete line-height)?
But When I do the same with div it colors as required.
<div>Color me</div>
div {
line-height: 52px;
background: red;
font-size: 14px;
}
In this particular case you need to add the following:
span {
display: inline-block;
/* ... */
}
As for the reason why, see this StackOverflow answer.
Since span is an inline element it occupies only the height of the text and it does not cover the full area whereas in div it is a block element so it can cover the full area.
The method to convert the inline element to block element is
span{display: inline-block;}
Because line-height doesn't work on inline element. span is an inline element. You may add display: block or inline block to span's css
On replaced inline elements such as buttons or other input element, line-height has no effect.
For more information, see line-height#Mozilla
The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
The actual answer to this problem while keeping span elements as inline is to use the padding attribute.
https://stackoverflow.com/a/56781081/1011956
I'm writing the following HTML markup:
<span> Some Text
<div id="ch">татата</div>
</span>
and styles:
span{
border: 1px solid black;
text-align:center;
width: 300px;
height: 300px;
background: aqua;
}
#ch{
width:100px;
height:100px
background: yellow;
}
jsFiddle
Why is the height property not applied to a div element which inside the span, but width is applied?
Why is the right border of my span is missing?
Your markup is incorrect ( plus missing semi-colon as quoted by Steini, mentioning this for sake of completeness of answer )
Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property!
Answer 2 : add display:block to span to change the default behavior
working fiddle with correct markup
fiddle with the layout you wanted
span display:inline you must set it display:inline-block
but this not standard you must use div span always use for text
your fiddle demo
Because you are missing a semicolon after height: 100px <- this ; is missing in you css file
span is an inline element so it will not take notice of your height and width. For this you need to give it either:
display:block; or display: inline-block
First answer: You forgot the semi-colon after height style, that's why it is not rendered.
Second answer: If you look closely, the border appears after the div. This is because you
are inserting block level element inside inline element. So, block level element takes it to the next line and then it takes the whole line. On the very next line you can see the right border for the span.
It is bad practice to put block level element inside inline element. In fact, I do not see any practical use of this kind of structure. Please, correct it if you are learning.
By default div's is a block element and span is an inline element. Block elements always flow vertically and inline elements always flow next to each other from top left to the bottom right depends on screen width.
We can use inline elements under the block element, not vice versa. If we override we expect to see some issues like this on responsive layout.
span is an inline-element, while div ist not. you should consider swapping them..
I have a very simple HTML with CSS code, don't understand why, the css rule isn't applied to the a tag, but it works on p tags. If I wrap the a tag inside a p tag, the css works, but I can't understand why it doesn't work without wrapping it.
Here's a full example http://jsfiddle.net/juaning/84Xn2/
css: div p, a {
margin-top: 35px;
font-size: 24px;
}
html: <div class="family">
Luigi
</div>
The box model of an a tag is different than the box model of a p tag. Add this one line:
div p, a {
display: inline-block;
By default, an a tag has the display: inline box model, so that you can easily place it in the same line as regular text (i.e. inside a p). The p tag is more of an entity on it's own, always being a 'block' or 'box' of text, therefore the p has display: block; by default.
Fiddle: http://jsfiddle.net/ECAbd/1/
a tag is an inline element, and p is a block level element, margin won't apply to inline element, and hence you need to make your a tag, block or inline-block.
div p, a {
margin-top: 35px;
font-size: 24px;
display: block;
}
Now, here, again it depends, what you want your a tag to be, if you want multiple a tags to line up inside your div you will have to use inline-block and if you use display: block; it will take entire horizontal space and will render another element below it.
Take for example you've a horizontal menu, where you line up your elements, you will probably use ul and li but suppose you take div for each menu item, you may need display: inline-block;, this will have all properties of block level element, but it will render them inline leaving the other space empty for other elements to take up, but if you want to render each element below one another, you need to use display: block;(not for div tag or p tag, they are block level elements by default, inorder to change their behavior, you need to mention that in your CSS)
List of block level elements
List of inline elements
Anchors have display: inline by default, while paragraphs are (if I recall) display: inline-block. Margins do not apply to inline elements. You can easily fix this by explicitly setting display to inline-block in your CSS.
Add this rule to the css -
display: block;
Another solution replace your code "div p, a" by following
div p, div a {
font-size: 24px;
line-height: 100px;
display: inline; }
Notice I used line-height (same as box height) to make vertical align center rather than margin-top. But this is not the solution for multi line.
I want the width of a div element to be equal to the width of the content inside it, and also (and more importantly) that any content after this div does not start to the right of the div(as though the div was float:left;), but display below the current div.
I know one way is that after this div, I create another empty div and set clear:both;, but in my case that would not be very preferable.
I think that the following may be close to what you need:
The HTML demo code is:
<div>
Some text may be before the element.
<div id="info">This is my bible!</div>And some text may follow. the element.
</div>
And the CSS styles are:
#info {
display:inline;
background-color:#CFFF9F;
color:black;
font-weight:normal;
border:black solid 1px;
}
#info:after {
content:"\A";
white-space: pre;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/6FNQc/
Explanation of How This Works
Use :after to generate some content (known as a pseudo-element in CSS). The "\A" is interpreted as a line break (linefeed) provided that the white space is preserved, hence you need to set white-space: pre. Finally, the element has to be inline, hence display: inline.
Related References:
CSS to line break before/after a particular `inline-block` item
To learn more about "\A" (linefeed), see:
http://www.w3.org/TR/CSS21/syndata.html#strings
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.