CSS

[Evilsprouts]

Hiya,

I'm redesigning my site and I'm steering away from the tables so purely css for me. I have run into a problem with alignment, I have a logo at the top left of the page then navigation under that on the left going down and I want text next to the navigation in the centre but I cant seem to get it to go there and work in all browsers. Can anyone help me with this please?

___LOGO___

NAV
NAV
NAV                          TEXT TEXT TEXT TEXT TEXT TEXT
NAV
NAV

Thanks 

[Guide]

This is the sort of code I use for this kind of design (see www.loc-alpes.com if you want to look at the result) :

XHTML part (body) :

Code Select Expand


<div id="header"></div>

<div id="menu">
     <h2>Menu Title</h2>
     <ul>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
     </ul>
</div>

<div id="main">
     <h1>Page Title</h1>
     <p>Page Content</p>
</div>


And the CSS :

Code Select Expand


body {
  margin : auto;
  width : 100%;
  /* Add your fonts, font-size, colours, background image, whatever... */
}

#header {
  width : /*Width of your logo */;
  height : /*Height of your logo */;
  background-image : url(path/to/your/logo.jpg);
  background-repeat : no-repeat;
}

#menu {
  width : 200px;
  margin-top : 10px;
  margin-left : 10px;
  float : left;
}

#main {
  margin-left : 220px;
  ...
}


If you need more explanation, just ask, or look at my source codes if it helps...

[Evilsprouts]

Thats great thanks. 

[hypnoticvibe]

This always works in Opera, FF, IE, and Safari...
Here's how I would align the text:

Code Select Expand


.centertext {
  position: absolute;
  height: apx;
  width: bpx;
  top: 50%;
  margin-top: -xpx;
  left:50%;
  margin-left: -ypx;
  visibility: visible;
}
Make x half of a. (dont' remove the negative symbol)
Make y half of b. (dont' remove the negative symbol)
Then...

Code Select Expand

<div class="centertext">
TEXT HERE
</div>

[webzone (archived)]

This will cause problems with scrolling if the window is too small.

[sixthcrusifix]

CSS is a bad idea. It's okay for casual use but CSS degrades terribly and tables are a wonderful thing that have been a part of HTML for a long time.

I would not suggestr a redesign in this direction.

[brainiac744]

It actually depends sixthcrusifix. W3C recommends that people start using XHTML and CSS to separate content from design. Are tables easier to use? Yes. Are they the best thing? Probably not for the future.

[hypnoticvibe]

This will cause problems with scrolling if the window is too small.

I don't know why someone would have their window that small (or know anyone who browses with their window so small) but I'm sure you've been doing this longer than me so I'm probably not smart to debate.

On a lighter note, the website http://www.opera.com/ uses a whole lot of CSS and they have some genius webdesigners.

[GP™]

Personally, I would stick with tabled, for right now.
As of right now all browsers can read them, as for css, no. well, yes and no. all browser read it difrently..
Untill CSS is more gloabal, I'm stickin with tables my self

[hypnoticvibe]

Personally, I would stick with tabled, for right now.
As of right now all browsers can read them, as for css, no. well, yes and no. all browser read it difrently..
Untill CSS is more gloabal, I'm stickin with tables my self

I thought my CSS example would create a bunch of tables (if repeated and altered). I'm new to this. Can you explain what you mean? XHTML tables? The basic HTML tags like this?

Code Select Expand

<table>
     <tr>
          <td>
              BLAH BLAH 1
          </td>
     </tr>
     <tr>
          <td>
              BLAH BLAH 2
          </td>
     </tr>
</table>

[sixthcrusifix]

This will cause problems with scrolling if the window is too small.

I don't know why someone would have their window that small (or know anyone who browses with their window so small) but I'm sure you've been doing this longer than me so I'm probably not smart to debate.

On a lighter note, the website http://www.opera.com/ uses a whole lot of CSS and they have some genius webdesigners.

well good for them. I'm just going by experience and what my Image Manipulation teacher, Ian Tepoot, told me. He's a pretty accomplished Graphic Designer who's been doing this for about 10 years, so I go by what he says usually. 

[Guide]

Ouch. I must say I stand strongly against using Table layouts, and in favour of the CSS, and this for these main reasons :

1) Weight : this isn't really a big issue unless you've got many (many many) visitors, yet a table-based design means more code, and thus a heavier file, and thus a slower website...

2) Semantic : tables are for showing data. If you want to "divide" your page into different parts, you should use <div>s, which is what it has been made for.

3) Accessibility : CSS (at least 1.0) are now supported by all navigators more or as recent as IE 5... While HTML attributes used on tables may not be supported in the future in the most recent versions of the navigator. Thus, if you don't want to redesign the whole thing in the future, it's best to use CSS from now on...
Besides, you must think about all those who haven't got a "normal" browser, meaning by that the blind people, those with a textual browser, and so on... For those ones, it will all appear far better if you use semantic tags (<div> for separation, <strong> for important content, <h1> for headers...) than if you use tables...

4) A Clearer Code : using XHTML and CSS, you can separate the content and the layout, which means that it's easier to read it and, if you work in a team, it's easier to separate the work : one fills up the content, one makes the design, then you regroup the files and there you are ! Also, you can have one single CSS file linked to hundreds of pages. Want to change your whole design, on all your pages ? Just change a few lines in the CSS and you're done... Which can't be done with simple table layout.

If you doubt how much can be done with the CSS (and accessible to all browsers), I'd advise you to go and visit http://www.csszengarden.com
This website it just amazing and shows how much a design can be transformed, using the same XHTML basis, into completely different layouts...

As a conclusion, I'd say that, in my opinion, the best thing to do is to follow the most recent recommandations of the World Wide Web Consortium, which are usually announcing what browser will support in the future...

[hypnoticvibe]

This will cause problems with scrolling if the window is too small.

I don't know why someone would have their window that small (or know anyone who browses with their window so small) but I'm sure you've been doing this longer than me so I'm probably not smart to debate.

On a lighter note, the website http://www.opera.com/ uses a whole lot of CSS and they have some genius webdesigners.

well good for them. I'm just going by experience and what my Image Manipulation teacher, Ian Tepoot, told me. He's a pretty accomplished Graphic Designer who's been doing this for about 10 years, so I go by what he says usually. 

I play devil's advocate to expose the facts. The, "Well good for them" was unnecessary. I intended no offense and was not attacking you.

[sixthcrusifix]

This will cause problems with scrolling if the window is too small.

I don't know why someone would have their window that small (or know anyone who browses with their window so small) but I'm sure you've been doing this longer than me so I'm probably not smart to debate.

On a lighter note, the website http://www.opera.com/ uses a whole lot of CSS and they have some genius webdesigners.

well good for them. I'm just going by experience and what my Image Manipulation teacher, Ian Tepoot, told me. He's a pretty accomplished Graphic Designer who's been doing this for about 10 years, so I go by what he says usually. 

I play devil's advocate to expose the facts. The, "Well good for them" was unnecessary. I intended no offense and was not attacking you.

I'm not attacking anybody either. It is good for them, good for them, I don't see how that was mean or unnecessary, good for them, I can't say I care one way or the other.

Also to the other guy, you're really nitpicking on tables, and you're REALLY reaching out there on the whole "more code = larger file" thing, the difference is virtually impossible to notice even on modems.

If you're casually creating a website with a normal amount of tables it's much more convenient just to use tables because of the fact that they're not seperated. It's aslo easier to define the table's attributes right then and there as apposed to creating a bunch of ID's when you wanna change one little thing.

I think CSS is great and I use it whenever I see that it is needed however I use it to COMPLEMENT my website, not to buiild it with.

"2) Semantic : tables are for showing data. If you want to "divide" your page into different parts, you should use <div>s, which is what it has been made for."

Yeah that makes sense, I don't think people should go around using tables for every little thing. A common thing I see is people just putting everything in tables and using table rows to devide stuff, here's where I agree with you, because doing that is just silly.

But why does using tables mean you can't use semantic tags? I don't get the debate we're having.

Tables are for ORGANIZING data, and quite frankly a table is a lot easier to handle when you're trying to display results etc. And especially generating a table filled with dynamic content is very easy in PHP using loops where as I can't imagine how you would use CSS for that. Tables are a perfectly valid part of design that have their place just as CSS does and I think you're a fool if you choose to abandon either of them.

You can't just say "don't use tables, use CSS", They're not really even comperable objects, it's like saying "Don't take Tylenol, take Ibuprofin" when the truth is that the two drugs are very different and you should use the one that you need when you need it.

[GP™]

I agree, Its personal Preference. After doing some research I find that tables are only 5% of the loadtime.
They say that by not using tables and using css will make little or NO difference.

As for html and XHTML.
I find... XHTML is, one day, purhaps far or near away, going to take place of html.
Right now HTML is supported more widely than XHTML, XHTML uses more strict codes.
However, I don't see wakein' up tomorrow, or before 2007 and seeing Internet explorer or mozzila not supporting html
as, by doing that it would not support a LOT of websites.

Which is better for your site.. You decide, Look up the facts, Its PERSONAL SELECTION as of right now.

L8r,
Gordon