Group's posts with tag: html
 Link: http://toolshell.org/Really GREAT site for html flash clocks! Thanks to onlymissy (Lusy) for this link!
(Love the FF clocks!) 
 So you've learned the basics of HTML and CSS from this group. Wouldn't it be great to combine the two without uploading anything to your custom CSS? That can be done with INLINE STYLES. Simply put, it is adding CSS statements in your HTML tags. Many of you probably already know this, but for those who don't, I hope you find this tutorial helpful. We know very well that CSS makes global changes (ie, change the properties of ALL links, text, images, etc unless otherwise specified). But sometimes we just want to change a specific part on our page that just can't be done by HTML. This is where inline style comes in. (Oh would you just tell us how it's done!) Ok. Ok. lol It's really simple. Just add the style attribute to your HTML tags. For example: <span style=""></ span> <a style=""></a><img style=""></img>Etc.. You can do that to all HTML tags (correct me if I'm wrong). Now, defining the style is almost like doing CSS (without the selectors and the curly brackets ' { and } '). For example this code (I'm gonna use the <a> tag) <a style="border: 5px outset #000; margin: 2px; padding: 2px; overflow: auto; display: block; position: relative; color: #000; background: transparent URL('http://images.multiply.com/multiply/sos/bg.png') repeat center center scroll; font-family: tahoma; font-weight: bold; font-size: 40px; text-align: center; text-transform: uppercase; width: 550px; height: 50px; text-decoration:none;" href="http://multiplydesign.multiply.com">Multiply Design</a>will render this:Multiply DesignThe disadvantage of inline styles is it's inability to apply pseudo-elements (eg, hover, etc). There you go. Enjoy styling!
 If you want to post a CSS code online (or anything but HTML codes), you can use a div container with fixed width and/or height and add scroll-bars to it. Example:
<div style="width:500px; height:100px; overflow:scroll; padding:2px; border:2px dashed black">Sample Text ... Sample Text</div>
Sample Text
Sample Text
Sample Text
Sample Text
Sample Text
Sample Text
Sample Text
Set width and height values to suit your needs and remove/change the border if you want. Of course, you can add anything in the style part, like a background image or color, change the text, etc (same syntax as CSS).
It works very well anywhere you can add HTML. When composing a blog entry however, you must first click on 'Edit HTML' and then add the code manually. Make sure you add the closing </div> at the end when you do this or it may break your post.
When you want to post HTML code, you can use textarea:
<textarea rows=10 cols=60>... your code here ...</textarea>
As you can see above, HTML code inside textarea isn't parsed, so you can put anything inside and it won't be processed. Be aware that break-lines (<br>) may appear if you use it. Adjust cols (columns) and rows to what you want.
Have fun. 
 Create dropdown menu thru CSS-HTML combo. Now, this one's actually a bit complicated. There are still a lot of ways to do dropdowns ( cssplay has incredible ones). I just wanna share what I have up and how I did it. The original codes were provided by thecakeisalie.. This would be great for those who are fond of using tags. That means, I can create submenus that will link to the blogs that have the same tag (eg, shoutouts). It's gonna seem like you have more pages than you actually do. The CSS (paste them in your custom CSS) .dd1 {
font-family: tahoma;
width:105px;
height:100px;
position:absolute;
left: 10%;
font-size:11px;
z-index:100;
}
.dd1 ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:104px;
height:20px;
text-align:center;
color:#fff;
background: transparent URL(image.url) scroll center center no-repeat;
line-height: 20px;
font-size:11px;
overflow:hidden;
}
.dd1 ul {
padding:0;
margin:0;
list-style-type: none;
}
.dd1 ul li {
float:left;
position:relative;
}
.dd1 ul li ul {
display: none;
}
.dd1 ul li:hover a {
color:#000;
background: transparent URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul {
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
}
.dd1 ul li:hover ul li ul {
display: none;
}
.dd1 ul li:hover ul li a {
display:block;
color: #fff;
background: URL(image.URL) transparent scroll no-repeat center center;
}
.dd1 ul li:hover ul li a:hover {
background: URL(image.URL) transparent scroll no-repeat center center;
color:#000;
}
.dd1 ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.dd1 ul li:hover ul li:hover ul.left {
left:-105px;
}
The HTML (paste them in your site title) <div class="dd1"><ul><li><a href="/menu link">MENU TITLE</a><ul><li><a href="/submenu link 1/">submenu link 1 title</a></li><li><a href="/submenu link 2/">submenu link 2 title</a></li><li><a href="/submenu link 3/">submenu link 3 title</a></li><li><a href="/submenu link 4/">submenu link 4 title</a></li></ul></li></ul></div>CSS notes:1. Now if you think that was already exhaustively long, well, that would only create ONE menu. You'll have to repeat the whole process changing .dd1 to .dd2, .dd3, and so forth for more menus.. 2. Of course you'll have to change the left position value ( highlighted) for the for the next menus, otherwise they'll assume the same position making the other menus not visible. HTML notes: 1. Change the class (eg, dd1) to dd2, dd3 and so forth for subsequent menus. 2. You can add more submenu items by repeating the whole highlighted portion below each other. 3. Before pasting the codes to your site title, make sure there are no line breaks. That's because the site title has no room for them. (I had put line breaks on this tutorial for better viewing purposes.) More notes:1. You're gonna have to hide the default nav bar. Do that by adding the following string to your custom CSS. div#subnav {display: none;}2. Some vales you can customize include background color, image; font color, size, family, weight, etc; width and height of each menu and submenu. Examples:1. Using one menu. (The actual codes I posted here) 2. More than one menu. (Using the actual codes in my page). Now, it may seem like a lot of work, but remember, patience is a virtue. lol Attachment: drop tut.htmlAttachment: my dropdown.html
 The summary view shows the first 160 characters (in our inbox) or the the first 230 characters (in our homepage) of our post. But sometimes it can be a pain when it's not those first 160 or 230 characters we want to show up as summary. I found a workaround (which I originally shared here as a reply), but this time I've used CSS for a much convenient approach. First step:Go to your custom CSS and add the following string at the END. .bodytext p.summary {display:none;}Second step:Whenever you want to use a different "starter" for a specific post, add the following at the BEGINNING of that post. <p class="summary">Your custom summary</p>Notes: Only the first 160 characters will show up in the inbox (summary view). Or the first 230 characters will show up in your homepage (summary view). And remember, your custom summary will NOT show up in the actual post. Only in the summary (and full view) in the inbox, and on the homepage when you chose summary view for your mainboxes. Some screenshots: How it looks like on the inbox:  How it looks like on your homepage:  How it looks like on the actual post: 
 Link: http://www.tizag.com/htmlT/Left links show html codes for just about everything you don't know (Or can't remember at the moment)
Just scroll down and take your pick.
 It has been suggested at MUDS but as yet, we don't have the option to disallow html in comment boxes other than Guestbooks. I have also requested the option to disable public replies while still being able to post to 'everyone'. Hopefully these features will be considered in the future. In the meantime however, YOU can choose what is allowed on your SITE and in your Groups comment (reply) sections. This is especially important if you have either your Guestbook OR any posts open to 'everyone' with replies enabled.
Fine tune what you would like to allow or disallow in comments on your personal Sites & Groups. Avoid comment issues by choosing exactly what you will and will not allow. Take control of comment content and what others might do to affect your site with third party or rogue codes. You control what code will be allowed and if you are willing to allow code that could contain hidden elements.
FOLLOWING AFFECTS ALL COMMENTS ONLY TO INCLUDE GUESTBOOK COMMENTS.
/*EMBEDDED OBJECTS ONLY WILL NOT SHOW IN ANY COMMENT BOX TO INCLUDE GUESTBOOK*/
.replybox object, .replybox embed {
display: none !important;
}
/*PARSED "HOT" LINKS ONLY WILL NOT SHOW IN ANY COMMENT BOX TO INCLUDE GUESTBOOK*/
div.replybodytext a {
display:none !important;
}
/*IMAGES ONLY WILL NOT SHOW IN ANY COMMENT BOX TO INCLUDE GUESTBOOK*/
div.replybodytext img {
display:none !important;
}
The following RE-ENABLES A/V Replies that this code disables. Thanks to Bobby (spunj) for this additional code!
.replybox object#multiply_multv_object, .replybox embed#multiply_multv {
display: block !important;
}
Remember that if you do decide to allow images or images only you can use this next code to size and control the impact that images have in your comment sections. (Adjust the sizes to suit you but this one generally works fine for most). This will prevent oversized images from distorting a thread and hiding your delete link in the comment, that prevents you from removing an oversized image.
/*RESIZE COMMENT IMAGES*/
.replybody img {
max-height:300px;
max-width:300px;
}
Using the above codes mean that you do not need to use the corresponding Guestbook codes below.
---------------------------------------------------------------------------------
FOLLOWING AFFECTS ONLY COMMENTS IN GUESTBOOK:
/*EMBEDDED OBJECTS ONLY WILL NOT SHOW IN GUESTBOOK COMMENTS ONLY*/
#home_guestbook .replybox
object, #home_guestbook .replybox
embed {
display: none !important;
}
/*PARSED "HOT" LINKS ONLY WILL NOT SHOW IN GUESTBOOK COMMENTS ONLY*/
#home_guestbook .replybodytext a {
display:none !important;
}
EDIT: Because this removes link names in Guestbooks' quoted text, you MUST add this also for the link names to show: (Thanks to Marvie for catching this!)
#home_guestbook .quotea a, div .quotea a {
display:inline ! important;
}
/*IMAGES ONLY WILL NOT SHOW IN GUESTBOOK COMMENTS ONLY*/
#home_guestbook .replybox
img {
display:none !important;
}
You can use any combination of codes above to control the content you allow in comments on your site and group. After all, it is YOUR SITE AND GROUP. Why let others decide what will be put there?
NOTES:
Disallowing HTML in Guestbooks does not stop parsed "HOT" links. The code designated for Links Only does. For links to show, they will have to be coded and not "HOT".
Upside to this is that no site can track "LINK BACKS" to you.
You and your visitors can still post links by coding them similar to this:
H**p://multiplydesign.multiply.com and that will show in your comments. (User can substitue the asterisks for "tt")
THIS DOES DISABLE USING ID:// LINKS IN COMMENTS.
The embed block code will block slideshows, using the album share link here from Multiply (In comments only) but if you don't disallow images, those will share fine. (Who puts slideshows in comments??)
REMEMBER: THIS IS FOR COMMENTS (REPLIES) ONLY. IT DOES NOT PREVENT YOU, THE SITE OWNER OR ADMIN TO USE CODE, LINKS OR IMAGES IN THE WELCOME AREA, BLOGS, OR ANY OTHER POSTS. Only where comments can be posted by contacts, members or the public.
ADDITONAL NOTE: If you have disallowed any of the above by using the codes, and someone attempts to post this type of code in your comments, you will see that the user posted but the content of the reply box will be blank. You can easily delete these if your visitor doesn't. You can also use Firebug or another tool if you REALLY want to know what they put there, even though it can't be seen.
I personally have chosen to allow images in comments but not my GB. I've allowed HOT parsed links in ALL comments, but disallow object and embed codes in ALL comments. (Safest thing to do) I am also resizing images since I'm allowing those. (I may disallow "HOT" parsed links if I feel it's necessary.)
This also has the added benefit of preventing SPAM in groups if this spam is being put in replies (where spammers have to post to bypass the "first post" moderation)
Brought to you and tested by Linda, Missy & Demit. Credit also to Luiz and Bobby for their input in notes regarding this topic.
PLEASE FEEL FREE TO LINK TO THIS POST BY CLICKING ON THE SHARE LINK.
 HTML NESTING
TIP: Always nest your HTML elements properly!
Very simply, his means you should close things in the reverse order you opened them.This means that the tag opened most recently is always the next tag to close.
Enlarge image for example and clarification.
CSS Grouping You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas. For example, if you have something like:
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
You could make it:
h2, .thisOtherClass, .yetAnotherClass {
color: red;
}
CSS Nesting If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors. For example:
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
From demitmp at usersupport - I believe it is an HTML problem. Based on my own experience, if you put the tags in wrongly order, FF will give strange result. My suggestion is re-check your code, especially tags order, as they must nested properly (not crossed).
 You already know how to add a Tagged Content box and how to add a link to your posts with that tag or tags to the navigation menu, but probably you also noted that in the Tagged Content boxes there is no 'View All' link and the maximum number os posts in a box is 9 o 12, depending on your settings. Frustrating, isn't it? But motivated by this tutorial in the group created by psycothic2 about how to add 'Back to Top' link, I have found a simple work around, see the image. It's easy to add one to your Tagged Content box. Let's say you have a box for posts tagged with ' tutorial', and you know that the relative link to all the posts for this tag on your page is "tag/ tutorial" also. Then do this: 1. Click on 'Customize My Site'; 2. Click on 'Edit' in your Tagged Content box for ' tutorial'; 3. In the title of the box, add this code: <div align="right"><a class="select" href="/tag/tutorial">View All</a></div>4. Click on the Save button.  The only part of the code you need to change is the name of the tag, shown in blue above. PS: Is your tag has one or more blank spaces in the middle of it, like ' getting started', replace each space with '%20', for instance: "tag/ getting%20started". Enjoy!
 You have what you need right on your computer! No need to download or install anything! (Enlarge screenshots to view them)
FIRST:
1. Open notepad and type something short.
2. Go to FILE, SAVE AS and change the second box from TEXT to ALL FILES.
3. Name it in the first box but add .html after the name.
4. Click on Save (to your Desktop).
5. Notice your saved file on your desktop. It will now have your browser's icon.
6. Minimize notepad window.
NEXT:
1. Open new (blank) tab in your browser.
2. DRAG the saved html file from your desktop into your blank browser window. Notice what you typed in notepad is now in your BROWSER window.
3. Maximize notepad window (not full screen) and position it under the text in your browser window. Ok. So what.
NOW THE FUN PART!
1. Backspace over or overwrite your starting text in the Notepad window, by writing your own html code or paste in code that you want to see rendered. (What it looks like)
2. Quickly hit, File, SAVE (not save as - just save)
3. Go to the browser window and REFRESH/RELOAD .
4. You will NOW SEE your html and each edit rendered in the browser window each time you do this.
Now you can edit, change and VIEW/TEST html code quickly before using it!. No need to use your Multiply site as a guinea pig! (Uh, I meant test site) ;) Reuse the same saved file over and over! Just open with "notepad" first.
Is that cool or what! (Is cool still a cool word btw?) lol
Sorry for my lousy screenshots. I have a temperature, my nothe is all stupt up, chest (or lack thereof) is all congested, with laryngitis thrown in, no extra charge. Did I mention it's strep and it's in my left ear too? And don't everybody say "awwwwww". lol
I was wonderin how I could make collapsible text on MP and ended up learning Text Pop-up.
CSS (Paste this to your custom CSS)
.thumbnail {position: relative; z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span {position: absolute; background-color: #fff; padding: 5px; left: -1000px; border: 1px solid #000; visibility: hidden; color: #000; text-decoration: none;}
.thumbnail span img {border-width: 0; padding: 2px;}
.thumbnail:hover span {visibility: visible; top: 0; left: 60px;}
a {text-decoration: none;}
HTML (Paste this to wherever you can use HTML)
<a class="thumbnail" href="#thumb">YOUR TEXT HERE<span style="width: 500px;">YOUR TEXT FOR POP-UP HERE</span></a><br>
<a class="thumbnail" href="#thumb">ANOTHER TEXT HERE<span style="width: 500px;">EMBED IMAGE CODES HERE </span></a><br>
<a class="thumbnail" href="#thumb">ANOTHER TEXT HERE<span style="width: 500px;">EMBED FLASH CODES HERE </span></a><br>
Repeat the this step for more text pop-ups.
To view an example, click HERE. (Cuz I have no power to edit this group's CSS.. ) lol
Note: you can customize the highlighted parts.
PS. Since these are texts, you could always add HTML tags to add more effects (eg, <center>, <b>, <i>, etc..)
If you want to use image for your pop-up effect on your site, read this thread.
Attachment: pop-up.html
 Link: http://www.html-reference.com/This is one of the best HTML Guides I've seen in quite a while. Click on anything there and you get the code, how to, what it does and what it looks like. All inclusive and things you haven't even considered doing yet! Check out the left rail also for other things you might be interested in!
This is how you can add a "Back to Top" link to your Title Boxes, blogs etc. where html is allowed that you can "click" on the link to go back to the top of your page without having to scroll back to the top.
This is the Basic Code: (Set alignment, font size, color, width & height for image)
<div class="top" align="right"><a href="#" style="font-size: 10px;" color: red;">TEXT HERE<img alt="" src="SMALL IMAGE URL HERE" width="10" height="12" border="0"></a></div>
What the Link and image looks like (sized larger for this tutorial)"Red Up Arrow" Image  (Sized in Code)
"Back To Top" Link shown above Tagged Content Box: (Click on image to enlarge)
Give it a try and save your index finger...lol
Click on the different parts of the image and see where it takes you.
Now this isn't a table of 6 images that link to 6 different URLs, rather, it is 1 image that links to 6 different URLS. Go on, check on the properties of the image, if you don't believe me.
This is called an image map. A single image that links to different URLs.
Step 1: Create an image.
The one I made is an image with a width of 150px and a height of 100px.
Step 2: Define the areas of your image. That is, define the coordinates.
<map name="map1">
<area shape="rect" coords="0,0,50,50" href="http://multiplydesign.multiply.com/" alt="Index">
<area shape="rect" coords="50,0,100,50" href="http://multiplydesign.multiply.com/journal" alt="Blog">
<area shape="rect" coords="100,0,150,50" href="http://multiplydesign.multiply.com/photos" alt="Photos">
<area shape="rect" coords="0,50,50,100" href="http://multiplydesign.multiply.com/video" alt="Videos">
<area shape="rect" coords="50,50,100,100" href="http://multiplydesign.multiply.com/reviews" alt="Reviews">
<area shape="rect" coords="100,50,150,100" href="http://multiplydesign.multiply.com/links" alt="Links">
</map>
2.1 How to get those coordinates? (I'll use the 5th area as an example..)
a. Open the image you want to use for image map with MS paint.
b. Grab the set of coordinates. (See images.Click to enlarge.)
 
c. Place those coordinates on the 'coords' value of the map.
<area shape="rect" coords="50,50,100,100" href="http://multiplydesign.multiply.com/reviews" alt="Reviews">
Note: Replace values in BLUE with your desired values
Step 3: Create your image tag
<img src="http://images.spunj.multiply.com/image/2/photos/66/400x400/4/imap.gif?et=B6dUCms5Xq3GHv%2C3hZBwFw&nmid=91344103" usemap="#map1" width="150" height="100" alt="Multiply Design" border="0">
Note: The value in usemap is the the value you used for map name (in step 2) preceded by the pound # sign. Be careful. it IS case sensitive.
Step 4:
Put the 2 set of codes (steps 2 and 3) where you can use HTML.. And there's your image map.
 Overlay Text On Images using HTML.
Here's an html code you can use to overlay text on an image. Change all of the properties (font, text etc) and add to them, to suit your needs.
Here's one where I've posted the code that is overlaying the text on this image. The text is not SAVED on the image. It's only overlayed here in this post using html. Right click, view background and you will see the image WITHOUT any text. And you will see that it's a background and not an image!
THIS MADE
A
FANTASTIC
THEME
!!!!!!
Love it!
REMEMBER to change the image size (height & width) and font attributes to suit what you wish to use this for. Anywhere you use html to embed an image, you can add text to it this way.
Use the code box above to practice with. You can edit in that box without actually affecting this post. :) Just close and reopen and my code will be back as it was.
 Link: http://www.vowsoft.com/ies/IE HTML Element Spy is tool that will help you to understand the structure of existing pages on the web, it is very easy to install and use, and, it is a FREEWARE! That means you can download and use it free of charge for an unlimited time. Thanks to http://kittybriton.multiply.com/ from y360refugees.multiply.com for this link! Perhaps this might help those that using IE or with some IE issues.
| |
Link: 
Link: 
