Google Form Header Size - css

I'm currently embedding a Google Form on my website and am noticing the header image has an incredibly tall height. Does anyone know if there is a way to change this in CSS? or am I stuck with Google's design?

There is no direct way to do it with the wizard tool of Google Form, fortunately, a nice way to generate the form through HTML, and when you use HTML to generate Google Form, that will make you do whatever you like: adjust the layout the way you love, you may use your own CSS, anything can be doable.
Please follow instruction on this link below:
<https://codepen.io/learningcode/post/customize-a-google-form-for-your-website>
also, you may check the add-ons on Google Form and select the one that suites your requirements, there is a lot of tools which can help you, but I think the one I posted up is the best option to customize the way you like.

Related

Image with multiple choice grid in google forms

Can I put an image on left side and multiple-choice grid on right side of a question.If it is possible please explain me ASAP.I tried but it's representing like up and down,But I need on a page with landscape screen.
There is no direct way to do it with the wizard tool of Google Form, fortunately, a nice way to generate the form through HTML, and when you use HTML to generate Google Form, that will make you do whatever you like: adjust the layout the way you love, you may use your own CSS, anything can be doable.
Please follow instruction on this link below:
< https://codepen.io/learningcode/post/customize-a-google-form-for-your-
website >
also, you may check the add-ons on Google Form and select the one that suites your requirements, there is a lot of tools which can help you, but I think the one I posted up is the best option to customize the way you like.

Advice on CSS only pinterest type layout?

So I have found a solution for CSS-only Pinterest style layout. I want to use CSS only because jQuery Masonry or whatever just seems less respectable.
I am a complete beginner who has bever coded anything, and I think it'll be easier to just stick to CSS for now and get good in it.
So I want to create a personal website, and I don't mind using JS elsewhere but for the layout I think I want to do it 'from scratch' without cheating with Masonry, and there is a tutorial for this with only a couple problems [cross browser issues and can't order the grids]. http://cssdeck.com/labs/css-only-pinterest-style-columns-layout
This is my question- how do I implement this into a full website?
I know the basic process of writing a website, but I really don't know where to start with making a website using this code. Can someone please give me a step-by-step on how to make a homepage that links to other pages in the website with this?
And how to customise the boxes so that they act as links to other sections of the website?
I want to do it like windows 8 style, where the homepage is made of tiles, you click on a square and it takes you to another section of the website.
HERE is an example of what I am trying to make- http://builtbybuffalo.com/
So in a sense I am asking for a step by step for beginners on how to code the website I just linked to.
Or where to find that info.
Cheers!

Is this possible to achieve absolute position functionality without using position attribute through css?

I am creating outlook email. I have created an email system. I have check in all email giants like Gmail, yahoo etc it work perfectly but suddenly when I saw same email in outlook it was shocking that outlook not supports position attribute.
Now, what I want is to achieve same functionality, I have searched on Google but not found a good source to solve issue except this platform to ask question.
Please help!
Thanks in advance.
Note: I don’t want to do this by placing one div inside other. This not suits my application at all i want things to positioned with respect to corners (width/height).
outlook does not support position:, so perhaps use a table-based solution?
check out these links;
http://msdn.microsoft.com/en-us/library/aa338201.aspx
http://www.campaignmonitor.com/css/#css-com_1
Whether you choose to code your HTML email by yourself (my personal preference) or to use an existing template, there are two fundamental concepts to keep in mind when creating HTML email:
Use HTML tables to control the design layout and some presentation.
You may be used to using pure CSS layouts for your web pages, but
that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your
email, such as background colors and fonts.
Keeping css 1.0 standards in mind will help you a lot when it comes to outlook. For some other details click here. Have fun!

Email and css OR tables

I have a form that needs to be emailed. I am currently using a table design and wanted to make it look better so decided to use css. I am really concerned about the fact that not all clients will handle css so I wanted to get some advice. If anyone of you had to email a form, how might you handle it? It pretty much needs to be rock solid, well, for I'd say at least 95% of the email clients out there, including yahoo and gmail. I already know that gmail strips the css out of the form. I am using rounded corners in this form and unfortunately inline css is not an option because of the sequence that the css needs to be in.
Please offer me some advice before I begin this journey. Thanks.
EDIT:
Inline css is not an option with the form I currently designed but could be an option for a different design that allows rounded courners.
The best advice for designing and building HTML for emails if you want "rock solid" as you say is to pretend you are living in 1997 and use <table>, image slices, and even the dreaded <font>.
Some CSS is supported, as seen in this chart of compatibility across different email clients at the Campaign Monitor site. The biggest hit is that if you have any users on GMail, inline CSS is your only option as GMail strips all <style> tags.
As far as the rounded corners go, you will have to use images.
Unfortunately, HTML support in email clients isn't at all standardized. If you're aiming to hit the majority (your 95%) of users, you're best off designing the email form using tables (without rounded corners...unfortunately it's not going to look great). Taking that approach with get you the widest supported user base.
Unfortunately there's a trade-off of good looks versus compatibility. You just have to decide which is more important.
I agree (and voted for above): The table with images circa 1997 is what I would recommend.
I may be mis-reading it a bit, but I'd push back a little bit on the "email a form" requirement. Emailing forms and expecting them to work at all is optimistic, if not unrealistic.
First, you may have problems getting form elements to display in email clients. I tested forms in email a couple years ago, and I can't remember whether it was the form tags that were removed, or the actual input elements. That was when I talked my client out of it.
If you can get the form to display, where is it going to submit to? Is the email client really going to allow this? What are you going to do if there are form validation errors? How does that work?
I know people have done this, but it will be an uphill battle. It seems like what is much more common is to provide links to web pages with forms. Perhaps you can provide customized links that get people through filling out most of the form (pre-filling email addresses, etc.), but have the actual form submit happen from a web page.
Good luck!
So just write the stylesheet in the page? Or is that not possible for some reason?
Images maybe not be be loaded though [automatically], and that's for the clients benefit, so depending on how you do your design, you may like to think that over.

What are the best-practices for making a website accessibility-friendly?

I'm looking for best-practices for designing a site that with accessibility in mind. The site is going to have a lot of older and less-abled individuals visiting it, and I want to make it as friendly for them as possible. Is there a resource that describes all the right tags, and attributes to use?
There are many many resources depending on your goals.
Strongly suggest you start with:
Section 508 (US legislation, obviously US centric though)
W3C's Web Accessibility Initiative and Web Content Accessibility Guidelines
edit:
Forgot to mention that WCAG has come in for some considerable criticism which makes this guy's efforts very helpful.
Also wanted to add, from personal experience, to remember that WA doesn't mean "blind people with screen readers". There are all manner of access limitations which you have to think of as well: e.g. dexterity issues related to e.g. muscle control, unusual input devices, and simple screen magnification.
Good luck!
Here's a quick list I tend to follow
Ensure it uses clean XHTML markup ideally to AAA standards,
Try where possible to spilt HTML, CSS, Javascript into respective files,
Create different style sheets for print, screen, etc.,
Ensure you take into consideration colours and fonts for the hard of sight and colour blindness,
Try to only place the main navigation at the top of the code so that the actual content appears near the top of the code, this way people do not have to scroll to far to see the content especially if they are using a screen reader / low res,
If you do have a lot of navigation before the content then place a link near the top allowing users to skip to the content,
Ensure the very first link on the page is to a text-only / low graphics version of the site,
Ensure ALL pages and all Essential functionality will work without JavaScript turned on,
There are lots of plugins for firefox to assist with development including:
Web Developer
No Script
HTML Validator
Firebug
Ensure the page renders across all browsers including old ones even if that means it works though does not match design exactly.
Ensure HTML, CSS, JavaScript is kept to the minimum file size to aid downloading times e.g. Remove white space and blank lines,
Always use LABELS in forms and alt, title tags in links and images,
Only use Tables for tabular data and ensure data appropriately labelled,
Where possible do not use JavaScript to write content to a page but use CSS to hide it, that way is JavaScript is disabled or does not work properly then content will still appear,
Always ensure you use onkeypress as well as onclick events in JavaScript encase the user can not / is not using a mouse.
Finally if you have to use blank images on a page for tracking etc. then don't give them Alt tags. This is my own view and is one which is hotly debated on-line especially when 1x1px images used to be used for spacing. However as far as I see it, if you are using a screen reader then you don't what it reading out stupid comments for images it does not need to see.
Try looking at Wikipedia's article on Web Accessibility. It contains lots of links to various sources of information for different countries, which may be useful depending on your target audience. The W3C was one of the original standards, but has plenty of critics.
Among other things.. provide "alt" and "title" attributes for every "img" tag.
Get a text-only browser like lynx. If your site works in lynx, it's likely to work for people who need screen readers or have other handicaps. It's no substitute for looking up the regulations, but it's a quick and easy check.
For another perspective, see the Dutch Government Web Guidelines.
The government provides a standard called section 508 that lays out what makes a site compatible.
A good resource is found at W3C site: Web Content Accessibility Guidelines.
A few things to keep in mind:
have a CSS link on each page that easily allows the font size to be changed.
Visually try to have appropriate presentation that is easy to read in a backwards S fashion.. left to right, back down.. etc..
ensuring that all the alt tags, etc, as mentioned in the other responses is vital.
see if there are some disability websites out there that specialize in testing your site. no harm in seeing what they list as being important to do.
make sure things are easy to read and find. this alone will make the job much easier.
There are many many resources on this topic. In fact, the danger is of information overload, rather than not enough information.
But an alternative approach is to think about your HTML page in generic terms, rather than the visual output you see in the web browser. If you wrote a piece of software that interpreted the website what would be helpful? This is a round-about way of saying use good semantics. My top tips would be to use standard XHTML for content and CSS for design. Also look up topics such as "progressive enhancement" and "behavioral Javascript".
But for resources:
The W3C's Web Accessibility Initiative: www.w3.org/wai
www.WebAIM.org
www.Accessify.com
www.CSSZenGarden.com for inspiration on how semantic markup can be styled to look very different.
It hasn't been mentioned yet so I figure I would mention it. If you want blind users to be able to use your site avoid flash. At the most 1% of flash I find on the internet is accessible.
A good list of resources about accessibility (colourblind screen-reader,typography etc) is here in design way.
For validation of web site and general documentation I use the W3C.
If you're developing in asp.net the opensource NAAK tool might be useful.
A must read is Jeffery Zeldman's "Designing with Web Standards"
Not sure if you are using Dreamweaver, but he has also just realeased a toolkit to validate your site for accessiblity.

Resources