Comments on: Hello finally here http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/ «for all your web design needs» Sat, 30 Aug 2008 07:01:57 +0000 http://wordpress.org/?v=2.0.4 by: Jewel http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-675 Wed, 01 Mar 2006 17:58:35 +0000 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-675 Hi again, If you want an effect such as a middle table and background image, you can create a wrapper div that works much the same way as an outer table. you specify the width of the wrapper div (no more than 780 pixels is usual because then it wont scroll if people are using small monitors, and will have space either side on bigger screens). You can make it smaller of course, but pixels are easier to judge than percentages in my opinion. If you want the wrapper to be centred on the screen, you add this to your css: It is the margin, padding text align and width that are important for centring. The body margin of 30px simply gives you a gap of 30px from the top of the screen before your wrapper begins. You can adjust this size to suit. <code>html, body {margin: 0; padding: 0; border: 0;} </code> <code>body { margin: 30px auto; padding: 0; font-size: ; font-family: name of font(s), sans-serif; background:#e7e7e7 url(images/yourbackgroundimage.jpg); /* base color if desired and path to image url */ text-align: center; color: #333 colour of main text on page goes here ; }</code> <code>#wrapper { background: url(images/yourinnerbackground.jpg) ; text-align: left; margin: 0 auto; padding: 0; width: 780px; /* or your choice of size */ }</code> The main wrapper div has simply been called wrapper here, but you can call it anything you like of course. In your html, you would say: <code> html head head content goes here including styles /head body div id="wrapper" page content goes here... /div /body /html</code> Other columns and boxes can be positioned inside your wrapper div as you want them. ( obviously the html will need proper code tags around the head, div etc, but I cant put them in here, or the browser thinks they are real tags and tries to use them.:headbang: Hi again,
If you want an effect such as a middle table and background image, you can create a wrapper div that works much the same way as an outer table. you specify the width of the wrapper div (no more than 780 pixels is usual because then it wont scroll if people are using small monitors, and will have space either side on bigger screens). You can make it smaller of course, but pixels are easier to judge than percentages in my opinion. If you want the wrapper to be centred on the screen, you add this to your css: It is the margin, padding text align and width that are important for centring. The body margin of 30px simply gives you a gap of 30px from the top of the screen before your wrapper begins. You can adjust this size to suit.

html, body {margin: 0; padding: 0; border: 0;}

body {
margin: 30px auto;
padding: 0;
font-size: ;
font-family: name of font(s), sans-serif;
background:#e7e7e7 url(images/yourbackgroundimage.jpg);
/* base color if desired and path to image url */
text-align: center;
color: #333 colour of main text on page goes here ;
}

#wrapper {
background: url(images/yourinnerbackground.jpg) ;
text-align: left;
margin: 0 auto;
padding: 0;
width: 780px; /* or your choice of size */
}

The main wrapper div has simply been called wrapper here, but you can call it anything you like of course. In your html, you would say:

html
head
head content goes here including styles
/head
body
div id="wrapper"
page content goes here...
/div
/body
/html

Other columns and boxes can be positioned inside your wrapper div as you want them. ( obviously the html will need proper code tags around the head, div etc, but I cant put them in here, or the browser thinks they are real tags and tries to use them. :headbang:

]]> by: *Kerry* http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-673 Wed, 01 Mar 2006 12:24:27 +0000 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-673 Changed the main page url to http://starlightstudiographics.co.uk/home.php I have checked validator coming throguh about div aligns and about cell padding and celle spacing not being able to be used with html 4.01??? Oh well I will leave it all, all seems to be working now. Thanks for your help Love kerry xx Changed the main page url to starlightstudiographics.co.uk/home.php…

I have checked validator coming throguh about div aligns and about cell padding and celle spacing not being able to be used with html 4.01??? Oh well I will leave it all, all seems to be working now.

Thanks for your help
Love kerry xx

]]> by: *Kerry* http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-672 Tue, 28 Feb 2006 19:02:01 +0000 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-672 PS: I got the body stuff removed it was beacause I had used it twice in my include and haeader file and wasn't checking the main include file that I had indexed, lol Kerry xx PS: I got the body stuff removed it was beacause I had used it twice in my include and haeader file and wasn’t checking the main include file that I had indexed, lol

Kerry xx

]]> by: *Kerry* http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-671 Tue, 28 Feb 2006 18:29:03 +0000 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-671 Thanks Jewel. I have got the tables all in the css with bgr url and dotted classes etc, just wondered if I could get the same effect using divs??? lol sorry for the barage of questions. lol Thanks for the links :smile: Thanks Jewel. I have got the tables all in the css with bgr url and dotted classes etc, just wondered if I could get the same effect using divs???

lol sorry for the barage of questions. lol

Thanks for the links :smile:

]]> by: Jewel http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-656 Mon, 27 Feb 2006 01:04:56 +0000 http://www.jewelswebgraphics.com/archives/2006/hello-finally-here/#comment-656 You can still use backgrounds with css, it doesnt just have to be colours. You can also use tables with css, but as I dont use them I am not as familiar with the codes needed. I suspect you give each table a css class, and then you can specify the background images in the css. For example if you wanted to have an outer table, you could give it a class"outer" so that in the css it could say <code> .outer: { background: url(images/mybackground.jpg) border: none; any other css that applies to this type of table goes here too } </code> and then on the page in the html, your table would have the class="outer" in it. <code>table class="outer"</code> So basically if you give each different table its own class you can put all the table properties in the css under that class and just label the table with its class in the html. so if you had more than one table using the same background image, you could give them both the same class name. If each table hasd a different background image, you give them different classes and put the bg info into the css. Basically, your tables are the same as divs in css, so you can style them in the css and not in the html itself. It is the same with body background images, fonts used and so on. All this stuff goes in the css in the head, and has a class name in the html. W3 Schools css info is very handy as a reference, and although it may not talk about tables in the css part, you can still style tables using css, if you must use them. :wink: Here are some tables resources for you: http://www.w3.org/TR/CSS21/tables.html http://joeclark.org/book/sashay/serialization/Chapter10.html http://www.456bereastreet.com/archive/200410/bring_on_the_tables/ You can still use backgrounds with css, it doesnt just have to be colours. You can also use tables with css, but as I dont use them I am not as familiar with the codes needed. I suspect you give each table a css class, and then you can specify the background images in the css. For example if you wanted to have an outer table, you could give it a class”outer” so that in the css it could say
.outer: {
background: url(images/mybackground.jpg) border: none;
any other css that applies to this type of table goes here too
}

and then on the page in the html, your table would have the class=”outer” in it.
table class="outer"

So basically if you give each different table its own class you can put all the table properties in the css under that class and just label the table with its class in the html. so if you had more than one table using the same background image, you could give them both the same class name. If each table hasd a different background image, you give them different classes and put the bg info into the css. Basically, your tables are the same as divs in css, so you can style them in the css and not in the html itself. It is the same with body background images, fonts used and so on. All this stuff goes in the css in the head, and has a class name in the html.
W3 Schools css info is very handy as a reference, and although it may not talk about tables in the css part, you can still style tables using css, if you must use them. :wink:

Here are some tables resources for you:

www.w3.org…

joeclark.org…

www.456bereastreet.com…

]]>