background preloader

HTML and CSS

Facebook Twitter

Colour Swatches. CSS Layers - CSS tutorial. With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision.

CSS Layers - CSS tutorial

The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures. So the real challenge when working with layers is to make them work on Netscape browsers as well. First look at this example: Second look at the code: To create a layer all you need to do is assign the position attribute to your style. The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute. You can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layer itself is inserted (relative). While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer. How to Adjust the Opacity of a Table Without Changing the Text.

HTML Basics - HTML Tutorials. This one just tells about how to do simple, (and fun!)

HTML Basics - HTML Tutorials

Things to spice up your Myspace, Xanga, or whatever! Okay...so... [size=3]Hearts and what-not[/size] Now, a lot of people just wanna make a heart like this: And you know what?! Its super easy! ♥ makes this: ♥ ♠ makes this: ♠ ♣ makes this: ♣ And ♦ makes this: ♦ You got hearts! [size=3]Soo.....you want an image? 6.) EXAMPLE: I want a picture of this graphic I made using Photoshop so I can show it off to all my friends. So my code would look like this: You can always replace the "Image I wanna Show Off" text with something else like, "My Dog Scruffy" [size=3]Skip a line baby YEAH!

So, you want to make a break in your lines? Well, its super easy! For example, to make something like the above, just do this: Hi, my name is Sierra. Would look like this: Hi, my name is Sierra. Awesomeness. [size=3]Centering Text[/size] [center]So, you want your text in the center like this? <center>Your Text/Images</center>

HTML Colors. Making CSS Rollover Buttons. Tutorial by Matt Doyle | Level: Intermediate | Published on 16 April 2007 Categories: In this tutorial, we'll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images.

Making CSS Rollover Buttons

No JavaScript or IMG tags in sight! Rollovers are a nice way to add visual feedback to your website's buttons. As a visitor moves their mouse over a rollover button, it changes to indicate that it's clickable. In the bad old days of HTML, the only way to create a rollover was to use JavaScript to swap the two button images. Thankfully, these days you can create a nice rollover effect using pure CSS; no JavaScript required! So how's it done? The button image The trick to making this type of rollover work smoothly is to have both the normal and rollover images stacked in a single GIF image, with the rollover state below the normal state. On the other hand, this approach avoids issues with flickering and preloading, which we'll talk about in more detail at the end of the article. The W3C CSS Validation Service.

The W3C Markup Validation Service. Using Link Anchors on your Site - HTML Tutorials. Tutorial Click on thumbnailed images to enlarge Link anchors are very cool and useful for long websites.

Using Link Anchors on your Site - HTML Tutorials

An anchor is a link that when clicked simply moves you to a different portion of the page. For instance if a link is at the top of the page pointing you to information at the bottom of the page clicking the link will scroll down to the information. The great part about this is that it is relatively simple to implement and makes for a pretty cool setup on your site. <a href=\"#jump\">Jump to Jump</a> This part of the code links to #jump. Take the above code and place it right above where you want the link to jump to. Be sure to include the number sign in the link but not in the name (anchor). Tutorial Comments Showing latest 6 of 6 comments Why don't you just open up a regular account here? Fave! I don't get it..im trying this on my myspace profile... Cool, nice code ^_^ I've been trying to figure this out, thanks!