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
Related
Big project, semi-competent programmer, much confusion.
Example: I wrote the CSS command that sets the formatting for the book's title
h0 { text-align: center; ... }
and it worked. Time passed, I made changes -- one of which disrupted the entire CSS enterprise. During repair, I began to wonder if 'h0' was in some way a forbidden name, so changed it to
h1 { text-align: center; ... }
and moved it out of a CSS file to the 'style' section of 'ChapTab.shtml', the first HTML loaded and the only place it is used. This works.
But I have used 'h1' for another format many places later on, so I change this command back to
h0 { text-align: center; ... }
and it puts the title at the left.
FF's CSS-usage add-on shows this 'h0' (as written) as the active command, but disobeyed. I find this confusing unless 'h0' is indeed pre-empted, or something. What's going on?
You can see this happening at the title of the page
http://www.electromontis.net/evoligion/_A/A00.shtml
(We will worry about the oversize font in the left column of the table, and the perpetual left-alignment below, at some later date.)
h0 is being treated as an inline element, so the text-align property won't work on it. Add the property display: block; to h0 to make it a block element. The text-align property works on block elements.
And I agree with #Rubenxfd - I'm not aware of an h0 tag. Best to stick with HTML standard tags where there are default properties (like display).
There is no h0 tag, so browser renders it as <span>. Add h0 {display: block} to act as h1 tag.
Your th has font-size: 140%;. Change/remove it.
perpetual left-alignment below Did not get this one, but if you are talking about all elements that are left-aligned below table: There is no align rules set, so it's left-aligned by default.
I'm attempting to allow our CMS editors the ability to swap out the text used for a page title using only a css override.
<header data-alternate="An Alternate Title">
This Page's Default Title
</header>
Using the :before or :after tag, one could use one of many available alternate titles.
header:before {
content: attr(data-alternate);
display: inline-block;
}
If only we could also say,
header:text {
display: none;
}
Unfortunately, as far as I can tell, there is no good way to hide "This Page's Default Title" in order to replace it with "An Alternate Title". If this were a Sprite, we could use one of the well-worn image replacement techniques like Phark or otherwise. Not so much with text replacement generated by :before, because the :before is also affected by the CSS devices used to hide the default text so that, with Phark, for example, the :before content is also at -9999px.
There are solutions I'm trying to avoid.
Using the Phark method or somesuch to hide the default text and then using absolute positioning on the :before content to put it back at left: 0, top: 0. I want/need to preserve flow if possible.
Wrapping the "Page's Default Title" in a span and just setting it to display: none in the CSS when an alternate title is being used.
i.e.
<header data-alternate="An Alternate Title">
<span class="default">This Page's Default Title</span>
</header>
This works, but a span nested in a header is displeasing.
Is there a way to target a tag's text without also targeting its generated :before/:after content? Is there another way to do this?
I'm not sure if this is exactly what you want, but you could try something like this:
p {
visibility: hidden;
}
p:before {
content: attr(data-alternate);
display: inline-block;
visibility: visible;
}
http://jsfiddle.net/yJKEZ/
You can set the visibility of the p element to be hidden, and then set the visibility of the :before pseudo-element to be visible within it's parent (the p) despite it's setting.
If that doesn't quite work as expected, there isn't really anything tremendously wrong with adding an extra span in, to help the process. It might not be as clean, but it could work better.
I do, however, want to raise the question of why you might need to do this, and point out some concerns with an approach like this...
For starters, pseudo elements are not part of the DOM, so that alternate text can't be selected, and isn't as accessible to the browser (or the user). Screen readers or search engines will see the default text, and not pay any attention to the alternate text, but that's what your user will see... This could lead to some confusion.
While your question specifies that you want to be able to do this with CSS, and while it may be possible, it really isn't the best solution for doing something like this. Especially if your website is being viewed in an older browser which does not support pseudo elements (Now the user sees nothing at all!).
I would more recommend something like this for swapping an image out for alt text in a print stylesheet, or swapping a hyperlink's text for the full address that it links too (again, mainly for a print stylesheet). Changing important content like a heading in this fashion can cause a lot of other issues, especially in terms of accessibility.
Just something for you to consider along with my answer... I hope I've helped you with your problem!
I have elements with this pattern (XML, not HTML, but CSS should still work):
<expan abbr="XX">YY</expan>
Sometimes I want to see "YY" in the output, sometimes I want to see "XX". No problem when I want to see "YY" and not the attribute value: just leave it as is. No problem if I want to see BOTH the element content and the attribute value: this bit of CSS does that:
expan:after {content:attr(abbr);}
will display <expan abbr="XX">YY</expan> as "YYXX".
But: problem if I want to see the attribute value and NOT the element content -- that is, if I want to see just "XX". I can use either CSS display or visibility to hide the element <expan>. But it hides EVERYTHING, including the :after pseudo-element. So, this code:
expan:after {content:attr(abbr);}
expan {display:none;}
Shows nothing at all.
So, good folk... help. This seems a very obvious thing to want to do. Of course, I could do it pretty easily manipulating the DOM with Javascript. But for various reasons, I don't have that option. I'd like to do it with simple CSS. Can I??
You'll have to use some kind of hack where the element is still there but only the pseudo element (:after) is visible to the user. An example of this would be color. If you know it's only text, then you can set the color to transparent on the main element, and set it to a real color on the pseudo. You'll still have a blank space to deal with, but you can fix that with position: relative on the parent and position: absolute on the pseudo element, because the pseudo element is a child of the main element. note that the text is still there, but you only see it if you highlight it with the mouse. That's fixable too, with ::selection, but it would still be copyable by accident, and ::select is only available in modern browsers.
Here is a demo showing what I mean: DEMO
EDIT: This one should work with text around it, but you'll have to increase the width in order to add more text: DEMO
Works for me in Chrome and Firefox.
One partial solution is to set the expan font-size to 0 and the :before content font-size to the desired size:
expan:before {
content: attr(name);
font-size: 15px;
}
expan {
font-size: 0;
}
Trying to set the :before font-size to 100% did not work.
You can only set the 'content:' attribute on ::before and ::after psuedo-elements.
But what you can do is just provide both your texts in two separate attributes, like this:
<div long-text="This is very long text" short-text="Short text">
<!-- this part is empty -->
</div>
Then your CSS can switch between them like this:
.AltText::before { content:attr(long-text); }
#media screen and (max-width:1200px) {
#HeaderTabContainer .AltText::before { content:attr(short-text); }
}
Or you could use a third attribute to toggle between them.
Please could someone help me understand why the div.fl element shown in Developer Tools below has display: block in the Computed Style section?
It is being displayed as a block-level element.
But the list of CSS rules below shows that display: inline ! important is the rule with the highest priority - the div: block directive has a strikethrough.
I would like it to display inline, but I'm not sure what else I can do besides use div.fl { display: inline ! important; } in my code.
I'm afraid I can't link to the code, but could anyone even suggest where to start looking? I don't understand where the block directive could be coming from.
Debugging CSS = my least favourite part of coding.
I see a float: right declaration in your screenshot. Floated elements are always rendered as blocks; you can't make your element display: inline if it's floated. See the spec for the float property for the gory details.
Is it floating or doing something that causes it to inherit display:block;? There are a number of CSS attributes that can change display types.
I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.