hi hello to everyone...i just join this forum...and this is my first post and wanting help....im new to css...and Im planning to create a website...with a good presentation...and i heard that css does alot of good stuff when it comes to presentation. my problem is..i created a top-bottom layout. with #headers, #content and #footer...also i made a vertical drop-down menu at the #header...and i was trying to link all the menu at the header to the #content, i mean if i click any menu buttons at the #header, the page will appear at the #content, but the #header and #footer stays the same. like the old frames in html....(you click a link to the header but the page will appear at the content.) if this is not possible...any hint how to do that? thanks in advance.....
I'm not sure, but I think if you want only the middle of the page to jump around while the header and footer don't move, you would need a script. Js, Perl, something like that. CSS can easily jump from #header to #content, or even to #footer, but that will move the #header off-screen. With CSS you can also have a background image stay in place while the page jumps around or is scrolled, but as far as I know that's it. I don't know of any frame-imitators in CSS.
yeah thanks...i figured it out.....i use javascript, for loop the <div> id's of #content and switch on and off object.style.visibility from hidden to visible(vice versa) through throwing the parameter from the header menu links,.....in case someone else wants to know....i think what i did is one of the possible ways to do it.... sure css has no ability to do things like frames of html.....anyway css is for presentation...(i don't know)may be there's a css geek out there..hehehe thanks again for the reply.....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Testing 1,2,3</title> <style type="text/css"> body { position: relative; background: black; margin: 0 padding: 0; } .centered { display: block; margin-left: auto; margin-right: auto; } div#links { position: relative; top: 10px; width: 166px; font: 16px Verdana, sans-serif; border:4px solid #333; } div#links a { display: block; text-align: center; font: bold 1em sans-serif; padding: 5px 10px; margin-left:auto; margin-right:auto; border-width: 0; text-decoration: none; color: #FFC; background: #444; z-index:100; } div#links a:hover { color: #411; background: #AAA; } div#links a span { display: none; } div#links a:hover span { display: block; position: absolute; top: 220px; left:-240px; width: 640px; padding-top: 60px; margin: 10px; color: #fff; background: black; font: 48px Verdana, sans-serif; text-align: center; } .header { width:640px; height:120px; margin-left:auto; margin-right:auto; border-top:8px solid #ccc; border-left:8px solid #999; border-bottom:8px solid #666; border-right:8px solid #888; } </style> </head> <body> <div id="links" class="centered"> <a href="#">Magenta<span class="header"style="background:#f0f;">Magenta</span></a> <a href="#">Cyan<span class="header"style="background:#0ff;">Cyan</span></a> <a href="#">Yellow<span class="header"style="background:#ff0;">Yellow</span></a> <a href="#">Red<span class="header"style="background:#f00;">Red</span></a> <a href="#">Green<span class="header"style="background:#0f0;">Green</span></a> <a href="#">Blue<span class="header"style="background:#00f;">Blue</span></a> </div> </body> </html> Code (markup):
To the above poster, you're forgetting the whole point is to seperate content from presentation and you shouldn't be using presentational names or useless classes such as 'centered', should have margin:0 auto; on div#links (it puzzles me to this day why the fuck people use margin-left/right auto
@gube - apart from the bad coding Soulscratch already pointed out (I'm not even touching it, If I commented on that I'd be hitting autoban territory)... What in blazes does that even have to do with this thread? AS TO THE TOPIC AT HAND I really recommend AGAINST doing anything like how frames work for the simple reason of accessability. A new page load shouldn't be a big deal since your CSS and images should all be cached, and the method you are trying to reach makes it so that users cannot actually link to the pages in question since the url in the address bar will never change. The 'smooth transition' is a cute trick, but not entirely practical or desirable - and most of the time uses MORE bandwidth by virtue of the extra code to make it work, not less.
A friend just reminded me that there is position: fixed which I keep forgetting works for more than just background: position... doesn't work in IE6 though so that's out. If one is skipping to various paragraphs within a page while the header or footer for example is still visible-- that can make things easier for people if it's for instance one of those mile-long blog pages, or in my experience a clothing-selling site with hundreds of products making the page scroll down forever... an ever-present header or footer with all the menu links can be very useful, or at least a TOP link. However if the middle content is all different pages, then you'll have the problem we had with www.deblauwehoed.nl where we wanted to send friends and relatives a link to only the contact page where there was a routemap --- but the frames style set-up prevented us from doing that; we had to tell everyone, go here and then look on the page for Contact&Route... extra work for everyone.
No, you read the original post - he's asking about what is basically a tabbed based system acting like frames used to. You just gave him a flat menu - and a badly coded one at that. NOTHING to do with the topic at hand.
I find it amusing that I'm the only one that posted a solution. All you're doing is bitching. Of course, those who don't know how to do it will always complain the loudest.
I find it amusing you thought that was a 'solution' when it has NOTHING to do with what was asked... what was asked being best done with an iframe and target... though I think in this case he's looking for css/javascript equivalent, much like most tab based implementations. He is NOT ASKING FOR a dropdown menu. (which is where I think you got confused) - much less one that's non-semantic AND a waste of code.
samustdie (if you ever come back), what you seem to be looking for is either an iframe in the middle with links that have the iframe as the target, or an AJAX solution where the content is populated from a call to a server side script.
Ok, I think this is more along the lines of what is being asked for. If I was to implement this live, I'd probably make the header and footer 'fixed' (well, emulated IE compatable "fixed") then set the 'pages' div to 100% height overflow:auto; - but this is 'functional enough' for now. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>iframe margin (Opera)</title> <style type="text/css"><!-- * { margin:0; padding:0; } p { padding-bottom:1em; /* Why padding and not margin? To avoid an IE quirk if we decide to float, that's why. padding-top of a container around it or padding-bottom of an element above it like h2 can equalize if need be. */ } h1 { text-align:center; background:#DEF; padding:8px 0; } h2 { padding-bottom:0.5em; } #menu { height:24px; list-style:none; background:#DEF; text-align:center; font:bold 14px/24px arial,helvetica,sans-serif; overflow:hidden; } #menu li { display:inline; color:#FFF; padding:10px; text-decoration:none; cursor:pointer; cursor:hand; } #link1, #page1 { background:#00F; } #link2, #page2 { background:#C00; } #link3, #page3 { background:#080; } #pages .content_box { color:#FFF; overflow:hidden; height:0; } #pages .showme { height:auto; padding:0.5em; } #footer { height:32px; text-align:center; background:#CCC; font:normal 14px/32px arial,helvetica,sans-serif; } --></style> <script type="text/javascript"><!-- /* <![CDATA[ */ function show(target) { /* first let's unshow all */ pagelist=document.getElementById('pages').getElementsByTagName('div'); for (t=0; t<pagelist.length; t++) { pagelist[t].className=pagelist[t].className.replace(' showme',''); } /* then show the new one */ document.getElementById(target).className+=' showme'; } /* ]]> */ --></script> </head><body> <h1>Test Header</h1> <script type="text/javascript"><!-- /* <![CDATA[ */ /* the following writes could be condensed to a single line but I put them separate for clarity. We are outputting the menu via Javscript since with .js off all of the 'pages' will be showing, making the menu pointless. */ with (document) { write('<ul id="menu">'); write('<li id="link1" onclick="show(\'page1\');">Link 1</li>'); write('<li id="link2" onclick="show(\'page2\');">Link 2</li>'); write('<li id="link3" onclick="show(\'page3\');">Link 3</li>'); write('</ul>'); } /* ]]> */ --></script> <div id="pages"> <div id="page1" class="content_box showme"> <h2>Page 1</h2> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> </div> <div id="page2" class="content_box showme"> <h2>Page 2 - Let's have some content to pad it out a little</h2> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> </div> <div id="page3" class="content_box showme"> <h2>Page 3 - and another page</h2> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> <p>Pad it out some</p><p>Pad it out some</p><p>Pad it out some</p> </div> </div> <!-- the above are all set to show - so if .js is off, they'll all show their full content. With js on, the following call to our show function hides them all, then shows just the one we want. = GRACEFUL DEGREDATION --> <script type="text/javascript"><!-- /* <![CDATA[ */ show('page1'); /* ]]> */ --></script> <div id="footer">Test Footer</div> </body></html> Code (markup): I've also got a copy running live here: http://battletech.hopto.org/for_others/samustdie/multi.html Validates, works 100% in IE6&7, Opera, FF and Safari. Degrades to show all pages one after the other if .js is off, degrades to non-css just fine much the same - and degrades to IE 5.x 'after a fashion'. (some minor issues that could be cleaned up if desired - though most of it would break validation... I say 'close enough') At least, that's how I interpreted the original question. If that is NOT it, then the question was more along the lines of how to use some form of SEP/CGI/SSI (/pick a *** name and stick with it already) like SHTML, PHP or ASP to allow separate header and footer files to be included so you only have to write them once. Hence his part about 'like frames used to' If that was indeed the question, I can post up some simple examples of that too - I've occasionally heard the term 'poor man's CMS' for that.