I'm not a professional web designer by any means, just self-taught. I'm working on a new site, a basic portfolio. I'm having a couple of issues that seem like they would be simple to solve for somebody in the know.

Here's my site: http://www.designated.net.au/testbed/designated/

The issues I'm having are:
1. The font for the text on the left and right of the box isn't working. It works fine when I open the page on my machine.
2. All of the text on the left and right of the boxes is supposed to be aligned with the top of the box. It looks right in the code, I can't figure out why it's not working.

I would appreciate any help you can give. This could be a really good thread if other people have any questions about their sites too.

div menu title and p class menu title look different to me, p class seems to be missing the font declaration?

The font will only show if the person's computer has it installed.

Then it should work when he uploads it and opens it on his own computer which he said it isn't.

Thanks for your help thermite.

I don't have the title font installed and it works. I set up the fonts using this guide: http://www.zenelements.com/blog/css3-embed-font-face/
It is CSS3.

You were right about the margin. I just got around that problem on another site I made and should have realised. Thank you for that!

Oh I didn't notice it was CSS3.
Well I tried going to the url of the UA Squared font and it doesn't exist, but the Braciola one does.

Thermite is dead on with the fonts, you are using a non websafe font. In order to use non Websafe fonts you have a few methods but the way to go is definitely @font-face with css3. They don't appear to have the font you'd like to use but I suggest you pop over to http://www.fontsquirrel.com/ as they have an awesome range of fonts to use for free. They also provide a html/css/font pack which can have you up and running in no time.

Looking at the @font-face code you have you are only supporting .tff - this doesn't work in every browser. For an example have a look at my font stylesheet as it has all different types and works in all browsers: http://www.mraffaele.com/css/fonts.css. Also the font UASQUARE.ttf doesn't seem to exists which is why its not working for you now. (http://www.designated.net.au/testbed/designated/UASQUARE.ttf) is a 404

Also its a good habit to use a css reset when building a website so it ensures you don't issues like the margin on your P. Most people go some crazy long resets but personally I just use * { margin:0; padding:0 } as that basically sets it all to 0 and you can only style what you need.

The fonts don't work at all in IE so I will definitely look in to this .tff stuff.

Yeah. This font embedding is tricky business.

I got a font converter here: http://eotfast.com/
I converted the fonts but only the title one works in IE.

I think I'll make the title an image and use a standard font for the rest. Bummer :[

I have another site with embedded .ttf fonts and they work fine in Firefox, Chrome and IE. Strange that some do and some don't. Well it's probably not strange if you know why, but I don't.

I got it working in every browser. The logo is an image and the rest of the text the embedded font. Looking good!

thanks Spook :]

the only font people should ever use, is arial, and maybe times roman if they want to treat themselves to something different

Verdana forever

I've got a minor issue on my other site.

There is a big space at the bottom of the page in the page div.

last edited by dais at 10:45:15 16/May/12

I see. Thanks a lot thermite, that did the trick.

The text is taller than the box

why not have a box in the width/height of that panel, then but another box inside there with a 10px border of the same colour as the border, then put the two corner pieces inside that then absolute position them into the corners.

<div id="outerbox">
<div id="innerbox">
<div id="theme-header">
<div id="theme-header-bottom-left"></div>
<div id="theme-header-bottom-right"></div>
</div>
</div>


div#outerbox {
width: 80%;
margin: 0 auto;
position: relative;
}

div#innerbox {
border: 10px solid your-color;
}

div#theme-header-bottom-left {
position: absolute;
bottom: 0;
left: 0;
background-image: url("gfx/cornerbottomleft.gif");
width: 35px;
height: 35px;
}

div#theme-header-bottom-right {
position: absolute;
bottom: 0;
right: 0;
background-image: url("gfx/cornerbottomright.gif");
width: 35px;
height: 35px;
}

last edited by thermite at 19:24:25 15/Aug/12

http://www.google.com/webfonts

^- was about to recommend Cufon as well.

I've got another one for you all:

http://www.designated.net.au/testbed/theme

With this one I can't get the 100% height border image on the left and right to display. You can see I've set the height of the one on the left to 50px just to show where it should be.

Now I realise I could get around this using inner shadow, but that is CSS3 so I don't want to. A standard border won't work either because I can't get it to align properly, as the white area is not a fixed width. I want to keep it that way.

Float is just horrible when you're trying to set out basic website structure, I've found it's only really good in a few very limited specific cases.

I'm not the most experienced web designer myself and most of what I know is self-taught as well, but I'd fix your problems by...

1. replacing position: relative with absolute, and float: left and right with left and right: 0...

#theme-header-top-left {
    position: absolute;
    left: 0;
    width: 35px;
    height: 100%;
    background-image: url("gfx/sideleft.gif");
    background-repeat: repeat;
}
#theme-header-top-right {
    position: absolute;
    right: 0;
    width: 35px;
    height: 100%;
    background-image: url("gfx/sideright.gif");
    background-repeat: repeat;
}

2. removing the white background of #text...

#text {
    position: relative;
    height: 100%;
    margin-left: 35px;
}

Seems to work fine after a quick fiddle in Chrome, no idea how other browsers will like it.

Also I couldn't help but notice that on your main site http://www.designated.net.au/ under the information header you appear to have a typo in the word internet. Probably wouldn't look so great for a web designer to not be able to spell internet! :)

I'm not really sure what you're worried about, but I think no elements that you use inside the #theme-header div or equivalent should inherit the position: absolute from #theme-header-top-* because there is no reason to put additional content inside those exact divs as children, they will exist purely on their own and with position: absolute will stay out of the way and not mess with page flow. (Edit: just re-read your post and yeah, what you said!)

I expect that any content in a page section similar to the header should go in #theme-header-top and that is the div that determines the structure and will be where the contents inherit anything from.

Thanks kos. I will keep your answer in mind if I run in to a problem like this that can't be solved with a simple border property. For example, if I'm using a more elaborate border image.

I still don't understand why it displays properly with position:absolute; though.

Here is why: http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent

stackoverflow.com is an amazing resource. It's like reddit.com for programmers.

Floating stuff takes it out of the page flow. So as far as any containing divs or anything are concerned, when they're working out how high or how wide they need to be to contain their content, the floated elements are not considered their content. I mean, as far as the element tree is concerned they're still child elements of the containing div, and they'll still position relative to their parent and all that, but as far as the page flow/content flow/whatever you call it is concerned, they're off the menu. So if all the content inside a div (or any block) is floated, then its going to essentially have a height of 0, because it thinks it has no content. So it doesn't matter if you're telling stuff to be 100% of the height, because 100% of zero is.. well.. zero.

I dunno why tables are viewed as so taboo these days, I've always found laying stuff out using tables to be far neater, and far more precise than messing around with divs and CSS trickery to get them where you want them. And with tables, its more likely to work and look the same in all browsers.

You could probably also do the same (10px border) for the #theme-header-bottom div!

I got it working with that too: http://www.designated.net.au/testbed/themefixed/

You can cut the site up however you want and still use tables to format it, its not like the page has to be one uniform grid, you can do all sorts of stuff with tables nested inside each other.

I just think the idea of using divs and then having a f***load of CSS that contains heaps of information about the layout and structure of the sight to be even more wrong. CSS should be about styling the page, not defining the structure of it. Tables just always seemed to me to be a much neater way, a much more logical way, and a much easier to read way to lay out a site.

Yeah, thats fair enough I spose. I don't pretend to really know much about front-end web development, I'm just genuinely baffled by a lot of the hate tables seem to get, and there rarely seems to be good reasons for it, they always made more sense to me. But I'm old fashioned :P

Ok, I'll admit defeat on this one, that all makes sense. I guess I'm just stuck in the past :(

I like your old site better than your new site.