Web development: making a sidebar (noob question)

Miscellaneous Forums/General Discussion/Web development: making a sidebar (noob question)

I want to have a sidebar but I no idea how to do it. I thought that CSS had some way of doing this but I've tried margins, alignment, borders and padding and none of them work and some have nothing to do with what I'm looking for.

Also I'm not talking about just aligning text to the side, I also mean that I want to be able to write and have the text on the page side-by-side with the sidebar, instead of being below it.

This is annoying... I'd appreciate it if someone would answer my dumb question or point me to a resource better than w3schools.com :S

CSS looks stupid, I thought it was designed for making better layouts? It doesn't look any better than html to me, besides being able to change multiple pages at once. Javascript and php are interaction thingys... what is the best language for layout?

Genexi2

http://www.glish.com/css/9.asp

I usually block out my desired page look into large "containers", and work from there, link there shows an example of displaying two containers side-by-side, which in your case, lefty can be rezised down and be used as your sidebar, and right can be all your content.

It took some messing around in other people's codes before I learned how some techniques are used, and applied them to my own little site.

It doesn't look any better than html to me, besides being able to change multiple pages at once.

That's the beauty of it, makes it easy to have skins and the sorts, or modify minute details, or fix compatibility issues with browsers more efficiently.

That and the fact it's a craaaaapload neater code-wise than using a bunch of nested tables in plain' HTML.

Just a small recommendation though, don't learn CSS using Internet Explorer as the preview-device, because odds are, the page will look completely broken in every other browser.

DampeS8N


<html>
<head>
<title></title>
</head>
<body>

<div style="position: absolute; left: 100px; top: 20px; width: 100px;">
Sidebar
</div>

<div style="position: absolute; left: 200px; top: 20px; width: 700px;">
Main content
</div>

</body>
</html>

HTML is markup, CSS is to make that markup look good. As a bonus you get the <div style=""> thing which lets you lay things out perfectly. This is how layout is done with CSS. The layout is being laid out using the style attribute, which is CSS.

You can also use class="" and define a style class in a separate CSS document which you include on each page. This will let you have many pages all with the same layout, and you can change the layout by simply changing one CSS file.

Also. if w3schools isn't to your liking. Try webmonkey. You can google that to find the URL.

Uber-nerd

Ok thanks you two :) Theres also htmlgear, htmldogs and whatnot. I'll have fun... :D

Rook Zimbabwe

Yep I use ACE HTML PRO and set my frames well looks mucho like the above code example... Frames are good because you can control what goes in them andonly have ot reload THAT frame... I use a FRAME for menus so I can change LANGUAGE simply be reloading the menu and then point what I want to what language page I need..

DampeS8N

Frames are ok. They do have their problems tho. Particularly design troubles.

But mainly. It is tough to link to things in frames. Because you'll nearly always just end up back at the front page. Whereas. With this, you'll be able to grab the link from the location bar, paste it in a window for a friend, and they'll get to right where you wanted them.

This is why people rarely use frames anymore.

Rook Zimbabwe

well not if you do it right... you have to verify your target with the controls... it isn't hard once you've done it... kind of like getting your head around TYPE in Blitz or purebasic!

Neuro

Frames were usefull before the masterpages feature was available on asp.net 2.0, but I recall the problems I had with frames was that it tends to mess up when trying to bookmark a certain page, web search engines tend to link to pages outside of the frame context (so the frame doesn't even load when going to the page), printing a page from a site that also had frames was a pain, and also sometimes if your page is too long or out of size with the frames, it'll cause those annoying scrollbars to appear so you have to make sure everything is always adjusted correctly.

DampeS8N

There are many reasons not to use frames. and only 2 reasons to use them.

A. You can have an easily immobile sidebar to one side with a scrolling pane to the other side. Which is nice, it can be done with JS and <div>s now though.

B. You don't have to re-load sections of the site. But with the number of broadband users skyrocketing, this too isn't all what it is cracked up to be.

I'm considering useing frames again. Only, detecting if the main frame-page is present and reloading everything if it is not. All my pages will have to be phps. I'll create a session varaible with the frame page and detect it with the other pages.

In theory, I should be able to do some interesting things, but it will take testing. I'm not sure it can't be done better with Ajax, though.