As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Recommend any guides for learning HTML, CSS, etc?

OakeyOakey UKRegistered User regular
edited February 2012 in Help / Advice Forum
Can anyone recommend any guides / tutorials for HTML, CSS, etc as I'm trying to put a website together and it's giving me headaches. I guess maybe it's because I'm a designer who has been using Photoshop / Illustrator for the last decade and I keep wanting to do everything as I would in those apps and get frustrated when I can't seem to do something that should be a piece of cake.

It's not a complicated site by any means, it just needs to replace an existing site that looks a bit Mickey Mouse and contain a few pages about what we do, offer, etc. Sure, I could get someone else to do the job but I feel it's about time I learnt how to do this myself.

As an example of what's frustrating me I'll use our very own PA as an example;

layoutmz.jpg

I can sort out a background for my page, I understand how to insert and align text, I can even do the links like at the top with buttons created in Photoshop, etc. What I can't get my head around is how I create those boxes that the text appears in. The PA site for example seem to be text in a box, within a box, on top of the background. How is this done? Is this to do with style sheets? Is it above and beyond simple HTML? Is it to do with containers inside containers and if so, how do I do this? Currently my text just sits over the background image and this makes it difficult to read.

I know how to do it in Photoshop, I'd simply create a few boxes and type the text over them, simples. And that's the problem, I keep wanting to apply this logic to web design.

Any advice much appreciated.

Oakey on

Posts

  • NightslyrNightslyr Registered User regular
    Modern web design uses HTML for structure, CSS for formatting (including element positioning). In PA's case, the content boxes are likely simple <div> elements that have a certain amount of padding (which is what keeps the text from hitting the edges of the box), and each paragraph is contained within a <p> (you can verify by right-clicking the page and selecting "View Source" from the context menu that pops up).

    For learning tips, stay away from w3schools.com (read my signature for why), and instead go to: https://developer.mozilla.org/en-US/learn/

    Beyond that, just remember to never use tables for site layout, and to learn the Box Model (Google "CSS Box Model").

    Hope this helps!

  • OakeyOakey UKRegistered User regular
    edited September 2012
    Thanks, all taken on board.

    This is our current website, as produced by a 'professional';

    This was my very first attempt using Photoshop and then I threw it all together in Kompozer;

    A friend tells me the code is terrible which is understandable.

    After seeing how the initial attempt all worked and what mistakes were made (particularly with the background) this is my revised attempt;



    I'm fairly confident about putting the majority of it together, there will be a facebook comments box in the left lilac box and an RSS feed in the right one, I've already tested these previously on the first attempt so I understand how to get them on the page. The only thing stumping me is how I will create the dark blue and the lilac boxes that all of this sits on. You say the content boxes are simple <div> elements, does this mean the colour of these can be changed?

    Edited to add: aha, yes, yes they can, I have just worked it out! They can't have rounded corners I'm guessing though? Now, can I put a <div> on top of another <div>

    Oakey on
  • NightslyrNightslyr Registered User regular
    edited February 2012
    <div>s can be placed within other <div>s, so you can have something like:
    <div id="content">
       <div id="left-column">
          <div class="blog-post">
             <p>blah</p>
          </div>
       </div>
    </div>
    

    You can layer <div>s by using absolute positioning and playing with their z-index, but I don't recommend it, as it's incredibly hard to make things look right in all browsers that way.

    For a layout that will work universally, you'll want to keep it 960px wide. I say this because the second link you shared has real bad h-scroll.

    Nightslyr on
  • Jimmy KingJimmy King Registered User regular
    Oakey wrote:
    Edited to add: aha, yes, yes they can, I have just worked it out! They can't have rounded corners I'm guessing though? Now, can I put a <div> on top of another <div>
    It depends. With css3 you can round the corners with the border-radius property, but it's not supported by all browsers. For those other browsers or older css, you do tedious crap using images for your borders so that your corners can be rounded in the image.

  • OakeyOakey UKRegistered User regular
    Nightslyr wrote:
    <div>s can be placed within other <div>s, so you can have something like:
    <div id="content">
       <div id="left-column">
          <div class="blog-post">
             <p>blah</p>
          </div>
       </div>
    </div>
    

    You can layer <div>s by using absolute positioning and playing with their z-index, but I don't recommend it, as it's incredibly hard to make things look right in all browsers that way.

    For a layout that will work universally, you'll want to keep it 960px wide. I say this because the second link you shared has real bad h-scroll.

    I know! That was my first issue I've yet to resolve. I think it's down to where I positioned everything in Kompozer. The other thing I want to address is how the centre content adjusts as the browser window is resized (until about 1000px at which point you get your H-Scroll bar) however I think this is covered in a similar thread here on Page 2.

  • OakeyOakey UKRegistered User regular
    Well, it's coming along. I tried to do rounded corners on the boxes by adding a png to the underneath but try as hard as I could I could not get the damned thing to align properly with the box. It always seemed to be off at one end by 1-2 pixelsOnly thing I'm struggling with now is getting it to align to the centre automatically and then adjusting with the browser resize as per above. Oh, and the RSS feed to the right of the Facebook feed.

  • NightslyrNightslyr Registered User regular
    Center aligning a block element is easy.

    HTML
    <div id="content">
       Blah blah bah
    </div>
    

    CSS
    #content {
       width: 960px;
       border: 1px solid black;
       margin: 0 auto;
    }
    

  • MelksterMelkster Registered User regular
    You might just want to use some pre built CSS templates.

    Bootstrap is pretty good.

    http://twitter.github.com/bootstrap/

    Also, imo, CSS is pretty annoying to work with. I just use a template for everything. There are tons of them out there, but I just use bootstrap.

  • OakeyOakey UKRegistered User regular
    edited February 2016
    Right, I think I'm beginning to understand why this is giving me headaches. Simply because I'm trying to cheese it by doing everything in HTML when I should doing the styling in CSS?. Sure, I might sort of have the layout I desire but it's not really optimal. If I'm understanding you all correctly, what I should be doing is something along these lines, (as an example I'll use the main body of text on the blue box as seen here;

    (as per advice above)

    HTML

    <div id="main text">
    a successful.. blah blah blah blah
    </div>

    this is my content that I want to appear on the page and then, to get it to appear on the blue box I'd go in to my styles.css file and add;

    #main text {
    width: 960px;
    height: 500px
    border: 1px solid white;
    margin: 0 auto;
    background: rgb(2, 26, 63)
    }

    and this will put the text from the 'main text' <div> in the HTML file on a blue box 960px W x 500px H with a 1pt white border? and the 'margin:0 auto' will centre everything automatically in the browser?

    Also, if I'm doing it this way and not using a WYSIWYG editor, how can I test it's all working without putting it all on the server?

    Oakey on
  • wmelonwmelon Registered User regular
    That is exactly correct. Though you will have to remember that borders are outside of the width and height you set. So technically you'll have a box that 962px by 502px.

    And the margin will automatically center the box horizontally on the screen but not vertically. It will be 0 pixels from the top of whatever contains it.

    If you want to test this locally you could create a css file and have a link to that file in your html file, which is what most people will recommend. You can also use the style tag to create an inline block to contain the styles you're going to use, but I don't recommend it.

  • OakeyOakey UKRegistered User regular
    Yep, I'm slowly figuring it out, I have a test HTML file in a folder with a link in it to the styles.css file and so far I manage to have a container above the background with the text inside.

    The next thing to work out is how to have two boxes alongside each other with seperate text in like the 'facebook comments' and 'rss feed' boxes in the sample screenshot above. I can work out how to create them seperately but not how to position them side by side.

  • wmelonwmelon Registered User regular
    edited February 2012
    you can either use the display: inline-block option or learn how to use the css float options.

    float would be the more compatible way to make it happen, but then you can also run into problems with it if you're not clearing out your floats properly.

    For example you could do
    <div class="floatbox">box1</div>
    <div class="floatbox">box2</div>
    <div class="clearfloat">&nbsp;</div>
    

    * the non breaking space is important for IE6 compatibility

    with your css set like this
    .floatbox { display:block; float: left; width: 460px; height:200px; margin-right:10px; background-color:white; }
    .clearfloat { clear:both; visibility:hidden; font-size: 0; display:block; }
    

    wmelon on
  • OakeyOakey UKRegistered User regular
    Thanks, I'll give that a try

  • NightslyrNightslyr Registered User regular
    I wouldn't worry about making things look good in IE 6. Even Microsoft itself is trying to kill the damn thing. It's not 2001 any more.

    What you should do, before coding a site, is get yourself a CSS reset file. Each browser's default handling of HTML elements is slightly different from the others. A CSS reset zeroes all of their formatting, allowing the developer to explicitly set all of their attributes as they see fit. Google "CSS reset" to find one.

  • DirtyDirtyVagrantDirtyDirtyVagrant Registered User regular
    Melkster wrote:
    You might just want to use some pre built CSS templates.

    Bootstrap is pretty good.

    http://twitter.github.com/bootstrap/

    Also, imo, CSS is pretty annoying to work with. I just use a template for everything. There are tons of them out there, but I just use bootstrap.

    Alright. I've been looking at this, and I feel dumb. I can't figure out how to use it at all, and I can't seem to find any instructions anywhere.

  • MelksterMelkster Registered User regular
    edited February 2012
    Melkster wrote:
    You might just want to use some pre built CSS templates.

    Bootstrap is pretty good.

    http://twitter.github.com/bootstrap/

    Also, imo, CSS is pretty annoying to work with. I just use a template for everything. There are tons of them out there, but I just use bootstrap.

    Alright. I've been looking at this, and I feel dumb. I can't figure out how to use it at all, and I can't seem to find any instructions anywhere.

    What about it don't you understand, specifically?

    Edit: Actually, I'll say a little more about what Bootstrap is supposed to be and how to use it.

    Okay. So. Almost every web developer I've met absolutely hates CSS. As I'm sure you're realizing, it's very difficult to bend to your will. It's unwieldy, hard to maintain, and just a pain.

    But not everyone feels that way. Some people really love CSS, and do a great job of making CSS files that are very easy to use and look great.

    So, those people who love CSS have made CSS files that the rest of the world can use. You don't have to write them yourself! All you need to do is download the CSS file that you want to use, and you can find Bootstrap's here. Then, you just include the CSS file at the top of your HTML page like any other external CSS file. (You know about the difference between external style sheets and internal style sheets, right?)

    Once you have included the CSS file, it's pretty easy to use. If you want to make a link that looks like a button, all you have to do is is say
    <a href="#" class="button">...</a>
    
    If you want to make a fancy striped table, all you have to say is
    <table class="table table-striped">...</table>
    

    You can find a list of all the classes you can use here: http://twitter.github.com/bootstrap/base-css.html

    Now that I've said that... What don't you understand?

    Melkster on
  • DirtyDirtyVagrantDirtyDirtyVagrant Registered User regular
    I don't understand anything about it. At all. I don't know the difference between external and internal, and I'm just starting out with HTML, so I haven't got the faintest clue how anything works.

    When I saw it at first, I thought it was some kind of program that you'd use (execute) to pick and choose various features for your site and customize them, and then the program would spit out the requisite code so you could just plug it into your source file. That doesn't seem to be the case.

  • MelksterMelkster Registered User regular
    edited February 2012
    Oh. Uh. Right then. Bootstrap is definitely for those who have a passing familiarity with HTML and CSS. You don't need to be a pro, but you do need to know the basics.

    I was more directing my recommendation to the OP, who seems to understand CSS and HTML enough to get some things to work.

    If you want to get started on the basics, start here: http://code.google.com/edu/submissions/html-css-javascript/

    HTML is incredibly easy to understand on a basic level. All it is is markup -- like the markup that's used to make something bold in a Penny Arcade forum post. All it does is describe the nature of a document -- where the header is, where a paragraph is, where a link is, etc.

    CSS is slightly more complex, and the video should do a good job of introducing it.

    Once you have worked through some CSS on your own, and understand the following concepts...

    * The difference between an external style sheet, internal style sheet, and in-line styling, including which is prioritized
    * The nature of a class, and how it differs from an ID
    * What a selector is
    * How to make a given class appear with a different text color, or different border color using an external style sheet
    * What inheritance is, and how to use it to your advantage

    ... then return to Bootstrap and you should understand how to use it.

    Melkster on
  • OakeyOakey UKRegistered User regular
    edited September 2012
    Guys, it is coming along although I got my brother to do the CSS files.



    How do we get the links across the top to centre?

    Current code:

    #navigation { height:68px; width:850px; background-color: #021a3f;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    -moz-box-shadow: 0 0 30px 5px #02193b;
    -webkit-box-shadow: 0 0 30px 5px #02193b;

    }

    #navigation ul { margin: 0px 0px 0px 0px;
    width: 100%
    align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center; padding:10px 0 0 95px;}

    #navigation li { list-style-image:none; list-style:none; margin:0; padding:10px; z-index: 999;
    text-transform:uppercase; text-shadow: 2px 2px 2px #000;}

    Oakey on
  • OakeyOakey UKRegistered User regular
    Nevermind, sorted it.

Sign In or Register to comment.