I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.
Related
I want to center picutes in a span. The span has the class centerMe but it doesn't affect the pictures.
Markup of centerMe:
.region.region-footer .centerMe{
text-align: center;
}
You can find this example on JSFiddle.
Thanks for any help
It is not happening because span is an inline element.
text-align:center does not affect it because total width of images and width of span is exactly same. If you give it 100% width, then only you will see the difference.
Also, width property will not work on inline element so change it to block or inline-block.
Add width to the markup:
.centerMe {
width:100%;
display:inline-block;
}
Updated fiddle here.
Another solution is to use any block element like div,p or section rather than using span.
You can't use text-align: that way on inline elements.
If you want to achieve that, you will have to change your span into i.e. a <p> element, which is a block.
The span itself doesn't have full width, so there is no space to center the images in.
You can solve this by changing the span into a div.
Or you can make it behave like a div by adding display: block to the CSS:
.centerMe{
display: block;
text-align: center;
}
Alternatively, you can give it width: 100%, like Hiral suggested but then you will have to take any borders, padding and margin into account as well. By making it behave like a block element, it will automatically occupy the available space, and I think it is a more flexible solution.
So I have a horizontal bar on my page and I want to put several <p> tags on that bar so that when I, later down the road, want to start to make a responsive layout, can have them removed when reaching a specific screen size. But what I want to know is how can I put these p sections on the same line without pushing one down underneath the containing section? I've used display:inline and float: left but I dont like that because you can't format the text to be text-align: right or have it be a specific distance from the left side of the screen. For example, if you put margin-left: 6% it wont be 6% away from the left side of the screen, it will be 6% away from the element before it and I don't want that. I'm assuming the overall outcome will be absolute positioning but I want to see if there were any other options first.
give display:inline-block; to your p class and a proper width and they will come in one line, having display:inline remove the option of giving dimension to the element!
do it this way :
demo here
p {
height:100%;
width:50%;
display:inline-block;
border:1px solid red;
}
display:inline-block is the key
the main difference in between inline and inline-block is that, inline-block allows you to specify the dimensions, paddings, and margins of the element whereas inline block simply wraps the element.
Try display:inline and give paddings as you like just as like this:
p{
display:inline;
padding:5px;
}
here is a demo: http://jsfiddle.net/gyHXx/
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..
Applying padding to child elements is making the child draw over the boundaries of its containing parent. Can you please explain the size consideration in margin, padding and content width.
If we increase the padding why don't the parent also resize to the accumulative size of all the children considering the child's padding also?
http://jsfiddle.net/NkXUW/4/
<div>
<ul>
<li><a>srikanth</a>
</li>
<li><a>sunkist</a>
</li>
<li><a>sunday</a>
</li>
</ul>
</div>
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
ul {
list-style-type:none;
}
ul li {
display:inline-block;
}
a {
background-color:#c34567;
padding:10px 10px 10px 10px;
}
What are coding practices that we need to consider to over come this problem.?
Ok guys I got lot answers that do work. Can anybody explain the parent size calculation based on child elements. what are characteristics of the child that are considered while calculating the encompassing parent's size. when the whole padding is considered when it not considered ?
the reason the child was overdrawing the boundaries of the parent is because the child is a tag of type <a> which by default is display:inline (you can see if that you go in chrome developer tools and see under computed style). an inline element displays like a line of text.. so the way it treats width and height and all that is very different than a block (a div for example is a block by default).
that being said, if you change the display setting of a to display:inline-block you get to keep the inline properties of <a> but at the same time also get the block properties, namely having a padding and width and height that is recognised by its parent node, which will then expand to accommodate it.
So there aren't any best practices about this. The only best practice is to understand what each display property mean (ie inline vs block vs inline-block) and put it to its proper use.
Use display:inline-block;
a {
background-color: #C34567;
display: inline-block;
padding: 10px;
}
SEE DEMO
An inline element has no line break before or after it, and it tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
http://www.w3schools.com/cssref/pr_class_display.asp
Can be solved without making any change in a tag. Just add overflow: hidden; property to div element.
div {
margin-top:90px;
margin-left:90px;
background-color:#676896;
overflow: hidden; /*expends its height if not fixed*/
}
Updated fiddle here: http://jsfiddle.net/NkXUW/52/
You must do add display: block; to <a> element to expand parent as you need.
See this fiddle
about different between margin and padding please read this maybe it help you
I don't think this is correct float your div wrapper
working demo
div {
float:left;
margin-top:90px;
margin-left:90px;
background-color:#676896;
}
hope this help you..
I'm looking to clear an inline-block element (in this case an <a> within a <p>) to the next line, without having to set display:block and defining a width.
Here's an example: http://jsfiddle.net/alecrust/zstKf/
Here's the desired result (using display:block and defining a width): http://jsfiddle.net/alecrust/TmwhU/
If you want to avoid setting an explicit width so you can style the background according to the actual length of the text, you can do the following:
Wrap your link:
<p>To stay up to date <span>Follow Us</span></p>
Note that I have added a <span> tag around the link.
Style your wrapper with CSS:
span {
display: inline-block;
width: 100%;
}
Setting the width to 100% forces the wrapper to take up the whole line. Keeping the <a> tag for the link set to inline-block allows it to have padding and a background applied while not having it expand to fit the container's width of 100%.
Forked JSFiddle: http://jsfiddle.net/Cm9kZ/
It's a bit of a kludge, but it will work:
a {
display: inline-block;
padding: 5px 18px;
background-color: #8C4AD5;
text-decoration: none;
position:relative;
top:25px;
left:-30%
}
You'll have to fudge the left position, but that basically puts you back into setting a known value, just like the width issue in your display:block example. Not really any better, just a different approach.
The closest I can get to what I want is using :before to insert a new line before the <a> (Fiddle). This unfortunately doesn't clear it to the next line though.
This only works if you want to line break after the last element in the p.
I've experimented quite a bit and this works for me, in Safari 6:
p.linebreak-after-last-element:after {
content: "";
display: inline-block;
width: 100%;
}
I have not tested this in other browsers, but it's so simple it should work in all browsers supporting display: inline-block.
An empty <div/> after the inline-block element, clears the inline-block.
With the requirements you have, I don't think it's possible.
I was hoping that this would help, but it doesn't because you don't have an element before your link.
You should just change your HTML, for example: http://jsfiddle.net/thirtydot/zstKf/10/
Using the pseudo class :: after you could add content with a clear:both; property to it.
Not tested but should work in theory.