Learning HTML :)

manic111 · 12 Nov 2008 at 13:28

Right, I'm starting to learn HTML and CSS, and feel fairly confident that I understand the very basics at least, mostly thanks to HTMLDog and Lissa Explains.

I've had a look at creating a liquid 2 column layout using CSS, but run into the problem that the colums get larger if I add content to them. From what I have read, the best/only way to solve this is through Javascript, which I don't know the first thing about! Is it possible to solve this problem in another way, and if not can anyone point me the way of a beginners tutorial for Javascript?

Is it worth learning this, or should I just fix the size of my columns instead? Like I said, I'm really only a beginner, so it may be more worth my while to build a full site in CSS first and become happy with that and then move on to Javascript.

Next question, how easy are Content Management Systems to implement? I've been learning HTML on my own, but my cousin is starting a business and wants a (very basic) website that she can update herself, and I said that I'd try to give it a go, for free obviously.

Finally, hosting. I've had a search on these forums, and there seem to be a number of good hosts for high performance usage. However, say I wanted to build a website for personal use, and wouldn't need much memory etc. I would probably go with000WebHost. If I did this though, how would I then go about buying a domain name? Can I buy a domain name off UK2net, for example, and then link it to my 000webhost site?

Sorry if some of these are really nooby questions, but everyone starts somewhere

manic111 · 12 Nov 2008 at 15:14

OK cool, cheers-I haven't actually written the site yet, but will do so sometime soon, sticking to CSS and HTML for now.

I haven't experienced the problem with the expanding columns, but they said on the tutorial that it may well be one. What they say, is that when you set up a column to be a percentage of the screen size (rather than a fixed number of pixels) you run the risk of that column "growing" if you put in text, or a large picture; it will expand to take in the text, possibly even if there is still space in the column and it doesn't need to expand.

Has this helped explain it? If not let me know-I'm trying to find the tutorial now, but made the schoolboy mistake of not bookmarking it!

manic111 · 12 Nov 2008 at 20:42

I'm using full CSS with divs etc. Cheers for that testing link T3los, very helpful! What do you mean by elastic layouts Tripnologist? Does that mean that the size of the columns can only change width to a certain degree? If so, how do you do that (if it's complicated, do you have any links to a tutorial?)?

manic111 · 13 Nov 2008 at 00:33

That's awesome, thanks a lot for the help-probably be back in a few days firing questions at you

manic111 · 13 Nov 2008 at 14:46

Right, I've started trying to code today. Effectively what I want is to make a stylesheet with an all black/grey background, and one white box in the middle where the text etc will go. Above this box will sit a single links bar and one header.

I'm running into a bit of a problem though. When you set a column, say, to be 100% of the height, it makes it 100% of the height of the browser's browsing space, including the space you can scroll into. What I want is to make a page which does not require you to scroll (and, indeed, you cannot scroll on). All that fits on your screen at the time is all you get. Google's home page is like this.

One way in which I could do this would be to fix the number of pixels of each column. However, obviously this would mean that it would only not require scrolling on one specific size screen; all other screens would either have blank space, or need a scroll bar.

Is there a way to make this sort of webpage that will be compatible with all, or at least most, screen sizes? Cheers!

manic111 · 13 Nov 2008 at 16:32

Confused said:
If you do not specify a height, it will just automatically grow as the content does - or if there's not enough content, then the scroll bar will not be required.

But I've merely specified the height and width to 100%, and have not yet filled it with content, so why does it still have a scrollbar?

manic111 · 13 Nov 2008 at 16:50

Confused said:
Margin/padding.

Do you mean that it's because I have too much margin/padding, or that I don't have any?!!

EDIT: Just deleted my margins and it's gone, cheers

manic111 · 14 Nov 2008 at 16:32

Excellent, cheers mate. I've now got the basic CSS layout for my site sorted, with 1 minor issue. I've got a fully black background, but for some reason there are white borders around the edge of the site (see the piccy).

Here is the code. Two things though, I know that it's a bit of a botched job, but only want advice on how to improve it if you can tell me why that would help, and how to do it; I don't just want to be told what to do, but to understand it as well. Second, I know that the site's layout looks a bit cack, but I'm going to be photoshopping a better background as soon as I get the time!

<html>
<head>
<title>webpage!</title>
<style type="text/css">

#body {
margin:0;
padding:0;
width:100%;
border:0;
background:#000000;
font-size:100%;
height:100%;
}

a {
color:#3399ff;
}

a:hover {
color:#003399
text-decoration:underline;
}

p {
margin:15px 15px 15px 15px;
padding:0;
font-family:"times new roman";
font-size: 12pt;
color:#000000;

}

h1 {
margin:0;
padding:0;
background:#deebeb;
font-family:"times new roman";
font-size: 15pt;
color:#000000;
font-weight: bold;
text-align:center;
}

h2 {
font-family:"times new roman";
font-size: 26pt;
color: #ffffff;
}

#main {
position:absolute;
top:20%;
left:20%;
width:60%;
height:60%;
background:#ffffff;
}

#header {
position:absolute;
top:10px;
left:10px;
width:250px;
height:50px;
background:#000000;
}

</style>
</head>

<div id="body">
<div id="main">

<p> hello how are you <br> very weell </p>

</div>

<div id="header">

<h2>dddddddd</h2>

</div>

</html>

manic111 · 15 Nov 2008 at 01:05

t31os said:
(snip)

Typically it's not really a good idea to position divs absolutely, you can always manage the same things using a well thought out CSS structure.

Considering you're learning still (as am i 'always') you've not done a terrible job.

I personally tend to work on the site look before the coding part, as your design will (in my experience) dictate how the code should be used or worked. However that said, sometimes a design may change to better serve the coding side of things..... though me personally i get the graphical work done first, then come back it later if the design is becoming too 'code heavy'.

Either way post if you get stuck....

Firstly, thanks, that's awesome and really helpful, just trying to look through and see what you've done, and if there's anything I don't get!

I assume that all you have done which makes my CSS look tidier is to put all of the commands relating to the same thing on one line, and to make it so that I only need to type the same setting (eg the font-family one) once, rather than each time I want to use Times New Roman?

What does "div>h2" mean? Not seen that before!

Something that I'm really struggling with is putting a picture in the top right of the white section. I've managed to do it using

<body>
<div id="body">
<div id="main">

<div align="right"><img src="003.jpg" width="250" height="350" alt="me!">

<p>Well hello! <br><br> !</p>

</div>
</div>

However, this aligns the text to the right as well. Ideally, I would like the picture to resize as the browser window does, but I have no clue how to do that! The easiest way that I could think of was to make the picture the background image of a div, and make that div flexible, but this just served to confuse me; for some reason I couldn't work out how to make the picture the background image of the div (the best I came was managing to get the bottom corner of the picture, but not the rest!). Even having done this, I couldn't work out how to place the div in the right place without assigning it a certain fixed area using pixels, but obviously this wouldn't help me in making it liquid!

Finally, can you suggest a way of getting my "main" div (ie the white box) into the centre of the screen without positioning it absolutely? It was the best way I could work out, as there is no "float:centre" command! Or is this where the "clear" command will help me? If I set up a div along the top floated left, then for the #main div use clear:left. Would that then place it underneath the top div? How would I centre it horizontally after doing that?

Thanks again to everyone that's helping me by the way

EDIT: Oh, also, can you float things vertically as well as horizontally? Could you tell something to "float:right" and to "float:up" at the same time (is there even a "float:up" command)? If not, how do you choose where divs are positioned vertically?

Lastly (I hope!) can someone explain the difference between IDs and classes? From what I've read, it seems that IDs are unique; that each ID div can only be used once-there can only be one "#main" box on a page, for instance. Classes can be used over and over, so you could have 5 ".main" boxes on a page. Is this right? If so, how do you distinguish between which one of those 5 ".main" boxes you are working with?

manic111 · 15 Nov 2008 at 12:31

Wow, thank you very much for the help mate, particularly at half 4 in the morning!!! I'm gonna have a few goes at it and see where it gets me! Thanks again

manic111 · 18 Nov 2008 at 16:03

Right, I'm currently trying to work out how to rotate a series of 5 images on a page in a random sequence. I've found this Javascript code to do it.

<script language="Javascript">

</script>

The problem is that I know nothing about Javascript (sort of figured I would try to become competent with HTML and CSS before learning anything else). Is there a way to do this using HTML? If not, how do you choose where on your page this Javascript code positions your picture? Or would you just place it inside a div like you would if you were putting one picture there?

manic111 · 18 Nov 2008 at 17:15

Ok cool. Effectively I have a logo with 5 different "taglines", each saved as a different JPEG image, and want a different one to display each time the page is loaded.

manic111 · 18 Nov 2008 at 18:58

I've just spent the last 45 mins fiddling with the Javascript one, and finally have it working-would show you, but I haven't sorted my hosting out yet. I may play around with the PHP script tomorrow, but at the moment I'm happy enough with the way it's working! Site's going well too, so cheers for the help. Hopefully I'll be done with it in a few days, depending on how much time I give it, so you can see the results of your hard work

manic111 · 20 Nov 2008 at 14:55

Right, I'm getting there! Two problems at the moment. Firstly, how do I get my paragraph text in my "main" div to be centred vertically as well as horizontally? I've tried a few things and can't work it out.

Secondly (and this is really bugging me) when I shrink my browser window horizontally, for some reason my "main" div ends up at the bottom right hand corner of the screen, with a long way to scroll down to it. I assume that this is because the other 4 divs are floating above it, but can't work out why this would happen. If anything, I want the "left" and "right" divs to shrink before the "main" div shrinks at all. As it is though, they don't seem to shrink at all, while my "main" div shrinks then vanishes!

Here is the code so far. Cheers again for the help!

Code:

<html>
<head>
<title>HomePage</title>
<style type="text/css">

body { margin:0; padding:0; background-color:#000000; width:100%; height:100%; 
font size:em; max-height:1200px; max-width:1900px; min-height:480px; min-width:600px }

p,h1,h2,body,a { font-family:"times new roman"; margin: 0; }

a { color:#3399ff; text-weight:bold; }

a:hover { color:#003399; text-decoration:underline; }

p { font-size:1.2em; color: #000000; padding: 15px; text-align: center; }

h1 { font-size:1.9em; color: #000000; text-align: center; padding: 15px; }

h2 { font-size:2.6em; color: #ffffff; padding:0; text-align:left; margin-left:15px;
 margin-top:15px; }

h3 { font-size:2.4em; color: #ffffff; padding:0; }

#header { position: relative; float: left; width: 60%; height: 15%; color: #000000; min-width:350px;
 min-height:110px; max-height:200px; margin-top:15px; }

#left { position: relative; float: left; width: 20%; height: 100%; color: #000000; max-height:900px; 
min-width: 20px; }

#right { position: relative; float: right; width: 20%; height: 100%; color: #000000; max-height:900px;
min-width: 20px; }

#main { position: relative; float:left; width: 60%; height: 75%; 
background-color: #ffffff; min-width: 650px; min-height: 450px; max-height: 1200px; max-width: 1900px}

#footer { position: relative; clear:left; width:60%; height:10% color: #000000; min-width:350px; }

.align-right { float:right; margin: 0 0 0 0;}

.header { vertical-align:bottom; margin:0; position:absolute; bottom:0px; float:right; right: 0px; }

.align-left { float:left; margin: 0 0 0 0; position:relative; }

.bottom { bottom:0; left:0; }

</style>
</head>

<body>
<div id="right">
</div>
<div id="left">
</div>
<div id="header">


<script language="Javascript">
<!--
 var imlocation = "images/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(6)
 image[0] = 'brightsmall.jpg'
 image[1] = 'colourfulsmall.jpg'
 image[2] = 'focussedsmall.jpg'
 image[3] = 'not black and whitesmall.jpg'
 image[4] = 'yellow mellowsmall.jpg'
 image[5] = 'font.jpg'
 var rand = 60/image.length
 function randomimage() {
 	currentdate = new Date()
 	image_number = currentdate.getSeconds()
 	image_number = Math.floor(image_number/rand)
 	return(image[image_number])
 }
 document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>


<class="header">
</div>

<div id="main">

<img src="images/0032.jpg" alt="My Image Description" class="align-right" width=250 height=350 />
<img src="images/aboutmelink.jpg" alt="Link To About Me" class="align-left" width=100 height=60 />
<img src="images/cvlink.jpg" alt="Link To C.V." class="align-left" width=100 height=60 />
<img src="images/bloglink.jpg" alt="Link To Blog" class="align-left" width=100 height=60 />
<img src="images/contactlink.jpg" alt="Link To Contact" class="align-left" width=100 height=60 />
<img src="images/aboutmelinkr.jpg" alt="About Me" class="header" width=100 height=60 />

<br><br><br><br>

<p> hellodasgasgasdg <br> safgasdfgasggh <br> asdgastgsaghas <br> bargasdfgsgt </p>

</div>

<div id="footer">
</div>

</body>
</html>

manic111 · 20 Nov 2008 at 19:40

Awesome, cheers mate. I've got the other issue sorted, at least in part, by having a bit more of a fiddle. I'll have a gander at the PHP stuff later, as I can't seem to upload the Javascript script properly anyway!

Edit: I'm also having another problem; I have 4 images which serve as links along the top of my "main" div. I want these images to sit next to each other, with no space in between them. In Opera, Chrome and Firefox, they do this. However, in IE they have little gaps in between, which is both frustrating and looks pretty poor. Is there any way to iron this out, or is it just an IE bug that I have to live with? Have a look at my other thread (here) for a link to the site, and the latest code.

Thanks a lot again, you've been fantastic!

manic111 · 20 Nov 2008 at 23:28

t31os said:
Try this in your CSS.

img {border:0;padding:0;margin:0;}

IE will assume default values for some tags, where other browsers won't. I will not assume that will fix your problem, but each browser does treat code differently, it's something you get use to in time.

Nope, still have those annoying white edges to pictures in IE...Microsoft, eh?!!

The website is back up now, I assume that they took it down while it was checked over as I only signed up for the hosting today.

Cheers again

manic111 · 21 Nov 2008 at 10:49

Yep, I'd rather do it myself to be honest mate. Want to be able to say "I did that" when I'm done, and have the knowledge that goes with it! I'm away all weekend, but when I get back I'll read up on doing the whole box thing. One thing that I've already struggled with is how to put divs inside divs. (I assume that this is what you do when making the boxes with text in them-you just make a div of that size and background colour?) It just doesn't seem to position wheere I want it-either seems to get lost "behind" the main div, or simply not be anywhere!

Thanks for the help again, I'll let you know how it goes.