HTML Newb Help

lolage · 6 Nov 2007 at 20:18

Before i made a post about frontpage. I decided to scrap that and start a site using notepad. :rolleyes:

At the moment i am pleased with what i have but it looks okay on my screen but on the computer downstairs the allignments are all screwed.

Any ideas how i can get around this? I tried to fix it by aligning them both to center but moving the button to the right but it still isnt alligned on the computer downstairs with differnt resoloutions.

Any ideas?

LazyManc · 6 Nov 2007 at 22:53

Just a few tips mate:

Screenshots are great for viewing layout but cut and paste your html into your post so that it's easier to read and surround it with [ code ] blocks so that it gets formatted as a monospaced font.

e.g.

Code:

<html>
...etc

Also, download a free text editor like notepad++ / crimson editor / EditPad as it will colour the html so that it's easier to read (it's called syntax highlighting). Notepad is pretty poor for writing code with.

If you make your site completely out of big sliced images it may weigh in pretty heavy and take a while to load.

Don't use file paths for the image sources, they won't work if you upload it to some external hosting. Use a relative path instead, i.e. if your html file is in /myFolder/ and your images are in /myFolder/images/ then use

Code:

<img src="images/imageName.xyz" />

- try not to use spaces if possible either as they look ugly in urls (they get changed to "%20").

Lastly, it's best to avoid the <center> tag as it's presentation, not content, and it's best to keep that out of the html when possible. It's not actually a valid element if you plan on writing xhtml so it's best to get into good habits early on.

Try doing a few tutorials at www.htmldog.com - it's fairly easy to pick stuff up in a couple of hours.

RobH · 6 Nov 2007 at 23:51

You will also need tables to layout your page in any sort of logical way.

Tripnologist · 7 Nov 2007 at 00:20

I would certainly not recommend tables. They should really only be used to hold tabular data. Learn CSS. It's really easy to learn and use although it takes some time to master.

RandomTom · 7 Nov 2007 at 00:33

RobH said:
You will also need tables to layout your page in any sort of logical way.

That's wrong, he's not displaying tables.

The reason why they look differently is because you've set a certain margin from the right which is resolution dependant. If you create a "<div id="container"> straight after the body and closes just before the end in the css you can style that to be centered and set the certain width, this means that the others will fit together well. Essentially you've not come up with the best way to do the navigation either, all the elements should be under the 'side' div which should really be a 'class' element aka <div class="side">

Code:

<html>
<body>
	<div id="container">
		<div id="header"><img src=".jpg" alt="header" /></div>
		<div id="side"><img src=".jpg" alt="home" /></div>
	</div>
</body>
</html>

with the css something like this, sorry can't check though atm:

Code:

#container {
	margin: 0 auto;
	padding: 0;
	width: 800px;
}

#header {
	margin: 0 auto;
	padding: 0;
}

#side {
	margin: 0 0;
	padding: 0;
}

www.htmldog.com have a read of the tutorials please

Inquisitor · 7 Nov 2007 at 01:30

RobH said:
You will also need tables to layout your page in any sort of logical way.

I hope that's not serious

RobH · 7 Nov 2007 at 01:41

Inquisitor said:
I hope that's not serious

I could have suggested frames

CSS is the best if you can use it properly, I've seen too many sites that only display correctly in one browser and not another, although this is due to no one agreeing on the standards.

lolage · 7 Nov 2007 at 08:07

Before reading the replys i got here i got advised to put the images into a table.

Code:

<html>
<body>
<center>
<table width="800px" cellpadding="none" cellspacing="none">
<tr>
<td colspan="2"><img src="images\banner.png"/></td>
</tr>
<tr>
<td width="200px"><img src="images\button_home.png"/>
</td>
</tr>
<td width="200px"><img src="images\button_home.png"/>
</td>
<td width="600px">TEXT HERE</td>
</tr>
<tr>
<td colspan="2">Copyright 2007 - Ben Davies</td>
</tr>
</table>
</center>
</body>
</html>

This look alright?

LazyManc · 7 Nov 2007 at 08:35

lolage said:

Before reading the replys i got here i got advised to put the images into a table.

Code:

<html>
<body>
<center>
<table width="800px" cellpadding="none" cellspacing="none">
<tr>
<td colspan="2"><img src="images\banner.png"/></td>
</tr>
<tr>
<td width="200px"><img src="images\button_home.png"/>
</td>
</tr>
<td width="200px"><img src="images\button_home.png"/>
</td>
<td width="600px">TEXT HERE</td>
</tr>
<tr>
<td colspan="2">Copyright 2007 - Ben Davies</td>
</tr>
</table>
</center>
</body>
</html>

This look alright?

Oh sweet baby jesus and the orphans!

Inquisitor · 7 Nov 2007 at 10:16

lolage said:

Before reading the replys i got here i got advised to put the images into a table.

Code:

<html>
<body>
<center>
<table width="800px" cellpadding="none" cellspacing="none">
<tr>
<td colspan="2"><img src="images\banner.png"/></td>
</tr>
<tr>
<td width="200px"><img src="images\button_home.png"/>
</td>
</tr>
<td width="200px"><img src="images\button_home.png"/>
</td>
<td width="600px">TEXT HERE</td>
</tr>
<tr>
<td colspan="2">Copyright 2007 - Ben Davies</td>
</tr>
</table>
</center>
</body>
</html>

This look alright?

No; don't use tables

Read RandomTom's post.

Tripnologist · 7 Nov 2007 at 10:21

RobH said:
I've seen too many sites that only display correctly in one browser and not another, although this is due to no one agreeing on the standards.

It would be nice if all browsers had identical 100% css support but that's never going to happen. Sites which don't display the same are mostly due to sloppy/lazy designers IMO.

LazyManc · 7 Nov 2007 at 10:53

Tripnologist said:
It would be nice if all browsers had identical 100% css support but that's never going to happen. Sites which don't display the same are mostly due to sloppy/lazy designers IMO.

You're never going to get 100% identical across all browsers using CSS (or even tables for that matter). The skill is getting 99% of the way there, which is usually enough to be invisible to all but web designers.

Top Tip: Always design for Firefox first, and then tweak for IE. This will leave you with less work to do for the other decent browsers (Opera, Safari) which are usually pretty close to the Firefox rendering.

Deleted User 234324 · 7 Nov 2007 at 11:07

FF afaik is the most compliant of all the browsers, with IE7 in close 2nd place, the only major problems I've had is with IE6, not bothered to try Opera and Safari yet, their user base is so incredibly low it hardly warrants time and effort.

Shoseki · 7 Nov 2007 at 11:10

Tables make baby jesus cry.

Seriously, get some graph paper if you want, lay it all out, then use CSS positioning.

If you need to centre something, use position : absolute; left : 50%; margin-left : -(your div width/2);

LazyManc · 7 Nov 2007 at 11:15

Shoseki said:
Tables make baby jesus cry.

Seriously, get some graph paper if you want, lay it all out, then use CSS positioning.

If you need to centre something, use position : absolute; left : 50%; margin-left : -(your div width/2);

Code:

margin: 0 auto;

usually does the trick if it's a block level element.

HTML Newb Help

More options

lolage

lolage

fiveub's Slave

LazyManc

LazyManc

RobH

RobH

Tripnologist

Tripnologist

RandomTom

RandomTom

Inquisitor

Inquisitor

RobH

RobH

lolage

lolage

fiveub's Slave

LazyManc

LazyManc

Inquisitor

Inquisitor

Tripnologist

Tripnologist

LazyManc

LazyManc

Deleted User 234324

Deleted User 234324

Shoseki

Shoseki

LazyManc

LazyManc