CSS Wrapper

[Steeevoe]

I see lots of people use this in their websites around most of their HTML!

I don't understand what they do. Are they used to make the website centered? What do you need to make them?

At the moment on my webpage I am using a table to get everything centered. Is there a better way?

[VPmase]

Divs are better than talbes. Tables take longer to load than divs but divs are harder to organize lol.

[freecrm]

From a personal point of view, I always thought that tables were easier to understand.

divs are the way to go because they are alot more flexible. However, there are many issues regarding cross-browser compatibility.

In a nutshell, a <div> is the start of a division, terminated or closed by </div>

Within the css styling (which can be specified in the same page or in one common page for all of your site), you can specify how this <div> looks. Divs tend to be more powerful as a result.

I have just changed all of my site from tables to divs.

I'll give a very quick example.

In tables, for the whole page, you might use the following:

<table width="100">
<tr>
<td>&nbsp;</td>
<td>

<p>Some content</p>

</td>
<td>&nbsp;</td>
</tr>
</table>

or something like that (too tired to think)

with divs and styling, you use several divs to split it up.

i.e.

<div id="wrapper">
Some content
</div>

which looks a lot simpler, but you then have to tell your div what it looks like (in the head).

<style type="text/css">
#wrapper{
border: 1px solid #000;
width: 750px;
margin-left: auto;
margin-right:auto;
}
</style>

This style specifies the look for the one-off "div" called "wrapper" with a single line black border, 750 pixels wide and automatically centres.

One major advantage of divs is the ability to change the look of a whole site based on one css style page.

For instance, if you were to use the same divs in multiple pages, with a tag in each page head like:

<link href="../css/mystyle.css" rel="stylesheet" type="text/css" />

You can then create one style page (called mystyle.css). In this page, you might structure it as follows:

@charset "utf-8";
/* CSS Document */

body{
background: #99cccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
}

#wrapper{

more styling
}

column{

more styling
}

etc...

When you change the single css style page, every page that uses this style page will change accordingly.

Good no?

_____

By the way, when you get your head round that, you might like to se this post which may help more.

http://forums.x10hosting.com/tutoria...s-testing.html

[JKoltner]

You've gotten some good replies here, but I'll also add:

-- The contemporary idea with web pages is that HTML is used for the "substance" or content of your web page and CSS is used for the "style" or layout. This is kind of the difference between something like MS Word and LaTeX: The way most people use the former, they combine the content with the layout all in one, whereas in the later you're forcibly made to separate the two. (Newer versions of Word do let you separate the two, although that's not the way most people operate unless they're writing theses or books.)
-- For small web sites that don't change a lot, arguably ignoring CSS can actually be a bit faster and easier. For larger, dynamic web sites, CSS with divs and spans saves a lot of time over having to constantly shuffle tables around. If you go to college these days, they're big on CSS since they're assuming everyone's going to end up working for big companies with big web sites. If you're doing your own site though, hey, use whichever you like better.
-- One significant advantage of CSS is that it makes it a lot easier for small-screen devices (e.g., mobile phones) to reformat the web page for viewing in a still somewhat sensible manner. Heck, CSS even lets you specify different style files depending on the type of device that's viewing your page, if they're printing the page or not, etc., so again there's a tremendous amount of flexibility and power there... if you want it.

---Joel

[Steeevoe]

Thankyou guys, you have answered all my questions well :D

[Steeevoe]

I have been using some CSS on this page:

http://www.bmac.exofire.net/indextest.html

but the wrapper isn't making the information central. How do I make it all central to make it look like this with CSS?:

http://www.bmac.exofire.net/index.php

[claes89]

Your index file isn't working for me, but your indextest.html looks centered in Safari

[Steeevoe]

I have updated the original index file to .php for recent changes I have made!

Ok, does anyone know how to get the column centered in internet explorer, or does is it not possible with IE?

[freecrm]

Hi Steeevo

I am now testing this in the dreaded IE6!

Weirdly, your indextest isn't working but the index is!

I had a quick look at your css but nothing stood out as being completely wrong.

I have spent a long time on this and I would recommend that you take a look at the css on my site and the way it is structured. I have tested this in IE6, IE7, Chrome and FF. Opera is the only possible problematic area.



Ooooh - scrub the above - try changing your doc type (at the top of the page)... you're using an old version.

Try this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


_____________

Also this bit..

<DIV id=announcements>
	<CENTER><A href="events.html"><H1>Upcomming event: 1st April: Swap Meet, Click Here For Information</H1></A><CENTER>
    </DIV>

Firstly, you could specify the text centred in the css with "text-align: center;"

Secondly, you haven't closed off the center at the end ... "</center>" which will give you problems lower down the page.

[Otaku Ichise]

What you see is a div with an id called Wrapper (we normaly add this do decorate more something in your website)
Here is my website centered with one div (css atribute: margin-left:auto margin-right:auto) containing all other div always:
http://otakushrine.elementfx.com/