| Basic & Advanced HTML/CSS Tutorial + Help Thread |
|
Forum Index - Hobbies - Computers & Technology - Basic & Advanced HTML/CSS Tutorial + Help Thread |
|
|
|
|
| Posted on 2010-05-17 05:35:44 PM |
Link | Quote |
|
So.....I don't need any help with editing the HTML any more. I need help with creating a website. It's going to be an SM64 hacking site. But, how
do I enable MEMBERS to join and post and sumbit Super Mario 64 hacks?
Also, I need help with making a banner. AMMMMMMEEEN!(Just jokin!)
|
|
| Posted on 2010-05-17 06:22:23 PM |
Link | Quote |
|
Originally posted by SMLink64So.....I don't need any help with editing the HTML any more. I need help with creating a website. It's going to be an SM64 hacking site. But, how
do I enable MEMBERS to join and post and sumbit Super Mario 64 hacks?
Also, I need help with making a banner. AMMMMMMEEEN!(Just jokin!)
You need forum software. I personally would recommend MyBB.
|
|
| Posted on 2010-05-18 02:52:14 PM |
Link | Quote |
|
|
Well, I got MyBB. But, how do I run it?
|
|
| Posted on 2010-06-03 09:29:42 AM |
Link | Quote |
|
|
Okay, now I've never used myBB personally, but I can tell you that you're going to need a server with PHP. Which web host are you using? Find out if they offer PHP, because you'll need it. Secondly, I'm not sure if it's required by MyBB, but you may need some type of database (usually MySQL or SQLite will work, and they're the two most common types that I've seen). Make sure your host has these and you should be fine to install it. Installation instructions are probably in a readme that came with the script.
|
|
| Posted on 2010-09-06 12:28:01 PM |
Link | Quote |
|
|
Great tutorial,Dot. I found this tutorial really helpful. I give it a 10/10
|
|
| Posted on 2012-02-26 01:08:23 PM |
Link | Quote |
|
|
Thanks for the help. C:
|
|
| Posted on 2012-08-10 03:22:56 AM |
Link | Quote |
|
|
The one is best way to learn the all HTML tages.
|
|
| Posted on 2012-12-07 11:07:36 PM |
Link | Quote |
|
seriously what is wrong with this table
Link to generator
~~~
EDIT: NEVERMIND. I was just missing quotation marks for urls.
|
| Last edited on 2012-12-07 11:10:56 PM by Punk Sarcophagus. |
|
| Posted on 2013-04-18 02:55:34 PM |
Link | Quote |
|
Hi.
I want to utilize the usage of fonts (in my Battle Royale story). I went to a site that generated files that I would need to use custom fonts online.
And I don't know what to do with them.
Here's a link to my dropbox folder for it:
https://www.dropbox.com/sh/u6u36rz6ibw6i0z/9VYA5sO9tV/Fonts
I need help!
|
|
| Posted on 2013-04-24 07:00:16 PM |
Link | Quote |
|
|
I don't really understand how to make style sheets, Do i just change a url's ending tag and replace with .css? Help me...
|
|
| Posted on 2013-04-24 07:29:20 PM |
Link | Quote |
|
Hm?
To make CSS stylesheets, you generally use Notepad (if you use a domain, you can write it directly there generally, but assume you haven't one) and then save the file in .css format. To make things easier, I set up my comp to open .css files with Notepad by default.
Once the .css file is uploaded, you have to apply it on your layout (note that it will affect the entire page so name the classes uniquely). For that, <style> tags are used. On that case, this would go on your header:
<style type="text/css">@import url('http://tu.sitio.com.mx/file.css');</style>
To use each class, you use <div> tags, but instead of having the casual <div style="background: #FFF; font-size: 69pt"> you'd have <div class="akireyano"> where "akireyano" (with the quotes) is the name of your class.
Though before making stilesheets you'd have to learn CSS syntax first, but before CSS you're highly reccomended to know HTML (at least <div> setups). This site is one of the most referenced ones, though I can't tell for experience (I learnt HTML and CSS by looking at others' codes :P).
|
|
| Posted on 2013-06-17 12:40:57 AM |
Link | Quote |
|
(I really hope this isn't aginst the rules, but...)
Hi there~
I've been surfing the forums and found some people with Drop-down menus- what I'm wondering is how I can get one to work with SMWC, No matter what I can't find one that works (With links at least) [It can have a simple layout, I just kinda want a dropdown menu for my links] 
|
|
| Posted on 2013-06-17 08:01:45 AM |
Link | Quote |
|
That requires somewhat advanced CSS (transitions). It depends on how styled you want it to be, but here goes a quite simple base:
~
The current menu has 5 lines counting with the title, but you can have more or less lines in it by tweaking the "height: 80px;" value on the .nngbox:hover class, on the CSS that I put into the <style> tags. If you're using the default font, each 16px is a line (thus 16px times 5, 80px).
Feel free to try playing around with the code. If you want anything added or deleted you can't figure out, feel free to poke me. I haven't bothered styling it up since I don't know what you'd want.
And remember: the main sig (or this piece of text) has to have a number of lines equal or bigger than the menu to its right. You don't want it extending to the below poster.
~
Quote this post and copy the code between the ~ things, and feel free to paste it on your sig and replace the text and the links with relevant stuff.
(Apologies if I did anything wrong, I've only been messing with transitions lately.)
|
| Last edited on 2013-06-17 07:16:51 PM by Koopster. |
|
| Posted on 2013-06-17 11:32:53 AM |
Link | Quote |
|
Yea basically what Koopster said (although I went for a little more complex, stable setup with mine), however I don't actually recommend using a menu like this if you want your links to be seen.
I'm using the menu thing myself because the links I have there are really not important for people to see in my every post, but rather so people check it out once, think "hey maybe I should check out that IRC thing sometime!" (or don't) and then they can happily ignore it forever.
It's really not a good idea for stuff like hack threads, that you want people to actively visit.
|
|
| Posted on 2013-06-17 06:19:44 PM |
Link | Quote |
|
Originally posted by KoopsterThat requires somewhat advanced CSS (transitions). It depends on how styled you want it to be, but here goes a quite simple base: [...]
Code.nngbox {
/* ... */
height: 16px; float: right; overflow: hidden;
transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
}
.nngbox:hover { height: 80px; }
[...] (Apologies if I did anything wrong, I've only been messing with transitions lately.)
Super important first thing to note. Koopster, always make sure that the unprefixed declaration of the property comes last. (I.e. the transition property here should come after the -[prefix]-transition ones.) Some browsers might have leftover or variant code for the prefixed versions after they implement the standard version, but since CSS rules overwrite previously declared ones, the safest thing you can do is to put the most pure property at the end and all the fallbacks before it. (Or just get CSSPrefixer to do it for you.)
That said, yours is a nice solution, but it requires you to know in advance what the heights before and after the transition should be. To remove the need for the former would require you to split up the "title" and the "extending" parts, so that the extending <div> has a height of 0 when in the retracted state. To deal with the latter, I'd use max-height instead of just height, and had the :hover pseudoelement set max-height to none, or something really huge. (These are both sorta hackish, and you'll see why in a second.) I've done this below:
As you should be able to see, the 1000px max-height box has a seemingly odd delay on the return. That's are because the whole transition needs to play, even though you can't see the effects of an increasing max-height when the computed height is already less than that. The delay is even more pronounced with larger values, though smaller values risk not revealing all the elements if you have too many. 150px should be safe for most lists in layouts while still being small, though your best bet would be a very short transition-duration.
Using max-height: none; doesn't fix this limitation, however, as you can clearly see: that's because you can consider none as pretty much infinite, so all pacing in transitions, besides straight delays, are useless.
The reason I mention all this is to expose some of the limitations of the underlying system, and also because you should always strive to make code that is write-once-and-forget.
|
|
| Posted on 2013-06-17 07:16:47 PM |
Link | Quote |
|
Oh, thanks for letting me know about the right order of the declarations. Does it count for gradients too? If so, I got some layouts to fix...
I'll take notes about the hovering method, it can be useful if I'm going to code a layout to somebody else with a hovering box while I don't know how many lines this person needs in it; however, since the code I posted here is open for NEX to edit and that way seems to work more acurrately, I'm going to leave it as it is for now.
Thanks for posting!
|
|
| Posted on 2013-06-17 09:01:00 PM |
Link | Quote |
|
The ordering practice counts for all properties and property values that have prefixes, so yes, gradients. (Note that this excludes the ::selection/::-moz-selection selectors, but why that is is a whole 'nother ball game. Messing with selections is overrated, anyway.)
...The only non-prefixed property I know of that has a canonical order but doesn't use prefixes is the src property of @font-face declarations, because of varying font standards. I keep forgetting the order, but it's something like: if you're supporting IE (EOT fiietype), that one goes up top, then your alternatives (like SVG and the one that starts with W), and then the OTF and/or TTF files.
|
|
| Posted on 2013-06-17 09:28:34 PM |
Link | Quote |
|
|
woff
|
|
| Posted on 2013-06-18 11:14:46 AM |
Link | Quote |
|
So I'm trying to help a Co-worker of mine create a character sheet based on a random number.
Pretty much how it should work is you can enter the highest value into the number generator, it rolls a number and then populates a table based off an array which is based off the random number.I've made the random number generator portion but I can't for the life of me figure out how to make an array pull a string based on the random varible if that makes sense.
|
|
|
|
|
|
|
Forum Index - Hobbies - Computers & Technology - Basic & Advanced HTML/CSS Tutorial + Help Thread |
