Why is my font changing, my picture not layered and my page not centered??!

@gazzwi86Jun 08.2007

~~[URL=”http://www.g-williams.co.uk”]~~http://www.g-williams.co.uk[/URL]

hello all,

Above is a link to my site and for some reason my name wont appear in the font i want the site wont appear centered and the picture of stairs appears to the right of the other and not behind the other as i wanted.

can anyone tell me why??!

thanks

to post a comment

CSS

7 Comments(s) _↴

@KDLAJun 08.2007 — #You've chosen a non-system font. Unless everyone viewing your website has that font installed on their machine, they're going to get the browser default (in my case, Times New Roman).

<i>
 </i>&lt;img id="top" src="Images/Photo1.JPG" alt="" style="width:420; height:300px; position:absolute; top: 0px; left:0px;" /&gt;&lt;img id="bot" src="Images/Photo7.jpg" alt="" style="width:420; height:300px; position:absolute; top: 0px; left:0px;" /&gt;

Look into [url="http://developer.mozilla.org/en/docs/Understanding_CSS_z-index"]z-index[/url]

However, your coding contains too much absolute positioning. This simple layout could be rendered just as easily with regular CSS positioning using floats.

BTW -- the resolution of your images is way too high. It took quite a while for them to load on my machine; I'm using a T1 line.

KDLA

@toicontienJun 08.2007 — #You need to resize the images on your page to what they will be displaying at. A 2800 x 2100 JPG is FAR too big to be placed on a Web page. Always resize your photos down to the dimensions they will be displayed at on the Web. Not all browsers resize images the same. I can vouch for Firefox/Win. It doesn't use smooth scaling like you can get with Photoshop and the sized down photo looks awful.

As for your name not being in the correct font:
font-family: [B]"Apple Chancery"[/B];
I can guarantee that about 90% of the computers out there won't have this font. The fonts you use on a Web page must be available on the user's machine. You need to stick with Web-safe fonts.

That doesn't mean you can't use fancy fonts. You just need to specify more than one so the browser has a fall-back:
font-family: "Apple Chancery", [B]Arial, Helvetica, sans-serif[/B];
This is assuming that Apple Chancery is a sans-serif font, which I'm not sure if it is. The last name in a font family should be a generic font name. If using a sans-serif font, then end with sans-serif. If using a serif font, end with serif. If using a mono spaced font, end with monospace. If the browser does not have any of the previously listed fonts in the font-family property declaration, then it can use the generic family as a fall-back, and look to the browser preferences for which font it should use.

You are also using far too much absolute positioning. If you want it centered, completely ditch the absolute positioning. You're using a sledge hammer to push in a thumbtack. ? All you need is text-align: center; in the CSS for the BODY tag. That should center everything, but you will still need absolute positioning for layering the images over top of each other.

Gotta get back to work. ? That's it for now. I'll come back to this in a bit and have some more concrete solutions.

@toicontienJun 08.2007 — #

1. The DIV whose Id is "GW": Change that tag to an H1 tag. Your name is more important than a DIV tag suggests. Remove the style and align attributes. Add this declaration to your stylesheet:

body {
 background-color:#000;
 color:#fff;
 [B]text-align: center;[/B]
 }

2. The DIV whose Id is "Freelance": Change this code from ...

[code=html]<div id="Freelance" style="position:absolute; left: 215px; top: 85px;">
 <div align="center" class="style9">Freelance New Media Developer  </div>
 </div>[/code]

To ...

[code=html]<h2 id="Freelance" class="style9">
 Freelance New Media Developer
 </h2>[/code]

"Freelance New Media Developer" is a heading and should be marked up as such.

3. The DIV whose Id is "container": This will require a little more work, but I think we can really clean this code up. Current you've got:

[code=html]<div id="container" style="position:absolute; top:150px; left:162px">
 <img id="top" src="Images/Photo1.JPG" alt="" style="width:420; height:300px; position:absolute; top: 0px; left:0px;" /><img id="bot" src="Images/Photo7.jpg" alt="" style="width:420; height:300px; position:absolute; top: 0px; left:0px;" /></div>[/code]

It could be greatly cleaned up to this:

[code=html]<div id="container">
 <img id="top" src="Images/Photo1.JPG" alt="" />
 <img id="bot" src="Images/Photo7.jpg" alt="" />
 </div>[/code]

Then add this to your style sheet:

#container {
 margin: auto;
 position: relative;
 width: 420px;
 }
 
 #container img {
 left: 0;
 height: 300px;
 position: absolute;
 top: 0;
 width: 420px;
 z-index: 2;
 }
 
 #container img#bot {
 z-index: 1;
 }

4. The DIV whose Id is "Enter": This too can be greatly cleaned up. You can go from ...

[code=html]<div id="Enter" style="position:absolute; left: 330px; top: 474px;">
 <div align="center" class="style9 style10">
 <div align="left"><a href="index1.html">Enter</a></div>
 
 </div>
 </div>[/code]

To ...

[code=html]<p class="style9 style10" id="Enter">
 <a href="index1.html">Enter</a>
 </p>[/code]

Since this is text, mark it up as a paragraph. You also had a div align left in there. Not sure what you were trying to accomplish there, but try this code out for the Enter link, and we can tweak it from there.

5. Lastly, the DIV whose Id is "copyright", we can really clean this up too. From ...

[code=html]<div class="style2" id="copyright" style="position:absolute; left: 305px; top: 550px;">
 <div class="style3 style4">
 <div align="center">Copyright &copy; Gareth Williams<br />
 All Rights Reserved</div>
 </div>
 
 
 
 </div>[/code]

To ...

[code=html]<div class="style2" id="copyright">
 <p class="style3 style4">
 Copyright &copy; Gareth Williams<br />
 All Rights Reserved
 </p>
 </div>[/code]

Again, since it is body text you are displaying, use a <p> tag. That should be a good start. Let me know what you think.

@gazzwi86authorJun 08.2007 — #Cheers guys, thats a great help. Ive made a few changes now, hopefully for the better, i just cant get the freelance bit to adopt a font now which is a pain. Any ideas why??

ill get round to resizing them images soon but in the mean time i going to have to sort out the font problem i thnk by making most things small pngs or jpegs...

@toicontienJun 08.2007 — #The closing DIV tag on the freelance heading is incorrectly written. You've got a line break between the tag keyword and the ">" character.

@gazzwi86authorJun 08.2007 — #Cheers, looks fine now. Bit wierd with the java not loading a photo every now n agen but i guess thats file size i think im going to have to save the entire site as a series of pngs tho since i wana keep the font

thanks for your help!!

@toicontienJun 08.2007 — #Don't save the site as one graphic. You can save the headings you want in that font as graphics. Be sure to include alt text for graphics used as headings.

Also in #CSS _↴

Problem with Firefox when viewing site.CSS and XML/XSL - centering a container Font is not rendering in FF and IE

Success!

Help @gazzwi86 spread the word by sharing this article on Twitter...

Tweet This

Why is my font changing, my picture not layered and my page not centered??!

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Why is my font changing, my picture not layered and my page not centered??!

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴