Onigiri

Yes it's bad coding. An anchor tag can only hold inline elements. Those div, p, and heading tags are not valid inside of an anchor tag. Short answer, don't do it. Longer Answer: That code is not HTML, as it violates the spec quite clearly. Some browsers guess what you intended to do and do create fake links around the text nodes and images. However this is not predictable or supported behaviour and is in no way to be expected to happen. IMHO the browsers that treat it this way are handling it wrong. They should throw such tags away, as their job should be to render HTML and not to interpret or improvise it. That's what the specification is for. They are not helping by creating even more undefined behaviour. This was always one of the strong points of XHTML, the browsers had no chance to meddle and make a mess of it, because there's nothing they can do with an XML parsing error or a document-specified DTD. I have seen so many issues over the years because of people relying on undefined behaviour of browsers at the time of coding, with those browsers happily rendering the code as if nothing was wrong.

Every way I can think of is messy and horrible. And if you have the expertise to implement them I'd say you'd be smart enough to setup a CMS to do a better page.

The problem is that everything in that blog seems to be positioned absolute and the only thing with real width is the logo. First, take the background image off of the empty div and put it onto the body, and we'll go from there. bocaj: What he means is when your resize the window the background follows the body, which is only as big as the viewport, so if you scroll sideways you lose the background.

I would suggest adding transparent space to the right of the image and just setting the horizontal position to "right".

Dreamweaver on a live environment? Any decent server admin should kill you.

What on earth is going on in here. PHP for includes? The first question is what is your server environment? And what kind of access do you have to the system? Most web servers have their own server-side include modules which will be faster. Google "<your webserver software> server-side includes", or post back here with the server info and we'll try to help.

Google can already index flash. As long is the text is actually embedded into the flash and not read in from some external xml etc. If you want to see what it will look like to Google have a look for swf2html from Adobe. This is what google uses as a base if my memory serves. For other search engines though, you may be square out of luck...but that's what you get for making a presentation instead of a website (Anything which has actual content should be HTML, replaced by flash using SWFobject or something similar) As for the object tag, a description should be inside the object tag. The usual technique is to shove an embed tag in there instead but that is not very good because the fallback functionality is stopped dead and wasted on whether they have a certain browser, when it is supposed to be for providing alternatives with eventually standard HTML content if the UA does not support the technology required for any of the object/media. For flash this is a non-issue because you're supposed to be using SWFobject, so you can make full use of query string variables and other cool stuff without making things a mess. But for things like actual video content the best route is to implement object tags correctly (using the data attribute). If you have any problems with IE then there are many ways to work around them, have a Google. You may only need an IE conditional comment. Hmm, if you need an example I can probably throw something together...

Try shoving response.write(Request.Form("email")) in the ASP and remove the response.redirect . It should return the email. If it doesn't then you know it's not actually being posted successfully. If it does you know the problem lies in the asp creating the email.

I had a look at your Javascript and it is working fine. It must be the ASP. I'm not really great at ASP, so you might want to find someone who is to help you debug/make sense of it.

Hey, cool stuff. Personally I have never found a use for these tags that would add any meaningful...meaning?, but if I ever found myself writing some documentation in HTML form, I'm sure these tags would be useful (or maybe some medication would be even more useful ). I could see some kind of changes review system like the MS Word implementation implemented using these tags. Hey, there's some good ideas to that. You may have a winner if you decide to venture into web-app territory with that script. The producers at work couldn't live without it in Word. And from what I've seen, Legal seem to love that functionality too. Had a look at the Javascript for that and I have to say JQuery looks pretty interesting. I don't quite like how it makes the code flow but I definitely feel like trying it. Wonder how it fairs against Dojo... Now I kind of feel like inventing a collaboration system just to implement this...lol

I've always found those reset style sheets overkill and a bit messy. A good "* { margin: 0; padding: 0;}" is usually what I go for. I can trust myself to set text-decoration, font-size and the like as I go. That and in the real world of dealing with other people's pages that may have been coded some good years ago, fixing a few padding and margin issues and resetting on the things you're working on is a lot more practical than dealing with an entirely broken site. Hurray for tables mixed with divs mixed with div-tables

Hmm, I like the design but from a brief look you have a few (common) semantics problems. I'm going to be pretty blunt but bear in mind I'm just trying to help with the best possible accuracy... Let me preface this by saying that HTML is for tagging content, to provide extra information and meaning to User Agents. So if there's something there not tagging anything or not providing any meaning it's cruft and shouldn't really be there. If you do HAVE to add an element here or there to give you the right hooks to style, then you should try to make it add as much meaning as possible. - Firstly, you have classes and ids with "right" and "left" in them. This has nothing to do with the content and shouldn't be in the HTML (yes, attributes are a part of the html). Big problem when you come to redesign your site and what was on the right before isn't on the right anymore. Makes things unreadable. Another thing I noticed which is kind of related to the above is all those div elements. It's more apparent when you actually view the HTML tree with something like Firebug. The divs don't have very good class names so you don't know what they're doing until you delve several levels deep to find the content. - That bar at the top. It could have just as easily been a background image on the body positioned to top. - Another one are those "nav-rightcontent" and "nav-leftspace" elements. spacer.gif? really? (just kidding ...well only half!). Also note that the ul is also a block level element, only it has meaning unlike the div. Why not style that since it's already there instead of using "nav-rightcontent"? - Third thing I would say is ditch all those br tags and use css to style the presentation. Next time you find yourself writing an address or contact details, then you can bring the br tags back out. Same goes for non-breaking spaces (unless they're there to fix IE issues...but even then they can be avoided). Hmm I only took a quick look but that's what I got from it, there may have been reasons for certain things I may have overlooked but I just wanted to give you a few things to think about whilst you are doing the code for your design.

I see shapes. Life is one big box of shapes ready to inspire you. Seriously, interesting shapes and random things ready to abstract into web design are everywhere if you are looking. Like just now I noticed for the first time that the shape of the opening on these cardboard recycling boxes we have at work on our desks would make a really slick announcement box. And the other day these buttons on this dell monitor and the way they are positioned relative to the screen gave me an image for some kind of interesting navigation. Things are really what your mind makes them out to be. I think everyone finds their own best ways of stimulating the right kind of thought.

Just putting in £ should definitely work. And if your text editor doesn't allow for changing encoding then you need to find a better one. I use Aptana but that's not really a text editor, it's an IDE and complete overkill unless you use Javascript as well.

Love the design. OK, here's my honest thoughts. Since no one has yet in depth, I think I'll focus on the *HTML. XHTML 1.0 Transitional Ok, point 1. Why is it XHTML Transitional? Why did you choose XHTML at all? Are you using its additional functionality to HTML? Don't just use it for the sake of it. The only valid explanation I can think of for using XHTML without using its additional functionality is to make things easier when you want to feed parts of your page to your flash actionscript for dynamic flash elements. Second point. Those "SEO", "Web Design", and "Graphic design" buttons are presentational and pretty tied to the layout. If you want to redesign the layout or have multiple styles for the page they'll just get in the way. You need to do them in css and use some kind of FIR. I'd recommend the text-indent and overflow:hidden method as it keeps your code squeaky clean. Third point I think is to get rid of all that whitespace in your source and use proper indentation. This is by far the let down of your site. I always make whitespace preservation a concern when coding a backend. It just presents better to clients (and more seamless) over the "this stuff is just thrown into a page anyhow by some random backend and a mysql database hacked together" image. I always make no traces of the backend a priority (other than a possible "powered by" or something). Following on from the last point, those HTML comments shouldn't be on the final public page. They are for you not the user. And if you had proper indentation they would be redundant anyway. <meta name="generator" content="Dreamweaver 9.0" /> Grab a decent text editor. Or if you use javascript a lot or already have eclipse for Java stuff, install Aptana. And if you're doing it yourself when you're mainly interested in design and not very interested in learning HTML then try and get a coder on board. Last point which is about Javascript. Stop using event attributes like "onmouseover=" and start using event listeners. You should keep javascript out of your (X)HTML and instead latch on to classes etc. So if the navigation needs listeners then in your javascript file just getElementsById or write a quick getElementsByClass function. Other than those points I can't see really see anything else wrong (maybe use utf-8 instead of iso-8859?). But yeah, nice page, almost perfect. Good luck with getting it to a stage where you're happy with it. [EDIT]: Oh wow. Get rid of those br tags. Presentation = css.

Ctrl+C — Ctrl+V Hahaha, If you only need to use those 4 characters out of the 2-3000 odd there are. Actually you just need Japanese support in your operating system. I don't know what OS you use so I have no idea.

Yeah, I mean the latter. I see it as one of those things that stop a lot of people from making the final jump from writing/altering the HTML whilst they write the CSS to writing the HTML and then writing the CSS, having a basically complete page.

Hmm something came up today and I thought I'd ask you guys about it. How many of you guys know what CSS selector specificity is? And can you honestly say you have a solid understanding of it? I think this kind of subject is overlooked way too much when advising beginners. I think understanding how ids, classes, pseudo elements/classes, and style (and javascript-set) attributes work is a key point to gaining insight into their purpose in your layout. To those who use the !important declaration to override their own code, I'm talking about you. [EDIT]: Forgot to provide a link to the specs for those who were interested in it. Specificity Specification (gotta love that phrase): http://www.w3.org/TR/CSS21/cascade.html#specificity

I'm actually really surprised you dropped the other one: http://iamshipon1988.zymichost.com/ That one was far more "there". This layout is nice but the underlying html is not as good as the previous one. Apart from the few issues the other one was pretty good; the page flow was good, and forgiving the navigation (which was one of the few issues) I could increase font size as much as I wanted without the layout breaking. Enough about the old one, let's talk about this one. 1. The page flow is all wrong. Turn off page styles in Firefox and see if you can use the site, then try it on the previous one. The winner is clear. The "About Me" seems like the main content...and yet I have to scroll through all this other stuff just to see it on this one. 2. This one has ghastly, giant unlabelled lists of tiny non-descriptive images (with these types of things you should always include text and use CSS to hide it). 3. Tag cloud uses the <font> tag. This has been deprecated since HTML 4.01 (that's 1999 people!). Use <em> or <strong>. I'd say strong. You would then use CSS and em font size on them and possibly nest them, so each <strong> sets font size to 1.1em (110% of the previous font size), this means you just wrap it in more strong tags depending on popularity; seems like the most semantic method. It's out of the question to create a CSS class for different strengths. This way you only create one. I focused on the CSS/HTML issues but I'd like to say I agree with what the others said. I do hope you'll go back to the previous one and work out the few issues you have with it. True, with a better/clearer title/banner it would have been better, but that one I could definitely see as a portfolio. I'd also probably put a big, colourful, arty graphic (something you did yourself) there instead of the "Custom Webdesign" bit.

よろしく is Yoroshiku. It's just something you say after an introduction...It means a lot of things so I can't really translate it well into to english. But basically "be kind" would do as a replacement

When I need shadows (especially pngs with alpha transparency) for content boxes I usually just whip up a script and have it apply the shadow to every element with a specific class. The easiest way seems to be to build the top inside the element you wish to give the shadow. I just dynamicly insert a div as the first element in the element and let it expand to take up the entire line positioning the top left corner png as its background, then put another div in it with the top right image and let it do the same but background-position it right and this time give the div left and right padding that is the width of the corner images. Then all you need to do is put another div inside the last one (so we have a div inside a div inside a div), and this one will have the top tile background repating along the y axis with the padding making sure it doesn't overlap the corner images and give you an extra dark shadow. Then position the whole thing with negative margins and/or relative positioning so it sits just above the element you're giving the shadow. The left/right shadows I just nest two divs and do the same kind of thing with the actual page content being appendChild'ed to the innermost div so it acts as a wrapper. And I do the same thing as I did for the top for the bottom but with a few changes. All background images and positioning being done using css, you just create the elements with the right classes with javascript and arrange them in your html Well, that's pretty much the gist of how I tackle it. Being all in Javascript it keeps your HTML squeeky clean, and you can just have it fallback to a nice border if they don't have javascript enabled which seems like the best of both worlds and is the best method of having real alpha-transparent shadows I could come up with. For IE6 which doesn't support PNGs and the hacks can't handle the complex positioning of the script I either change the page background which the shadow is on top of to be a nice matt colour and use a conditional to make ie use jpgs with the shadow pre-layed on the matt colour, or do the border fallback. Lol, did anyone follow? I was like "God, am I really going to attempt to explain this?" Basically you dynamically build the caps like they were a column layout (kinda like faux) using padding and negative margin and wrestle them into place as caps, contain the content and give that wrapper the left/right shadow and wrestle the bottom cap into place like the top one. *sarcasm*Sounds like fun right?*sarcasm* But you just gotta love shadows~

Only complaint I have is you have a few useless divs which you could work around. Firstly the h1 tag could do the job on its own, both "sitename" and "padding" are unecessary. Also I think you'd be better off with that banner as a background-image since a banner is presentational (it'd be different if it was an actual logo. I would personally have the monkey as the logo with a transparent background and then you can use IR for the text next to it). Second, do you really need that div around the nav ul? I have never found a good reason to contain navigation when there aren't any siblings, uls are blocks too! Lastly your classes/ids are not semantic. Those are a part of the html too, and they need to reflect content not layout. So not "topmenu" but "main_navigation", and certainly not "padding" etc. (well maybe topmenu would work if you meant "top of the directory structure", if your site would fit that metaphor). The point is when you write a new CSS layout that menu may not be at the "top" anymore, and that padding one will just be pointless and in the way when you don't want padding anymore. When doing a css layout your goal should be to untie the content from the presentation, so you can completely change the presentation without touching the content (HTML). Call things what they are in the context of the content and your code will be a lot more solid. Those are the three things i get from a quick glance. Keep up the good work! And don't take my comments the wrong way PS: Just noticed you're using the align attribute, which is deprecated for the elements you are using it for and should be done with CSS.

I'm english. I was killing time because it was too late to go to sleep before work (which is where I am now) Yeah I don't have a problem with IE6, conditionals work a charm. It just really cuts into development time. It wouldn't be so bad if it had an equivalent to firebug. The Microsoft Script Editor just doesn't cut it. I just think I'd have a lot more freedom to create some nice layouts without sacrificing cleaness of code and a lot of time. Even if it was just proper PNG support without hacks I would get off of their backs for a while (only for a while )

Just wanted to say hi. I've been neglecting CSS/web semantics for a little while now (been doing Javascript/Java at work lately) and decided to look for something that doesn't require real-time interaction like IRC to keep me thinking. This forum seems like a friendly nice-sized community,　it covers other topics of web design, and there's plenty of other Brits which is a plus. So yeah, I hope I'll be around here for a while. よろしく。 What else is there... Umm, lately I really want to drop support for IE6? (too bad it'll never happen except maybe on personal sites)

With the structure of CSS design I would think the slice tool is close to useless. The way you layout a page is pretty close to the layering in Photoshop. Well, assuming that you're a good Photoshop citizen you have been using groups to segregate different elements of the page design already so all you need to do is drag the group onto a new document and start keeping seperate PSDs of all the different sections/titles/features etc. as well as the full PSD of the design and organising them in some kind of folder structure. And if you haven't...well I guess you better start getting more organised in your work . It is much quicker to work this way and makes making changes as simple as going into 'titles' folder and opening the PSD of the title you want, making a few changes, and exporting to PNG (and if you have a lot of changes to make and wish to see them in the layout of the site then you can do them on the full PSD and once everything looks right, drag the groups off into their seperate PSDs and start exporting). You could probably write some Javascript/Photoshop scripting to automate the group exporting but I haven't really cared enough to try.