|
CSS - Could Someone Help With Frames -> Css Conversion Please?
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. Similar TutorialsHi, I'm having a little problem getting a layout to work with divs. I can hack it fairly easily with tables, but I am realying on undefined behavior to make it work, so I would rather do it right with css. Here is the code, if you can make the page, you can see the result I would like, and as close as I could get with css. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
padding-top: 5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Center Test</title>
<style type="text/css">
.navCell {
width: 14%;
text-align: center;
background-color: teal;
float: left;
}
</style>
</head>
<body>
<div style="width: 100%; height: 20px; background-color: red;">
<div style="width: 196px; text-align: center; background-color: green; position: absolute; left: 0px;"><p>Stay Home</p></div>
<div id="restOfNav" class="restOfNav" style=" padding-left: 196px; ">
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
</div>
</div>
<p>Desired result</p>
<table cellpadding="0" cellspacing="0" style="height: 20px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr align="center" >
<td class="headerCell" ><div style="width: 196px; background-color: green;"><span>Stay Home</span></div></td>
<!-- <td class="dividerCell"></td> -->
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks for any help you all can give me. how would i convert: <table border="1" cellspacing="0" style="border-collapse: collapse; text-align: left; border-style: ridge; margin: 0; padding: 0" bordercolor="#111111" width="779" id="table3"> <tr> <td width="649"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner1.jpg" width="649" height="92"></font></td> <td width="174"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner2.jpg" width="167" height="92"></font></td> </tr> </table> to simple CSS code? I tried doing that all in one style and nothing worked! Hi guys, I'm new to the boards, but I have done a search before posting. I've got a page based completely on tables that I want to convert to tableless.. URL is my original site, I tried to transport it to URL And I lost my navigation icons.. Not a huge deal, but I'd still like to have them. Anyway, Heres the code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Guttermonkey</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
margin: 2px;
line-height: 14px;
padding-left: 20px;
color: #000000;
}
h3 {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 16px;
margin: 10px;
line-height: 18px;
padding-left: 5px;
color: #e9f2fc;
}
.smallheader
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 10px;
padding-right: 5px;
line-height: 14px;
color: #e9f2fc;
}
.small {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 5px;
line-height: 14px;
color: #e9f2fc;
}
a:link {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:active {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:hover {
color:#707770;
font-weight: normal;
text-decoration: none;
}
.info
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 13px;
padding-left: 5px;
color: #e9f2fc;
}
.infohead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 12px;
padding-left: 20px;
color: #e9f2fc;
}
.newshead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
line-height: 13px;
padding-left: 5px;
color: #333333;
}
input, textarea, select {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #333333;
padding: 0px;
}
-->
</style></head>
<body bgcolor="#808080">
<br>
<center>
<!-- Main Table -->
<table bgcolor="#808080" border="0" cellpadding="1" cellspacing="0" width="670"><tbody><tr><td colspan="2">
<!-- Header -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#808080" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="smallheader" align="right" bgcolor="#354463">Last update: 28/06/2002, v4.0</td>
</tr>
<tr>
<td bgcolor="#354463"><h3>// Guttermonkey</h3></td>
</tr>
<tr>
<td class="smallheader" align="right" bgcolor="#354463">"I never think of the future, it comes soon enough." - A. Einstein</td>
</tr>
</tbody></table>
</td></tr></tbody></table>
<!-- End Header -->
</td></tr>
<tr><td>
</td></tr>
<tr><td colspan="2">
<!-- Main Field -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#dcdcdc" border="0" cellpadding="0" cellspacing="10" width="100%"><tbody><tr><td align="center" valign="top" width="160">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<table border=0 width=100% height="100%">
<td width="495" height=100% valign="top">
Ewwwwww!<td width="175" height="100%" valign="top">
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#bfc4cb" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#354463" border="0" cellpadding="2" cellspacing="2" width="175">
<tbody><tr>
<td class="infohead" bgcolor="#354463"><b>:: Navigation</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<link rel="StyleSheet" href="navbar_files/dtree.css" type="text/css">
<script type="text/javascript" src="navbar_files/dtree.js"></script></head>
<body>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Guttermonkey.com');
d.add(1,0,'Home','index.php');
d.add(2,0,'Calendar','index.php?page=calendar');
d.add(3,0,'Poetry','index.php?page=poetry');
d.add(4,0,'Blog','index.php?page=blog');
d.add(5,0,'Download','index.php?page=download');
d.add(6,0,'Photo Gallery','javascript:void','RC\'s Picture Folder!','','','img/imgfolder.gif');
d.add(7,6,'RC Naked','index.php?page=naked','You sick ****!','','','img/jpg.gif');
document.write(d);
//-->
</script>
</body></html> </tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: VITAL STATS</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Name</b>: RC</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Nick</b>: The Freaky Penguin</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Location</b>: New Perth</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Born</b>: Begotten before time</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Mood</b>: Wonky</td>
</tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: SYSTEM</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MB</b>: TF-486 with 256K cache</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>CPU</b>: AMD 486-66MHz</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MEM</b>: 4MB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>HD</b>: Quantum Fireball 2 GB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>VGA</b>: Number Nine GXE 2MB ISA video card</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>OS</b>: MS-DOS 5.7 </td>
</tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</table>
</body></html>
I havent done serious web design in a couple years, and to tell you the truth its over my head now. Oh, and when I moved the site, I FTP transfered the entire public_http folder, so I know the images are there for the nav bar. But thats not important, getting table-less is... Any help on where/how to begin? Much thanks in advance, rcmaples. I am so determined to get my entire site table-less but i ma having some more trouble on a "complicated" table layout This is the current table Code:
<table>
<tr>
<td width="50px"></td>
<td></td>
<td width="200px"></td>
<td width="50px"></td>
<td width="50px"></td>
</tr>
</table>
Now what i have done so far to convert this to CSS is the following Code: <div class="forums"> <span class="image"></span> <span class="name"><span> <span class="lastpost"></span> <span class="topics"></span> <span class="posts"></span> </div> however i do not know the CSS code to make it look like the table layout above. I have messed around with width and float but i am not getting it how it should be. some CSS code i wrote Code:
div.forums
{
width: 90%;
clear: both;
height: 50px;
margin: 0 auto;
}
span.image
{
float: left;
width: 10%;
}
span.name
{
float: left;
}
span.lastpost
{
float: left;
width: 20%;
}
span.topics
{
float: left;
width: 10%;
}
span.posts
{
float: left;
width: 10%;
}
I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong? PSD jpg kansasoutlawwrestling.com/wrestling2.jpg Site kansasoutlawwrestling.com I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images. While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only. What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div? As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated. 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 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. 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'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). 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! 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. 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 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? 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 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 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... Hello, I'm developing an intranet forum system with a design similar to Google Groups i.e. a sidebar with links to each message in the current thread, and a main content area to display the actual messages. Each area, i.e. the sidebar and the main content area, is a DIV. I have set the sidebar to width:25% and the main area left:25%, width:75%. My problem comes when I want each area to scroll (the main area vertically, and the sidebar horizontally). My plan is to use overflow:auto; this works fine with the main content area, but with the sidebar the text wraps around onto a new line if it overflows the DIV. This appears to be because the text is "hitting" the other DIV, i.e. the main content area, forcing it onto a new line. So can I do this using DIVs or do I have to resort to frames (I hope not, frames are SO messy and long-winded compared to DIVs....) Thanks, Nick |
|||||||