|
CSS - Frames Cols=* Css Equivalent
Ok, i've tried to start replacing frames with CSS and Divs.
But, how can i make a page where, I have a top menu bar of say 150px high and a bottom menu of 17px high and then have the middle bit filled with the rest? ie --------------------------------------------------------- 150px --------------------------------------------------------- 'x' px to fill rest of screen depending on its size --------------------------------------------------------- 17px bottom border --------------------------------------------------------- Top bits fine, set height to 150px no problem (fixed to fit an image perfectly). But I'm not sure about the next bit. is there a way to set an image to sit at the bottom of a screen or bottom of a Div. Come to think of it, is there a way to make a Div go from the bottom of the topmenu section to the bottom of a screen without starting to scroll, ie just fit in the remaining section. The Frames equivalent of what i'm looking at is <frames cols="150,*,17"> and how can i do the * is the question. Thanks for your help again! Mif... Similar TutorialsHello, I am defining a Text Area where I set it to 20 Rows and Width of 40em in my CSS code. Do I need to define the cols? In this case what is the difference between cols and width? I suppose I cannot define the cols in CSS. Thanks, Miguel I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. I like to have most if not all of my tables set up as such: <table border="1" cellspacing="0" cellpadding="3" bordercolorlight="000000" bordercolordark="FFFFFF"> I am pretty new to CSS and was wondering what the CSS equivalent would be so from now on all I would have to do is do this: <table class="myTable"> where the class would be in an external stylesheet. Is this possible? Can these attributes even be DONE in CSS? THANKS Hello, I have this picture (please see attachment) in which I cannot get the css equivalent for me to save bandwith, if it is possible The outer border color has #685127 while in the middle has #d6e9f3 and inside with #685127 having text color #fff. I'm stack with one side border Quote: border: 2px solid #685127 ; border-width: 2px; How do you make a div stay in one place, while allowing the rest of the page to be scrolled? For example, let's say I had a page with the menu at the top, horizontally centered. How would I make it so when you scroll down, that menu stays at the top? I'm trying to change the cursor when a user mouses over an image. Code: cursor:hand Works perfect in IE, but the cursor tag doesn't respond at all in Firefox. I've been able to "trick" Firefox when using onClick JS links by putting href="#". hello. i have a horizontal menu, which contains a static horizontal menu underneath one of the items depending on where you are in the site. so, this box needs to be exactly the same width as the list items and anchors inside of it. the problem is, using Arial, Helvetica, sans-serif, is that in Linux, it ends up being wider than in Win/Mac. Can i either, make the ul automatically the width of the containing list items, or set a linux font of equal width to arial? as the subject says... input[type="text"] ...works great for opera/moz, can't figure out how to do the same thing with IE. plz help What is the equivalent of <table align="center"> in CSS. I'm moving my page from HTML 4.01 to XHTML 1.0 and the ALIGN attribute of TABLE is not supported in XHTML 1.0. Any help is greatly appreciated. Hey people, Just want to know how i would make the equivalent alignment of an img to absmiddle. If i don't have absmiddle it doesn't display properly. As well as that, if the align tag with "left" as the value is missing, then text doesn't wrap around the image. How do i fix that? Also, while i'm here, i may as well ask about an equivalent to hspace as well. One of my images has hspace 6, and if i take it away, it displays incorrectly. Why do they make these things so hard? haha thanks people. Hello! What is the equivalent of the cellpadding="0" in CSS? I use Code: padding:0; ,but it seems that it doesn't work. Any ideas? Sincerely Artashes 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 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? 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 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! 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'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 |
|||||||