On my site I am happy with the home page except for a paragraph that is too wide to read easily. Is there any way I can restrict the width of this (say 500) and still have it display centrally aligned? It's on wordpress and I'm not great at programing so you may need to explain it very simply for me in practical terms. Site is www.explainedwell.com many thanks, Steven
PS if you could also show me how to get the QR code and Impact graphics central that would be great (I put them in a table). Thanks
Ideally you would want to restructure your page somewhat in order to be able to style it more easily, or at least give these specific elements that you mention certain classes so that you can target them in an external css file.
If you are just looking for a quick fix though, you can apply the following inline css styles (to do that you need to go into the page you are editing in WordPress and switch to the text mode there):
<p style="padding-left: 0px; text-align: justify; margin: 0 auto; width: 500px;">...</p>
<table class=" aligncenter" border="0" align="center" style="margin: 0 auto;">...</table>
I would advise against this though and look for a better way of targeting these elements (as described above).
Related
I'm trying to create a 3 column grid for an email template that uses the liquid template language.
A lot of users use Outlook. I am trying to use a table for the grid which is working okay, but I can't get the images to look good. I either use a CSS command that doesn't render in Outlook or it looks really terrible.
This is what works but won't render in Outlook:
<td>
<div style="padding: 5px;">
<img style="width: 100%; height: 150px; object-fit: contain; object-position: center;" src="/images/logo1.png" />
</div>
</td>
How can I turn this 'sentence' into something that will render for all email clients.
It is generally bad practice to use <div> elements when working with HTML E-mails. You should refer to strictly using <table> layout instead to get your desired results. The reason for this is that many E-mail clients simply don't support anything else. Other than that, some E-mail clients will also ignore inline padding and margin styling on <img> elements, as well as some other specific stuff. It really all depends. Rule of thumb is, as long as you use a <table> layout, you're probably fine. For the most part anyways.
This old article covers some of the inconveniences with the <div> element in HTML E-mails.
Alternatively, check out this article on Outlook 2016 HTML E-mail tips.
I would also highly recommend navigating through this gem of a post if you're interested in learning more about HTML E-mails.
I'm using currently trying to achive this in a rich-text based template system in which the user can switch the image to another of any size.
The system only allows me to style inline,
so that <img src="path/image.jpg" style="max-width: 100%; max-height: 100%;" > works fine UNTIL the user switch the image to another, deleting any previous styling, replacing with a new <img> with its own width and height.
I've already tried using
<style></style> and <style type="text/css"></style>and <link>, but the system ignores it.
Can I solve this inline without changing the img tag?
This is the code as it is today:
<div style="float: left; text-align: center; display:inline-block; margin: 0 auto; width:450px;height:450px;">
<img src="http://i.imgur.com/cnI4YIs.png" width="450px" height="450px" alt="" />
</div>
Thank you, but now i think it is good in its own way.
I'm not sure if it works with JS, but it seems that when I make changes inside the template, and then I copy the code to paste in the actual site that will publish the template ad (that also works with rich-text input), the changes automatically goes inline.
In other words, I keep <style></style> elements in the template system, save it in the publish system, and avoid making any changes in it.
I don't know how to explain this, or why it's happening, but it works anyway...
PS: both sites use TinyMCE to edit the code, so it may be useful to look for answers about TinyMCE configuration (like enabling the tag <style>). Of course, only if you have admin access to it. I didn't.
So I'm trying to create a simple header/content layout where the content part extends to the bottom of the window.
Doing it with CSS looks impossible, at without introducing too much complexity considering how simple is this layout.
Please tell me a SINGLE reason why I shouldn't do this
body, html { height: 100%; padding: 0; margin: 0; }
#h{ height: 150px; }
#tbl { height: 100%; }
<table id="tbl" cellpadding="0" cellspacing="0">
<tr>
<td id="h">header</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
And don't tell me about semantics and how tables weren't made for layout.
It seems most web designers today are masochists who spend hours everyday trying to build simple layouts in very complex ways because they like to torture themselves with things that don't matter.
I can hear you already saying "But... but... john using divs instead of tables is the latest hip thing to do, you don't want us to be mocked by the other web designers do you?"
We do not use table layout anymore because they are not semantic. Bots and screenreaders can not identify what the content is good for. Secondly you will want to separate your content from code for layout (distribution of duties).
Having an external CSS file will make your page much more easy to maintain. If you have 20+ pages which all have a table to keep content in, you will pretty likly have to edit all this documents for a redesign. If you use CSS and have a good document layout width identifiers you will only have to change one .css file to alter all your layout for good.
You have a question. You want to have a content area under your header item. That ok and indeed can be solved with more complex CSS if you want to, but not have to be.
Firstly you will begin width your header. You can use <div> for that or use the headings (h1-h6) items. Like that every bot will know > "Oh! a headline. Thats important!"
Lets structure your document:
<body>
<h1>Header</h1>
<div class="static-content">
<p>Content</p>
</div>
</body>
We have a headline and a div width the classname "static-content" for layout reasons. You can change this name to what ever you want (no whitespace and start width a alphabetic char) you can also add multiple classes, separated by white spaces.
here is some CSS
html, body {
height: 100%;
margin:0;
background-color: gray;
padding: 0;
}
h1
{
display: block;
padding: 20px 10px;
background-color: blue;
margin: 0px 0px 0px 0px;
}
.static-content
{
background-color: red;
padding: 10px;
margin: 0;
}
So. Like you can see in the fiddle here: http://jsfiddle.net/NicoO/rC66e/2/
Your content area can be red (like it is). But you also see the gray background. The element in the background is the body you can work with the body like nearly any div.
So you see, you already have stretched your content area to the bottom of the browser. If you want the red area to be on the bottom also, you have multiple options to realsise that.
See the fiddle here: http://jsfiddle.net/NicoO/rC66e/3/
There are also other ways to realise that.
Update. If you really want that red area to be big, you could try something like this:
http://jsfiddle.net/NicoO/rC66e/5/
This is not a really good solution because I don't know what you want to use it for. You just could style the body element and you are good to go. If you want more complex layout, you will have to addapt your CSS. The soltion in this fiddle is not generic as it should be. But it shows, that you can do a lot of things width CSS. Even if you don't really showed us your use case.
Edit:
You keep saying "why don't i just juse a two row table?". But on the other hand you try to alter this rule for the answer here. Why don't you just a heading and a paragraph? like <h1>Title</h1><p>content</p> You can add a background-color to the body element and be done. There is no reason to do anything else here.
Final Edit:
You have a valid point #John. sometimes CSS can be a pain. But it is far superior to table layout. For most common problems there are Tools like grown grid systems, that get the most of the problems out of the way. W3C is working on making CSS more powerfull and easy to use. For example with thew new display:grid; property.
If you really give css a chance and try to addapt a new pattern of thinking about the box model, it will help you a lot. With HTML and CSS you can just write what you reall need without having to have a clumsy table all the time.
I'am sorry if I offended you. But i'd recommend you to weight the pros and cons of table vs css layout. There is pretty nice stuff around like responsive layouts, that you will not be able to fully use width these old techniques
My personal view:
Using tables for layout is like using coffee to stay awake. Don't do it too often. Maybe once in a while.
And certainly we shouldn't hassle people who use table-based layouts, especially when there's no sound, cross-browser way to do a particular layout in CSS.
That said...
1. Tables make it harder to design for multiple screen sizes at once
Responsive layout is important these days. Having different CSS rules for different viewport sizes, applied to the same HTML code, is a good way to adapt a site to all screens.
For very simple designs, though, a table-based layout may work at any screen size.
2. Tables can interfere with search engine indexes, screen readers, and other automatic web page parsing
In other words, not so good for SEO and accessibility.
However, it's worth pointing out that Google has recently been optimizing its search algorithm to distinguish between layout tables and data tables.
And there are some techniques like <table role="presentation"> to help screen readers handle tables, although those hacks can get complicated.
3. Table-based layouts require changing the HTML markup when you want to change the layout
Again, it's nicer and more conceptually pure -- and often more maintainable -- to use HTML for content/semantics only, so you can leave the markup alone when you make design changes. But practically speaking, in a substantial redesign you'd often need to make changes to the HTML anyway.
In sum, I believe that guidelines and best practices are more useful than hard-and-fast rules regarding tables for layout. It's a balancing act, and there are situations where tables can be, overall, a better choice.
I'm having to use a 3rd party CMS and I cannot change the contents of the h3 (or the h3 itself)
I've not had too much dealing with "cufon" - presume its an old fashioned way of using a specific font. I'm guessing it's not legit HTML so not indexed.
Therefore I wanted to include the page's header in an H1
<h3>
<span class="someClassDictatingTheFontToUse">
<cufon class="cufon cufon-canvas" alt="Alternative text " style="..inline styles..">
<canvas width="73" height="18" style="..inline styles.."></canvas>
<cufontext>Page </cufontext></cufon><cufon class="cufon cufon-canvas" alt="Page" style="..inline styles..">
<canvas width="76" height="18" style="..inline styles.."></canvas>
<cufontext>Content</cufontext>
</cufon>
</span>
</h3>
<!-- im proposing this -->
<h1 class="offthepage_or_verysmall">Page Content</h1>
<p>This is my content etc</p>
where
.offthepage { margin-left:-10000px; position:absolute}
or
.verysmall { height:1px, position:absolute; left:1px; etc }
Would the page be penalised (from SE indexing perspective) for that?
or is there a more robust / SE friendly way of doing it without it being consider keyword stuffing?
thanks
Cufon is a JavaScript-based tool that allowed for "pretty" font rendering via SVG, while still preserving the original text. Fonts to be rendered have to be converted into a vector format prior to being used by Cufon. The output might look sloppy in your developer tools after the DOM has fully loaded and JS has processed, but to really see what it's doing prior to all of that, try disabling JS in your browser or viewing the site as text-only. In the example you posted, you should see something along the lines of...
<h3>Page Content</h3>
...though you might also see SPAN tags and inline styles if that's part of the CMS output. That's what most search engines should be seeing. Give it a shot and let us know what is shown when you disable JS.
Here's a decent explanation of how it works with SEO: http://xsdesigns.se/2013/10/cufon-custom-fonts-hurt-seo/
Regarding the offscreen H1 issue, everything I've read says that Google does index CSS-hidden HTML elements. You may want to just use one of these instead of positioning it offscreen; it's a little more elegant (I also would reccommend not using inline styles to accomplish this if you can avoid it):
/* Takes element out of DOM layout entirely */
h1.offthepage_or_verysmall { display: none; }
/* Element still present in layout, but doesn't appear on screen */
h1.offthepage_or_verysmall { visibility: hidden; }
Now having said that, it's obviously not an ideal practice, and there have been strong rumblings that Google and others are processing JavaScript and CSS files along with the raw HTML output. It could be a penalization down the road. Use at your own risk.
I believe the google bot is primarily interested in html mark up as opposed to css/js, though this may change in future.
Google doesn't care for the fact that your h1 is hidden, off the page, or small. Google doesn't see the page as you do, it sees it more like a blind man using a screen reader does.
I want to do the following:
------------------------------------------------
width: 100%;
height: 60px
image center
image bottom/right
-------------------------------------------------
I used to do it with table:
<table border="0">
<tr>
<td width="25%"></td>
<td width="50%"><center>image center</center></td>
<td width="25%" valing bottom><div align="right">image bottom/right</div></td>
</tr>
</table>
but they say using tables for formatting is bad (Dunno why)
So is there any idea how to do the following banner? I heard there is absolute position, so mightbe the 2 images could be embedded to 2 divs
First off before I do any explaining I think you could use some visuals of just how powerful CSS can be...
CSS Zen Garden shows how using a different CSS style sheet can completely change the entire way a site looks (use theme links on the right side)...
http://www.csszengarden.com/
My own site supports multiple themes which you can instantly change without even reloading the page...
http://www.jabcreations.com/blog/?prompt=themes-official
1.) Tables are intended for tabular data only, think the nutrition panels on food labels if you're not sure where to start. Tables are great for tabular data because it removes the formatting issues however you should never put non-tabular content in to tables as it disrupts the context of the content to search engines and you should instead use division elements instead since non-tabular data tends to do anything except for be presented in a tabular fashion.
2.) The context of using either CSS background-images or (X)HTML img (image) elements comes down to what you're trying to do.
2.A.) CSS3 allows the use of multiple background-images however browser support isn't yet universal when considering browser market shares...
http://www.caniuse.com/#search=css3%20multiple%20backgrounds
...as time passes however IE8 and other older browsers that do not support this modification to the CSS background-image property will slowly disappear so it will only become an increasingly viable option.
2.B.) You can combine an img element and a CSS background-image together to get two images to display inside of a single element.
2.C.) You can use two division elements with the same styling (or lack thereof) and then give them each a CSS background-image.
Here is the generally relevant CSS code...
background-image: url(kittens.png);
/* Choose one or the other below */
background-position: right bottom;
background-position: center center;
I'll reiterate that tables for on-tabular data is exceptionally bad for styling. Once you begin to grasp how CSS works (cascading means rules on lower lines override earlier lines, so the same rule on line 10 will override the same rule on line 9, if they are the same rule).
By using CSS you're going to have so much more power to quickly implement changes across your entire site and you'll be able to implement changes quicker and move on to more important things.