Does anyone know how to create a coupon (printable is even better) with HTML & CSS? Forgive the horribly simple question, I don't do much of any web development :)
Thanks in advance.
EDIT: EDIT: Seth posted his answer again, which I accepted, thus I removed the answer from here (it was just a copy of his original deleted post).
I'm guessing you want
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
<div class="coupon">15 points for your reputation</div>
around a div? Or something more involved?
I stole it from here.
I'll not cover the HTML part of the question because that's very , very basic, and very specific to yourself.
For print specific styling, in your HTML mark-up you can add a stylesheet explicitly for print media, like so:
<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>
You can also do this directly in an existing CSS doc, by using CSS directives, like so:
//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
#media print
{
p.test {font-family:times,serif;font-size:10px}
}
but this is generally viewed as the weaker tool because it can lead to confusion and maintenance problems to bloat a single document like this, and it achieves the same as the element based method.
For a good run down of some printable CSS issues read this list apart article.
<label for="dwfrm_cart_couponCode">
CODE
</label>
<input type="text" placeholder=" CODE" name="dwfrm_cart_couponCode" id="dwfrm_cart_couponCode">
<button type="submit" value="dwfrm_cart_addCoupon" name="dwfrm_cart_addCoupon" id="add-coupon">
</button>
<div class="error">
Please Enter a Code
</div>
Related
I have an HTA file, I put some buttons and a comboBox
When I added some text to say what to select, it was too big.
I tried to change the size in CSS
<body style="font-size: 10px;">
It didn't work.
Also tried
<body size="10">
Nothing worked, so I decided to ask here for help
I got results using span
<span style="font-size: 10px;"> Select office </span>
But I want a much elegant situation and easy to use.
Use points instead.
html, body{
font-size:10pt;
}
Add an external style or an internal style like,
html, body {
font-size: 10px;
}
It applies the style throughout the body.
Try to put your css in a separate file, it makes the code mach more understandable and prevents you from writing code twice.
Check for a without closure
If this doesn't work try sending us sum more code
A little new to html so if further explanation is necessary or this question just doesn't make sense please feel free to say so.
I am using div to layout a webform I am designing and using the   to move text within a div doesnt always produce the result I want as far as the layout of the page.
I started experimenting and by using:
<span style="margin-left:(variable)px"></span>
i am able to move the text exactly where I want it.
My question is this, is this a bad practice? is there a better way to do what I am trying to do, or a more conventional way? Or even something built into html that I just have not discovered yet.
Thank you
* Added Block of code to show what i am trying to accomplish
Complainant's Address
<input type="text" size="50" id="complainantAddress"/>
<span style="margin-left:3px"></span>
City
<input type="text" name="city" maxlength="15" size="15"/>
<span style="margin-left:16px"></span>
State
</div>
Using non breakable spaces for layout/positioning is bad practice.
What you are trying to do with style attributes is better, but inline-style attributes are often considered as bad pratice, too.
Style attributes are hard to maintain and you duplicate lots of information etc. In addition this styling has the highest specificity and cannot be overwritten by other styles (like user CSS files). They should be used with caution.
Use CSS attributes margin, padding and text-align for this.
Sample
http://jsfiddle.net/UYUA7/
HTML
Text<br />
Text <!-- Do NOT use this -->
<div class="center">Center</div>
<div class="right">Right</div>
<div class="indent">Indented</div>
CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.indent {
margin-left: 20px;
}
What you're doing is actually a better way to do spacing, than relying on  s. This will give you a much greater flexibility in the long-term and allow you to make changes quicker. (Less typing)
The only other thing that I would recommend is to read through this CSS manual:
http://www.w3schools.com/css/css_intro.asp
This will help you continue to learn about position with css.
UPDATE:
This is what your code can look like:
CSS - Use it in the header
<style type="text/css">
#complainantAddress {
margin-right: 3px;
}
#city {
margin-right: 16px;
}
</style>
HTML
Complainant's Address: <input type="text" size="50" id="complainantAddress"/>
City: <input type="text" name="city" maxlength="15" size="15" id="city"/>
Notice that I created two css styles, one for each matching input boxes. Within each style I defined a margin which would add the appropriate spacing to the right of the input box.
So the first input box called "complainantAddress" will have 3px spacing to the right and the second one who's id is "city" will have 16px spacing to the right of it.
I've been designing websites for a while now and haven't had any complaints, surprisingly. But, there's one thing that bothers me quite a bit. I'm slow. It takes me, on average about an hour to style 1 webpage (a full webpage incl. content, images, text and so on) - and I don't know if that's how long it takes most people?
And I always run into the same problems over and over again (even though each time I use a different way, based on what I learned last time), which causes me to constantly re-align, re-adjust, re-write.
I know I'm doing something wrong, but I just don't know where anymore. When my pages are finished, they're great, but there's always some very tiny, but noticeable differences between each browser - and it really * me.
Below is HTML & CSS for a generic, empty webpage. Maybe you could be so kind as to tell me what you think is wrong with it, and how I might be able to better it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="" />
<meta name="author" content="My Name" />
<meta name="keywords" content="sample, keywords, keyphrase" />
<meta name="description" content="A sample description." />
</head>
<body>
<div class="Wrapper">
<div class="Header">
<div class="PresentationArea">
<div class="LeftSide">
<img src="" alt="" class="" />
</div>
<div class="RightSide">
<h1>Heading</h1>
<p class="PresentationDescription"></p>
Learn More
</div>
</div>
</div>
<div class="ContentArea">
<h2></h2>
<p></p>
</div>
<div class="Footer">
</div>
</div>
</body>
</html>
CSS
/* RESET -SOME- STUFF */
*{border:0;border:none;padding:0;margin:0;}
body {
}
a {
}
p {
}
h1,h2 {
}
.Wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
.Header {
width: 100%;
height: 31px;
}
.PresentationArea {
padding: 5px 0 0 0;
}
.LeftSide {
width: 65%;
height: 250px;
}
.RightSide {
width: 35%;
height: 250px;
}
.PresentationDescription {
}
.StyledButtonLink {
}
.ContentArea {
width: 100%;
height: 350px;
}
.Footer {
width: 100%;
height: 31px;
}
Any help is greatly appreciated
Thank you
How long to style a web page?
It all depends on what is in the page! When I assess a project to set a project price, I assign a time value of anywhere from 2 to 4 hours per page. On average, for a 10 to 20 page website, I found that allowed me enough time to develop semantically meaningful mark-up, concise and robust CSS, and integration into a content management system.
Some pages are complex and take more time, for example, image gallery pages or tables of structured data. Depending on the amount of JavaScript/jQuery or PHP/MySQL that the page might need, it could took a day or more to build a page.
In other cases, for example, biographical pages where you have a simple header, headshot/image and two paragraphs, you can easily get a set of 10 pages done in an hour.
How to speed up the mark-up process
I try to keep a consistent approach to using padding and margins. For example, I tend to use non-zero margin-bottom values for headers and paragraphs and zero out margin-tops, although others do it the other way. I also use a proper reset style sheet (see above suggested by Andrew Marshall).
I also pre-style my headers (h1 ... h6) and lists and so on so that I have a generic default typographic style that I can use as scaffolding for each site that I build.
Cross Browser Pixel Perfection
I am a great admirer of Dan Cederholm (author of Bulletproof Webdesign, Hand-Crafted CSS) and I agree with his approach that web pages just need to look good in all browsers and work properly. They don't need to be pixel perfect across all browsers. Most of my clients will not pay for the meticulous coding needed to make pages perfect across all browsers.
Having said that, I use one or two hacks to fix IE oddities now and again, but I don't get too concerned otherwise. The main thing that I look out for are block element widths (IE box model issues) that can break a float-based layout.
My HTML/CSS Framework
I tend to use a fairly generic 3 column design so I have a basic page layout and associated style sheets that I use to start all my website builds. This saves me time.
In the future, I will have more standardized 1 or 2 level menus (horizontal and vertical layouts) and some generic turn-key contact forms with client/server side validation.
Closing Comments
I am a one-person shop and I often build websites for other graphic designers. I fall on the developer end of the web professional spectrum.
I have been in business over 7 years and love the work.
I also read a lot of books on CSS and HTML, much to the despair of my immediate family.
For one you should include
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
in your HTML <head> (and also ensure that everything is actually UTF-8 encoded).
I'd recommend using a separate, "full-on" CSS reset stylesheet. You might want to look into using a CSS framework such as Blueprint or 960.gs (these usually include a reset by default).
I think it's convention to have HTML IDs and classnames be all lowercase, with hyphens (or underscores) where spaces would be.
It's a good idea to run the W3C HTML Validator on your HTML as well, this ensures that you're not doing anything that violates the HTML specification and thus reduces the potential for unexpected behavior.
Frequently I am aligning text such as:
To: 07/02/2010
From: 07/02/2010
Id like it to be displayed like this:
To: 07/02/2010
From: 07/02/2010
So what is the quickest/easiest/best way to do this? CSS? using a few nbsp (would work if its mono spacing) or using tables. Normally if I am not in a anti-hating table mood, ill use tables.
What do you recommend?
Definitely definition list (<dl>).
<dl>
<dt>From:</dt><dd>07/02/2010</dd>
<dt>To:</dt><dd>07/02/2010</dd>
</dl>
/* CSS */
dl {
overflow: hidden;
}
dt {
width: 50px;
float: left;
}
I'd recommend tables. It really is the best way, especially seeing as it really is tabular data there, and HTML doesn't support tab stops.
But it really is silly to avoid tables for the sake of avoiding tables. Unless you want the option later to style like so:
To: From:
07/02/2010 07/02/2010
You could do something like this, if for some reason you didn't want to use tables:
CSS
.sideheading { width: 3em; float: left; }
HTML
<div class="sideheading">To:</div>07/02/2010
<div class="sideheading">From:</div>07/02/2010
Or use a definition list (but if the reason you are avoiding tables is due to semantics, then DLs would be avoided for the same thing).
But of course, it's about the layout, no customer or web surfer is ever going to care how you do it, as long as they can read it!
Use a definition list or white-space nowrap.
I've seen this problem before, a quick google search:
http://www.google.com/search?q=css+forms
...brought me here:
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and I copypasted the HTML and CSS into this:
<html>
<head>
<style>
label
{
width: 5em;
float: left;
text-align: right;
margin-right: 1em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
</style>
</head>
<body>
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
Looks good to me, save it in a .html and see for yourself.
Padding with s sounds messy. How about something like this:
<span class="header">To:</span> 07/02/2010
<span class="header">From:</span> 07/02/2010
.header { display: inline-block; width: 5em;}
In this case, though, I'd actually say tables are appropriate; it does look like tabular data, with a column of headers.
This has come up at work many times and I ended up creating some styling for a 2-column table which hides borders. Technically, this is tabular data, but a table with only 2 rows and 2 columns is pretty lame considering the amount of markup needed to achieve it within spec.
I've often regretted creating the class, as now everyone uses it far too much and I have to constantly be on the lookout for it in our code reviews. If you don't anticipate that problem, it's a semantically-correct solution, and slightly more elegant than the hoops you'll jump through with DL's, spans, etc.
I've noticed that there are a couple of similar questions and answers at SO already, but let me clarify my specific question here first:
I've got lecture slides which states like this:
http://mindinscription.net/webapp/csstest/precedence.PNG
To be frank, I haven't heard of this rule of css precedence myself, and I googled to find something with similar topic but not quite like that : here
To have a test myself, I've made a test page on my own server here
After running it on FireFox 3.6.3, I am sure it does not show the way as it should be, according to the statement in lecture slides:
imported stylesheet ? am I doing it wrong? I cannot see its effect using FireBug
it says that embedded stylesheet has a higher precedence over linked/imported stylesheets, however, it doesn't work, if I put the linked/imported tag AFTER that.
inline style vs html attributes ? I've got an image where I firstly set its inline style to control the width and height, then use direct html attributes width/height to try modifying that, but failed...
Below is the source code :
<html>
<head>
<style type="text/css">
#target
{
border : 2px solid green;
color : green;
}
</style>
<link rel="stylesheet" href="./linked.css" type="text/css" media="screen" />
</head>
<body>
<div id="target">A targeted div tag on page.</div>
<img src="cat.jpg" alt="" style="width : 102px; height : 110px;" width="204px" height="220px" />
</body>
</html>
Can any experienced CSS guys help me figure out if the slide is correct or not?
Frankly speaking, I am puzzled myself, as I can clearly see some other "incorrect" statements here and there amongst the slides, such as JavaScript is on client-side (how about server-side JavaScript?) and "Embedded styles are in the head section of a web page
"(what the heck? I am not allowed to put it inside the body tag?)
Sorry about this silly question, the exam is on TOMORROW, and I now see a lot of things to think about :)
First, with imported stylesheets they mean stylesheets embedded using the #import rule.
Second, a few lines below that explanation in the CSS 2.1 spec there's an explanation of the cascading order. Other parts of the spec might be useful for your exam, too. Good luck.
Update: A bit of googling resulted in:
http://www.blooberry.com/indexdot/css/topics/cascade.htm
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
http://www.boogiejack.com/CSS_4.html
http://www.communitymx.com/content/article.cfm?page=2&cid=2795D
etc.
The properties by <style></style> are being reassigned by the selector in linked.css.
There is no element with id="div" for imported.css.