CSS

[sixthcrusifix]

I would also like to point out that what the original person wanted is MUCH MUCH MUCH easier to do in tables and very easy to make compatable with different screen resolutions using %s instead of absolute values.

Code Select Expand


<div align='left'>
<img src='LOGO.gif'>
</div>
<table align='left' width='30%'>
<tr><td>NAV</tr></td>
<tr><td>NAV</tr></td>
<tr><td>NAV</tr></td>
<tr><td>NAV</tr></td>
</table>
<table>
<tr><td>
<pre>
<h1>PAGE TITLE</h1>
<strong>Important Stuff</strong>

Blah Blah Blah
Blah Blah Blah
BLAHAHAHHAHAHAHAHA
</pre>
</tr></td>
</table>


That's pretty basic but it works. There are about 20 different ways to do that exact same thing I can think about though, it's still a lot shorter than all that CSS one of the posters gave and I think it does what the original poster wanted. It actually did not display properly when I tried <div> or just with nothing.

This all reminds me, I need to work on my site again, it's been so long I can hardly remember how to do this stuff.

[Evilsprouts]

Well the actual reason I wanted to do it in CSS is because not only wanting to learn CSS but I'm making provisions for the future, I could have easily done it with tables but didn't want to. Thanks for all the help btw.

[Guide]

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

That's why I said "this isn't really a big issue unless you've got many (many many) visitors" (I like quoting myself ). The weight isn't the reason why I don't use tables, as my websites don't usually get that much visitors...

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.

There I don't get your argument. If you've got but one page on your website, which I doubt, it'll indeed be easier to put everything through attributes. But if you've got many pages, it's far easier to use classes and id's... You just have to put them from the beginning, even if you don't use them immediately.
Then you'll be able to change all pages from your websites by just changing a few lines in the CSS file...

I did a major rework on my website's design a few months ago. I didn't even touch the XHTML or the PHP part ; I just changed the CSS, and it took me about an afternoon to finish it. When I was working with tables, these kind of rework took me at least three or four time that...

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.

My whole website is completely generated through PHP. All the texts and menus are displayed through loops. And it is as easy to do with <div>s as with tables.
With tables, you'd have done something like :

foreach($texts as $text) {
     echo '<tr>';
     echo '<td>' . $text . '</td>';
     echo '</tr>';
}

or something close. With <div>, you just have to make :

foreach($texts as $text){
     echo '<div class="text">' . $text . '</div>';
}

with the same result...

Also, when you take the XHTML/CSS logic, it's far easier to completely separate all your website's components : Structure, Content, Layout.
Structure is the XHTML.
Content is generated through PHP/MySQL and loaded into the XHTML Structure.
Layout is handled through the CSS whatever the changes made in the content.

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

You can use semantic tags into the tables, but the tables themselves aren't semantic when used for layout issues.
Tables are for storing data. For instance (I know, I shouldn't always take my website as an example, but it's the first to come in my mind ) in my website, I use tables to display lists of prices and disponibilities for the location of an appartment.
Tables, thus, have a semantic meaning, which has nothing to do with layout.
If you want to make separations to make the layout easier, you have to use unsemantic (asemantic ?) tags. And "parts of pages" being blocks rather than inline separations, the tag to use is the <div>...

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.

Uh... All browsers supporting HTML do support XHTML, which is in fact quite the same, except for the fact it allows less "imagination" from the coder's part. What older browers don't support is CSS, yet this is becoming less and less of a problem.
CSS 1.0 is supported in IE 5, FF, Opera and I think even Netscape. CSS 2.0 is mostly supported in IE 6 (except for a few useful things, yet there are ways around), and totally supported in Firefox. I think Opera does support it mostly ; about Netscape I don't know. (I must admit I haven't used Netscape for years, and when I did I knew nothing about HTML, CSS, the W3C and website designing, hence I didn't care whether it did or didn't support anything...)


Anyway, I know there are many coders sticking to tables and old HTML 4, and it'll still be used by most webmasters for years on... However, I don't see the point in voluntarily keeping old standards when it's so easily possible to do otherwise...

[GP™]

Now we got the blood pumping, and belive it or not, I like a good argument.
XHTML is here, however, I'm sticking with HTML, for now.

I do personally recommend you play around with XHTML, and CSS.
You need to learn, however, I'm not saying do a major overhall of your site, for something thats far away.

I also recommend learning javascript, php, and perl. As they are all extremely useful tools.
I personally know php, learning javascript and perl..

[Guide]

I think I did enough W3C propaganda for the time being

Anyway, I agree about learning Javascript, PHP and Perl (though I never use the latter ; knowledge is always good !).
Well, till recently I'd have been arguing about the use of Javascript, yet since I discovered the AJAX technology I'm looking over JS with another eye... It gives really incredible possibilities !

[sixthcrusifix]

There I don't get your argument. If you've got but one page on your website, which I doubt, it'll indeed be easier to put everything through attributes. But if you've got many pages, it's far easier to use classes and id's... You just have to put them from the beginning, even if you don't use them immediately.
Then you'll be able to change all pages from your websites by just changing a few lines in the CSS file...

I did a major rework on my website's design a few months ago. I didn't even touch the XHTML or the PHP part ; I just changed the CSS, and it took me about an afternoon to finish it. When I was working with tables, these kind of rework took me at least three or four time that...

But I'm, saying if you have a poopload of them then you have a poopload of IDs you have to define somewhere faar away from there and that complicates things, besides if you have dreamweaver it's easy to change every single attribute to tables etc. all at once.

Also I dunno why you use the foreach loop but I don't really know what your site does. Either way you still use tables along with CSS.

[Guide]

True, if you've got Dreamwaver you can change easily anything from a table layout.
But then, if you use Dreamwaver, you don't truly have to bother yourselve with such considerations. For my part, I prefer the good old Notepad++

As for the foreach loop, it was just an example of one of the multiple possibilities to inject texts loaded through PHP into an (X)HTML file... There are hundredth of possibilities, depending on how is your system designed.
In my website, I've got a sort of CMS system in the background wherein pages and texts can be added and/or modified, which means everything must be loaded from MySQL when the page is loaded. I load everything into tables, and I make my output with a foreach loop...

[lotsofish]

I try to use CSS/DIV's as much as possible... but I am guilty of using tables sometimes when DIV's could be used instead. If I am using tables, I always use classes with them though,  because 1) I can store the styles in a separate file and edit them easily and 2) you can just do so much more with css as far as styling and looking better.

Not sure about CSS? Check out this site: http://csszengarden.com/  The base html file is the same, but you can choose radically different styles by loading different stylesheets.

[hypnoticvibe]

Right now, I'm working on a non-HTML version of my website and bought a nice template. The entire layout is in tables with the exception of calling an external stylesheet with 2 lines of CSS code. This is for the fonts. I played with it for a while and concluded that fonts are not easy to get working in all 3 browsers just using tables, so as far as the universal table thing... I'm only in 95% agreeance.

[Evilsprouts]

Please can someone tell me where I have gone wrong, I can't seem to get footer to be the font and size I want?

My css:

Code Select Expand

#footer{font: normal 10px Verdana, sans-serif;}

body{
background-color: #000000;
color: #FFFFFF;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #000000;
margin: 0px;
text-align: center;
}
img{border: 0;}
#pageHeade{
margin-top: 0px;
text-align: justify;}
#mainpage{
letter-spacing: 0px;
margin-bottom: 0px;}
a:link{
font-weight: bold;
color: #FFFFFF;}
a:visited{
font-weight: bold;
color: #FFFFFF;}
a:hover, a:active{color: #FFFFFF;}
#container{
position: relative;
margin: 0 auto 0 auto;
padding: 0 0px 0 0px;
width: 930px !important;
width: 930px;
background: #000000;
color: #FFFFFF;}
#mainpage{
position: absolute;
left: 220px;
top: 150px;
width:620px;
height:365px;
margin: 0 auto 0 auto;
padding: 0 0px 0 0px;
font: normal 12px Verdana, sans-serif;}
#pageHeader{
position: absolute;
left: 90px;
background: url("http://www.evilsprouts.co.uk/new/inc/logo.gif") no-repeat 0px 0px;
margin-left: 0px;
margin-top: 0px;
margin: 0 auto 0 auto;
padding: 0 0px 0 0px;
width: 400px;
height: 100px;
float: left;}
#menubar{
position: absolute;
left: 90px;
top: 150px;
width:125px;
height:365px;
margin: 0 auto 0 auto;
padding: 0 0px 0 0px;
letter-spacing: -1px;
font: bold 14px Verdana, sans-serif;}
.housebutton{
margin-bottom: 0px;
margin-top: 0px;}
.housebutton a{
border: solid 1px;
border-color: #FFFFFF;
display: block;
color: #FFFFFF;}
.housebutton a:link{
color: #FFFFFF;
text-decoration: none;}
.housebutton a:visited{
color: #FFFFFF;
text-decoration: none;}
.housebutton a:hover{
color: #000000;
background: #FFFFFF;}
#bottom{
position: absolute;
height: 50px;
width: 770px;
left: 90px;
top: 625px;}
#location{
height: 25px;
width: 570px;
margin-left: 0px;}
#contact{font: bold 19px Verdana, sans-serif;
float: center;}


Thanks

[sixthcrusifix]

True, if you've got Dreamwaver you can change easily anything from a table layout.
But then, if you use Dreamwaver, you don't truly have to bother yourselve with such considerations. For my part, I prefer the good old Notepad++

As for the foreach loop, it was just an example of one of the multiple possibilities to inject texts loaded through PHP into an (X)HTML file... There are hundredth of possibilities, depending on how is your system designed.
In my website, I've got a sort of CMS system in the background wherein pages and texts can be added and/or modified, which means everything must be loaded from MySQL when the page is loaded. I load everything into tables, and I make my output with a foreach loop...

OH I see, well I just like while better because I dunno foreach just bugs me, not in a technical way I just hate writing foreach LMAO I'm crazy, anyway I don't understand why everyone critizises dreamwearver and praises notepad.

I do write out code rather than use the WYSIWYG editor (Because teh WYSIWYG editor SUCKS) But it's still a lot easier to hand code things in dreamweaver, it's easier to search for things and to fix mistakes and to make sure stuff is compatibale, plus you can upload via FTO right after your done and not switch programs. So to anybody who can afford dreamweaver and codes in notepad just because, I say to you, you're just being silly.

Anyway, I think that what I've been saying over and over (and eventually everyone will get it and be like "othe other would have worked but really as long as your website displays properly in the 3 major Browsers (Firefox, IE and Netscape[and maybe safari too]) then it doesn't matter what you used underneath.

(But as far as people having browser errors and the rare few people with OLD ass browsers CSS degenerates poorly).

[hypnoticvibe]

Please can someone tell me where I have gone wrong, I can't seem to get footer to be the font and size I want?

Use 10pt, not 10px (for the font).
I don't know how you are expecting the footer to be a certain size when you haven't specified any size.

Side note:  Sorry guys, I feel unloyal lately... I will start posting more soon. This is a free hosting service and the least I could do is participate in the forums.

[Evilsprouts]

ok i changed it to 10pt but still the same?

[hypnoticvibe]

ok i changed it to 10pt but still the same?

Could you please post the HTML you are using to call the ID?

[Evilsprouts]

Ok sorry I think the sun is getting to me the link is www.evilsprouts.co.uk/update