[K1][1]
[K2][2]
[K3][3]
I do SEO optimization for clients and I have one for whom I changed her home page title. (changed the wording and H1 tag. the title was originally split into two separate h1 tags. I made it one and changed the wording)
However after changing it the formatting is not cooperating. It looks fine when saved and published in the editor (2 lines stacked and left justified). But in a separate browser it looks different (centered and not stacked) and from her end it looks even another way. (stacked completely differently (3 lines) than how it appears in the editor) Mobile view is another view altogether. I am not a webdesigner. I have no idea what i did wrong
I moved the spacing block inserted to the right of the text to no avail. Resizing it and moving it on top of and on the bottom of the text. I am so confused because its right in the editor.
[1]: https://i.stack.imgur.com/i2rFI.jpg
[2]: https://i.stack.imgur.com/BMf0m.jpg
[3]: https://i.stack.imgur.com/8XqyU.jpg
Related
I made some research before writing here, but I couldn't find nothing that satisfied my answer to this specific case.
I have an icon, and when user hover onto it I want the icon become smaller and text (caption for the icon) should appear -at icons bottom.
As now, I have an interaction for the icon, that makes it become smaller.
It's first time for me working with WebFlow, and I see that using overlapping blocks they work as layers in the sense that the one on top is the only one who react to hovering.
I found in other questions that there was the need of setting correctly absolute/relative for blocks, but is not working for me since I have also the icon, inside the same block.
If I move the icon out of the block, I have the problem I shared before about overlapping "layers".
I need that icon decrease in size and text appear at the same time.
Is this achievable?
Thank you for your help!
I implemented PDF.js library and I need to print a PDF from IE 11 (with a click on a button in PDF.js viewer). The problem is, IE adds page information (header, footer, page number), and cuts off text like 5cm to the right. I spent hours trying out different CSS variants for #page rule, but still can't fix it. Here are the pictures.
This is how the printed file should look like:
And this is how it looks like printed to pdf with margin-left and margin-right set to 0mm:
You see, position and size are correct, but the text is simply cut off. Now when I added 50mm to the right margin:
Now the page number is aligned with the document, and the document text is still cut off, but a little less.
I experimented with different values and I get weird results, but I can't get it to show the complete text. Tried all kinds of margins, padding, size, width, overflow: visible... Nothing works. The only way I managed to remove header, footer and page numbers is by manually setting it up in IE print settings. But then again text is cut off. And it shouldn't be the client's job to mess around with print settings, it should automatically work just fine. I found similar problems on SO but no final answer. Is this actually an IE bug which is impossible to solve? Thanks
I believe that you can find more information about this (and other IE) printing issues here:
(IE: Incorrect printing in Internet Explorer)
https://github.com/mozilla/pdf.js/issues/3983
There appears to be a lot of issues around printing in IE 10 and IE 11 using this pdf.js library. I am currently trying to get it to work myself.
(My own problem is that I am getting page 2 content appearing on page 1 and having page 1 content cut off)
this (around line 3469, viewer.js)
canvas.style.width = (PRINT_OUTPUT_SCALE * viewport.width) + 'px';
canvas.style.height = (PRINT_OUTPUT_SCALE * viewport.height) + 'px';
var cssScale = 'scale(1, 1)';
seems to fix the scaling issue for me, and the comment by himawan-r (page setup dialog) around the 25 Apr 2015 told me how to get rid of the headers/footers.
My only real workaround at the moment is to force printing in a PDF plugin, and if the plugin is not installed, default to a standard html page with the relevant CSS queries for stripping non-printable areas.
I hope that this issue is something that is going to get addressed quickly, because I really like the pdf.js library.
I'm very new to wordpress but my understanding is that the post is just one big article. you can insert images between paragraphs of text, but the flow will always be text, image, another paragraph, image etc.
I would like to use it for tutorials, and the layout I have in mind is to display every step as an image, with text on the left.
I know I can probably achieve this using images with legend and displaying the legend to the left. I was wondering though if there was a way to use the post (eg. the article itself) in this way?
[Please only post an answer if you know the answer really well -- if you post an answer such as "I think it is easy to style it in CSS", then it is a guess and not a real answer, and it will make lots of people skip this question because it is marked as "answered"]
[I know the Share button is to be phased out, replaced by the Like button, but the program management still wants to use it as well as using the Like button]
I see fairly often that the Facebook Share button is faked by using an icon, as a background, and the text "Share" as a "button" -- the icon + text is faked to be 1 button.
Example:
http://www.youtube.com/create_detail/GoAnimate
http://www.pcmag.com/article2/0,2817,2381106,00.asp
The surprising thing is, it actually looks good on FF as well as IE 7. And the top link uses Tahoma font, while the second one uses Verdana for Windows, and "Lucida Grande" for Mac.
Question 1: what is it not made into an image? Because as we all know, an image looks the same almost every where. If you need to align the icon with the text, for all different fonts on different platform - Mac, Win 7, Win XP, Vista, Linux, IE 7, IE 8, FF, Chrome, and make the background of the text blue so that it looks like part of a button, it is going to be hard. Different fonts have different top space and bottom space (the "leading" as in printing terms), so it is hard to align the text well with the icon, and also hard to make the font not to look like grainy text on all platforms.
Question 2: is there a standard library or standard method to do it?
(the long existing <fb-share> as XFBML actually gives you an <a>, with the background icon, and then a <span> inside the <a> tag containing the text "Share". So it is actually just a square icon + text, but such as the second link above, they will fake it as a button. Maybe that's why even when it is not XFBML, some people still show the button this way instead of a good old image)
Update: also, it is hard because they usually are just <span>, and you can't specify a width for a <span>. Also, it has double borders to make it look like 3D, but it looks like 1 border is real CSS border and 1 border is by using the Sprite underneath.
Update 2: By the way, of all the Facebook Share button page that still exist on web, I never saw one with a Bubble with a count... this is getting more mysterious...
There are three good reasons for doing it this way:
Reuse: You can use the same icon on several different buttons, regardless of what the text content of the button is. This means you only have to download the icon once, which saves on bandwidth (see below) and means you don't have to make a different button image for every button you want to provide to the user. This is especially important on multilingual sites, as I'm sure you can imagine.
Bandwidth saving: The small icon used to decorate the text button is a lot smaller than an entire button graphic would be and therefore consumes less bandwidth to download it. While for one button this might not amount to much, it all adds up, especially on a site with potentially hundreds of different buttons that gets the kind of traffic that a site like Youtube or Facebook might get.
Accessibility: Image buttons take some additional work to make them accessible (the addition of an alt tag for example) which can get overlooked by web developers in a hurry. Text buttons are accessible by default because they're, well, text.
As for how to do it well, there's any number of approaches. You could use the <button> tag, though this has its own set of issues in IE, you could use <input type="button" /> and give it a background and padding (so the text doesn't overwrite the background) but that approach will require javascript to make the button actually do anything, <input type="submit" /> (similar to buttons but handling them is done server side instead of with javascript), or you could style <a> tags to look like buttons by giving them a background, white top and left border, black bottom and right border, etc. I'm sure there's others as well that I can't remember off the top of my head.
UPDATE: The OP added an update regarding spans and width. By default, no, you can't give a span a width. If you give it padding you can create space inside for adding the icon as a background image, of course, but if you need to explicitly give a span a width you can do it by setting its cisplay CSS property to block or inline-block (the latter requires a modern browser to work)
I am new to Fireworks CS4 and keen to learn to use it right but I am having difficulty understanding the whole slicing and exporting mechanism, so that I can also use in Dreamweaver CS4.
What I have is a header banner image where I also have the name of the site to the left of this header banner.
On this same header image, I want to place two buttons (with rollover effects if possible), to the top right area of the header image, with links to another URL.
Now the things that I am unsure how to do are based on the above description are:
1) How can I make the name of the site section only, to the left of the banner as a link to a url when the user hovers over the name part only, the mouse hand turns into a pointer and gets redirected to url
2) The same goes for the two buttons that I have created as two individual symbols?
3) How can I slice the above two queries, so that I can export into Dreamweaver, so that all the required code comes across with all the desired effects, that is, when previewing in Firefox, all hovering on site name and two buttons work as required?
I am unsure how to slice it? Do I have to assign hotspots to the sections? I am unsure how to export it.
There is a slice layer in Fireworks. It is always the top layer. It lets you draw shapes over parts of your graphic, which show up in translucent green. When you click on one, you have the option of adding a URL and other parameters of a link. At that point, you have the option of exporting as sliced images, an HTML page, etc. If exported as HTML, the images will be contained in anchor tags with the URLs you gave them. Or you can just export the slices and assign the links in Dreamweaver.