Go Back   Smogon Community > Contributions & Corrections > Fifth Generation
Register FAQ Social Groups Calendar Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
Old Nov 7th, 2012, 4:58:48 AM   #26
sandshrewz
南Potest 华Qui 人Vult
is a member of the Smogon Site Staffis an Artistis a Forum Moderatoris a Contributor to Smogon Mediais a Contributor to Smogonis a Battle Server Moderator
 
sandshrewz's Avatar
 
Moderator
Join Date: Oct 2010
Posts: 1,430
Live like there's no tomorrow
Default

HTML Code:
<div style="float:right;"><img src="/media/smog/16/trivia_porygon.png" alt="" height="251" width="50"></div>
Your height and width are wrong lol. Also <img src="" alt="" /> . Yep that's all and good job! :)

Also, just a tip: style="float: right; margin-left: 10px;" where the blue part is often added for an image floated right so that there is some space between the text and the image itself. It just makes it look neater/nicer :)

Let's wait for Jelli to provide the next one now~
__________________
Thanks for voting for The Smog Awards! ^_^
Member of the GP Team- VM for a check / stamp!
sandshrewz is offline   Reply With Quote
Old Nov 7th, 2012, 5:01:06 AM   #27
mikel
hear me roar
is a Battle Server Administratoris a Forum Moderator
 
mikel's Avatar
 
Moderator
Join Date: Jun 2011
Posts: 614
buttralia
Default

Quote:
Originally Posted by Fat sandshrewz View Post
HTML Code:
<div style="float:right;"><img src="/media/smog/16/trivia_porygon.png" alt="" height="251" width="50"></div>
Your height and width are wrong lol. Also <img src="" alt="" /> . Yep that's all and good job! :)

Also, just a tip: style="float: right; margin-left: 10px;" where the blue part is often added for an image floated right so that there is some space between the text and the image itself. It just makes it look neater/nicer :)

Let's wait for Jelli to provide the next one now~
Ya, I knew the /> part (discussing on IRC) and lol 50 width. I'll try to keep down the typos next time.

Cheers for the margin tip - nice to know :)
__________________
pokemon showdown | contributions and corrections | little cup | pm/vm for a gp check

[2013-02-13T17:59:26.637Z] (lobby) Blue Kirby was banned by Joim. (Smog Nominee Award Joim invites you to kindly take a time off of his website, banned user: BlueKirby)
[3:33:40 PM] <~bmelts> inasmuch as this is the crux of the aforementioned set
mikel is online now   Reply With Quote
Old Nov 19th, 2012, 7:23:20 AM   #28
sandshrewz
南Potest 华Qui 人Vult
is a member of the Smogon Site Staffis an Artistis a Forum Moderatoris a Contributor to Smogon Mediais a Contributor to Smogonis a Battle Server Moderator
 
sandshrewz's Avatar
 
Moderator
Join Date: Oct 2010
Posts: 1,430
Live like there's no tomorrow
Default

yep yep! Let's move on to a new one with a new The Smog issue ^_^ Let's bring this up a whole new level. This time we'll being doing Featured Ubers RMT by Furai and trickroom. Also brilliant art by ToxicPhox. :) CSS is involved this time! Please declare your CSS wherever, preferrably at the top. Your CSS doesn't have to be perfectly right, but something close to the actual will do. ie you don't have to fret over the color values or something lol! I'll not be posting the answer this time because it's up to you to style the CSS! Good luck! We hope you won't be detered by this slightly harder article :P
__________________
Thanks for voting for The Smog Awards! ^_^
Member of the GP Team- VM for a check / stamp!
sandshrewz is offline   Reply With Quote
Old Nov 19th, 2012, 9:23:05 AM   #29
mikel
hear me roar
is a Battle Server Administratoris a Forum Moderator
 
mikel's Avatar
 
Moderator
Join Date: Jun 2011
Posts: 614
buttralia
Default

...


Oh my goodness that was far too long. Anyway it's been four years since I did CSS and stuff last so I'm pretty rusty and probably got stuff wrong.

EDIT: hurr, looked at the scms afterwards because lol curiosity, and damn it i was right using <p><strong> instead of <h4 class="rmt">. oh well lesson learned.
__________________
pokemon showdown | contributions and corrections | little cup | pm/vm for a gp check

[2013-02-13T17:59:26.637Z] (lobby) Blue Kirby was banned by Joim. (Smog Nominee Award Joim invites you to kindly take a time off of his website, banned user: BlueKirby)
[3:33:40 PM] <~bmelts> inasmuch as this is the crux of the aforementioned set

Last edited by mikel; Nov 19th, 2012 at 9:46:04 AM.
mikel is online now   Reply With Quote
Old Nov 28th, 2012, 3:14:10 AM   #30
ium
is an official Team Rateris a Community Contributoris a Contributor to Smogon Mediais an Artist Alumnus
 
ium's Avatar
 
Join Date: Sep 2012
Posts: 457
Default

Quote:
Originally Posted by Fat Mikel View Post
...


Oh my goodness that was far too long. Anyway it's been four years since I did CSS and stuff last so I'm pretty rusty and probably got stuff wrong.

EDIT: hurr, looked at the scms afterwards because lol curiosity, and damn it i was right using <p><strong> instead of <h4 class="rmt">. oh well lesson learned.
instead of <h2 class="head"></h2>, you could have just done <div style="text-align:center;"><h2></h2></div> just to simplify the css even more since you're not using that class anywhere else except for that one instance.

and i am pretty sure that the <strong> and <p> tags are not necessary because the header tags already handle that for you. just some simple <h2> or whatever <h#> tags would have been good.

also, -webkit-border-radius:6px;-moz-border-radius:6px; is not sufficient. you need to put border-radius:6px; as well.
if you were curious, the actual border radius used in the smog's css is 12px and has some margining.

uh, you also missed a self-closed tag <img src="" alt="" /> on line 223.

i am not sure what <div class="tl"></div><div class="tr"></div> does either. that can go.
edit: <div class="bl"></div><div class="br"></div> is useless too.
__________________
ium is online now   Reply With Quote
Old May 2nd, 2013, 9:31:55 PM   #31
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,685
somewhere could be anywhere
Default

REVIVE FROM THE DEAD ETC.

I don't really know how much interest there is in this but whatever, figured I'd give it a try. If you want to participate, try and do the HTML for this Smog article. It's not that hard, but there's a couple things that might present a bit of a challenge.

RULES:
1. Post your answer in [html][/html] tags enclosed in hide tags. This is to ensure other people don't peak!

2. No using any Smogon-specific shortcuts if you know of any; the point is to see if you know what's needed.

3. You only have to do the article itself; the Smog header / footer, title, and author are not necessary.

4. You don't have to match the answer key exactly, but honestly with this article your work should be the same.

If you're interested in knowing, this article requires HTML and inline CSS.

answer key: DO NOT OPEN UNTIL YOU'VE POSTED
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane
Jukain is online now   Reply With Quote
Old May 12th, 2013, 11:16:46 AM   #32
GCSChris
 
GCSChris's Avatar
 
Join Date: Dec 2012
Posts: 55
NY
Default

Here goes:

...
GCSChris is offline   Reply With Quote
Old May 13th, 2013, 7:25:57 PM   #33
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,685
somewhere could be anywhere
Default

Alright, you did pretty good, but there are some errors.

First of all, though this isn't technically required, I recommend always putting a floating image before the paragraph at hand. For example:
...

That's your code except with the div moved before the paragraph. Speaking of that code, there are some errors in it. After the style=, you need to include quotation marks. These need to be at the beginning and end of the value. Speaking of which, you should always use semicolons after any CSS; what you're doing is inline CSS. Also, your paragraph has a line break. I'm not sure whether that was intentional, but it shouldn't exist. It doesn't change the display, but it makes your code confusing to read. There should also be a space before the closing slash of the <img> tag. With these edits, your code for that section should look like so:
...

This goes for the other image, by the way. In any case, you're still not quite there yet. All images require the alt attribute. After alt=" goes a text replacement for the image should, for whatever reason, someone is unable to see an image. Generally, this should be short but describe the image. For the first image, I'd recommend something along the lines of alt="conkeldurr hunting braviary" and for the second I'd recommend a simple alt="chansey" or alt="chansey juggling eggs". Some people prefer to forgo the alt entirely and just put alt="". I don't really care which you prefer, but the alt attribute always has to be there. Thus:
HTML Code:
<div style="float: right;"><img src="http://www.smogon.com/media/upload/smog/issue26/seasonalfun_hunter.png" alt="conkeldurr hunting braviary" /></div>
If you were to preview your work, you'd notice that the image hugs the text a bit too much. You have to set a left margin in order to do this; specifically one of 10px. If you want a pixel ruler, there are a ton of them in the Chrome store. At this point, because you have two images, it'd be best to set up an internal CSS section. This goes before the HTML even starts I'll assume you know how CSS works for this:
...

There's one more thing I'd like you to be aware of. When linking to places on Smogon, you can use these things called relative paths. With relative paths, you can skip the http://www.smogon.com and go straight to the part after the slash.

You forgot to close the first <p> tag after the "Spring Forward" heading.

Also, you always need to put &amp; in place of & in HTML. That's because & is reserved for character entities, like &mdash; and &eacute;. That means it's X&amp;Y instead of X&Y. This is called escaping.

Hope this helps!
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane
Jukain is online now   Reply With Quote
Old May 14th, 2013, 9:02:48 AM   #34
nyttyn
 
nyttyn's Avatar
 
Join Date: Sep 2010
Posts: 635
Default

ok lets try this out
I am <i>pretty</i> sure I nailed it. MAYBE. WHO KNOWS.

...
__________________
http://i.imgur.com/M88s8ua.gif
nyttyn is offline   Reply With Quote
Old May 14th, 2013, 9:32:50 AM   #35
mikel
hear me roar
is a Battle Server Administratoris a Forum Moderator
 
mikel's Avatar
 
Moderator
Join Date: Jun 2011
Posts: 614
buttralia
Default

Quote:
Originally Posted by Fat nyttyn View Post
ok lets try this out
I am <i>pretty</i> sure I nailed it. MAYBE. WHO KNOWS.

...
i don't have the time to fully dissect this but i've got a few tips:
  • "é" needs to be marked up as "&eacute;"
  • "—" needs to be marked up as "&mdash;"
  • "&" needs to be "&amp;"
  • i believe you meant to float the images to the right. this would be <div style="float:right; "><img src="" alt="" /></div> instead of using text-align. see jukain's post for advice on floating images; he summed it up nicely.
  • for hyperlinks to pages on the smogon.com domain, you can omit the "www.smogon.com" part of the address (e.g. <a href="/forums/member.php?u=94718">).

ps: it's <em> not <i>. <i> is deprecated.
pps: img is a special tag: it doesn't need a closing tag, but rather is self-closed (e.g. <img src="" alt="" /> as opposed to <img src="" alt=""></img>)

edit in response to below: it's not required to mark up em dashes and accented e like that, but it's significantly quicker than trying to paste in the character, and some strict implementations need use of HTML entity, so i personally recommend it.
__________________
pokemon showdown | contributions and corrections | little cup | pm/vm for a gp check

[2013-02-13T17:59:26.637Z] (lobby) Blue Kirby was banned by Joim. (Smog Nominee Award Joim invites you to kindly take a time off of his website, banned user: BlueKirby)
[3:33:40 PM] <~bmelts> inasmuch as this is the crux of the aforementioned set

Last edited by mikel; May 15th, 2013 at 8:11:30 PM.
mikel is online now   Reply With Quote
Old May 14th, 2013, 7:13:15 PM   #36
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,685
somewhere could be anywhere
Default

Nope, mikel is wrong -- you don't need to use &mdash; and &eacute if they're already there in the text. He's right about &amp; though and the relative paths. Also, he's right in the <img> tag. I'll go over your check fast~

mikel is right about the image; your style should be "float: right; margin-left: 10px;" because you're missing the needed space on the left side of the image. I'd create a CSS class called "float-right" and use internal CSS because you'll be using this twice:
code

If you don't know, CSS goes in <head>, though you don't need that for Smogon HTMLing.

Don't forget mikel's tip about <em> over <i>.

You're missing quotation marks after both of the src='s in the <img> tags.

The images should be floated after the <h2>'s, not before.
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane
Jukain is online now   Reply With Quote
Reply Smogon Community > Contributions & Corrections > Fifth Generation

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off



All times are GMT -4. The time now is 10:05:34 PM.