The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
Recommend any guides for learning HTML, CSS, etc?
Oakey
UKRegistered User regular
UKRegistered User regular
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;
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.
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;
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
0
Posts
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!
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>
<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.
HTML
CSS
#content { width: 960px; border: 1px solid black; margin: 0 auto; }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.
(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?
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.
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.
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
* 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; }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.
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 If you want to make a fancy striped table, all you have to say is
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?
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.
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.
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;}