Okay, I am trying to achieve for all of my elements to be 10px over from the left side of the screen except for the black box surrounding the other elements. I have set the margin and padding at 0px so that the black box can touch the edges of the screen. However, in doing so all elements inherit this value (to touch the left side of the screen) in which I would have to individually set margin and padding to every new element I create. I have tried setting the body tag to have 10px over from the left which pushes all elements over to the left and leaves 10px of white space on the left. When I have done so, this also makes it so that I cannot push the box back to touch the edge of the screen. In short - is there a way that I can make all of my elements inherit 10px to the left of the screen except for the box surrounding the elements.
body{
display:flex;
display: block;
font-family: sheepman, serif;
font-weight: 400;
font-style: normal;
padding:0px 0px 0px 10px;
margin:0px auto;
}
#boxcolor{
margin-left:-10px;
background-color:black;
}
#header{
margin-left:10px;
padding:20px 0px 20px 0px;
}
h1{
color:rgb(255, 255, 255);
font-size: 50px;
margin:0px;
padding-left:10px;
}
.Phead{
color:white;
padding-left:10px;
}
</style>
</head>
<body>
<!--------------------------Header of the Page----------------------->
<div id="boxcolor">
<div id="header">
<h1>Occulture</h1>
<p class="Phead">Sign up to learn more! <br> <br>
<input type="email" name="email" placeholder="email"/>
<input type="submit" value="Subscribe"/></p>
</div>
</div>
<!--------------------------Header of the Page----------------------->
<p>This is a simple test Paragraph to see if this will inherit the body tag elements </p>
From your question I get the impression that you think there is some 'OO' (object oriented) logic attached to HTML and CSS. This is NOT the case. Admitted, child elements can 'inherit' from their parents, but only when specifically assigning the inherit value to their attributes like .someSelector { background-color: inherit }. That would be the only reference to 'OOP' you can make. Lose the thought, completely.
Mandatory reading w3school: CSS Selector Reference. Get a good understanding of CSS classes, selectors and selector specifity, why they are used, when and how they are used. Html knowledge includes the meaning of parent-child nesting constructions and sibling element constructions.
In your case you would need two distinct sibling containers inside your document parent container: <body>.
a .header parent container (black background) with 10px inner space, containing h1 and p child elements
a .content parent container (white background) with 10px inner space, containing a p child element
To fully align both containers to the document sides, you first need to lose the html default <body> margin of 8px: body { margin: 0 }
Then create two containers inside <body> (header and content) and assign spacing and colors, like below snippet.
Friendly advice, do NOT change an elements' display attribute if you don't know how to use it (concluded from your double display assignment in body {...}). Flexbox layout is great, when you know what it is about. Html default of display: flex is row oriented, you needed column oriented FBL.
body {
display: flex;
flex-direction: column;
font-family: sheepman, serif;
/* font-weight: 400; /* html default */
/* font-style: normal; /* html default */
margin: 0;
}
.header {
background-color: black;
color: white;
/* never again use PX (search online "MDN units")*/
padding: 0.625rem /* rem is px-value/16 => 10px/16 */
}
h1 {
font-size: 3.125rem /* 50px/16 */
}
.content {
/* already has html default colors black on white */
padding: 0.625rem /* 10px/16 */
}
<div class="header">
<h1>Occulture</h1>
<p class="Phead">Sign up to learn more! <br> <br>
<input type="email" name="email" placeholder="email" />
<input type="submit" value="Subscribe" /></p>
</div>
<div class="content">
<p>This is a simple test Paragraph to see if this will inherit the body tag elements </p>
</div>
Related
I am working on a web page with various section titles: About, Projects, Contact, etc.
These titles will be on top of a background image. I want them to stand out. So, I want to fill the background with white.
(The titles' text are dark blue.)
The problem is that, if I only designate a background-color, the elements stretch across the page. I need them to each have a custom width (with the 3px padding of white around them). Do I have to have a separate CSS style class for each title with a width designation?
The titles are all < h3 > elements.
Here is the CSS style I have now:
.sectionTitle{
background-color: #ffffff;
padding: 3px;
}
Your h3 tags stretch across the page because they are block elements (naturally 100% width of parent).
If you force your h3's to display as inline-block elements, their width will shrink to the minimum needed to accommodate the text node within - I imagine this is what you are trying to achieve.
body {
background: #e6e6e6;
}
.sectionTitle {
background-color: #ffffff;
padding: 3px;
display: inline-block;
}
<h3 class="sectionTitle">
Some title
</h3>
Of course this can potentially cause issues depending on the rest of your markup so you may have to wrap your h3 in a block element such as a div to keep your title in it's own row.
body {
background: #e6e6e6;
}
.sectionTitle {
background-color: #ffffff;
padding: 3px;
display: inline-block;
}
<div>
<h3 class="sectionTitle">
Some title
</h3>
</div>
If you want each title to have different padding you can just create a separate class for the color and padding.
.sectionTitle{
background-color: #ffffff;
}
.padding3{
padding: 3px;
}
.padding3{
padding: 2px;
}
Then assign the color class to each heading and the specific padding class
<h3 class="sectionTitle padding2">Hello</h3>
<h3 class="sectionTitle padding3">Hello</h3>
Or if you want each heading to have the same padding just assign them all to the css class you have provided above.
Please read the question carefully. It's not the same as the one about How to remove the space between inline-block elements.
Consider the following HTML:
body {
/* font-family: Arial; */
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: transparent;
border: 1px solid #ccc;
padding: 20px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
Which produces:
But, if I add:
body {
font-family: Arial;
}
it results in a 1px space between the second and third buttons:
The question is: Why adding font-family to the body affects the space between the buttons?
It happens because each font has different width, even for the space character. You already know about the whitespace issues with inline-blocks. So, when you set Arial, those whitespaces change their width slightly from the browser's default font (or any other font with different width), which is Times New Roman in my case.
See how drastic the change is when you set the monospace font.
Now, why it happens between the 2nd and the 3rd box and not the 1st and the 2nd one? I'm pretty sure it comes down to rounding pixel values based on the width of the words entered, seems like there is a pseudo sub-pixel rendering present in the background, yet the decimal values get rounded in the final render process. See what happens if you use Arial and print Hell Stack Overflow instead of Hello Stack Overflow - the gaps look the same. So, it's just an undesired coincidence.
Another point that proves this is a rounding issue is the change in the gaps across various page zoom levels. It's fairly common to get these pixel mismatches in the layout when dealing with decimals in HTML. Zooming adds another dividing/multiplication stage, which changes the core values even further, resulting in completely unpredictable behaviour in the final layout.
It's because you're displaying the buttons as inline-block elements and when you have inline elements whitespace is significant and is rendered in the same way that spaces between words is rendered.
i.e inline-block makes whitespace significant, so spaces in the source between inline-block elements will be rendered.
For example: You could center the inline-block elements just by adding text-align: center; the same way is used to center the text in its parent block element. - DEMO
Why adding font-family to the body affects the space between the buttons?
Different fonts can have different spacing between words, If you compare font-family: monospace; with font-family: sans-serif; then you will see the monospace fonts have more space between words than sans-serif fonts and the inline-block elements is also rendered in the same way and have the spacing between elements.
Monospace DEMO
Sans-serif DEMO
The best way to remove the space between inline-block elements is adding the font-size: 0; to the parent element.
DEMO
div {
font-size: 0;
}
.my-class {
display: inline-block;
border: 1px solid #cccccc;
padding: 20px;
font-size: 16px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
The answer assumes that DirectWrite is enabled. You will not notice the specified symptoms and fractional widths otherwise. It is also assumed that default serif and sans-serif fonts are Times New Roman and Arial.
Whoever said that the space character is 4px wide is mistaken:
$(function() {
$(".demo").each(function() {
var width = $("span", this).width();
$("ins", this).text("total width: " + width + "px, " + (width / 10) + "px per space)");
});
});
.demo {
white-space: pre;
overflow: hidden;
background: #EEE;
}
.demo-1 {
font: 16px/1 sans-serif;
}
.demo-2 {
font: 16px/1 serif;
}
.demo-3 {
font: 16px/1 monospace;
}
.demo span {
float: left;
background: #CF0;
}
.demo ins {
float: right;
font-size: smaller;
}
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<p>The green blocks contain 10 spaces:</p>
<p class="demo demo-1"><span> </span><ins></ins></p>
<p class="demo demo-2"><span> </span><ins></ins></p>
<p class="demo demo-3"><span> </span><ins></ins></p>
Note that:
For a given size the character width depends on font family.
The character width does not necessarily have to be a whole number. Serif font gives you a nice whole number (4px), but Sans-serif font gives you fractional number (4.4px).
You could get different results in different browsers depending on how they handle fractional gaps between two blocks (e.g. 4.4px for 16px Arial). CSS specs are silent about this.
In Chrome with DirectWrite enabled, spaces are rendered as 4px and 5px alternately due to rounding off. This explains why there is no gap between first and second button and 1px gap between second and third. Try adding more buttons in your original example and notice how the pattern repeats (Demo).
Using margin-left: -4.4px seems to work but it is not guaranteed to work. Consider going back to the alternate solutions.
PROBLEM:
this happens because the display is set to inline-block.
inline-block is:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
»» see more about display property here: DISPLAY INFO
SOLUTION(S):
Remove the spaces
Negative margin
Skip the closing tag
Set the font size to zero
Just float them instead
Just use flexbox instead
For more details on each solution check
Fighting the Space Between Inline Block Elements
my preferred solutions from above is
Set the font size to zero
therefore is a snippet with your code and my preferred solution:
div {
font-size:0;
}
.my-class {
display: inline-block;
border: 1px solid #cccccc;
padding: 20px;
font:normal 12px Arial;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
Plus, here is a snippet with your EXACT CODE only changing the font-family from body to the elements that have display:inline-block, and achieving the same output as my FIRST SNIPPET
.my-class {
display: inline-block;
margin-left: -4px; /* Remove the space between inline elements */
border: 1px solid #cccccc;
padding: 20px;
font-family:Arial;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
EDIT:
OP's question:
Why adding font-family to the body affects the space between the
buttons?
in web typography there are:
Sans-serif
Fonts that do not have decorative markings, or serifs, on their letters. These fonts are often considered easier to read on screens.
Serif
Fonts that have decorative markings, or serifs, present on their characters.
Monospace
Fonts in which all characters are equally wide.
Cursive
Fonts that resemble cursive writing. These fonts may have a decorative appearance, but they can be difficult to read at small sizes, so they are generally used sparingly.
Fantasy
Fonts that may contain symbols or other decorative properties, but still represent the specified character.
Since Arial is a sans-serif font, therefore a non-fixed width font ( like monospace ), when applied to body with child elements displaying inline-block(without fix for the gaps) it will create space between the child elements.
Although if you apply the font-family to the child elements, like I DID in my 2ND SNIPPET it doesn't happen anymore.
one comment of an article:
The gap between inline elements is, as you suggest, a space character.
The width depends on the font (family, variant, etc.) and approximates
to .25em
you can check it here
the full article is below
ARTICLE
DEMO
The problem is that there are hidden spaces (a line break and a few tabs counts as a space, just to be clear) between tags. Minimize the HTML or comment the spaces out and everything will work correct:
body {
font-family: Arial;
}
.my-class {
display: inline-block;
margin-left: -4px;
border: 1px solid #cccccc;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<button class="my-class">Hello</button><!--
--><button class="my-class">Stack</button><!--
--><button class="my-class">Overflow</button>
</div>
</body>
</html>
Check the demo and use this CSS. If you have not satisfied, just change the font size. It will get fixed.
body {
font-family: Arial;
font-size: 15px;
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: ccc;
border: 1px solid #ccc;
padding: 20px;
}
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>
See also JSfiddle.
I recommend to use
float:left
or
float:right
instead
display:inline-block;
use the below css for this:
.my-class {
display: inline-block;
margin-left: -4px;
border: 1px solid #cccccc;
padding: 20px;
margin-right:-1px;
}
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.
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.
I've looked everywhere but to no avail.
I got a <legend> in a form, which displays as I want in every browsers, except in Chrome. It's like it sits outside of the fieldset, or it's like it goes on top of the next element. And it's very annoying. I can't even put margins on it.
Why does it display like in that way?
And is there a workaround?
HTML:
<fieldset class="col-12-box-bottom add-extras">
<legend class="plus">Add Promotion Code</legend>
<ul id="promo-fields">
<li><input class="field-small" type="text" /></li>
<li><button class="but-sec" type="submit">Apply</button></li>
</ul>
</fieldset>
CSS:
.add-extras legend{
width: 260px;
height: 0px;
border: 1px solid red;
display: block;
margin-top: 10px;
}
.add-extras fieldset{
position: relative;
}
.add-extras ul{
padding: 0 0 20px 0 !important;
overflow: hidden;
}
.add-extras li{
list-style-type: none;
float: left;
margin: 0 18px 0 0;
}
.add-extras li:last-child a{
color: #afafaf;
display: block;
margin: 27px 0px 0 0;
}
fieldset.add-extras{
margin: 0px 0 23px 0;
}
.add-extras label{
float: none;
display: block;
text-align: left;
width: 110px;
font-weight: bold;
margin: 0 0 5px 0;
}
This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.
Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
http://jsfiddle.net/JLsPs/1/
(answer found here: Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit))
I have struggled with this issue many times, eventually leading to my abandoning the legend tag until recent, where I have begun using it again to add more semantic meaning to my markup.
Here is a fix I have devised to control the appearance of the legend tag's layout in relation to it's siblings:
Markup:
<div class="fieldset">
<fieldset>
<legend>Form Section</legend>
<div class="field_row">
<label for="first_name">First Name</label>
<input id="first_name" name="first_name" type="text">
</div>
<div class="field_row">
<label for="last_name">Last Name</label>
<input id="last_name" name="last_name" type="text">
</div>
</fieldset>
</div>
Styles:
.fieldset {
padding-top:48px; /*legend height(18px) + top value(15px) + bottom spacing(15px) */
position:relative;
}
legend {
height:18px; /* Default Height of non-styled legend element with default font-size of 16px as tested at time of this posting */
left:15px;
/*margin:15px 0;*/ /* Margins initially trying to achieve */
position:absolute;
top:15px; /* replaces top margin-top:15px; */
}
From the example I provided above, in order to achieve the bottom "margin" on the <legend> tag that you desire, you'll just apply a top padding to the fieldset equal to the amount of top and bottom margin you desire plus the explicit height of the legend tag. This pushes down the <legend>'s siblings down appropriately.
If you haven't explicitly set the height of your legend, you can just check it out in the metric tab of either Firebug or Chrome Developer tools, as the font-size will affect the height of it.
But yeah, pretty simple solution, I just ran into it again a few days ago when working on a client project. Then came across this question, as I was trying to do more research on it today.
Edit: I realized after posting this answer that in my original fix, I applied the padding to a parent <div> of the <fieldset> because for some reason Firefox starts the top:15px; from the bottom of the top padding, when the padding is applied to the <fieldset>. Putting the padding-top and position:relative; on the parent div allowed the <legend> to position absolutely over the padding instead of being pushed down by the padding. I have edited the code above to reflect my findings. This solution which started out simple, is less attractive to me now, but it definitely works. Here is a page that I created, testing two methods of positioning the <legend> tag: Legend tag positioning: http://dl.dropbox.com/u/37971131/css-testing/forms.html
The method proposed by Stephan Muller only works if the HTML element following the is visible. As in my case, this is not always possible without potentially large restructuring of the HTML code. Thus, in addition to his CSS code
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
just apply the following jQuery command, which basically just inserts an empty div (having a height of 0 px) but now matches the CSS selector adding the margin in every case:
$('legend + *').not(':visible').each(function() {
$('<div></div>').insertBefore($(this));
}
If updating the templates is not possible, you can use this script, just wrap the legend tag inside a div tag
jQuery('legend').each(function() {
jQuery(this).wrap( "<div></div>" );
});
Hope this helps! Enjoy coding..