|
CSS - Css Frames Emulation Guru Feedback.
Hello,
Have decided to use a frames emulation technique that I unearthed on the web (refer to the code for sources), have tested it on IE5 IE6 and FF but not mac. It's at http://uk.theliving.net Would like some opinions on the code. Anything that looks like a no no. For simplicty I have left all the css code in the document. But even when the lower css sections are removed the technique calls for a fairly large chunk to stay at the top. Anyone know of a better solution that conditionally directs the browser on a per browser basis?Of course to do this you would have to get the order right and all the statements in a perfect flow (Of course the noscript part would need to stay). Anyhow any feedback on any of the code or slimming it down would be much appreciated. Gregory Similar TutorialsIv bin told to look into fram emulation in CSS to keep a layer in a set position on screen when the page is scrolled down or up. I wonder if anyone could shed some light on this for me, or point me in the direction of a good article. Help appreciated. hi everyone im still new to the forum but I have a interesting question. Lets say I have 10 books on CSS, which explain how to code in CSS, and I went through all of the books of the CSS do you think by the time I finish reading all of the CSS books that you have a great knowledge of it? To some people this may seem a stupid question, but the idea for me is to keep repeating what you learn from one book and another book they have a different approach to it and the third and etc until you brain starts to understand how the CSS works. Thanks in advanced and happy new year ! I really want to know how to replicate this effect for my blog *** URL Removed *** any ideas? specifically the jagged edges on each photo along with the drop shadow and how the hell is every photo at a random angle?? your help is much appreciated. Ok, I'm at my wits end with this. For the past couple of days, I have been working very hard on my online portfolio site. I got it mostly done until I went to validate the CSS and the HTML in the W3C validator, and it screwed some stuff up (when I copied the new validated CSS), or I messed something up accidently, and now i've been trying to figure out for what reason the footer background color is missing (it's all white), and won't show up no matter what I do. I have two css files and a link to my portfolio that I can share, but as i'm a new user, that is disallowed, so. I guess I can show them in PM or something? The top seems to be fine, it's just the footer that's messed up. The footer is supposed to be the same color as the header, and no matter what I do, it won't show up and I don't know what part of the CSS I need to change. The entire layout is made up of css. Usually i'm pretty good with CSS - but I can't seem to figure out what I broke. I've been ytrying to figure it out since last night. If anyone can help me, i'd -very- greatly appreciate it. Thanks! problem solved Hey guys, I'm a complete amateur and I've just now finished finished my first CSS design. Just wonderin' if any of you CSS peeps would give it a quick review for me. www.cybersexchat.com Please note the website's fake -- I just happen to like gamin' And if you click any links on the page you'll be re-directed to the atspace -- it's one page long. Kind Regards Mike sup friends,my goal with this site: http://poolghost.com/blargh/index.htm was to learn about how to make a css layout with no old school html tables..the basic layout template was from some glish.org or something i cant remember....my site is xhtml1.0 valid transitional,see rant below if necessary..i used browser safe colors according w/ some cool chart at w3.org...basically i am looking for any feedback regarding stupidness in my index.htm and all.css file that might cause the site to not work properly/etc. i am used to working with %'s, not widths and heights in this css stuff. in the http://poolghost.com/blargh/all.css file i have commented out some lines that allow you to see the layout in a tabular form, e.g. white borders/boxes, etc. minor rant: after hours of work i finally got the stupid thing xhtml 1.0 transitional. i must honestly say i hate all this br with a forwardslash at the end crap. it took me so long to figure out how to fix my br's. also, is there really any point to closing img tags? this all seems so pointless and only makes your html documents larger and more bloated. if there is actually a point to this stuff, please explain, i am very willing to learn.. so any feedback or whatever is welcomed..i spend most time in the c++ forums,thats my thing and im going to be putting c++ source code for my projects on the poolghost site eventually.. peace,--c0ldshadow http://www.cyclomedia.co.uk/?24 took a couple of days to debug for major browsers, the horizontal version doesnt work in ie (even if you fully merge the CSS). if anyone knows what the problem is there then it'd be good to know. what is interesting is that if you look at all the sub menus in IE and then switch to the horiztontal version they work correctly... i think it's something to do with trying to place an absolutely positioned element outside of a float that is also position:relative! (overflow: visible doesnt help BTW) the source is overly spread out and commented, eventually i'll produce a more compact source for both versions. note: the html is the same for the horizontal and vertical versions! one day i'll update my site to be more blog like, allowing comments for each article... one day! edit: atricle/article edit: fixed the IE bug, needed another work around for the general lack of support for the child selector, basically the root menu items need to be floats, but everything below that doesnt. Hi, i wonder how to get a table behav like this (example: http://help.live.com) what is this layout called??? css frames? or something else? only css can do the job or we will need javascript as well??? You got link to ne tutorial or ne working example?? please help thnx Hi: What I need to do is to have a 3 column design, left column should contain the navigation and the center main content. When the user clicks on the navigation boutton it should bring a set of thumnails of images in the right column. And clicking on any thumbnail should bring a larger image and detail of that image in the center column. I could do this using frames but I want to avoid using frames. I never used CSS before and read lot about positioning layers but couldn't quite figure out how I can target the links to open in the same page as I wanted. The way I have it opens in a new window which is not what I wanted. I want the navigation, center and right column to be visible all the time. What should I do in the following html or CSS to achieve that. Code: <html> <head> <title> Testing</title> <link rel="stylesheet" type="text/css" href="./test.css"> <script language="javascript"> new Image().src="./QTimages/image2b.jpg"; </script> </head> <body> <div id="header"> <img src="../QTimages/banner8.jpg" width="300" height="50" alt="header image"> </div> <div id="menu"> <br><br><br><br><br><br><br> <a href="./images.html"><img name="imagebutton" id="imagebutton" src="../QTimages/image2.jpg" onMouseOver="document.images['imagebutton'].src='../QTimages/image2b.jpg'" onMouseOut="document.images['imagebutton'].src='../QTimages/image2.jpg'" border="0"background="transparent"></a> </div> <div id="content"> <h1>Welcome to my site...</h1> </div> <div id="thumbnail"> Testing </div> </body> </html> CSS code: Code:
#header { position: absolute; top: 0px; left: 350px; }
#menu { position: absolute; top: 0px; left: 10px;
width: 0px; height: 100%;}
#content { position: relative; top: 60px; left: 180px;
width: 80%; height: 100%; background-color: #FFFAAA;
color: #000EED"}
#thumbnail { position: absolute; top:50px; right:0px;
height: 100%;
background-image: url("../QTimages/background.jpg");
background-repeat: repeat-y
z-index: 3;
}
And also the right column is not positioning right.. Any help is greatly appreciated. Thanks mayflower Having issues with this. I need this page & cross browser -------------------- - W-100% H-121px - <--- non-Scrolling -------------------- -#############- <--- W - 100px -#############- <--- H - auto -#############- <--- Scrolling -#############- -------------------- Im using frames now, it was a quick fix. for what I needed. now I got to get away from from them. I need this to be full screen and resizeable Thanks for any help you can offer Thanks I'm pretty new to CSS - I muddle through it. But I've started on a personal project outside of work and picked up Eric Meyer's CSS book as my main resource. I'm also using SiteMesh as my page decorator. I'm not quite sure how to do the layout for the web application as envisioned. The design is to have a header with tabs, a side panel with a tree, a main contents panel, a bottom panel with a set of icons, and a basic footer. The contents panel would need a scroll wheel if the contents was to long for display. In addition, it would be wise to have a scroll wheel appear if the user expanded the tree too long as well. ______________ |xxxxxxxxxxxxxx| |--------------- |x |................| |x |................| |x |................| |x |................| |--------------| |xxxxxxxxxxxxxx| |--------------| |--------------| With CSS layering & positions, I've been able to get most of a rough UI. However, it seems that to have proper scrolling I'll need to break the pages up with frames. At the same time, it sounds as if frames have become as much of a no-no as the infamous goto statement has for application developers. So what do people advise? Thanks! P.S. I'm sure this can be done with CSS <div> tags, but I better mention it. I'll need to update the panels (tree, main, bottom) if an action occurs in another one - just like how a file browser will update the tree if you open a directory through the main window (and vise versa). Hello. I have a site I would in the past have used an I-frame for content so it could be added and automatically place a scrollbar if needed. I also used them when a client needed me to set up user editable content [php would be set to populate the html page showing in the frame] I'm sure there's a better way to do this now, but I haven't figured it out being so new to css. one application I'd like to use this in is this site: http://greentypeoftube.com/div/home1.html in the 'content' area. last I checked there's no cross platform/browser way to control the color and style of scrollbars. it's been a few months since I checked though. if anyone has info on that as well, I'd love to hear about it. thankyou, you will be my hero although I am unable to sing like the girl who sang the hero song in the movie. s I've seen several examples of how to emulate frames using CSS, but I haven't seen anywhere explain how to create "frames" without having to add the entire frame code to every page in which it appears. With frames, I used to be able to create a menu which would appear throughout my site. I would modify the one, single menu.html file, and the changes would be visible throughout the site. How can I do this using the CSS-emulated frames? Thanks Hi everyone, I am in the midst of converting my fathers website from an old frames based version into a CSS version, and I have had some trouble getting it working properly in both firefox and ie explorer. I would really appreciate if anyone could give me some advice! The original page is he http://www.qualspec.com.au I have started by just trying to replicate the frames look with css, and have come up with this single page: http://www.qualspec.com.au/test/testid.html It seems to work well in internet explorer, but as soon as I load up firefox, it looks ugly as hell (I was using topstyle which uses IE as the internal css and html preview). Can anyone help me out here? Thanks in advance! Regards, Thomas. I need to create a page that has a header that takes up 20% of the page and the other 80% of the page will be tables. The issue is that the header must not move and the other 80% will be scrollable. I know how to implement this with frames but I understand that frames are looked down upon now in proper html/xhtml design. Can this be accomplished using css? If so how? Thanks in advance. SO I am using overflow : auto; in my content div. While my header div is a fixed height. The goal - a header that is static (positionally) and only the rest of the page under this header being scrollable. Easy to do with frames. Seemingly easy to do with CSS unless, you resize the browser window! Then boink* theres that outside scrollbar again! Or maybe my user has a 15'' monitor w/ 600x400.... Again 2 scrollbars. I hate that outside scrollbar and want to it to just go away! I have tried playing with the body element to no avail. Must I use javascript to detect the screen size, detect resizes and dynamically alter my height values to make this play nicely.? Any input or direction to a nice tute would be great!!!! thanks devshed-people. I need an emulation of two frames. The left is for menu and is fixed and always visible and the right is for content. I intended to use this http://soiland.no/frames_with_css/scroll page as an example but I'm puzzled by one thing: when browsers load this page from the above server everything is OK, but when I open downloaded (by IE5) page with Opera 7.54u1 I have a gap of about 16px between the right window edge and the scrollbar of the right block. Could anyone open this page from HDD and tell about the result here? Does anyone have a handy snippet I could slip into my stylesheet to make a particular (named) frame print by default? I've heard that using CSS in this way can solve the 'printing every frame' problem in IE, but my CSS knowledge is very, very rudimentary.... Thanks in advance! Got a quick question from a newbie. Thanks to a kind member, I've just been assisted in creating my first HTML5/CSS 3.0 page. It has a footer that extends vertically with content. I have several pages that will be updated that will be changed frequently. In my world of tables, I would simply create an inline frame to display them, and have ease of quick editing. The questions I have are 1) is there a CSS alternative to have mulitlple links display different content in a particular frame or div? 2) With either that alternative OR inline frames, is there a way to make it dynamic, meaning instead of scrolling, it extends downward and pushes the footer down as content grows? 3) if so, how would I accomplish this? |
|||||||