HTML Help

What is your favorite quote?

smithdavid4321 — Thu Nov 19, 2009 9:29 pm

Author: smithdavid4321

Posted: Thu Nov 19, 2009 9:29 pm

My all time favourite quote is:

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

It is written by Antoine de Saint. I just love this quote.

Code Snippets

sticks464 — Wed Nov 18, 2009 10:02 pm

Author: sticks464

Posted: Wed Nov 18, 2009 10:02 pm

This link gives css, html, javascript, php, jquery, .htaccess and wordpress code snippets. Take a look and see if there's anything you can use.

Embedding fonts

PayneLess Designs — Mon Nov 16, 2009 5:59 pm

Author: PayneLess Designs

Posted: Mon Nov 16, 2009 5:59 pm

Good, but hate the JS limitation. Been subscribing to SitePoint's Newsletter for ages and they covered this in one of them.

Credit card processing solutions?

jdizon — Wed Nov 11, 2009 4:39 am

Author: jdizon

Posted: Wed Nov 11, 2009 4:39 am

merchant account for your business can be such an exciting moment. It is another of those steps that says, "Yes, this is for real." In order to be successful in your business venture, you need to be aware of the realities behind those big steps, however. In this case, you should educate yourself about the various credit card processing fees associated with a merchant account.

colorado merchant accounts

Error Console Question

AmyR9 — Mon Sep 28, 2009 6:07 pm

Author: AmyR9

Posted: Mon Sep 28, 2009 6:07 pm

My mom is sitting here helping me out with this.
I guess you didn't understand the last message. Yes, I already have an account on Geeks to Go, and so does my brother-in-law who knows way more on computers than we do.
There is so much stuff physical things too all this stuff requires to be done too, that we physically can't do on our own, so requires others to be there to do things that we are not physically strong enough to do.
So, he knows how to run all those programs and stuff it mentions to do, especially since he uses them on his computer, plus a few other things too he uses he put on for us. You have to get them installed properly, so much stuff to do, and so much other things unhooking certain equipment and stuff too so it doesn't ruin other devices/equipment.
The other thing, yes we did put a hijackthis log up on Geeks To Go a few years ago, after switching from Dial up Internet to DSL my mom's computer would not connect.
They were not able to help. Ended up having to call a repairman(which this one is actually a different one than we used in December of last year). Then turned out the problem was these connectors in the wall that were not holding together properly.

Yes, we agree about having the repairman leave if he can't find the favorites/bookmarks, but there is no way to do what you suggest since he took the computer with him. We did not know this until he brought it back, he mentioned he didn't find them.

Yes, that was a tech we talked with who told us to do the fdisk on my old computer years and years ago on my Compaq computer. We called tech support due to a problem it was having everytime we turn the computer on it says "Operating System Not Found".
We didn't know before then about what an fdisk even is. Now we know, but before then we didn't know this.
Sorry, but we don't know how else to explain about the referrer Id. We don't even know what a referrer Id is in the first place. It is happening though when trying to get back one of my accounts that I can't get into anymore since this latest repairman worked on my computer.

Using CSS as a beginner

sticks464 — Sun Sep 20, 2009 8:31 am

Author: sticks464

Posted: Sun Sep 20, 2009 8:31 am

CSS coding can sometimes become a nightmare, particularly if you are just starting to use it. One of the biggest problems beginning and even intermediate user have is getting Internet Explorer to display content like other modern browsers. This is the technique I use, it is not a set rule and each developer will have their own methods.

For starters you will need as a minimum of five (5) browsers installed on your computer to preview your pages. If your doing one website and never intend on using them again, they can always be removed with the exception of IE.
1). Internet Explorer
2). Firefox
3). Google Chrome
4). Opera
5). Safari (PC)

Once you layout your design either on paper or a graphics editor it's time to start your first page. An xhtml transitional doctype is the most forgiving for coding.

Code:

You will need three, yes that's right three stylesheets. So create three blank pages and name them respectively,
1). main.css
2). reset.css
3). iecss.css

A good set of reset rules can be found here.
Either copy and paste the rules onto the reset.css page or use the link on that page to save a copy to your computer.

This file is needed to reset browser defaults so each browser starts equally in rendering code.

Assuming you have created a folder to hold the assets you will use on your site (ie. scripts, for javascript files; css, for css files; images, for images), save the three files in the css folder. You can now set up the main.css file and the xhtml page with links to your css files.
Instead of having a separate link in the head section for the reset.css file, let's import it into the main.css page by adding an import rule as the first entry.

Code:

@import url("reset.css");

Now, on the xhtml page (which you should have saved as index.html) make a link to the main.css page so as older browsers do not recognize the link.

Code:

Now let's link to the iecss.css page which will contain rules specific to IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>

</head>

<body>
</body>
</html>

Let's write the first rule to get IE and the modern browsers together in their thinking. This will be for font-size since IE does not display fonts like the modern browsers. We will use em's and percentages for modern browsers however we have to use pixels for IE.
On the main.css page enter this rule immediately following the import rule.

Code:

@import url("css/main.css");
body {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height:1.5;
}

To get IE to comply with this font size we have to convert em's to pixels. IE's default font size is 12 pixels and 1 em equals 12 pixels, so 1.2em would be 14 pixels. So on the iecss.css page the rule would be

Code:

body {
font-size:14px;
}

and this would be the only rule on this page at this time.

Depending on the complexity of the pages there may be more rules added to keep IE inline. For a simple page we can eliminate one stylesheet if one rule is all that's needed for IE.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>

</head>

<body>
</body>
</html>

Now all browsers will render the desired font correctly and look the same.
Once you start adding content to the index page if you want to know why the reset rules are necessary, go to the main.css page and turn off the reset page by deleting the link and viewing your page in different browsers (make sure you turn it back on using ctrl+z).

All font sizing is now inherited from the body font rule since it is the parent and all other elements inside the body are children (children inherit from parent).
To set font sizes for children so each browser renders them the same, we will use percentages (IE understands px and %, not em).
Examples:
h1...35px = 2.5em or 250%
h2...28px = 2em or 200%

How to get em's and percentages;
Default font size = 12px
Desired font size = 14px
Divide 14px by 12px = 1.16666 or 1.2 when rounded
Convert decimal to percent = 120%

To get margin and padding sizes based on the font size;
Set font size...14px
Padding desired...5px
Divide 5px by 15px = 0.357 or 0.36em
Convert decimal to percentage = .36%

(This is where a calculator comes in handy) And you thought math wasn't important in web design.

Centering text on image in same container

sticks464 — Sat Sep 12, 2009 10:44 pm

Author: sticks464

Posted: Sat Sep 12, 2009 10:44 pm

Getting text to vertically center on an image can be a little tricky at times. Here are two methods for centering.

Text and image in same container without using floats:

The first thing needed is a container with an image and some text.

Code:

The text now appears at the bottom right corner of the image. So let's add a css rule to bring it up to center. But we don't add the rule for the text, rather to the image.

Code:

.test img {
vertical-align:middle;
}

Now the text has moved up to vertically center on the image. Add a little margin to the image to move the text away on the right side.

Code:

.test img {
vertical-align:middle;
margin-right:10px;
}

And there you have text vertically centered on an image without using floats or padding.

-------------------------------------------------------------

Text left and right with image vertically and horizontially centered:

This time were going to need floats, spans and a little ie trick.
When using floats in a container they must be cleared or they go outside the container. To clear the floats, the centered image must comes after the floats.

Code:

Notice the text links I'm using are to the bottom left of the image. We will have to apply a class to the container and to the text we want to be on the left and right, as the example text above. Applying some css rules to each class will make the text move to either side of the image while it remains centered.
Our first rule will be for the paragraph itself which will center the image.

Code:

.test {
text-align:center;
}

Now let's get the text in the right locations.

Code:

.left {float:left;}
.right {float:right;}

Now we have text to the left and right of a centered image but the text is aligned with the top of the image. That's fine if that's what you want but we want the text to be vertically centered on the image. So we add another attribute to the paragraph class. Setting the line height the same as the image height will vertically center the text.

Code:

.test {
text-align:center;
line-height:25px;
}

But wait, there's a small gap at the bottom of the container in IE. To see the gap add a border around the paragraph.

Code:

.test {
text-align:center;
line-height:25px;
border:1px solid #000;
}

The easiest and quick way to get rid of this space is to remove browser defaults for padding and margins.

Code:

* {
padding:0;
margin:0;
}

Well that made things look better but the gap in IE is still there. This is where the trick come into play to get rid of the gap. We must set a height for the paragraph equal to the image height.

Code:

.test {
text-align:center;
line-height:25px;
height:25px;
}

Now you have left and right text vertically centered on a horizontally centered image.

If you desire more control on how your pages display, use css resets like the ones here. Remember to always use a doctype.

If you want two images with text in the center, put image links inside the spans and add some text. CSS doesn't have to change except for line height to match your images height.

Code:

My Board

jarodco — Sat Aug 29, 2009 12:30 pm

Author: jarodco

Posted: Sat Aug 29, 2009 12:30 pm

Everything is restarted now i am with phpBB2 FM

Firefox Link

PayneLess Designs — Thu Aug 20, 2009 9:52 am

Author: PayneLess Designs

Posted: Thu Aug 20, 2009 9:52 am

Guess I don't understand the problem then because I can clear ALL passwords at one time when I clear Private data. Those other add-ons allow you to have better control over your security.

ActiveX activation in IE

sticks464 — Tue Aug 11, 2009 6:31 am

Author: sticks464

Posted: Tue Aug 11, 2009 6:31 am

Great article and script download to bypass the ActiveX activation problem in IE.

Dreamweaver CS3, CS4 Creating Your First Website

PayneLess Designs — Mon Jul 20, 2009 5:24 am

Author: PayneLess Designs

Posted: Mon Jul 20, 2009 5:24 am

Nice link. Thanks, Sticks.

I am ready to pay moneyyy

npsari — Mon Jul 13, 2009 5:05 pm

Author: npsari

Posted: Mon Jul 13, 2009 5:05 pm

Hello there,

Do you have a website? If yes, I am interested to advertise with you

If you can display my mini banner (or a normal link) somewhere in your site, that will be great

The price i can pay is $10/month, but please, your site must get at least 10,000 uniques/month

My banner is very tiny or it can be just a link

It will be really nice to advertise with your site

Contact me asap, I am ready

Thank you

No Right Click

sticks464 — Tue Jul 07, 2009 2:00 pm

Author: sticks464

Posted: Tue Jul 07, 2009 2:00 pm

Yeah, theres no way to fully protect content but we get a lot of questions about protecting content with no right click. I thought this might satisfy some of the youngsters.

Spam

PayneLess Designs — Fri Jul 03, 2009 3:16 pm

Author: PayneLess Designs

Posted: Fri Jul 03, 2009 3:16 pm

Deleted.

IP address for this post
122.172.126.124 [ 1 Post ]
Users posting from this IP address
Mestre69 [ 1 Post ]

Creating a drop down menu like yours

PayneLess Designs — Thu May 14, 2009 9:48 am

Author: PayneLess Designs

Posted: Thu May 14, 2009 9:48 am

Been there, done it, too. Post back if you still have a problem.