AusGamers Forums
Show: per page
1
Web design help thread
dais
Brisbane, Queensland
9106 posts
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.
06:39pm 15/05/12 Permalink
system
Internet
--
06:39pm 15/05/12 Permalink
thermite
Brisbane, Queensland
9632 posts
The font will only show if the person's computer has it installed.
Look up which fonts are common
http://www.webspaceworks.com/resources/fonts-web-typography/41/
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

The reason the top isn't aligned to the top is because there is a top margin on the p tag. You didn't put it in, the browser did.

Use chrome inspector or get firebug.

Prepend your CSS with this to get consistent behaviour across browsers: http://meyerweb.com/eric/tools/css/reset/

last edited by thermite at 18:46:25 15/May/12
06:45pm 15/05/12 Permalink
Whoop
Brisbane, Queensland
19887 posts
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.
06:49pm 15/05/12 Permalink
thermite
Brisbane, Queensland
9634 posts
That shouldn't even be a p tag because it is not a paragraph. Use the right HTML tags, heading tags for headings, list tags for items in a list.
06:51pm 15/05/12 Permalink
dais
Brisbane, Queensland
9107 posts
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!
06:52pm 15/05/12 Permalink
dais
Brisbane, Queensland
9108 posts
I changed the tags, that is probably good advice.
06:54pm 15/05/12 Permalink
thermite
Brisbane, Queensland
9635 posts
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.
06:57pm 15/05/12 Permalink
dais
Brisbane, Queensland
9110 posts
It works for me and asks me if I want to download it. Still doesn't work on the site though.
06:58pm 15/05/12 Permalink
bepatient
Melbourne, Victoria
992 posts
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.
07:14pm 15/05/12 Permalink
dais
Brisbane, Queensland
9111 posts
Thanks bepatient.

That link to your fonts.css is dead.
I figured it out, I was linking to UASQUARE.ttf instead of UASQUARE.TTF in the css. So that is sorted. I will look in to this .ttf business you mentioned.

Your site is great, I hope I am that good one day :]
07:20pm 15/05/12 Permalink
dais
Brisbane, Queensland
9112 posts
The fonts don't work at all in IE so I will definitely look in to this .tff stuff.
07:22pm 15/05/12 Permalink
thermite
Brisbane, Queensland
9638 posts
Lots of people still use browsers that don't support CSS3 as well.
07:32pm 15/05/12 Permalink
dais
Brisbane, Queensland
9113 posts
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 :[
07:34pm 15/05/12 Permalink
bepatient
Melbourne, Victoria
993 posts
Thanks bepatient.

That link to your fonts.css is dead.

Thanks mate. You'll get there with a bit of practice :D
Yea I noticed that broken link, ausgamers added a dot to the end. All fixed now.


Also, if you want some guidance on the proper tags - you can take it or leave it but this is how I'd go about it:
designated title = wrap it in h1 tags
info title/menu title = probably h3 tags
menu = make it a ul with each option as an li

Honestly if you set up all the right tags you can probably drop a bunch of those classes and extra markup.

Here is an example I did to get you off the ground: http://jsfiddle.net/m_raffaele/gtazK/ (rough and dimensions aren't right but should be enough to show what I mean)

Lots of people still use browsers that don't support CSS3 as well.
While true, this is quickly fading. @font-face however has been supported since CSS2 so works as far back as ie 5.5. People call it CSS3 because it only recently taken off again.


Edit: oh and by the way it has your name in it so if you like I'll delete the fiddle when you're done.

DOUBLE EDIT: Didn't see your last message, font squirrel also has a font converter so give that a try: http://www.fontsquirrel.com/fontface/generator
07:35pm 15/05/12 Permalink
dais
Brisbane, Queensland
9114 posts
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.
07:42pm 15/05/12 Permalink
bepatient
Melbourne, Victoria
994 posts
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.

Yea fonts are just a pain in the ass like that sometimes. All depends on the font unfortunately. Even installing to computers I know it used to be one type for Windows, one for Mac etc etc which was a pain, but I haven't really kept up with it these days so not sure how thats progressed.
07:46pm 15/05/12 Permalink
dais
Brisbane, Queensland
9115 posts
I got it working in every browser. The logo is an image and the rest of the text the embedded font. Looking good!
08:06pm 15/05/12 Permalink
Spook
Brisbane, Queensland
33726 posts
the only font people should ever use, is arial, and maybe times roman if they want to treat themselves to something different
08:37pm 15/05/12 Permalink
dais
Brisbane, Queensland
9116 posts
thanks Spook :]
09:01pm 15/05/12 Permalink
bepatient
Melbourne, Victoria
995 posts
the only font people should ever use, is arial, and maybe times roman if they want to treat themselves to something different

LOL
09:32pm 15/05/12 Permalink
Whoop
Brisbane, Queensland
19892 posts
the only font people should ever use, is arial, and maybe times roman if they want to treat themselves to something different

Verdana forever
09:38pm 15/05/12 Permalink
Spook
Brisbane, Queensland
33727 posts
f*** verdana
07:58am 16/05/12 Permalink
dais
Brisbane, Queensland
9117 posts
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
10:40am 16/05/12 Permalink
thermite
Brisbane, Queensland
9643 posts
That is because of your relative positioning used to pull things upwards. The space where the thing is meant to be is still there.
On #diablo3au-main instead of "top: -567px" try "top: 0; margin-top: -567px;"
You might need to tweak some other stuff after.

The real problem is in your layout and why you had to resort to pulling things upwards in the first place. Perhaps look up "2 column layouts css" or something, which should give you the html/css to make this work nicely.

last edited by thermite at 11:42:46 16/May/12
11:38am 16/05/12 Permalink
dais
Brisbane, Queensland
9118 posts
I see. Thanks a lot thermite, that did the trick.
11:43am 16/05/12 Permalink
dais
Brisbane, Queensland
9890 posts
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.
06:44pm 15/08/12 Permalink
thermite
Brisbane, Queensland
10019 posts
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
07:16pm 15/08/12 Permalink
dais
Brisbane, Queensland
9891 posts
The text is not important at this stage, but I changed the size.

That's not a bad idea but I'm trying to solve the problem as it's been presented, by still using the same layout. This seems like something I will run in to on a regular basis. I am just too noob to know how to do it.

Thanks anyway thermite.

last edited by dais at 20:03:34 15/Aug/12
08:00pm 15/08/12 Permalink
kappa
Brisbane, Queensland
1920 posts
08:12pm 15/08/12 Permalink
Superform
Netherlands
7494 posts
you can try cufon - its what we used at heineken
08:13pm 15/08/12 Permalink
TicMan
Melbourne, Victoria
8146 posts
^- was about to recommend Cufon as well.
08:16pm 15/08/12 Permalink
dais
Brisbane, Queensland
9892 posts
Very useful link kappa!

That cufon thing looks interesting, I'll keep it in mind.

last edited by dais at 21:20:10 15/Aug/12
09:18pm 15/08/12 Permalink
kos
Germany
2132 posts
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! :)
11:16pm 15/08/12 Permalink
dais
Brisbane, Queensland
9894 posts
No I'm using the insternet, it's new and... instant. Thanks for that :]

That did the trick. I don't understand why it works though and I was wary of using it because I didn't want other elements to inherit the absolute position.

The problem is I'll have other sections of the site with the same border layout, that will have more elements inside of them. So I don't know if that is the way to go. But maybe it won't matter because they won't actually be inside those divisions. I'm not sure how it will go yet so I'll keep working on it and I'll find out soon enough.
11:30pm 15/08/12 Permalink
kos
Germany
2133 posts
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.
11:39pm 15/08/12 Permalink
dais
Brisbane, Queensland
9895 posts
11:48pm 15/08/12 Permalink
dais
Brisbane, Queensland
9896 posts
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.
11:50pm 15/08/12 Permalink
kos
Germany
2134 posts
Woah, woah, all I did was as asked and fix your problem, there was no mention of suggesting better ways to do it! :P

You could probably also do the same (10px border) for the #theme-header-bottom div!
11:51pm 15/08/12 Permalink
dais
Brisbane, Queensland
9897 posts
11:53pm 15/08/12 Permalink
dais
Brisbane, Queensland
9898 posts
Yeah good point.
11:54pm 15/08/12 Permalink
Khel
Brisbane, Queensland
19750 posts
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.
12:52am 16/08/12 Permalink
dais
Brisbane, Queensland
9899 posts
Yeah that was discussed on the stackoverflow.com page. What I may end up doing is changing it to a left, middle and right layout, which is what I was using before. Only I wasn't using any absolute positioning.
01:07am 16/08/12 Permalink
Khel
Brisbane, Queensland
19751 posts
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.
09:44am 16/08/12 Permalink
thermite
Brisbane, Queensland
10021 posts
If tables make more sense to you then there is probably something fundamentally flawed about the way you're cutting sites. For example, you are slicing designs up into a grid like it's 1995.

I did get a sense of that from what dais did.

As soon as you change the height of his text everything changes dramatically... One thing shouldn't affect the other like that.

09:56am 16/08/12 Permalink
dais
Brisbane, Queensland
9903 posts
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/
02:06pm 16/08/12 Permalink
skythra
Brisbane, Queensland
5965 posts
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.

Yeah tables are fine if you're hosting only non dynamic content.

As for the rest of the modern web, things gotta change and it's better to have it in a object oriented approach.
02:11pm 16/08/12 Permalink
Khel
Brisbane, Queensland
19754 posts
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.
02:17pm 16/08/12 Permalink
skythra
Brisbane, Queensland
5966 posts
Oh for a single person working on it perhaps, but when you're talking about teams of people none of which having the difinitive whole knowledge of a website, a major redesign of the sites layout is far simpler to do from that style sheet than learning the website and applying it page by page.
02:22pm 16/08/12 Permalink
Khel
Brisbane, Queensland
19755 posts
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
02:44pm 16/08/12 Permalink
thermite
Brisbane, Queensland
10026 posts
CSS should be about styling the page, not defining the structure of it.


Precisely. This is the argument I would use to disagree with you :P Except I guess we disagree on what constitutes structure. Because you can have the inline structure of the plain text which should be in HTML, and the visual structure which should be CSS.

The HTML is clean with DIVs (or the new HTML5 structures). THIS IS YOUR DOCUMENT. The less markup in it the better.

The CSS is secret behind the scenes stuff, so it doesn't matter how much crap you put in there. You should be able to easily switch it out and have the new CSS restructure the layout as you please. (theory fails if you don't have enough divs, but that is improving with CSS3)

If the HTML uses tables, then you're stuck with the layout, and you have a messy document with loads of code in it.

And if you were to cut sites like I do, where each item on the screen is like it's own entity, and try to implement with tables, you would be using a lot more hacks to have table cells overlap each other and stuff.




02:46pm 16/08/12 Permalink
Khel
Brisbane, Queensland
19756 posts
Ok, I'll admit defeat on this one, that all makes sense. I guess I'm just stuck in the past :(
02:51pm 16/08/12 Permalink
thermite
Brisbane, Queensland
10027 posts
I was there once too Khel.

When the big push for CSS came, a long time ago, it was never really explained why it was a good idea. I think the justification for CSS was reverse engineered years later, or at least nobody ever nailed the point of why anyone should care.

The biggest problem was that when everyone was saying "don't use tables" in the early 2000s, nobody actually had a good technique for creating a typical 2 or 3 column layout and having it work in all the browsers. Partly that was IE6 and other browsers' fault.

03:02pm 16/08/12 Permalink
skythra
Brisbane, Queensland
5968 posts
I like your old site better than your new site.
03:09pm 16/08/12 Permalink
dais
Brisbane, Queensland
9904 posts
The main argument I can see for using divisions instead of tables is that the entire layout of the website can be contained in one file, with names for each section. Whereas with tables every page on the site needs the layout information in it and each page must be changed individually.
03:34pm 16/08/12 Permalink
system
Internet
--
03:34pm 16/08/12 Permalink
AusGamers Forums
Show: per page
1
This thread is archived and cannot be replied to.
 

Advertise with Us | Download Media Kit | Privacy Policy | Contact Us
© Copyright 2001-2014 AusGamers™ Pty Ltd. ACN 093 772 242.
A Mammoth Media web development / Australian VPS Hosting by Mammoth Networks