Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

One I Made Recently.. Please Critique

Featured Replies

Please take a look at A Simple Essence.

Its a website I made for a Wedding Designer, who I met through World of Warcraft <_< .

 

Appreciate any feedback.

Esspecially on the IE error im getting, its displaying a 10 pixel white line all the way down the right of the layout.

 

Thanks for any comments.

Lovely site :) The general design of it is just beautiful :)

 

2 things to pick on are, firstly that the content is not particularly well laid out. The image of the lady in the wedding dress looks kinda plonked on the page, and there is masses of whitespace at the bottom which isn't doing anything. Secondly the navigation buttons need some work. The middle one doesn't fit the style, and the others all have different left, top and right margins, some are a bit pixelated, and there is nothing except the cursor change on hover to indicate it's a link.

 

As for your IE bug it's probably caused by your <BR>s. <BR> tags should only be used to force text onto a new line, not to create space, css margin and padding properties should be used for that!

Hi Lewwy,

 

Quite a nice site I think. The colours work well, and the background is quite nice (just takes a little long to load).

 

I like the header - it's got some nice imagery and suits the feel of the site. I'm a little unsure about the navigation icons. I sort of quite like them, but also they don't see somehow quite right - not sure quite why. I think maybe its because they look a bit rough around the edges - maybe try re-doing them in illustrator and trying for something crisper?

 

The portfolio page is different from the rest of the links which looks unprofessional. I would change that....

 

See what you mean about the IE. differences. I use a mac so would automatically look at it in Safari, and it works fine. Looking at it in Ie. 7 - the margin under the navigation links doesn't go all the way across - some of it is white. This gets worse with Ie. 6 and 5 - so maybe try altering your CSS.

 

Try this site as you check, someone suggested it to me and its really useful:

 

http://ipinfo.info/netrenderer/index.php

 

If you can crack it in Ie. 6 - you are usually there with the CSS design.

 

Generally then - quite a nice design!

 

Hope it helps!

 

Paul.

I really like the design...

regarding your Browser Issue, I had gone through your CSS you have not mentioned any style for <H1>, as the default style of it varies from Browser to Browser..

Mention the font-size, line-height and font-weight so that it looks the same...

There are some things I like very much on this design, and some things I would change...

Things I like:

The background is beautiful, and the colours work nicely. The site has a strong identity which is important.

 

I would change:

The portfolio page - it doesn't look like part of the same site, and I used my browser's back button to get back to the main site as I couldn't see any clear navigation on the page.

The header is a little too big (height) for my tastes.

I also think the navigation buttons would look better a little smaller, and maybe tied in more closely with the header by extending the header behind the nav area.

The content area seems a little left behind compared to the rest of the design. The most obvious thing I would change is the amount of white space before the footer. I would also line up the forst line of text in each column even though the right column has a border around it. I think this would balance it.

 

Still like it a lot though.

  • Author

Ive taken it all on board.. and I really appreciate them.

 

Not sure if someone can rummage through my code and spot an easy way to make the layout elastic? Because when I tried to make the height of about 7 combinations of things 'auto' the website would end up about 3mm high, and all the text would over flow.

 

Any help.. Appreciated.

Ok to sort this out you need to do some tidying of both your HTML and your CSS.

 

Firstly get rid of the table wrapped around the page it's totally unnecessary!

 

To get the page to center your body css should be:

body {
color: #8dfa6f;
font: 10px Georgia, "Times New Roman", Times, serif;
margin: 0px auto;
padding: 0px;
text-align: center;
background: #430039 url(images/pattern.jpg) repeat-x fixed;
}

And you need to add the following to the container class:

text-align: left;
 margin: 0px

 

Then get rid of every single <BR> on the page, and put all of your text into P and header tags, make sure you only have one h1 tag on the page.

 

For example:

 

<div class="style2" id = "special"><strong>Special Offer!</strong><br>

 

should be something like

 

<div class="style2" id = "special"><h2>Special Offer!</sh2>

 

Then reduce the number of divs you have if possible, for example I'm not sure what the purpose of the imageholder and contentholder divs are.

 

Also put your list in a list, get rid of the empty and missmatched elements etc... it looks like this code was generated by something?

 

Once this is done we should be able to take a look at how to get the height fixed :)

names that say the word simple in should be reflected in their website. And it does just that, but nicely ;)

  • Author
Ok to sort this out you need to do some tidying of both your HTML and your CSS.

 

Firstly get rid of the table wrapped around the page it's totally unnecessary!

 

To get the page to center your body css should be:

body {
color: #8dfa6f;
font: 10px Georgia, "Times New Roman", Times, serif;
margin: 0px auto;
padding: 0px;
text-align: center;
background: #430039 url(images/pattern.jpg) repeat-x fixed;
}

And you need to add the following to the container class:

text-align: left;
 margin: 0px

 

Then get rid of every single <BR> on the page, and put all of your text into P and header tags, make sure you only have one h1 tag on the page.

 

For example:

 

<div class="style2" id = "special"><strong>Special Offer!</strong><br>

 

should be something like

 

<div class="style2" id = "special"><h2>Special Offer!</sh2>

 

Then reduce the number of divs you have if possible, for example I'm not sure what the purpose of the imageholder and contentholder divs are.

 

Also put your list in a list, get rid of the empty and missmatched elements etc... it looks like this code was generated by something?

 

Once this is done we should be able to take a look at how to get the height fixed :)

 

imageholder and content holders are the left and right content holders.. imageholder originally had just an image in it, but I added content to try to balance the page.

  • Jo 90 locked this topic
Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.