Need Help With Css Positioning Of Page Elements Help a n00b with his web page?

Right, I want to make a personal webpage, but I don't want to use frames (too obvious and limiting) or tables (too long to load) and I have heard about the possibility of using CSS positioning to fit everything in place. Given my limited knowledge of CSS, I was wondering if someone else could give me the code I need:1) I need a menu bar type thing that can hold links to the extreme left of the page, that can scroll with the backround (note: the scrolling isn't necessary, but it'd be helpful)2)A title bar at the top of the page where text or possibly a logo could be put3) A main page where the actual data would be displayed4) a page to the extreme right where banner ads or the like could be displayed (needs the money..) Can anyone help me on this?

Hi TotalLamer ,

You've decided the right thing. CSS is amazing compared to frames and tables. I would suggest, if you are new to CSS, go through the tutorial at w3schools:

http://www.w3schools.com/css/default.asp

In one of the chapters, there is one in which they show you a basic layout with a header menubar etc. I would suggest you do the whole thing because it is very well documented. Also, take a look at 'A List Apart' at:

http://alistapart.com/

They have everything about CSS from layouts to custom borders and horizontal and vertical menus.

There was a really good site about completely liquid layouts in CSS, but I can't seem to find it. It has examples for a large number of layouts. I'll look it up and post back later.

Did you say you want a menu on the left that can scroll? That would be exactly what a frame is.If you want others to code it for you, you'd need to give more information, such as the sizes, margins, borders (styles), colors, etc.

Hey there, great layout idea You could also try checking out HTML Goodies for a lot of great tutorials, including CSS and div layers. For the scrolling menu, go to Dynamic Drive and check out the navigation section. They have a bunch of dhtml scripts for menus and navigational tools that are pretty neat. Of course, if you ever need a little help, I'd be more than happy to lend a hand. I just moved to West Virginia, I have nothing else to do Lol Best of luck

Well, thank you all for the help! By scolling menu, I meant a menu that's affixed to the backround, so it scrolls when you scroll (like a fixed back round image type of thing). I mean, that isn't essential, but it'd be cool if it could work.Also, I can easily use HTML, but I only know how to change colors and text-sizes and borders and such with CSS. And how to fix graphics to the backround. Well, I'll check out those links now. Thank you for the quick support!

Very nice discussion is going on here. In between I have one quesiton - Is it possible to create web pages with the help of CSS so that whenever we resize the browser window the contents of the page automatically resize. I mean that the content should not be absolute to page but it should be relative.Although I have tried to make pages with CSS but always I found it very hard or may by I have not used it in a right way. After reading this thread I will try once again to make pages without any single table tag.

CSS takes some getting used to but it's awesome once you get a grasp on it. The tutorials mentioned are ones I used and they helped alot. Admittedly I havn't learned a huge amount about CSS yet but I know the basics and can handle myself in a .css file. Regardless it's an awesome addition to a webpage, makes alot of thigns much easier.to solanky - using css OR html you can make pages that resize automatically... If you use percentages (%) instead of width values (px or whatnot) then objects will be displayed as a certain portion of the screen and everything will stay proprotional despite the screen resolution or browser size. Well my site seems to resize somewhat upon browser resizeing so I'm not sure it works perfectly... but I probably just left a couple absolute sizes defined or something. I'd suggest trying out percentage values for width and stuff and see what happens. I'm sure if I'm wrong someone will correct me soon enough

Hi Solanky,

check out my site here. It's not much but it's a very basic layout using CSS. Try resizing the browser window and see what happens. If you need the source, PM me with your email and I'll mail them to you. IMO, it's not necessary because there are plenty of articles on the net about resizable layouts. Try googling for it. You can do lots of surprising things with CSS.

Hope that helps you out.

CSS positioning is a great thing and I use it as much as possible. But, you need to keep in mind that different browsers use different rendering tools and your pages will be a disaster across different browsers. CSS positioning is not supported the same by any of the browsers and even different versions of the same browser so what looks good in IE will be a disaster in Netscape or some other browser. My suggestion would be to develop for IE using CSS positioning and reproduce your page using tables for the other browsers. Either use a browser detection script to direct your users to the appropriate site or let people know that this is an IE web site. Until the browser developers decide to conform to the standards laid out by the W3C, we developers have not many choices.You can do some very cool things using positioning and I encourage anyone who designs web sites to practice using it. Just make sure you address the cross-browser rendering problems if you don't want angry site visitors.Rodney Lay

Hi Solanky,

 

check out my site here. It's not much but it's a very basic layout using CSS. Try resizing the browser window and see what happens. If you need the source, PM me with your email and I'll mail them to you. IMO, it's not necessary because there are plenty of articles on the net about resizable layouts. Try googling for it. You can do lots of surprising things with CSS.

 

Hope that helps you out.

<{POST_SNAPBACK}>

Thanks abhiram for the help. Yes I have checked your site and this is what I was looking for.

Thanks for the offer for providing the source code but I think it will be better if I make it myself. (Offcourse by taking help on the internet)

If I come across any problem later I will definately post here.

Thanks once again.