first website, need help..

godjwood

New Member
Hi guys,

I have never made a web page before but I am trying to get into it, so figured I would start learning by creating one for a business I have back home.

The address is www.twobrospainting.com/index.html

As you can see, the site needs some work.

Have your laughs..

Anyway, any advice or suggestions you could give after your finished laughing would be helpful.

My specific questions I have are as follows:

1) the image in the upper right hand corner seems to move depending on the browser resolution.

2)the yellow heading image loads find when I test it on my laptop, but on other computers it seems to load to the whole screen, then when you maximise the window it goes to the intended size, and when you make it smaller again it remains at the intended size.

3)the left hand column background, obvious issues.

Thanks for the help.
 

horrorshow75

New Member
I would hope no one here would laugh. Everybody has to start somewhere and everyone here did. Judging by the editable region and the code layout it looks like you used a dreamweaver template, my guess 2 column elastic layout. This layouts width is set by em which allows the site to adjust to the size of the browser. If you want your site to stay consistent no matter if the browser is minimized or not you probably want fixed width layout.

Here is a site that has better coded css layouts. You can either just download and use one or you can download and look through the code to try and understand how css and html work together.

http://layouts.ironmyers.com/

Also good resources:
w3schools - xhtml
w3schools - css
 

godjwood

New Member
Thanks horrorshow, I appreciate the tips.

I did use a dreamweaver template to start.. however i think i messed it up while i was trying to customize it to look the way i wanted.

im not really sure what I should be doing, do you think i should restart the page? I wanted it to stretch and always be relative to the window size, as i was understood the elastic layout does. the fixed layout will not stretch,
correct?

to position the elements of the page i was using percentages.. Top 0% Left 30% etc for every AP div on the page. the editable region i added myself afterwards.. is this the route i want to take to get the effect i am looking for?

if i do use the percentages route, i dont understand why it is not working right, for example the left hand column is set for 100% the length of the page but it does not do that on the browser I am using right now, when it did as predicted on different lower resolution computer at home.
 

godjwood

New Member
I appreciate the constructive resources.

However, I think I will encounter the same problems if I use one of those templates. Would you be able to offer any answers to the above questions?

Like why do my images display distorted sometimes and on different browsers and how would I correct this?

The placement of my images, even though they are placed liquidly, as well as the size, fluctuates. This doesn't make any sense to me.

I believe if I put my images in those other templates I will receive the same results.
 

jnjc

New Member
Just to throw my 2 cents in, I would say stay away from "elastic" layouts. I've found them to always turn into a pain. It might start ok but I've always ended up wishing I hadn't done it in the long run.

The type of site you are looking at putting together doesn't need to be elastic and I think it lends itself very well to a fixed width layout.

Do yourself a favor and stick to a fixed width layout, it'll make you life easier and you site will have a more consistent look...

HTH,
JC
 

jnjc

New Member
I usually go around the 760px mark. That way you will be ok for resolutions of 800 X 600 upwards (which is pretty much the smallest standard resolution)...

Having said that the number of people using this resolution is in reality low so if that proves too limiting you will probable get away using a width of around 970 (should mean you are alright for resolutions of 1024px X 768px upwards, which will probably cover you for 99% of visitors).

I have had a quick look at the site horrorshow75 recommended, I don't know what the actual .css code is like but my initial impression is that it looks pretty good. You would probably be looking at something along the lines of this I would imagine:

http://layouts.ironmyers.com/750_pixel_Layouts/layout/?id=1

Download the layout and see if you can paste your content into it.

HTH,
JC
 

godjwood

New Member
Thanks JC. Ill give that a shot.

So what your saying is that with the elastic layout it is common to have the issues i have been having with my layout?
 

jnjc

New Member
I haven't looked at your problems in detail but I've had cross browser , layout and general appearence issues when I've used percentages.
 

godjwood

New Member
I usually go around the 760px mark. That way you will be ok for resolutions of 800 X 600 upwards (which is pretty much the smallest standard resolution)...

Having said that the number of people using this resolution is in reality low so if that proves too limiting you will probable get away using a width of around 970 (should mean you are alright for resolutions of 1024px X 768px upwards, which will probably cover you for 99% of visitors).

I have had a quick look at the site horrorshow75 recommended, I don't know what the actual .css code is like but my initial impression is that it looks pretty good. You would probably be looking at something along the lines of this I would imagine:

http://layouts.ironmyers.com/750_pixel_Layouts/layout/?id=1

Download the layout and see if you can paste your content into it.

HTH,
JC


Hi,

I tried using that fixed layout template. I put my images into the heading/sidebar etc and since the images were more pixels than the template, they stretched it and hence does not layout correctly on the screen.

Should i set the size of the image to 100%, or should i set a maxwidth and maxheight? how should I handle this?

Thank you.
 

jnjc

New Member
If you are going with a fixed layout then you should not use % at all. Size you image to the actual px values you want it to appear in. That is the main advantage of fixed widths, you specify every think in actual px values so that no matter what resolution the page is viewed under it will always look pretty much the same (just with more space either side of the page).

Don't use max-height etc. just set the height/width so the image does not stretch the template.

HTH,
JC
 

godjwood

New Member
If you are going with a fixed layout then you should not use % at all. Size you image to the actual px values you want it to appear in. That is the main advantage of fixed widths, you specify every think in actual px values so that no matter what resolution the page is viewed under it will always look pretty much the same (just with more space either side of the page).

Don't use max-height etc. just set the height/width so the image does not stretch the template.

HTH,
JC

below is the code from reset-fonts.css, one of the files included in the link you recommended to me.

if the width is "em", if my research serves me correctly that means the width is dependent on the text size. if i dont have text, i use the image instead, do i want to change this setting to a "px" dimension?


/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.1
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
body{text-align:center;}#ft{clear:both;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;min-width:750px;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}s .yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}
 

jnjc

New Member
reset-fonts.css is part of Yahoo's User Interface Library (know as YUI). It's basically a .css to level the playing field between the browsers. Different browsers have different 'default' values and settings, things like a "<form" in IE might have a default padding of 2px whereas in FF it's default might be 0px etc. reset-font.css gives these types of things values so that you are starting at the same point with each browser.

You should not modify this file.

The YUI libraries use em's in most of there CSS. My knowledge of em is pretty sketchy (it's on my to-do list), but my understanding of using EM is that it's an 'inherited' size from the parent element. The main reason for this is accessibility, if a paged is zoomed in then all the elements etc. will scale relative to the parent.

All that said I have struggled with it so I don't use it. I have tested my sites with the browser zoom functions and for the most part they seem to zoom fairly OK so I've taken the easy option and not bothered with it.

As I said originally
I have had a quick look at the site horrorshow75 recommended, I don't know what the actual .css code is like but my initial impression is that it looks pretty good. You would probably be looking at something along the lines of this I would imagine:

http://layouts.ironmyers.com/750_pix...s/layout/?id=1

but I'm guessing that if they are using reset-font.css then the layouts are based on YUI grids. The principle behind these is that within the HTML document there are a number of 'div' elements corresponding to a section of the page. All you should need to do is identify which section is which, put your html within the appropriate div and size things using px until it all fits as it should.

Give it a shot and if you still can't get the layout the way you want it then put the site up somewhere and post a url and we can take a look.

HTH,
JC
 

jnjc

New Member
Holy crap!! Is that from the link i posted. I didn't actually look at the code. Sorry man. That is clugey as hell.
[/URL]

The reason it looks like that is because YUI "minify" their .css and .js to cut down on download times. Their grids stuff is pretty good and outside of the .css it's usually quiet clear. I reckon godjwood should stay on the path he is currently on....

Just my two cents,

JC
 

horrorshow75

New Member
The reason it looks like that is because YUI "minify" their .css and .js to cut down on download times. Their grids stuff is pretty good and outside of the .css it's usually quiet clear. I reckon godjwood should stay on the path he is currently on....

Just my two cents,

JC

Well it's good you seem to understand that craziness because I don't know anything about yahoo yui. Seems confusing especially if you're new to html/css. I was expecting those layouts to be the typical divs with meaningful names, css to match.

I'm interested to see how godjwood's project advances.
 

godjwood

New Member
hey guys..

http://www.twobrospainting.com/indexproblem.html

thats the page i have been working on. i didnt end up using the yahoo template because it was too confusing for me. I inserted images into the header and left column, but then was having trouble getting the images to layer on top of it using the z-index.

so i ended up just making them background images, im going to have to resize them later to be the correct size in pixels.

im not sure what happened to the right column, when i was previewing it on firefox everything lined up correctly.

the only page that is updated w/ the template is the requestestimate.html.

i used tables for the links and the images in the heading.

i wasnt sure how to create more spacing between the "painting done right" and the photo in the heading.

it took me a while to get the layout working because i didnt realize that when i changed the padding (in the template) it changed the size of the overall width.
 

jnjc

New Member
Looks good,

Use 'margin-left:8px' on the img to add spacing between the "painting done right" and the photo in the heading.

Add it to the photo. The best way to do this would be to add an id to the img tag

Code:
 <img id="logoright" ....

and then in your main.css add the following:

Code:
#logoright {
margin-left:8px;
}


HTH,
JC
 

horrorshow75

New Member
Just to throw this out there but another idea would be to make the header image all one image. Then you don't have to worry about using css to space out divs in the header.

Sites coming together nicely though! :)
 
Top