Jump to content

Sidebar


travisbatos

Recommended Posts

how do I make a sidebar the aligns to the left just like the one one here

<--------------- (with like GTA SERIES>*GTAIV -Official News & Info etc. etc.)

 

in lamen's terms (am I using that expression right?) I'm requesting the HTML code that aligns an image to left, bypassing anything else. like for example.

before

user posted image

after

user posted image

 

you wouldn't believe how many google results that are helpful come up for such a common and simple thing. zero!!!

Link to comment
Share on other sites

<style>

td{vertical-align: top;}

</style>

 

<table>

<tr>

<td>

<!-- Code for Nav bar -->

</td>

<td>

<!-- Code for the rest of the page -->

</td>

</table>

Prior to filing a bug against any of my code, please consider this response to common concerns.

Link to comment
Share on other sites

K^2, first with the idea of conspiracy theories, and now this!

 

Tables for layout? That is not the purpose of tables, tables are for tables of data. Like lists, surveys and what not. Not layout.

 

That's what <div> and CSS is for.

 

I'm afraid to admit this, K^2, but you are not all up there on my cool list.

Link to comment
Share on other sites

 

<style>

td{vertical-align: top;}

</style>

 

<table>

<tr>

<td>

<!-- Code for Nav bar -->

</td>

<td>

<!-- Code for the rest of the page -->

</td>

</table>

so I just put the "trailer", "porn", "sh*t", "f*ck", and "uhh" buttons in the place where it says "code for nav bar"? ok.

 

EDIT: thanks!! it worked.

Edited by travisbatos
Link to comment
Share on other sites

K^2, first with the idea of conspiracy theories, and now this!

 

Tables for layout? That is not the purpose of tables, tables are for tables of data. Like lists, surveys and what not. Not layout.

 

That's what <div> and CSS is for.

 

I'm afraid to admit this, K^2, but you are not all up there on my cool list.

 

EDIT: thanks!! it worked.

Results count. No?

 

And sure, you can do it with divisions, but you'd need more styles defined. This tabled code will work 100% of the time, and if you do need modifications to how it works, you can edit what your <td> tags do. Anything that <div> gives you can be given to a <td> with styles.

 

So what exactly do you want to do with divisions that isn't done here, anyways?

Prior to filing a bug against any of my code, please consider this response to common concerns.

Link to comment
Share on other sites

I though tables were used extensively for formatting. Is that a bad thing? I think tables are a good idea for simple formatting.

Link to comment
Share on other sites

I though tables were used extensively for formatting. Is that a bad thing? I think tables are a good idea for simple formatting.

Yes, for people not very well into HTML and CSS design. It's like using technology in a way it wasn't exactly intended, only because it is easier. Like running a red light.

 

That's why I disapprove of it.

 

K^2: I did not say it wasn't going to work, my point is that tables were intended for something different, and thus I want to use tables for what they were intended for, and not how they appear as easy of use. And besides with tables you get a lot of awful coding.

 

Read the definitions of HTML, will you?

Link to comment
Share on other sites

Like running a red light.

Your metaphor doesn't make sense. But i understand what u mean.

Link to comment
Share on other sites

 

Like running a red light.

Your metaphor doesn't make sense. But i understand what u mean.

Not necessarily. Running a red light is a quick and easy way to get where you're going, but it's against the law. Just like tables are an easier way to get layout done, but you're not supposed to do it. Sure, it's not a very good analogy, but it's not inaccurate.

 

Regardless, using tables is really only easier if you're using an editor such as Dreamweaver or Frontpage. If you're handcoding, there's no point.

 

 

And as svip said, tables are used for tabular data, divs for dividing sections. Plus, K^2, I'm afraid you can't get the same results on a <td> as with a <div>. Absolute positioning for one thing, and therefore overlapping sections, z-index, etc.

 

Not that many people utilize these attributes in their designs, but you can. And it's nice, once you get the hang of it, to have pretty much absolute freedom with divs and CSS.

 

smile.gif

Link to comment
Share on other sites

K^2: I did not say it wasn't going to work, my point is that tables were intended for something different, and thus I want to use tables for what they were intended for, and not how they appear as easy of use. And besides with tables you get a lot of awful coding.

 

Read the definitions of HTML, will you?

I still don't get what you are trying to say. Any tag can be extended to do whatever you need. I can make table cells flow like divisions or spans flow like tables. What they are called is fairly irrelevant, and just sets up the default styles. I was happy with default styles of <td> tags, so I left it alone. I might sacrifice some backwards compatibility when I start modifying stuff like that, but you already do that by using CSS.

 

But if you think that this problem needs to be solved differently, why don't you actually put it in code and explain why it is a better code than what I provided.

Prior to filing a bug against any of my code, please consider this response to common concerns.

Link to comment
Share on other sites

I still disagree.

 

These are the times I wish Cerbera was still around.

Link to comment
Share on other sites

Then why don't you at least write a code that shows how it is different. I just want to see how you'd do it.

Prior to filing a bug against any of my code, please consider this response to common concerns.

Link to comment
Share on other sites

Not sure if you missed my post K^2, but you cannot do the same stuff with <td>'s as you can with <div>'s.

 

An example of how I would (and how you should) accomplish the topic starter's dilemma (note: this example doesn't attempt to do any of the stuff that I just mentioned about <td>'s Vs. <div>'s. Also note that ideally you'd have all the styling in an external CSS file):

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>My Website</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><style type="text/css">#navbar{width: 200px;float: left;}</style></head><body><div id="navbar"><ul><li><a href="index.php">Home</a></li><li><a href="videos.php">Videos</a></li><li><a href="contact.php">Contact</a></li></ul></div><div id="content"><h1>Welcome</h1><p>Welcome to my site! Blah, blah, lorem ipsum, etc...</p></div></body></html>

 

Of course this will look like more coding than what you offered K^2, but obviously I included the entirety of the HTML. In actuality, coding the same thing with tables would make it slightly longer. But that's not the point; the point can be found in the actual element names themselves, as has been mentioned. Tables are for tabular data, and divs are for divisions of content.

 

If you insist, I can show you an example of something that's only achievable with divs and not with tables...

Link to comment
Share on other sites

If you insist, I can show you an example of something that's only achievable with divs and not with tables...

I would like that very much.

Prior to filing a bug against any of my code, please consider this response to common concerns.

Link to comment
Share on other sites

 

If you insist, I can show you an example of something that's only achievable with divs and not with tables...

I would like that very much.

Argh. mad.gif

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>My Website</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><style type="text/css">#navbar{width: 200px;height: 300px;background-color: #3399CC;color: #FFFFFF;position: absolute;top: 40px;left: 20px;z-index: 3;}#content{height: 400px;background-color: #66CC66;color: #FFFFFF;position: absolute;top: 10px;left: 100px;z-index: 1;padding-left: 150px;}#footer{background-color: #FF9900;color: black;width: 600px;text-align: right;position: absolute;top: 310px;left: 0;z-index: 2;</style></head><body><div id="navbar"><ul><li><a href="index.php">Home</a></li><li><a href="videos.php">Videos</a></li><li><a href="contact.php">Contact</a></li></ul></div><div id="content"><h1>Welcome</h1><p>Welcome to my site! Blah, blah, lorem ipsum, etc...</p></div><div id="footer"><p>copyright 2007 My Website</p></div></body></html>

 

 

LINK

 

Not that that's a very appealing setup, but you get the idea. And there are other things besides absolute positioning and z-index, BUT THAT'S STILL NOT THE POINT! suicidal.gif

 

 

<3

Link to comment
Share on other sites

 

Not that that's a very appealing setup, but you get the idea.

Actually i quite like it. The whole z-index positioning looks cool. Of course anything simpler and you could just use tables. I mean, like K^2 said, their just tags with names. You could define an XML document that used table like tags but call them something like <div> and use them for divisions. I know tables were not designed to be used as divs, but under the circumstances they are exactly the same.

Edited by Haro
Link to comment
Share on other sites

Unfortunately:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>My Website</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><style type="text/css">#navbar{width: 200px;height: 300px;background-color: #3399CC;color: #FFFFFF;position: absolute;top: 40px;left: 20px;z-index: 3;}#content{height: 400px;background-color: #66CC66;color: #FFFFFF;position: absolute;top: 10px;left: 100px;z-index: 1;padding-left: 150px;}#footer{background-color: #FF9900;color: black;width: 600px;text-align: right;position: absolute;top: 310px;left: 0;z-index: 2;</style></head><body><table><tr><td id="navbar"><ul><li><a href="index.php">Home</a></li><li><a href="videos.php">Videos</a></li><li><a href="contact.php">Contact</a></li></ul></td><td id="content"><h1>Welcome</h1><p>Welcome to my site! Blah, blah, lorem ipsum, etc...</p></td><td id="footer"><p>copyright 2007 My Website</p></td></table></body></html>

 

link

 

Tags can be styled however you want, as K^2 is saying.

This is not the point though. Certain tags imply that their content is of a certain type. (eg: <h1> for the main header, <table> for tabular data, <li> for a list, etc.). Using the wrong tags just makes it difficult for screen readers, spiders, etc.

Link to comment
Share on other sites

Uh... Roper... Hate to tell you this, but this can be done with <td> tags by simply treating them as divisions. Observe.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>My Website</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><style type="text/css">#navbar{width: 200px;height: 300px;background-color: #3399CC;color: #FFFFFF;vertical-align: top;position: absolute;top: 40px;left: 20px;z-index: 3;}#content{height: 400px;background-color: #66CC66;color: #FFFFFF;vertical-align: top;position: absolute;top: 10px;left: 100px;z-index: 1;padding-left: 150px;}#footer{background-color: #FF9900;color: black;vertical-align: top;width: 600px;text-align: right;position: absolute;top: 310px;left: 0;z-index: 2;</style></head><body><table><tr><td id="navbar"><ul><li><a href="index.php">Home</a></li><li><a href="videos.php">Videos</a></li><li><a href="contact.php">Contact</a></li></ul></td><td id="content"><h1>Welcome</h1><p>Welcome to my site! Blah, blah, lorem ipsum, etc...</p></td><td id="footer"><p>copyright 2007 My Website</p></td></tr></table></body></html>

 

 

Want to give this another shot?

 

Edit: Bah. Mike beat me to it.

Prior to filing a bug against any of my code, please consider this response to common concerns.

Link to comment
Share on other sites

Okay, so I was never aware you could position td's absolutely. blush.gif

 

But so what, because once you do that, what the hell is the point SINCE THEN IT'S NOT A F*CKING TABLE! suicidal.gif

 

And a table IS NOT MEANT FOR MAKING LAYOUT! God I hate CAPS, but I'm not backing down on this one. mad.gif

 

I don't give a damn if it works. Hell, I could put each section in a SPAN or a f*cking PARAGRAPH tag if I wanted and style it the same way. But a span is for A SPAN of something and a paragraph is for a GOD DAMN PARAGRAPH. That's the whole point of having different elements, otherwise we'd just have <tag> and apply id's and classes to it.

 

Do you see now?!?!!? I care all kinds!

 

 

 

edit: Not to mention the fact that, as I said earlier, using tables added more coding. 4 lines. Not much, but still notable.

 

edit2: Sorry for the ranting tone, guys. <3

Edited by TheRoper
Link to comment
Share on other sites

K^2, HTML elements have defined meanings, as do HTML attributes. Click the links for the normative descriptions; those tables are each an informative appendix.

 

The way an element is styled does not change its defined meaning. If you do this:

 

strong { font-weight: normal; font-style: italic;}

It still means "stronger emphasis than <em>". Similarly, if you style table elements their meaning stays the same. As styling can be applied to any element, why use the wrong one?

 

 

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

 

(Source: 11.1 Introduction to tables.)

The table elements are very much intended for tabular data. However, W3C are not immune to reality. Using table elements for layout is permitted, although very much discouraged.

 

Perhaps the most negative effects of using tables for layout are for text-to-speech software. In a layout table, you don't want any of the cells or rows to be announced: you just want to hear the content. But in a data table, you need to hear heading information to understand what the data is telling you. Just like you need to see the headings in order to read the table visually.

 

As these are commercial devices they generally implement heuristics to try and guess which tables are for layout and which are for data. They have to try and accommodate reality. However, detecting the difference is harder than you might think. If you use tables for layout, require text-to-speech software to perform unspecified guesswork to figure out how much contextual information it should be supplying to the user. Not a robust technique, I think you'll agree.

 

As mentioned, the <div> and <span> elements provide general-purpose grouping elements at block level and inline level, respectively. Using these elements for layout avoids such problems.

 

Since styling does not affect meaning, you could reduce that markup further:

 

<ul id="nav"> <li><a href="index.php">Home</a></li> <li><a href="videos.php">Videos</a></li> <li><a href="contact.php">Contact</a></li></ul><div id="content"> <h1>Welcome</h1> <p>Welcome to my site! Blah, blah, lorem ipsum, etc...</p></div><p id="footer">Copyright 2007 My Website</p>

I find making use of the existing elements with the odd <div> here or there always reduces the amount of markup. It also makes the code more logical when reading it, which is important when working in teams with other developers.

 

The meat and veg of K^2's markup is 358 bytes. Mine is 301 bytes (or 306 bytes with pritty-printing indention). It's not the meaning of life, sure. But it is nearly 16% more efficient for that tiny sample.

 

Check our clients' and partners' websites for examples. A List Apart, Nomensa and AbilityNet are others. No website is perfect but these techniques are better, imho. smile.gif

Edited by Cerbera
Link to comment
Share on other sites

Say, Cerbera, it is nice that you are back and all, but did you have to post it five times?

Link to comment
Share on other sites

  • 2 months later...
[GTD]GTAdrift

well, you cant do quite as much with tables as Div tags, but it is way way way easier, way way way quicker, and if you dont want to do so so so much, its much more practical, i think Svip has just got a problem with stuff he doesnt like,

 

SviP: Just cause u dont like it, doesn't mean they want ur opinion.. he asked for help, not for you to say what someone suggested is bad, Like i said, it is good for basic stuff, it seems all he wants to use it for is basic stuff.. so.. svip, answer the question, dont say what u think.. and thats my opinion.. and i dont care if u dont like it..

 

lol.. Cerb is right and so are u Svip, but i think he was looking for a quick and easy way to do it.. lol..

 

Peace.. Me wants no more fightin wid ya Svip, lessa be freindsss.. lol tounge.gif

Link to comment
Share on other sites

  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.