My CSS:
h1 {
background-color: #f7953d;
color: #FFF;
width: 100%;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
}
My HTML
<h1>Hello World</h1>
The background color is always stretched to 100% of the screen. How do I make the background color stop after "World" in the h1 tag, and not go all the way to the end of the screen?
H1 is by default a block element and so will span the full width of its parent container you want to make it an inline element (much like a span) in order for it to only be as wide as its contents.
There are 2 possible solutions dependent on your compatability needs
display:inline;
will achieve the effect your after however it does mean that whatever follows your H1 could appear on the same line.
display:inline-block;
Has the effect your after while still forcing anything following it to appear below the H1 the only downside to this is it can throw up some issues in IE<8 see quirksmode for more details
You can do this by adding display: inline-block; to the CSS for your <h1>. This will make it use only as much width as its contents and still respect the margin and padding you give it.
I would suggest something like this:
HTML:
<h1>Hello World</h1>
<div class="clear"></div>
<p>Elements after unafected by float</p>
CSS:
h1 {
background-color: #f7953d;
color: #FFF;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
float:left;
}
.clear {
clear:both;
}
This works consistently (unlike inline-block which isn't supported by all browsers).
An inline of the element is probably not what you want since you require padding.
Related
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
The issue I'm facing today is with the width of a gadget. I would like the border-bottom line of #customheader to extend to the full width of any given screen. Right now however the border-bottom is only the width of the blog. How would I go about lengthening the border-bottom without compromising on the other elements of the gadget?
The URL to my blog is as follows: http://www.blankesque.com and the coding to the gadget is stated below:
<style>
#customheader a {
font-size: 60px;
font-family: lato light, 'cantarell';
color: #737373;
text-transform: uppercase;
font-weight: normal!important;
letter-spacing: 0.07em;
}
#customheader {
margin: 7% 0 2% 0;
padding: 0 0 3.5% 0;
border-bottom: 1px solid #cccccc;
}
#customheader a:hover {
color: #000000!important;
}
</style>
<center>
<div id='customheader'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</center>
You need to move it outside of .content-outer, which is set to 1080px.
If possible, move the entire <header>...</header> outside of .content-outer
you could add an invisible div with position: absolute where you need the border, and set the width to 100%. Then you can either set the border on that or use the div as a border.
example JSFiddle
If you want a line that goes below your #customerheader and extends to the full width of the screen then its best to introduce an independent <hr/> which sits below your <center> element and has the following CSS properties:
hr {
width: 100%;
border-bottom: 1px solid #cccccc;
}
Keep in mind, you will have to remove the border-bottom: 1px solid #cccccc; from your #customerheader, since the horizontal line element is replacing this effect.
In retrospect, the above is not even necessary if you fix the layout issues in your site, which are causing your elements to seem to be out of alignment. You need to look into what is making them skew to the left, but with the code you have provided I cannot easily identify the root of the issue.
Let me know if you have any questions
Friends,
My question is why Firefox adds additional pixel (padding) below the box if I use display: inline-block?
Let's see what we have here: http://jsfiddle.net/xbU5s/9/
HTML - Two perfectly same elements.
<div class="wrap">
<section class="ib">Hello world</section>
<section class="il">Hello world</section>
</div>
CSS - Everything is the same, but our first section is inline-block and second one is inline.
.wrap { font-size: 0; }
.ib { display: inline-block; }
.il { display: inline; margin-left: 10px; }
section {
background: #000; border-radius: 3px; color: #fff; font-size: 11px; font-family: Sans-serif;
padding: 3px 5px;
}
And here's our 1px padding:
display: inline-block; vs display: inline;
Is is just rendering glitch (cause it's only happens in firefox) or I'm misinformed about inline-block's behavior?
Perhaps the answer is already explained here in old post
I will like to clear the difference..
If the element is with style display:inline the style restricts the object in line-height.
But, when block comes with inline the behavior of the same changes.
It is inline but with block it will expand to the possible height or width available.
For a change. select the text in both the box, you will see the second box is selecting out of the box. that is overflow of line-height which is restricted by inline but with inline-block it will grow with overflow caused by padding + line-height
I think this will clear most of the doubts, please refer the old post for more details.
This div is inside a 'page-container' div with a 'content div inside it, but the issue can be reproduced without those (as seen in the Fiddle below).
HTML:
<div class="download_link">Download PDF</div>
CSS:
.download_link {
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
.download_link:hover {
transition: 0.5s;
background-color: limegreen;
}
The div links properly and even changes color on hover. But the link stretches across the entire container. I have tried changing the width of all sorts of things.
>>> Convenient JSFiddle <<<
Generic division (div), by default, is a block element. Blocks, regardless of their width, take an entire line to themselves within their parent. In your case, the parent of the div is an anchor tag, which, by default, is inline. Inlines, likes absolute elements, inline-blocks, and floats, shrink-wrap around their children. The block within an inline inherently wants to "have" a line to itself, which is why it makes its parent stretch to the right and left edges of its body parent.
Franky, placing a div inside an anchor makes little sense. All you really need is just an anchor tag that serves its purpose. And, interestingly, if you display an anchor as a block, then the clickable link area will only be the width of the anchor. You have less markup and the functionality that you want.
Here's the jsfiddle: http://jsfiddle.net/hhm46/2/.
Here's HTML:
Download PDF
<p>Sample paragraph</p>
Here's CSS:
a[href $= ".pdf"] {
display: block;
margin: 0 auto;
width: 200px;
border-radius: 5px;
transition: background-color 0.5s;
background-color: lightblue;
text-align: center;
font-family: 'Source Serif Pro';
font-weight: 600;
font-size: 25px;
}
a[href $= ".pdf"]:hover {
transition: 0.5s;
background-color: limegreen;
}
You should wrap the anchor tags inside the div, not outside. Fiddle.
<div class="download_link">Download PDF</div>
Simple, div is a block level element by default. Change it to display:inline-block or display:inline.
Inline Block Demo: http://jsfiddle.net/3Ld8U/2/
Though as #josh mentioned you may be better off putting the a inside the div
Two ways to do this:
I found a workaround for you:
<div id=wrapit style="width:200px; margin:0 auto 0 auto;">
<a href="http://www.example.com">
<div class="download_link">Download PDF</div></a></div>
If you would like for the anchor tag to go in the div like the others have recommended, I recommend you increase the padding of the anchor tag so that it extends to the edge of the borders.
.download_link a {
padding: 0 20px 0 20px;
}
I would like to place a responsive text block on top of an image that I have set up based on this dated tutorial and amended based on this previous question.
Unfortunately there appears to be a couple of bugs. the span.spacer used to create padding either side of the line break appears taller than the rest of the text block, and I also think it is causing the text to not align left correctly. The development page can be viewed here. You can see a taller black block at the end of the first line of text, and a taller black block at the beginning of the second line.
The CSS i'm using is
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.image h2 {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-shadow: none;
}
h2 span {
color: #fff;
font-size: 110%;
width: 40%;
line-height: 110%;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
h2 span.spacer {
padding:0 5px;
}
The HTML is
<div class="image">
<img alt="Trekking" src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg" />
<h2><span>Trekking:<span class='spacer'></span><br />
<span class='spacer'></span>It's a Jungle Out There</span></h2>
</div>
Any advice on a fix for this or a better way to do it much appreciated!
It is becase you have span element in another span element (they are overlaid) and CSStyle is applied to both.
I think you can modify selector to: h2>span {...},
You can use one span element for each line (each with diferent look):
<h2>
<span class="big">Trekking:</span>
<br>
<span>It's a Jungle Out There</span>
</h2>
h2 span {
color: #fff;
font-size: 110%;
line-height: normal;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
display: inline-block;;
}
h2 span.big {
font-size:130%;
}
Width 40% was too short.
The reason for the increased height is the span within a span causing the font-size 110% to be applied twice. Set font-size 100% on the spacer.
You also probably want an increased line height (more like 140% than 110% with the font you're using), and a spacer padding of 10px to match the 20px of the start/end. It does feel like there should be a simpler way to do this!
You are right, this tutorial is quite outdated – I would not bother with that “spacer-span” mumbo-jumbo at all.
And while it is not possible to have a horizontal padding applied to each line of an inline element (it’ll only be applied before the first and after the last line) – it is possible to use box-shadow to achieve a similar effect (as long as only a background color is required, and not f.e. an image).
<div>
<img src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg">
<h2><span>Trekking:
It’s a Jungle Out There</span></h2>
</div>
div { position:relative; }
img { display:block; max-width:100%; }
h2 { position:absolute; bottom:0; left:.5em; white-space:pre; line-height:1.333; }
h2 span { padding:.125em 0 .125em .25em; background:rgba(0,0,0,.75); color:#fff;
box-shadow:-.5em 0 0 rgba(0,0,0,.75), .5em 0 0 rgba(0,0,0,.75); }
See it here in this fiddle: http://jsfiddle.net/FXJEL/
I gave the span element a padding-left here to have the first line of text be slightly moved to the right, as in your example – assuming that is a desired effect; if not, simply remove it.
And instead of using a <br> to break the text into two lines, I used
for a line break character, and white-space:pre to have it displayed as such. But feel free to change that back to using a br element if that seems more convenient.
The span element inside the h2 is necessary here to have an inline element, because only that will behave like this regarding the element dimensions; under normal conditions, one could of course make the h2 display as inline, but that does not work here, because the h2 is positioned absolutely, and that “overwrites” display:inline, and one would end up with a box that is as wide as the whole text.