I'm learning CSS3 and while going through a layout, I noticed that when I try to add design to multiple sections and also classes/IDs, sometimes I have to have space between the section name and class/ID and sometimes I don't. Please see below, specially the ones in bold.
When I eliminate space and give space in the wrong place, the code doesn't work.
I want to know why this happens, how do I know when to give space or put them together?
Thanks!
#media(max-width:768px){
**header #branding,**
header nav,
header nav li,
**#newsletter h1**,
#newsletter form,
#boxes .box,
**article#main-col**,
**aside#sidebar**{
float: none;
text-align: center;
width: 100%;
}
Spaces are allowed anywhere. Multiple spaces are also allowed.
Combining things on one line is also no problem. But a word (selector, property or value) may not be broken. text- align (broken with space) is NOT allowed.
article#main-col (without space) selects the <article id="main-col">
article #main-col (with space) selects an <... id="main-col"> inside the <article>
Related
TL;DR: Wondering if there's a CSS property that can break content where HTML doesn't naturally:
Baby
Buggy Bumpers
instead of
Baby Buggy
Bumpers
The only way I can think of to do it is to add where you don't want the line to break, but I'm working in WordPress, which strips those.
This is to graphically style a site's name on the home page. The site name is part of the nav, so it's inside an <li>, using grid layout.
Luckily in my case, setting the width with a dimension that is relative to the font size seems to break the way I want at all viewport widths:
.my-brand a {
width: 16ch;
text-align: end;
}
white-space: nowrap and such elements won't work with the "baby buggy bumpers" example because the need is to break after one specific word. Just wondering if there's some way to specify in a way similar to nth-child(2).
Made a Codepen to play with.
If you can't use Javascript and can't add tags in the string like :
<div class='string'>
Baby<span>Buggy Bumpers</span>
</div>
It only remain "hacky" CSS solution. There is one using pseudo-elements :
HTML :
<div class='string'>
Baby
</div>
CSS :
.string{
width: 11ch;
text-align: end;
font-size: 2em;
}
.string::after {
content: "Buggy Bumpers";
color: red;
display:block ;
white-space:nowrap;
}
Live exemple : https://codepen.io/camillewemajin/pen/JjWzWzN
But that's not really clean for many reasons, like SEO...
I don´t understand why <p> tag in HTML has two line breaks instead one, can someone tell me why its like that and if its possible to fix it to one with CSS.
Two line breaks:
<p>Hello World</p>my name is Yoel.
Compares with <br> one line break:
Hello World
<br>my name is Yoel.
What you're seeing isn't actually an extra line-break, but a margin. By default p tags come with a small margin to help visually define them.
If you want to get rid of that you can add the following to your CSS:
p {
margin: 0;
}
ON Chrome you get default styles:
p{
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
If you set them to 0 you will get the same result as br tag
<p> is meant to be a new paragraph, while <br> is the one to use for just a line break.
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose (source)
Different browsers have different render engines and apply different user agent stylesheets.
By default, browsers apply a margin to <p> elements.
You can remove the margin-bottom with
p { margin-bottom: 0;}
Or even better, do this:
<p>Hello World
<br>my name is Yoel.</p>
The <br> tag is correctly used if it is inside a <p> tag, it indicates a line-break in a paragraph.
Just started posting stories and essays online and I've found a couple sites that have very basic text editors that don't allow a lot of basic formatting unless you apply a CSS Workskin. After searching through the topics here I found some useful Code but ran into some problems. What I want to know is if there's a way to set Center Aligned text to ignore Indentation without setting it to a specific Class?
#workskin p {
text-indent: 45px;
}
I have the above set to indent the first line of every paragraph but it also indents everything that's centered which skews it off-center. I hope there's some adjustment to the above code that forces it to ignore center aligned text.
#workskin p.chapter {
text-align:center;
text-indent:0;
}
I learned how to set a Class as above to correct this but some of the postings I'll be making will require hundreds or thousands of center-aligned lines so I'm really hoping I can do it with some Code rather than having to manually set them to a Class. Thanks for any help you can give!
EDIT: To specify what I'm asking for, I want to force all center aligned text to have 0 indent so I don't have to manually insert:
<p class="chapter">
Thousands of times.
Paragraph --- want Indent
Paragraph --- want Indent
Centered text/divider/chapter title/ect... ---- do NOT want Indent
Paragraph --- want Indent
Centered text/divider/chapter title/ect... ---- do NOT want Indent
pattern continues randomly
The first style has a more specific selector than p.chapter so the text indent remains at 45px. You also need:
#workskin p.chapter {
text-align:center;
text-indent:0;
}
Just do something like:
#workskin p.chapter {
display: block;
text-align:center;
text-indent:0!important;
/* "!imporatnt" ensures that it overrides
previous indent property set, if the value 0
and specification doesn't solve the problem */
}
To indent just the first paragraph do something like below, none of the other paragraphs will not indent.
#workskin p:first-of-type { /* Targets just the first paragraph */
text-indent: 45px;
}
This is my website's main menu:
As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:
#pt_custommenu .parentMenu a{
width: 100px; height: 59px;
line-height: normal;
padding-top: 0; padding-bottom:0;
float:left;
display: inline-block;
position: relative;
text-transform: none;
word-wrap: normal;
white-space: normal !important;
}
I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.
Any suggestions?
Remove
This code inserts a space without wrap. Normal spaces don't do that.
You can retrieve more info about here:
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
EDIT: I'm going to copy the relevant info in case this link someday dissappears:
is the entity used to represent a non-breaking space. It is
essentially a standard space, the primary difference being that a
browser should not break (or wrap) a line of text at the point that
this occupies.
Many WYSIWYG HTML editors insert these entities in an effort to
control the layout of the HTML document. For example, such an editor
may use a series of non-breaking spaces to indent a paragraph like
this:
<p>
This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>
[...]
There are some times when it is "acceptable" or "advisable" to use the
entity so long as the consequences are understood:
Its intended use of creating a space between words or elements that
should not be broken. The only problems that can be associated with
this use is that too many words strung together with non-breaking
spaces may require some graphical browsers to show horizontal
scrollbars or cause them to display the text overlapping table
borders.
You want text to be broken so use following:
word-wrap: break-word;
I checked again and saw you didn't use any spaces, thats why it can't. Replace with normal space character. Otherwise browser will read it as a block without spaces.
I'm still learning how to do layouts with CSS.
After borrowing some CSS from another website to play with,
I've noticed that if I remove this from the CSS:
header {
display: block;
}
that my header will not center. If I remove this from the CSS file, the header image becomes very small and remains in the upper left corner. After reading about the display property, I can't see why it controls centering. Could someone simply/briefly explain it to me?
http://www.quirksmode.org/css/display.html
Scroll partway down the page for a detailed explanation and examples on what display: block does.
FYI: the code you posted won't necessarily do anything in browser parsing a document as HTML 4 (but will in a browser supporting HTML 5).
It states that a tag called "header" (which doesn't exist in HTML 4) should be set to display: block. Thus, one of four things will happen:
Browser will recognize it as HTML 5 and apply the style.
Browser will do an arbitrary pattern match and apply the style even though it doesn't know the tag.
Browser will do nothing.
Browser will only follow some of the CSS instructions.
EDIT: here is documentation on the new header tag in HTML 5:
http://html5doctor.com/the-header-element/
EDIT #2: Barring any other conflicting styles on the page, this will provide a centered heading.
<style>
H1 {
text-align: center;
}
</style>
<h1>Some text to be centered</h1>
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). more