Comments to homepage website?

[eduard]

Can you please give your comments to the homepage of my website (www.eduardlid.com)?

[thescientist]

way too stretched out (vertically). Half the page is off my screen, and I have a pretty large resolution. Other than that, it doesn't look much different from what you've had before.viewing in Chrome, OSX, 1440 x 900.

[eduard]

way too stretched out (vertically). Half the page is off my screen, and I have a pretty large resolution. Other than that, it doesn't look much different from what you've had before.viewing in Chrome, OSX, 1440 x 900.

No, I´ve changed only one colour! But how do I do it that my homepage looks perfect on every screen!

[thescientist]

it depends, but typically most people create a fixed width content container, and let the body stretch out with a background color or image applied to it to make up for the extra space not being used. The content usually drives the height of the content and the elements in it, but for more complicated layouts, They usually use server side scripting to truncate text to fit a predetermined box size, standardize their images, and follow a template that carries over from page to page. Right now your header height is taking up 25em of the screen, even though that's not how much space it might need. Honestly, what real developers do is download all the popular browsers and test them individually on their own computer and tinker with their layout till they get something that looks good in all screens. The more you develop, the quicker you will find the commonalities and basic layout techniques that make your site look good in all browsers.

[eduard]

it depends, but typically most people create a fixed width content container, and let the body stretch out with a background color or image applied to it to make up for the extra space not being used. The content usually drives the height of the content and the elements in it, but for more complicated layouts, They usually use server side scripting to truncate text to fit a predetermined box size, standardize their images, and follow a template that carries over from page to page. Right now your header height is taking up 25em of the screen, even though that's not how much space it might need. Honestly, what real developers do is download all the popular browsers and test them individually on their own computer and tinker with their layout till they get something that looks good in all screens. The more you develop, the quicker you will find the commonalities and basic layout techniques that make your site look good in all browsers.

Ok, thanks! However, I haven´t much time now! What are good values for my 3 div´s to set the height (for the time being!)?

[boen_robot]

Ok, thanks! However, I haven´t much time now! What are good values for my 3 div´s to set the height (for the time being!)?

Perfection takes time.So, either sacrifice time or sacrifice perfection. You can't have it both ways. The choice is yours.

[eduard]

Perfection takes time.So, either sacrifice time or sacrifice perfection. You can't have it both ways. The choice is yours.

In this case perfection!

[jeffman]

There is (almost?) never a reason to specify that the width of a div or the body as 100%. That the default value. BUT, if you specify 100% AND add padding or a border, the border will be ADDED to 100%. This is why your page goes past the right edge of the window. Just remove all the 100% rules that apply to width. When a div has no defined width, borders and padding are subtracted from the total, not added to it.You probably do not have a large monitor, and this is why the page looks okay to you. Mine is 1600 pixels wide, so there is a LOT of empty space, as thescientist says.

[boen_robot]

In this case perfection!

In that case, the basic approach to take is to simply ALWAYS use relative dimensions (em, %) and forget about pixels (px). Also forget about "pixel perfection" as that is impossible to achieve with relative units, and its out of the point anyway.Install all browsers that can run on MAC (i.e. Firefox, Opera, Chrome, along with the latest verion of Safari), and test in all of them. Resize the windows, and make sure that the content looks appropriate according for the window's size.This is more easier said than done, so... like I said, it takes time. You can do that OR use pixels and quickly create a fixed layout that looks good on one resolution.

[eduard]

There is (almost?) never a reason to specify that the width of a div or the body as 100%. That the default value. BUT, if you specify 100% AND add padding or a border, the border will be ADDED to 100%. This is why your page goes past the right edge of the window. Just remove all the 100% rules that apply to width. When a div has no defined width, borders and padding are subtracted from the total, not added to it.You probably do not have a large monitor, and this is why the page looks okay to you. Mine is 1600 pixels wide, so there is a LOT of empty space, as thescientist says.

Thanks!How does it look now?

[cousineaug]

Can you please give your comments to the homepage of my website (www.eduardlid.com)?

Here is what I see in Google Chromethe second box (top left)has the text"web developer" on the bottom line. The box needs to be a bit biggerthere is a light blue bar in the middle and your picture is just slightly taller than the blue barthis breaks the symetry....make them both the same height.Your picture is not very flattering. I have seen another picture of you in the same location and you are smiling....much better.I see you are using H4 and H6 and perhaps more to SIZE your text...that is the wrong use for an H. see article on this websiteI also see you used an H inside an A. It is not correct to use a block element like P or H inside an in-line element like A. However, if you fix the H issue noted above, this will go away.While I do not recommend this, I will try to answer your question about GOOD IN ALL BROWSERS. It seems you want your home page to fill the screen...always. You can start with a general reset of margins to zero (look that up on google), then you set your HTML and BODY to 100%then you DIVide your page in three * the top blocks * the center with the blue line and your picture * the bottom with the rest * * * give those three DIVisions PERCENT height to add up to 100%also make the DIV overflow:hidden....so be sure to put the most important information on the first lines.then you put in your content and resize your browser to many different widths and heights to see what happensHINT: do this on a COPY so you can come back to current version if you do not like the results.Validate your code and check it in several browsers to ensure it is working correctly.....Guy

[eduard]

Here is what I see in Google Chromethe second box (top left)has the text"web developer" on the bottom line. The box needs to be a bit biggerthere is a light blue bar in the middle and your picture is just slightly taller than the blue barthis breaks the symetry....make them both the same height.Your picture is not very flattering. I have seen another picture of you in the same location and you are smiling....much better.I see you are using H4 and H6 and perhaps more to SIZE your text...that is the wrong use for an H. see article on this websiteI also see you used an H inside an A. It is not correct to use a block element like P or H inside an in-line element like A. However, if you fix the H issue noted above, this will go away.While I do not recommend this, I will try to answer your question about GOOD IN ALL BROWSERS. It seems you want your home page to fill the screen...always. You can start with a general reset of margins to zero (look that up on google), then you set your HTML and BODY to 100%then you DIVide your page in three * the top blocks * the center with the blue line and your picture * the bottom with the rest * * * give those three DIVisions PERCENT height to add up to 100%also make the DIV overflow:hidden....so be sure to put the most important information on the first lines.then you put in your content and resize your browser to many different widths and heights to see what happensHINT: do this on a COPY so you can come back to current version if you do not like the results.Validate your code and check it in several browsers to ensure it is working correctly.....Guy

Thank you very much!I certainly will follow your advice!P. s. Can you explain to me please why you don´t recommend it (good in all browsers)?

[cousineaug]

P. s. Can you explain to me please why you don´t recommend it (good in all browsers)?

Clarification:* Web is supposed to scroll* width is a preference of the customer* default font size is a preference of the customer*** for example, if I have vision problems I like 20 point text* Screen size is a preference of the customer---so part of my theory of web design* design for your preferred width....but not more than 980px* use relative font sizes where possible so everything is relative to MY choice of default font***for things like button menus you may need to force a font size for appearance* as much as possible let me resize browser width without having to scroll left-right* put your best content in the first 400px of vertical space* * if you get my attention I will scroll to see moreexplanation on last point. My screen is 1400x900. Google Chrome has a very small header. When I view a page with the browser maximized, I can see 813px of vertical space. When I adjust my browser to 1024x768, I can see only 638px vertically. Many IE users have 2-3 or even 4 toolbars open. They can only see 300-500px of vertical on your page.Scrolling vertically is ok but get my attention in the first few lines.have a look at one of my websitesIt is not perfect. I want to redesign it to look the same but clean up the code based on things I have learned here.*background image at the top designed for about 1000px wide but degrades nicely to about 900...and still ok at 800 or 700***background also ok even on much wider screens.*centre column (main body) adjusts to the size of the browser, left and right side fixed width.*navigation menu all on one line to about 980px and goes nicely to 2 lines if narrower. * * * user does not need to scroll to reach the navigation*change default font on your browser (not zoom) if you can. * * *the navigation stays the same size but everything else gets bigger*all pages validate 100%***disclaimer: sometimes my wife makes changes and I forget to revalidate**I check often to make sure all is workingGuy

[eduard]

Clarification:* Web is supposed to scroll* width is a preference of the customer* default font size is a preference of the customer*** for example, if I have vision problems I like 20 point text* Screen size is a preference of the customer---so part of my theory of web design* design for your preferred width....but not more than 980px* use relative font sizes where possible so everything is relative to MY choice of default font***for things like button menus you may need to force a font size for appearance* as much as possible let me resize browser width without having to scroll left-right* put your best content in the first 400px of vertical space* * if you get my attention I will scroll to see moreexplanation on last point. My screen is 1400x900. Google Chrome has a very small header. When I view a page with the browser maximized, I can see 813px of vertical space. When I adjust my browser to 1024x768, I can see only 638px vertically. Many IE users have 2-3 or even 4 toolbars open. They can only see 300-500px of vertical on your page.Scrolling vertically is ok but get my attention in the first few lines.have a look at one of my websitesIt is not perfect. I want to redesign it to look the same but clean up the code based on things I have learned here.*background image at the top designed for about 1000px wide but degrades nicely to about 900...and still ok at 800 or 700***background also ok even on much wider screens.*centre column (main body) adjusts to the size of the browser, left and right side fixed width.*navigation menu all on one line to about 980px and goes nicely to 2 lines if narrower. * * * user does not need to scroll to reach the navigation*change default font on your browser (not zoom) if you can. * * *the navigation stays the same size but everything else gets bigger*all pages validate 100%***disclaimer: sometimes my wife makes changes and I forget to revalidate**I check often to make sure all is workingGuy

Sorry, I´m too stressed and too tired to read your reply properly (but I certainly will, because it has a lot of good information!)Now I have the question: why does my website (www.eduardlid.com) different on Internet Explorer and Safari (I have!)?

[jeffman]

You asked that question on the other thread. Please don't ask it again here. Everyone, including you, will get confused.