Welcome to SP!  -
Areas & RangesMountains & RocksRoutesImagesArticlesTrip ReportsGearOtherPeoplePlans & PartnersWhat's NewForum

HTML tips to share with others.

Get HTML help, style input, and feedback on your pages from other SP members.
 

HTML tips to share with others.

Postby mrchad9 » Thu Jul 29, 2010 10:02 pm

I got the idea for this thread from another going on at the moment, and thought it be good to have one dedicated to sharing bits of code or tricks that you think others might find useful, rather than waiting for folks to ask about something. Most of us don't actually know much HTML (I knew none a year ago) and this might be useful for both new and more experienced folks who might run across something they'd like to use.

The purpose of this thread is not to ask questions (unless you don't understand someone else's post). It is to share what you have learned.
Last edited by mrchad9 on Wed Aug 25, 2010 8:22 pm, edited 4 times in total.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby mrchad9 » Thu Jul 29, 2010 10:03 pm

To kick it off with a couple of items I've already posted elsewhere...

This website will let you preview a page you designed in various screen resolutions, to confirm it looks ok for everyone else.

http://www.screen-resolution.com/#



Another tip: Place this code after sections of a page with large or several photos on the right, but not a lot of text. This forces the end of the section to be below the photo, rather than just below the text, so photos don't get pushed down to other sections.

<BR CLEAR=ALL>

So a page looks like this:

http://c0278592.cdn.cloudfiles.rackspac ... 643060.jpg

and will not look like this:

http://c0278592.cdn.cloudfiles.rackspac ... 643059.jpg

Note- I left those simply as links intentionally.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby workmanflock » Thu Jul 29, 2010 10:08 pm

workmanflock

 
Posts: 24
Joined: Fri May 14, 2010 9:59 pm
Thanked: 11 times in 7 posts

Postby Jakester » Thu Jul 29, 2010 10:16 pm

Deleted.
Last edited by Jakester on Thu Jul 29, 2010 11:24 pm, edited 1 time in total.
User Avatar
Jakester

 
Posts: 89
Joined: Thu Jun 28, 2007 8:05 pm
Location: Spokane, Washington, United States
Thanked: 1 time in 1 post

Postby mrchad9 » Thu Jul 29, 2010 10:20 pm

Here are two great articles by <a href=http://www.summitpost.org/user_page.php?user_id=27417>thephotohiker</a>.

<a href=http://www.summitpost.org/article/276346/setting-tables-using-html.html>Setting Tables Using HTML</a>

<a href=http://www.summitpost.org/article/253395/pictures-in-tables-on-pages-oh-my.html>Pictures in Tables on Pages. Oh My!</a>
Last edited by mrchad9 on Thu Jul 29, 2010 11:26 pm, edited 1 time in total.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby mrchad9 » Thu Jul 29, 2010 10:30 pm

An excellent tip from <a href=http://www.summitpost.org/user_page.php?user_id=23627>MoapaPk</a>, that I've found very beneficial numerous times.

MoapaPk wrote:VI: find a page that behaves in the way you want, then right click on it and pick "view source" (that's the PC route). Then you get to see what other people did with html, to achieve that effect.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby mrchad9 » Thu Jul 29, 2010 11:06 pm

This site is useful for selecting a color, if you want a lighter or darker shade, or something in between two other colors:

http://vrx.net/sys/gradient?r1=ff&g1=ff ... capbut=off
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby mrchad9 » Fri Jul 30, 2010 12:06 am

Post pictures any size:

I picked this trick up using the "View Source" method in MoapaPk's quote above. Sometimes (well often) I want to put a photo on a mountain page but not be constrained to a thumbnail, small, medium, or large size. There are several ways to insert photos adjusted to any size you want, but the code below will let you do so while keeping the standard frame around the photo we are all familiar with on SummitPost pages.

Code: Select all
<center><div class='thumb'><div style='width:XX2px;'><a href='/view_object.php?object_id=??????'><img width='XX0' src='/images/large/??????.jpg'></img></a><div class='thumbcaption'><div class='magnify' style='float: right;'><a href='/view_object.php?object_id=??????' title='Enlarge'><img src='/images/layout/abby/magnify.gif' alt='Enlarge'></img></a></div>PHOTO CAPTION HERE</div></div></div></center>


This places the photo in the center. For left or right alignment take out the word center and the symbols around it at the beginning and end of the code. The replace 'thumb' with 'thumb tright' or 'thumb tleft'.

Replace the ?????? with the image ID. Replace the XX0 and XX2 with the image width you would like, keeping the first number two pixels higher ('500' and 502px for example). Then write the photo caption in the appropriate place.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby nartreb » Thu Aug 19, 2010 7:48 pm

Replace the XX0 and XX2 with the image width you would like


In that particular example, you're making the user download the Large size photo (src='/images/large/??????.jpg) which is 1000px wide, then asking their browser to resize it to 500px, which is exactly the size you'd get if you just downloaded the Medium size in the first place. Better to pick the cource image that's closest to the size you want.
User Avatar
nartreb

 
Posts: 1987
Joined: Sat Apr 03, 2004 10:45 pm
Location: online or in boston, Massachusetts, United States
Thanked: 108 times in 89 posts

Postby mrchad9 » Thu Aug 19, 2010 8:01 pm

nartreb wrote:
Replace the XX0 and XX2 with the image width you would like


In that particular example, you're making the user download the Large size photo (src='/images/large/??????.jpg) which is 1000px wide, then asking their browser to resize it to 500px, which is exactly the size you'd get if you just downloaded the Medium size in the first place. Better to pick the cource image that's closest to the size you want.

Actually, on my pages I often use this bit of code for panoramas, and make the photo 740 pixels wide, so use 740 and 742 in the numbers.

Yes- perhaps I used the bad example with the 500... This only makes sense if you want to do something in between large and medium photo sizes.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Postby surgent » Thu Aug 19, 2010 8:15 pm

mrchad9 wrote:Post pictures any size:

I picked this trick up using the "View Source" method in MoapaPk's quote above. Sometimes (well often) I want to put a photo on a mountain page but not be constrained to a thumbnail, small, medium, or large size. There are several ways to insert photos adjusted to any size you want, but the code below will let you do so while keeping the standard frame around the photo we are all familiar with on SummitPost pages.

Code: Select all
<center><div class='thumb'><div style='width:XX2px;'><a href='/view_object.php?object_id=??????'><img width='XX0' src='/images/large/??????.jpg'></img></a><div class='thumbcaption'><div class='magnify' style='float: right;'><a href='/view_object.php?object_id=??????' title='Enlarge'><img src='/images/layout/abby/magnify.gif' alt='Enlarge'></img></a></div>PHOTO CAPTION HERE</div></div></div></center>


This places the photo in the center. For left or right alignment take out the word center and the symbols around it at the beginning and end of the code. The replace 'thumb' with 'thumb tright' or 'thumb tleft'.

Replace the ?????? with the image ID. Replace the XX0 and XX2 with the image width you would like, keeping the first number two pixels higher ('500' and 502px for example). Then write the photo caption in the appropriate place.


I occasionally include a photo from my own website in my SP pages, photos that I did not upload to SP for various reasons.

I just use img src=" photo url " enclosed in the less-than and greather-than brackets.

Bang, that's it.

Here's one such page:

http://www.summitpost.org/trip-report/3 ... otos-.html

You can govern the width by adding in width=500 or something like that.
User Avatar
surgent

 
Posts: 464
Joined: Wed Aug 20, 2003 2:45 pm
Location: Scottsdale, Arizona, United States
Thanked: 88 times in 55 posts

Postby mrchad9 » Wed Aug 25, 2010 8:19 pm

A good tip from Bob Sihler on using a custom object to set up a workshop so that you can fine tune a page before creating the actual one...
Bob Sihler wrote:You can't save a draft here, but some of us have created custom objects so that we can work on a page at our own pace, set up pictures, etc. When ready, we just copy and paste the whole thing as a new page.

Here is my custom object. I am working on a route page right now and will be done in a couple days-- http://www.summitpost.org/custom-object/307131/page-workshop.html.

Thank you for asking and showing concern about this. Too many members, new and veteran alike, put up incomplete pages and take their sweet time finishing them. It is a real pet peeve around here.
User Avatar
mrchad9

 
Posts: 4200
Joined: Thu Jul 02, 2009 12:01 am
Location: San Ramon, California, United States
Thanked: 1214 times in 823 posts

Re: HTML tips to share with others.

Postby Baarb » Fri Nov 04, 2011 7:14 pm

Something I picked up and did recently (it may be elsewhere in this forum, not sure) is for links to jump to other parts of your page, similar to how the Contents bar works. So in my case I wanted to have the letters of the alphabet displayed as links, such that when someone clicked a letter the page would jump down to a bunch of things beginning with that letter.

To create the links I did: <a href="#A">A</a>, <a href="#B">B</a>, etc.
Then to mark/tag the point on the page where I wanted the links to jump to I placed <a id="A"></a>, <a id="B"></a> etc. as appropriate. These tags aren't actually visible though.

It would also be useful for example saying "as mentioned below" with a tag to the lower section you mean.
User Avatar
Baarb

 
Posts: 398
Joined: Tue Jun 06, 2006 6:42 pm
Location: The Village with Three Corners
Thanked: 42 times in 29 posts

The following user would like to thank Baarb for this post
mrchad9


Return to Page Help

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests

© 2006-2013 SummitPost.org. All Rights Reserved.