html-css « WordPress.com Tag Feed

HTML Table with thin border

webforus — Thu, 19 Nov 2009 05:58:49 +0000

This might be simple for somebody. This will be helpful for the dudes who are not very strong in HTML/CSS.

If you want to have table with thin border like below

<html>
<head>
<style media="all" type="text/css">
#grid td {
border:1px solid #CCCCCC;
font-family:verdana;
font-size:11px;
padding:2px;
}
</style>
</head>
<body>
<div id="grid">
<table style="border-collapse: collapse;">
<tr>
<td>&nbsp;&nbsp;#&nbsp;&nbsp;</td>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
<tr bgcolor="#ededed">
<td>1</td>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
<tr bgcolor="#f7f7f7">
<td>2</td>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
<tr bgcolor="#ededed">
<td>3</td>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
</table>
</div>

</body>
</html>

http://web4us.wordpress.com/files/2009/11/thin-table.jpg

Ferramentas úteis para criar páginas Web

ruibarreiro — Tue, 17 Nov 2009 11:29:37 +0000

Directivas para a acessibilidade do conteúdo da Web – 1.0

Dicionário de HTML

Lista de propriedades das CSS

Validador de HTML

Manual de Javascript

Templates em html

Some basic reminders.

amuhb — Sun, 01 Nov 2009 10:57:48 +0000

http://www.w3.org/TR/CSS2/ //CSS Revision 1 Specifications;

_________________________________________________________________________________

h1 {color : green } // a simple CSS rule – a statement about one stylistic aspect of one or more elements.

h1 //type selector (any HTML type can be used);
{color : green} // declaration;
- color // property;
- green // value;

Shortening the code:

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
H1, H2, H3 { font-style: bold }

H1 { color: green }
H1 { text-align: center }
H1 { color: green;
text-align: center; }

HTML file: <link rel =”stylesheet” href=“style.css”> – it is looking for a CSS file ‘style.css‘ with styling code;

HTML file: <ul class = “vasya“> – then in CSS file, this ul have to be defined as ul.vasya { style code }; “vasya” is the class;

CSS file: a:link - link is the pseudo-class.

CSS Positioning

kourtesy — Mon, 26 Oct 2009 21:58:04 +0000

There are four types of positioning in CSS. These types are static, absolute, relative, and fixed.

Static is the default type of positioning. Essentially, static positioning lays out all HTML elements from top to bottom and left to right. There is not much else to discuss about static positioning.

The remaining three types of positioning are all pretty similar, but there are a few slight differences.

Absolute positioning uses the top and left properties to place an element at any location on a page. I usually like to set elements using pixels or percent; however, there are few other measurement that are accepted. In absolute positioning, if you set the top and left style properties to zero the element is placed in the top left corner of its parent element.

Fixed positioning works the same as absolute positioning; except, the element remains at this position in the browser even if the user scrolls. I once read that fixed positioning is not supported as widely as absolute positioning; however, I am not sure if this is the case. It certainly seems to work in all of the browsers that I have used.

Relative positioning is essentially a combination of static and absolute positioning. Elements flow from top to bottom and left to right; however, top and left can also be set. In relative positioning, setting top and left to zero does not necessarily put an element in the top left corner of its parent element. Rather, it places the element where it would be positioned if static positioning were used. If left were set to 10px, the element would then be shifted 10 pixels to the right of its default static position.

Here is an example of how one might define absolute positioning for a div with the id myDiv.

#myDiv{position:absolute;top:10px; left:20px}

The values fixed and relative could also be valid substitutes for the value absolute in this example. That concludes this post about CSS positioning.

States Dropdown

kamisaibou — Thu, 22 Oct 2009 12:01:47 +0000

No learning here, just something that I seem to end up copy-pasting a lot, so I’ll be able to find it easily here.. (And it’d be easy to do a find-replace all of ‘asp:ListItem’ to ‘option’ if it’s going to be used in an html page rather than an asp/aspx page. Also, the required field validator would need to be taken out; that’s only if you want it to be required for a state to be selected, before the form can be submitted.)

<asp:RequiredFieldValidator ControlToValidate="ddState" ID="Neko" runat="server" ErrorMessage="RequiredFieldValidator" Text="*" SetFocusOnError="true" /> State: <asp:DropDownList ID="ddState" runat="server"> <asp:ListItem Selected="True" value="">Choose A State</asp:ListItem> <asp:ListItem value="AL">Alabama</asp:ListItem> <asp:ListItem value="AK">Alaska</asp:ListItem> <asp:ListItem value="AZ">Arizona</asp:ListItem> <asp:ListItem value="AR">Arkansas</asp:ListItem> <asp:ListItem value="CA">California</asp:ListItem> <asp:ListItem value="CO">Colorado</asp:ListItem> <asp:ListItem value="CT">Connecticut</asp:ListItem> <asp:ListItem value="DE">Delaware</asp:ListItem> <asp:ListItem value="DC">District of Columbia</asp:ListItem> <asp:ListItem value="FL">Florida</asp:ListItem> <asp:ListItem value="GA">Georgia</asp:ListItem> <asp:ListItem value="HI">Hawaii</asp:ListItem> <asp:ListItem value="ID">Idaho</asp:ListItem> <asp:ListItem value="IL">Illinois</asp:ListItem> <asp:ListItem value="IN">Indiana</asp:ListItem> <asp:ListItem value="IA">Iowa</asp:ListItem> <asp:ListItem value="KS">Kansas</asp:ListItem> <asp:ListItem value="KY">Kentucky</asp:ListItem> <asp:ListItem value="LA">Lousiana</asp:ListItem> <asp:ListItem value="ME">Maine</asp:ListItem> <asp:ListItem value="MD">Maryland</asp:ListItem> <asp:ListItem value="MA">Massachusetts</asp:ListItem> <asp:ListItem value="MI">Michigan</asp:ListItem> <asp:ListItem value="MN">Minnesota</asp:ListItem> <asp:ListItem value="MS">Mississippi</asp:ListItem> <asp:ListItem value="MO">Missouri</asp:ListItem> <asp:ListItem value="MT">Montana</asp:ListItem> <asp:ListItem value="NE">Nebraska</asp:ListItem> <asp:ListItem value="NV">Nevada</asp:ListItem> <asp:ListItem value="NH">New Hampshire</asp:ListItem> <asp:ListItem value="NJ">New Jersey</asp:ListItem> <asp:ListItem value="NM">New Mexico</asp:ListItem> <asp:ListItem value="NY">New York</asp:ListItem> <asp:ListItem value="NC">North Carolina</asp:ListItem> <asp:ListItem value="ND">North Dakota</asp:ListItem> <asp:ListItem value="OH">Ohio</asp:ListItem> <asp:ListItem value="OK">Oklahoma</asp:ListItem> <asp:ListItem value="OR">Oregon</asp:ListItem> <asp:ListItem value="PA">Pennsylvania</asp:ListItem> <asp:ListItem value="RI">Rhode Island</asp:ListItem> <asp:ListItem value="SC">South Carolina</asp:ListItem> <asp:ListItem value="SD">South Dakota</asp:ListItem> <asp:ListItem value="TN">Tennessee</asp:ListItem> <asp:ListItem value="TX">Texas</asp:ListItem> <asp:ListItem value="UT">Utah</asp:ListItem> <asp:ListItem value="VT">Vermont</asp:ListItem> <asp:ListItem value="VA">Virginia</asp:ListItem> <asp:ListItem value="WA">Washington</asp:ListItem> <asp:ListItem value="WV">West Virginia</asp:ListItem> <asp:ListItem value="WI">Wisconsin</asp:ListItem> <asp:ListItem value="WY">Wyoming</asp:ListItem> </asp:DropDownList>

Differences between HTML and XHTML

webforus — Thu, 22 Oct 2009 05:23:10 +0000

Reactieformulier KRO-De Wandeling

stagekro — Fri, 16 Oct 2009 12:23:19 +0000

Voor de pagina van KRO-De Wandeling was de opdracht om het reactieformulier op te maken. Dit omdat de koppen en de tekstvakken niet goed uitgelijnd stonden en te klein waren.

Ik heb er vervolgens een kleurvak achter gezet en de koppen vergroot. Daarnaast heb ik de tekst wat verder van de tekstvelden afgezet zodat deze niet meer dicht op elkaar staan.

Onderaan de pagina is het reactie gedeelte te vinden.

Link naar de pagina

Robots.txt

kamisaibou — Fri, 16 Oct 2009 12:03:11 +0000

This has to go in the root directory for the website, and each subdomain needs its own robots.txt.

To disallow all search engine spiders for the entire site:
User-agent: * Disallow: /

Specific folders (for all robots):
User-agent: * Disallow: /images/ Disallow: /users/avatars/

Crawl delay:
User-agent: * Crawl-delay: 243 # in seconds

Allow specific pages only (not all search engines listen to this; for compatibility, put allow before disallow for related folders/files):
User-agent: * Allow: /images/index.html # a single file can also be disallowed Disallow: /images/

Sitemap (only supported by some):
Sitemap: http://www.kamikode.com/misc/sitemap.xml # can be on hosted on an external website

How to make your website ADA compliant

ujjaini — Wed, 14 Oct 2009 23:57:29 +0000

What is ADA ?

ADA is the abbreviated form of Americans with Disabilities Act. The ADA is a wide-ranging civil rights law that prohibits, under certain circumstances, discrimination based on disability.

What are Web Content Accesibility Guidelines 1.0 ?

These guidelines explain how to make Web Content accessible to people with disabilities.

What may be the conditions when a user might have problems in reading or understanding the content of your site ?

They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
They may have difficulty reading or comprehending text.
They may not have or be able to use a keyboard or mouse.
They may have a text-only screen, a small screen, or a slow Internet connection.
They may not speak or understand fluently the language in which the document is written.
They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

A list of guidelines is available in the following url

http://www.w3.org/TR/WCAG10/

What is priority 1, 2 and 3 ?

Priority 1: A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
Priority 2: A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
Priority 3: A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

What are different levels of conformance ?

Conformance Level “A”: all Priority 1 checkpoints are satisfied;
Conformance Level “Double-A”: all Priority 1 and 2 checkpoints are satisfied;
Conformance Level “Triple-A”: all Priority 1, 2, and 3 checkpoints are satisfied;

Below I have tried to provide a summary of the major guidelines and examples wherever applicable

Provide a text equivalent for every non-text element. This includes images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.
(Priority 1 )
eg.

<img src="Company_Logo.png" alt=" Company Logo" height="70" width="236" />

Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.Dont use names to specify colors, use numbers instead.
Dont use this

<H1 style="color:yellow;">This is Header </H1>

use this

<H1 style="color:#FFFF00;">This is Header </H1>

Use markups and style sheets and use them properly. Don’t use tables for layout, use divs instead. Use tables only to display tabular information. Dont use headers to increase or decrease font size.

Create documents that validate to published formal grammars. (Priority 2)
Validating to a published formal grammar and declaring that validation at the beginning of a document lets the user know that the structure of the document is sound. It also lets the user agent know where to look for semantics if it needs to.
Check the markup (HTML, XHTML, …) of Web documents in The W3C Validation Service

Use relative rather than absolute units in markup language attribute values and style sheet property values. (Priority 2)
For example, in CSS, use ‘em’ or percentage lengths rather than ‘pt’ or ‘px’, which are absolute units.

Design for device-independence.

For scripts, ensure that event handlers are input device-independent. (Priority 2)
- Use application-level event triggers rather than user interaction-level triggers. Application-level event attributes are “onfocus”, “onblur” and “onselect”.
- if you are using device-dependent attributes, provide two handlers for the same element
* Use “onmousedown” with “onkeydown”.
* Use “onmouseup” with “onkeyup”
* Use “onclick” with “onkeypress”

Provide <noscript> element along with <script> element.The content of this element is rendered when scripts are not enabled.
eg.

<script type="text/javascript">
	alert('Hello World');
</script>
<noscript>
	This page uses Javascript. Your browser either
	doesn't support Javascript or you have it turned off.
	To see this page properly please use
	a Javascript enabled browser.
</noscript>

Use tables to represent data in tabular format, not for layout. To make data tables accessible

Provide summary information.Summaries are especially useful for non-visual readers. A summary of the relationships among cells is especially important for tables with nested headings, cells that span multiple columns or rows, or other relationships that may not be obvious from analyzing the structure of the table but that may be apparent in a visual rendering of the table. A summary may also describe how the table fits into the context of the current document.
Identify row and column information

eg. look at the following table

The HTML code of the above table will be -

<table
summary="This table shows the daily expenses for food, electricity and fuel,
and calculates the total expenses for 3 days"
cellspacing="3" cellpadding="3" border="1">
	<thead>
		<tr>
			<th scope="col">Item</th>
			<th scope="col">Monday</th>
			<th scope="col">Tuesday</th>
			<th scope="col">Wednesday</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Food</td>
			<td>$20.00</td>
			<td>$10.00</td>
			<td>$22.00</td>
		</tr>
		<tr>
			<td>Electricity</td>
			<td>$2.00</td>
			<td>$1.00</td>
			<td>$2.00</td>
		</tr>
		<tr>
			<td>Fuel</td>
			<td>$6.00</td>
			<td>$7.00</td>
			<td>$5.00</td>
		</tr>
	  </tbody>
	  <tfoot>
	    <tr>
	    	<td>Total</td>
	    	<td>$28.00</td>
			<td>$18.00</td>
			<td>$29.00</td>
		</tr>
	  </tfoot>
</table>

To conform to W3C specification-

The table has a summary
To identify structural groups of rows – <thead> for header, <tbody> for body and <tfoot> for footer has been used
Scope specifies the set of data cells to be associated with the current header cell. So, scope=”col” associates the specific header cell with the <td> cell.

Make forms and form controls accessible

Provide keyboard access to forms -Create a logical tab order through links, form controls, and objects. (Priority 3)

<form action="submit" method="post">
   <input tabindex="1" type="text" name="firstname">
   <input tabindex="2" type="text" name="lastname">
   <input tabindex="3" type="submit" name="submit">
</form>

Here, we specify a tabbing order with “tabindex”:

Provide keyboard shortcuts to important links , form controls, and groups of form controls.
eg.

<form action="submit" method="post">
     <label for="user" accesskey="U">username</LABEL>
     <input type="text" id="user">
</form>

Here we assign”U” as the accesskey. Typing “U” gives focus to the label, which in turn gives focus to the input control, so that the user can input text.

Associate labels explicitly with their controls. eg.

 <label for="firstname">First name
     <input type="text" id="firstname" tabindex="1">
</label>

Group related links, identify the group , and, provide a way to bypass the group. (Priority 3)When links are grouped into logical sets (for example, in a navigation bar that appears on every page in a site) they should be marked up as a unit. Navigation bars are usually the first thing someone encounters on a page. For users with speech synthesizers, this means having to hear a number of links on every page before reaching the interesting content of a page.

Include a link that allows users to skip over the set of navigation links.
Provide a style sheet that allows users to hide the set of navigation links.
Use the HTML 4.01 MAP element to group links, then identify the group with the “title” attribute.

<body>
     <map title="Navigation Bar">
       [<a href="#how">Bypass navigation bar</a>]
       [<a href="home.html">Home</a>]
       [<A href="search.html">Search</a>]
       [<a href="help.html">Help</a>]
     </map>
     <h1><a name="how">This web site conforms to W3C standards </a></h1>
     <div>
     	This is the main content of the page
     </div>
</body>

In thie above example, the MAP element groups a set of links, the “title” attribute identifies it as a navigation bar , and a link at the beginning of the group links to the anchor after the group. The links are separated by non-link, printable characters (surrounded by spaces).

Favicon for one page

kamisaibou — Wed, 14 Oct 2009 13:46:05 +0000

This allows you to set a different favicon for one specific page, than the default favicon for the rest of the site.

<link rel="shortcut icon" href="http://www.google.com/favicon.ico" />

Tranformando PSD em HTML + CSS

mnakashima — Wed, 14 Oct 2009 10:49:14 +0000

Bom dia meus caros, em meu post diário (tenho que aumentar o numero de post’s em meu blog)mas, dando uma certa continuidade com o mesmo venho através deste post, indicar a vocês que tem uma facilidade para arquitetar um protótipo no photoshop e dificuldade para transpor para o HTML + CSS.

Enjoy it.

Eis o resultado

Ir para o tutorial: net.tutsplus.com

How To Submit A Form To Itself On Enter Without Refresh

kourtesy — Mon, 12 Oct 2009 00:16:45 +0000

I’m not sure if many people would want to do this or if good reasons exist for doing this; however, I wanted to submit a form to itself without page refresh for a trivia game. So, after taking the time to research and figure it out, here is a solution.

This solution does not actually submit the form; rather, it uses two JavaScript functions to simulate submitting a form. By simulating a submission of the form rather than actually submitting the form, one can avoid a page refresh.

The first step to this process is calling a couple of JavaScript functions in the input element or another element of the form. Below is what my form element looked like for my game.
<form> Team Name: <input id="txt1" onkeypress="return disableEnterKey(event)" onkeyup="showHint(this.value, event)" type="text" /> </form>
It may be possible to achieve the same goal by just using onkeypress=”return disableEnterKey(event)”; however, this didn’t seem to work for me. Thus, I added event as a second argument to the showHint() function (the function which does most of the work in my game), and doing this made it possible for the function to handle the form data on enter as well.

The next step is coding these two functions. Below is the disableEnterKey() function that I used to disable form submission on enter.
function disableEnterKey(e) { var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox return (key != 13); }
I grabbed this function off of www.bloggingdeveloper.com. This code should be included in the head section of your html file, or you can include it in a separate .js file and link to it in the head section of your html file as I did.

I included a similar block of code in my showHint() function to process the form data when the enter key is released.
var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox if(key==13)//the enter key was pressed { //your code to run when the enter key is pressed }
That pretty much sums up this tutorial. If you would like to see what the working example functions like, you can visit my two minute drill game. It is a game to see if you can name all 32 NFL teams in two minutes. If you play, you should be aware that you are responsible for remembering the teams that you already named, and there is no special prize or notification if you name all 32 teams in the two minute time limit.

Entering multiple lines of text in textarea using javascript

ujjaini — Wed, 07 Oct 2009 23:08:41 +0000

I have written a code that preserves linefeed within an HTML TextArea element.

<html>
  <head>
    <script type="text/javascript">
	function writeText()
	{
		var textareaCtrl = document.getElementById('textarea1');
		// for IE
		if (textareaCtrl.innerText != null)
		{
			textareaCtrl.innerText = "I love Anika" + '\n' + 'She is my daughter';
		}
		// for FireFox
		else if (textareaCtrl.textContent != null)
		{
			textareaCtrl.textContent = "I love Anika" + '\n' + 'She is my daughter';
		}
	}
    </script>
  </head>
  <body onload="writeText();">
	<textarea id="textarea1" cols="50" rows="10"></textarea>
  </body>
</html>

There are 2 properties in textarea element

innerText – I have used this for IE

textContent – I have used this for FireFox

The textarea will look like this

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

3 Ways to Include One HTML File in another HTML File

kourtesy — Mon, 05 Oct 2009 19:49:41 +0000

Sometimes it makes sense to create one html file that will be used in many other html files. For instance, you might have some code that you would like to use as a header on each page of your web site. Instead of typing this code out on each page of your site, you could just create a separate file with this code and name it header.html. Also, header.html doesn’t have to contain a complete html file structure with <html> </html>, <head> </head> and <body> </body> elements; rather, it just needs to follow the html standards as part of the file in which it will be included. In example, you could create a file called heading.html with the following contents.
<body> <h1> Welcome to my site </h1>
Then, type the include statement just after the head element in the file that you wish to include heading.html in, and there will be no problems rendering the site.

Now, I will describe three ways to include this file named heading.html. The first method will use php (Note: use must have php installed and enabled on your server for this to work). To include this file using php, change the name of the file from heading.html to heading.php. Also, the file that has the include statement must also be saved with the .php extension. Finally, at the location where you would like the code to appear type:
<?php include('heading.php'); ?>
The next two methods are virtually the same; they just involve using different file extensions. As noted before, you should make sure these technologies are enabled on your server before using them on your site. In the next to methods of performing a server side include, if you want to include a file called heading.html, this file can keep the .html file extension. Then, the file that you would like to include heading.html in would need to be saved with a .asp or .shtml file extension. The code for the include statement is below.

In conclusion, you now know three ways to perform a server side include. Using include statements decreases file size, and it saves work if future editing is needed.

Hello world ! bienvenue a tous ^^

ycfx — Sat, 03 Oct 2009 22:14:03 +0000

YCFX’s Zone est un blog de Actualités, astuces, ressources et de tutoriaux en : code (XHTML/CSS, PHP/MySQL) en graphisme (Photoshop, Illustrator, Cinema 4D, Flash, Blender, The GIMP, PAO). Alors n’hèsitè pas de poster tout vos quetions et vos besoins Bonne journèe !

Why is my design broken in other browsers?..Try a different DTD

kourtesy — Wed, 30 Sep 2009 02:00:54 +0000

Chances are that if you are reading this you probably spent hours (maybe less if you’re lucky) trying to fix your design so that several browsers will display it symmetrically.

If that is the case you may or may not be kicking yourself after you read the rest of this article. Sometimes, the answer to cross-browser compatibility is as simple as changing the DTD or document type declaration. I know that this was the case for me. For my site, I am using the HTML 4.01 transitional DTD with the DTD URL. This DTD is shown below.

< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd” >

The reason that I chose this DTD is because it is accepted as standards mode in most browsers, and is almost standards mode in others. Furthermore, I have some deprecated elements and attributes in my code forcing me to stick to a transitional DTD. If you did not include depracated elements, tags, or attributes in your source code; then, a strict DTD would be your best option. Almost every strict DTD is accepted as standards mode in all major browsers.

How To Make A Div Fill The Full Height of The Screen

kourtesy — Sun, 20 Sep 2009 16:09:09 +0000

This is a pretty simple procedure, but I thought that I would explain it anyway.

How to make a div 100 percent of the screen’s height:

make the html and body have a height of 100%
make the div have a height of 100%, and set its position to relative

html, body{height:100%;} #mydiv{position:relative; height:100%;}

CSS 3 - co nowego ?

webdziennik — Tue, 08 Sep 2009 07:24:04 +0000

Trzecia wersja języka CSS jest powoli wdrażana do nowych przeglądarek. Nie spodziewaj się więc rewolucji w momencie ukończenia specyfikacji. Już dziś takie przeglądarki, jak Firefox, Opera, Chrome, czy IE 8 obsługują nowe właściwości CSS 3 (ta ostatnia raczej w skromnym zakresie).

To prawda, że kompletną abstrakcją są dla twórców przeglądarek takie części CSS 3, jak np. łatwa obsługa kolumn. Niemniej do świadomości przedarły się już np. zaawansowane selektory, których duża część jest obsługiwana także przez IE 8. Inną interesującą możliwością nowego CSS jest dynamiczne tworzenie cieni dla tekstu. Jest to już możliwe w Operze i Safari.

Poniżej znajdują tabele przedstawiające stan implementacji niektórych elementów CSS 3 w popularnych przeglądarkach. Są to dane poglądowe zawierające najważniejsze informacje. Uwagi na temat Safari dotyczą wersji eksperymentalnej silnika WebKit.

Selektory

Wybór różnych właściwości

Właściwości związane z tekstem

Podsumowując możemy powiedzieć, że zarówno HTML 5, jak i CSS 3 mają się coraz lepiej. Twórcy przeglądarek starają się implementować nowe możliwości, choć moglibyśmy narzekać, że czynią to czasami zbyt wolno. Inną historię stanowi Internet Explorer. Miejmy nadzieję, że wersja 9 będzie zawierać szerszą obsługę nowych standardów, co przyspieszy rozwój sieci. Gdy już Microsoft sobie poradzi, reszta producentów na pewno szybko nadgoni istniejące zaległości.

Cool articles – SEO, blogging, internet marketing(september 01-06, 2009)

stefan4m — Mon, 07 Sep 2009 15:16:00 +0000

We read online lots and lots of things, and we come across some very interesting articles. I was just thinking to place them here, with a link, maybe I’ll revisit them later, read them again, or maybe they help you also (see last week’s articles august 16-august 31 2009, articles july 16 – august 16 2009, articles, july13 – july 19 2009, articles 06-12july2009, articles ->24june2009,june24 – july05, articles archive) – categories available: internet maketing/seo, design/web design, web programming, and other miscellaneous articles

Internet marketing, SEO, SEM, online services

Google Introduces Multi-Client Accounts for Product Search – Makes it Easier to Link Checkout to Google Base Accounts;
Google Cash Scams – SEOs to the Rescue – “White Knights” Take on Fraudulent Results (via @wpn);
Some Tips for Mobile E-Commerce Success from webpronews – Many Companies Still Planning Their Strategies;
Yahoo Search & Index Update these days – a new web index is being rolled out(ranking changes, page shuffling happen);
Tips for Getting Found in Real-Time Searches – You’ve Got to Stay in the Now! Use keywords, talk about events, followers;
5 Rules for Better Web Writing(know your objective&your audience, keep it short, make it scanable, embrace constraints);
Bing Readies Sharing Feature for Search Results – They Call it “Bing and Ping”(share your search results with friends);
Five Things PR Folks Can Learn About Social Media From Advertising(scale matters, creativity beats staid, measure, etc);
Directory Submissions: do they still work? Still a tool to gaining traffic & SEO help; some are not good though;
Marketing Your Website Without Search Engines(pretend #google and the search engines don’t exist – optimize for users!)
An Essential Marketing Principle: Give Before You Try to Get. This is the principle for successful online marketing&selling;
101 Tips from 50 Small Business Bloggers(on the small business advantage, motivation, persistence, and resiliency, etc);
How to analyze and improve your bounce rate – measuring your bounce rate agains overall site goals, more page views, etc;
From Google to youtube, from craigslist to flickr – how some of today’s biggest sites looked back in the early days of their existence.
The week in which digital grew-up(the challenge that ad agencies & PR firms face in recalibrating their businesses digital);
9 Things to Do To Make Sure Your Next Blog Post is Read by More than Your Mom;
Going the Distance – Integration of Your Marketing Efforts across as many channels as possible. Integrate… @sew;
Blogging for Search Engine Optimization – via @sew: subdomains, subdirectories, separate domains, etc – tips for blogging;
Google Wave To Splash Down This Fall – Google Apps users promised first access(video from google enterprise & wave teams);
Talk Of Gmail Being Down Is Trying Like Hell To Bring Down Twitter(when gmail was down, everyone was talking about it!)
Why did gmail fail yesterday? Erik Schonfeld @techcrunch explains about the regular email servers for routine maintenance;
Does Google value its own links 4 PR/Linkjuice? Google Bookmarks, Google Profiles, etc. Matt Cutts Talks About the Topic;
Google Adds “Real-Time” Suggestions to Google News – Google Suggest Timely for News Searches(via @wpn);
though women are big online content consumer and creators, it looks like women and wikipedia are not best friends

Web design, design tips, digital photography, fonts, themes

56 Absolutely Brilliant And Intriguing Photoshop Video Tutorials(intriguing Photoshop Manipulation techniques captured);
Fotobounce Downloads Full Facebook&Flickr Albums in One Click – so cool: download&upload pics with tags;
Wallpaper Roundup: The Intimate Life of Circuits(a veritable metropolis of circuits, switches, and electro-mechanical marvels);
Create a Web Layout with 3D Elements using Photoshop via #sixrevisions (step by step guide to 3D effects in #Photoshop);
40 Fresh & Beautiful Websites for Design Inspiration (starting from Barista iPhone app to Pasikeitimai – excellent!);
45 Brilliant Examples of Photo Manipulation Art(Nice ones: Chog, fruit manipulation, the eye, falling letters, etc);
Design a Textured Portfolio Site Layout Using Photoshop(designing a portfolio homepage in Photoshop) via designm.ag;
List of 31 Websites Using Huge Type(hugeinc, Francesco Mugnai, Johny Favourite, Dreamer Lines, etc) Large Fonts!

Website programming tips, programming languages

10HTML-CSS Cross-browser best practices;

Miscellaneous, funny stuff, free things online, tips

Google Introduces New Drawing and Form Features for Docs – we have Easier Flowcharts and More Form Options;
Google Releases Instant Messaging API – Apps Can Exchange Messages with Google Talk/Wave(App Engine software SDK);
Google Shares New Privacy Policy for Books – they also share the letter to the FTC(google is still waiting…)
iPhone Solar Charger Will Keep You Twittering in the Sun All Day(the first Apple-approved solar charger for iPhone!)
Vietnam Clamps Down On Bloggers And Online Journalists – Media watchdog condemns action(what can we do anyways?!?)
Google Shows Off New Android Market – see a video presentation of some more features for #Android App #Developers;
Street View: Soon it will be With More Blurriness – Swiss complaint will result in a global change! @wpn
Movie Studios Discuss Ways to Rent Films Over YouTube(youtube considers offering paid movie content);
15 (More) Free Web Tools To Simplify Your Work Life(MyFontbook, Box.net, Ronin, Go2Convert, DeskAway, Atmail, etc);
South Korea shows what the world might look like if the iPod and #iPhone had never happened: A World Without #Apple!!!
Selling 65% of Skype to a team of savvy tech investors leaves eBay poised for healthy gains on a reinvigorated Skype;
eBay and GM Extend New Car Program - Declared as a success (so far), weigh nationwide rollout(gm.ebay.com) @wpn;
100 Most Educational iPhone Apps – brain exercises, quizzes and flashcards, math related, science, geography and history, etc;
Use the internet to get someone else to do the chores for you! check out the runmyerrand.com website(less than 10$/chore);
LA Fires: Images and Video from Around the Web(online footage for newshounds to check out in one place) @mashable;
Part of the interview with the Imprisoned American Journalists: We Were Violently Dragged to North Korea @mashable;
Chrome To Come Aboard Sony Computers; First deal with hardware maker struck as market share rises;
7 Ingredients of Successful iPhone Apps (Source: Apple) (delightful, innovative, designed, integrated, etc);

To find other older articles, visit the Cool Articles’ archive.

Some sites where u can find interesting articles:

Witaj !

webdziennik — Mon, 07 Sep 2009 09:19:52 +0000

Witamy Cię na nowym blogu traktującym o tworzeniu stron internetowych !

Zapraszam do zapoznania się z tematem stron internetowych:

Tworzenie stron internetowych

Po co Ci strona internetowa ?

W3C

Evelyn Mangiru — Wed, 02 Sep 2009 21:41:29 +0000

Dacă ai curaj să-ți verifici HTML-urile, CSS-urile și alte-urile, pe w3.org este cel mai recomandat să o faci:

The last 3 weeks

alexmessinger — Sun, 30 Aug 2009 01:29:27 +0000

Working On Assisted JS with JO project as consultant/project manager multimedia icon Survey Reportin

The simplest way to horizontally and vertically center a DIV

webkori — Mon, 24 Aug 2009 16:24:24 +0000

I have gone trough a lot of ways to horizontally and vertically center a DIV. Many of the code snippets had a Child DIV1 inside a Parent DIV2 to center the Child. They work perfect but I found a simpler way to center a single DIV trough CSS.

I am not sure if this is already known to all, but I experimented and came up with this simple CSS snippet.

Here is a visual representation of how this works:

Here is the CSS Snippet to be assigned to the DIV to be centered. The size of the DIV is 100 x 100 px ( same as the above example ).

/* CSS Document */

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}

Here is another example with size 500 x 200 px.

/* CSS Document */

.centered_div {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;
}

You can also find an online example here

Difference between px and em

ujjaini — Fri, 21 Aug 2009 23:21:47 +0000

Both px and em are units of measurement. The difference between the 2 is as follows -

Px is absolute units

Em is relative units -The ‘em’ unit is equal to the computed value of the ‘font-size’ property of the element on which it is used . For example, the default font size in my browser is 16px. So 1 em = 16px

How to convert px to em ?

If the default font size is 16px then 1 em is equal to 16px
So 12px would be equal to 12/16 em = 0.75 em
So 11px would be equal to 11/16 em = 0.6875 em

Similarly, if the default font size is 12 px , then 1 em is equal to 12px
So 11px would be equal to 11/12 em = 0.9167 em

px unit is always constant, but em unit is calculated relative to the parent element
Here is an example-
I assume that the default font size of the browser is 16px ( 1 em)
There is a div (parentDiv) inside the document with font size – 1.2 em(19.2 px)
There is another div inside the document (childDiv) with font size – 1.2 em. Now one might think that the font size of childDiv is same as that of parentDiv. But it is not so. The font size of childDiv is relative to parentDiv. It is 1.2 of 1.2 em = 1.44 em = 23.04 px

Below is the HTML code -


<html>
<head>
<title>Difference between absolute and relative units </title>
	<style type="text/css">
	body{
	    font-size:16px;
	}
	#main{
		margin: 20px 0 0 20px;
	}
	</style>
</head>
<body>
    <div id="main">

		<div id="parentDiv_px" style="font-size:15px;color:red;">
		THIS IS PARENT DIV WITH FONT SIZE 19 px
		<br/><br/>
			<div id="childDiv_px" style="font-size:15px;color:blue;">
			THIS IS CHILD DIV WITH FONT SIZE 19 px
			</div>
		</div>

		<hr/>

		<div id="parentDiv_em" style="font-size:1.2em;color:red;">
		THIS IS PARENT DIV WITH FONT SIZE 1.2 em
		<br/><br/>
			<div id="childDiv_em" style="font-size:1.2em;color:blue;">
			THIS IS CHILD DIV WITH FONT SIZE IN RELATIVE UNITS 1.2 em
			</div>
		</div>

	</div>
</body>

</html>

The HTML page looks like this-

In the first case both parent and child divs have font-size 19 px. They are of the same size.
In the second case, however, both parent and child divs have font-size 1.2 em. As you can see the parent div has font-size 1.2 em (19.2 px). The child div has font-size (1.2 x 1.2 = 1.44 em) (23.04 px)

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

html-css « WordPress.com Tag Feed

HTML Table with thin border

Ferramentas úteis para criar páginas Web

Some basic reminders.

CSS Positioning

States Dropdown

Differences between HTML and XHTML

Reactieformulier KRO-De Wandeling

Robots.txt

How to make your website ADA compliant

Favicon for one page

Tranformando PSD em HTML + CSS

How To Submit A Form To Itself On Enter Without Refresh

Entering multiple lines of text in textarea using javascript

3 Ways to Include One HTML File in another HTML File

Hello world ! bienvenue a tous ^^

Why is my design broken in other browsers?..Try a different DTD

How To Make A Div Fill The Full Height of The Screen

CSS 3 - co nowego ?

Selektory

Wybór różnych właściwości

Właściwości związane z tekstem

Cool articles – SEO, blogging, internet marketing(september 01-06, 2009)

Internet marketing, SEO, SEM, online services

Web design, design tips, digital photography, fonts, themes

Website programming tips, programming languages

Miscellaneous, funny stuff, free things online, tips

Witaj !

W3C

The last 3 weeks

The simplest way to horizontally and vertically center a DIV

.centered_div { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background: red; }

.centered_div { width:500px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -100px; background: red; }

Difference between px and em

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}

.centered_div {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;
}