Author Topic: Sidebars (Read 3397 times)

Kataze · « **on:** August 18, 2006, 03:09:43 pm »

I want a sidebar for navigation, but I can't seem to get it down. It needs to have a different color behind it, preferably an image, and of course, space for links. I was hoping for HTML, but some simple php or something is fine too.

Nocte · « **Reply #1 on:** August 18, 2006, 04:12:59 pm »

Furweb.com has a side bar, perhaps you can use that one as an example. The nice thing is that is also stays in place when the user scrolls. (Unless said user has Explorer, then it will scroll along with the rest.)

The bit of HTML that defines the side bar is:

Code Sample

<div class="sidebar">
<div class="sidebar-header">Menu</div>
<p><a href="index">Main page</a></p>
<p>Change rating:<br />
<a href="set-rating?r=0">G</a> <a href="set-rating?r=1">PG</a> (NC-17) </p>
<p><a href="guidelines">Submission guidelines</a></p>
<p><a href="submit-step1">Submit a site</a></p>
<p><a href="newest">Newest additions</a></p>

</div>

Then, you need a style sheet. Are you familiar with them? If not, I'll also explain them. (It's not as difficult as it seems.)

Anyway, here's the file:

Code Sample

div.sidebar {
  border: solid 1px #000066;
  position: fixed;
  width: 120px;
  left: 7px;
  top: 100px;
  list-style: none;
  display: block;
  float: left;
}

div.sidebar p {
  font-size: x-small;
  text-align: left;
  line-height: 1;
  font-weight: bold;
  margin: 8px .2em;
}

div.sidebar a {
  text-decoration: none;
}

div.sidebar a:hover {
  text-decoration: underline;
}

div.sidebar-header {
  background-image: url("../img/topcell.jpeg");
  background-repeat: repeat-x;
  font-weight: bold;
  font-size: small;
  padding: 3px;
}

As you can see, every <div> class used in the HTML has its own definition here. I have only used a background image in "sidebar-header", of course you can also add one to "sidebar" in the same fashion.

Kataze · « **Reply #2 on:** August 19, 2006, 02:01:25 pm »

The style sheet goes in the <head> tags, right? Or wrong? I used to use style sheets, but I stopped. I'm also considering just doing the entire site in flash.

Lost_Cause · « **Reply #3 on:** August 20, 2006, 12:04:51 pm »

css style sheets yeah.
I never got mine to work in IE though, they always work in firefox

'>
I wasn;t aware there was a way to get one part of a page to remain in place while another could be scrolled without using frames

I was just messing about with that bit of code Nocte Provided and it behaves very diffrently in Firefox and IE,
while frames work in both.

Kataze · « **Reply #4 on:** August 21, 2006, 12:19:25 am »

I might go for flash, then. Firefox users are prone to....attacking.

Maybe I'll just put the little "BEST VIEWED IN INTERNET EXPLORER 6.0" button to tick them off ':p'

Sorry, I got carried away there. Everyone in this thread is using firefox, aren't they? *Duck and cover*

Lost_Cause · « **Reply #5 on:** August 21, 2006, 02:38:34 am »

It's best to aim to get your site to work in both

For furries anyway.

I think most around here probably use firefox,
IE tends to be more widely used, on account of it being the default.

This little bit of code seems to work wonders in firefox.
Although it acted a bit funny on me when I first tryed to edit it.
So far I haven't actualy got it to work at all in IE

'>
I Probably broke it though.(Either the code or IE whichever turns out to have more bugs)

It's kind of a shame. If I could get it to work in IE I could do away with my frames altogether.

It would probably double the size of every single HTML document I have, but Somehow I think a 5kb to 6kb HTML documents will trouble the vast majoridy of people that would open my site with 100kb and 1200kb of images per page

Nocte · « **Reply #6 on:** August 21, 2006, 04:12:54 pm »

Quote (Kataze @ Aug. 19 2006, 8:01 pm)

The style sheet goes in the <head> tags, right?

Indeed. You need something like this:

Code Sample

The cool thing about this approach is that you can use the same stylesheet in multiple pages, and the browser only has to load it once.

And yes, unfortunately IE doesn't understand a good deal of CSS 2, and 'postition: fixed' is one of them. I have seen work-arounds for it, but they are ugly kludges that break other stuff.

Jiggly · « **Reply #7 on:** August 21, 2006, 05:47:16 pm »

Why don't you just use tables?

YAY! EASY!

Kataze · « **Reply #8 on:** August 21, 2006, 07:16:03 pm »

I've done that in the past, it doesn't turn out well.

I'm thinking flash will maximize compatability, seeing as how it's a must for anyone planning to do anything with the internet

'>

Another idea I just came up with is reformatting the site for each browser. It probably won't be too complex, so I think I'm safe.

The site is going to be....something...just a place to get all the suff I want out there.

Jiggly · « **Reply #9 on:** August 21, 2006, 07:24:53 pm »

Flash isn't as instantly compatible for all users.

If they don't have the player installed or the latest version that you may have made the site in, they have to take an extra step and download the player. It's a major pain for some people. When it happens to me, I just skip the site. As an internet user, my time is precious and valuable, apparently.

I have a more seething hate for Flash, but I don't want to get into that now.

What has been your problem with tables? They are very simple and basic for beginners as well.

It's definately possible to create one good site that works for ALL browsers.

Kataze · « **Reply #10 on:** August 21, 2006, 08:39:14 pm »

Tables?
They just....don't look good. At least when I make them. Sizeing the tables properly is also difficult for some reason.

Flash?
Well, true, latest version isn't commonplace for most users, but I don't use things like the majorly in-depth actionscript that is associated with an update. Most things I make can run in Flash 4. Noone I know DOESN'T have ANY flash at all, and since this is more of a personal site than a heavy traffic one, I should be fine.

P.S. Updating isn't all that difficult. Heck, there hasn't been a pop-up installation box since flash 7. Just go to the site, and you're done.

Jiggly · « **Reply #11 on:** August 21, 2006, 08:48:33 pm »

Okay, do what you do.

I'll visit when it goes up.

Lost_Cause · « **Reply #12 on:** August 22, 2006, 04:09:28 am »

well since you define tables, wheather they look good or bad is a matter of how you build them. I meen when trying to get that script to work I used a table to try and manage the position of the sidebar. It was however only nesasary in IE, in firefox where it actualy worked The sidebar was positioned by the CSS.

You don't need to add it in an external style sheet, it can be added directly to the page too.
But like Nocte says, if you use an external one and all your pages break you know the problem is witht he style sheet, if only one breaks you know it is with that page.
If you only have one page though just add it directly and save some trouble.

I'm still stuck on frames though.
Since they work reliable in all majour browsers.
Even if they do mess with crawlers and confuse some people when scrolling.
When and if Microsoft bother to include the full range of XML, CSS and the rest of that stuff in IE I'll make the change.

Edit:
Ok maybe that isn't totaly fair. XML actualy works in IE, it doesnt however work in Firefox.
You just cant win with these things.

Nocte · « **Reply #13 on:** August 22, 2006, 04:08:48 pm »

Tables do have a few drawbacks, though. You can't make a sidebar that stays in place when the user scrolls down. And it doesn't degrade well to mobile browsers or other unusual platforms (and it's quite likely you don't care

'> ).

Lost_Cause: As a rule of thumb, Microsoft is about 5 years behind on current technology, so it is really about time they get all the late 90's stuff working in IE7.

But what is it about XML that does not work in Firefox? I've been toying around with XML in combination with CSS and XSLT, and I was under the impression that it is supported quite well.

Lost_Cause · « **Reply #14 on:** August 23, 2006, 10:50:44 am »

Maybe My vershion of firefox just isnt up to date, but I've been getting XML files straight off w3schools and half of them displayed poorly or did not work at all in firefox, but every one of them worked in IE.
Maybe I'm not working them in right, but I also looked at the examples given on that page and none of them worked in firefox either, but when I fired up IE they all did!
So something is rotten about XML in Firefox. Wheather it's just my one I don't know. I'm fairly sure it's up to date.

and if you add a floating elament inside a table, every browser that suports that CSS will ignore the positioning information of the table and simple make the item float according to the CSS while every browser that doesn't understand the CSS positions according to the table.
So the table is only used in browsers where the item could not be made fixed anyway so it scrolling with the rest of the page would happen regardless.
It's kind of like including 'name=" "' and 'id=" "' in the same html.
those that understand one us it, those that understand the other use that.

As I said, frames are the only reliable way to make something stationary while the rest moves.
But all HTML comes with it's own problems.

Unfortunatly I have no way to view my pages in anything other than a PC or a laptop so I can't really design to work in anything other than them, so mobile platforms can't really be a concern.

But most people in Ireland dont have internet access at home, never mind on their phone so I don't think I need to worry about it much to display my content to people round here

Kataze · « **Reply #15 on:** August 27, 2006, 01:22:01 am »

I'll have to think of something.... T_T()

Benjamin · « **Reply #16 on:** September 02, 2006, 01:27:27 am »

That floating menu worked perfectly fine for me, and I use IE 7.

I enjoy using tables, myself. They're quite handy for working out one's layout and such, especially if you want or need to get a bit fancy.

'>

I'm a big fan of iframes now though. They're quite effective in certain approaches to web design.

Benjamin

Lost_Cause · « **Reply #17 on:** September 02, 2006, 10:06:38 pm »

apparently part of the problem with frames and Iframes is that people get confused about what part of the page they have selected when scrolling

It can also mess up search engins a little bit.
They can display links to the inside page if an in like frame or in a page that uses frames to create a navigation bar they can link to only one half of it or th eother but skip the page that loads them the way they are ment to be seen.

There is nothing wrong with tables as far as I know.
They don't cause any problems I know of and once you use the propper begining and end tags they work perfectly without causing confushion or problems.