|
CSS - Converted Tables To Css, Argh!
I have now spent the last 14 hours trying to rectify some problems I am having after I re-coded the page to change tables to CSS.
The main area is overlapping with the right area. The site should look like this: http://www.attorneywebcreations.com but it looks like this in CSS format: http://www.attorneywebcreations.com/test.html Someone please help! Similar TutorialsHowdy, Very simple css layout, but IE (7) is messing it up. What else is new. Header div is centered with the curved top border (16 pixels high), uses background tag in css. body mas a main background, which is centered. it's an 800pixel wide gif with 20 pixel sides which leaves 760 white pixels in the middle. main container is 760 pixels wide, and centered thus creating the layout. header and body combined should make a seamless border around the main container. but it doesn't in IE. why not?!?! it works well in FFX, Chrome, Safari, Opera. argh. can't seem to post urls, so i'll have to post my code: html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>GreenSky Capital Inc. :: Customized Financial Solutions :: Home</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="header"></div> <div id="container_main"> Put some text here. </div> </body> </html> CSS: Code: html,body {
margin: 0px;
padding: 0px;
background: #e0e0e0 url(../images/bg_main.gif) repeat-y center top;
font-family: verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6C6C6C;
text-align: center;
}
#header { margin: 0 auto; width:800px; padding:0; height: 16px; background: #e0e0e0;background: url(../images/bg_top.gif) no-repeat top right ;}
#top_nav { margin: 0; padding:0; width:230px;height: 180px;}
#top_sep { margin: 0 auto; padding:0; }
#container_main { margin: 0 auto; padding:0;width:760px; background:#fff; }
#container_content { width:720px; margin: 0 20px 0 20px; background:#fff; text-align: left; }
#roscripts_m4 { margin:0; padding:0;width:100%;}
#roscripts_m4 li { margin:0; padding:0;display:inline;list-style-type: none; }
#roscripts_m4 a:link, #roscripts_m4 a:visited { color: #056839;width:230px;text-align:left;text-indent:15px;float:left;font-size:11px;height: 30px;line-height: 30px;font-weight: bold;text-decoration: none;border-bottom:1px solid #6AB94E;}
#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, #roscripts_m4 a:hover {color: #fff;background: url(../images/bg_nav.gif) no-repeat top left ;}
#news, #support {background: #efefef; }
#footer { margin: 0 auto; padding:0; width:760px; height: 30px; clear:both; text-align: center;}
.sidebox { margin-top:40px; background: url(../images/bg_side.gif) no-repeat top center; height: 300px;}
.sidebox_head h2 { margin: 0; padding: 16px; 0 0 10px; color: #fff; font-size: 12px; }
.sidebox_body { margin: 0; padding: 0 0 0 10px; border: 0; font-size: 11px; }
.sidebox_body p, .sidebox_body form {margin: 0; padding: 0;}
.sidebox_body form label { width: 200px; position : relative; display : block; }
.sidebox_body form label input { position : absolute; left : 40%; top : 0px; }
.sidebox_body form input,.sidebox_body form textarea { font-size: 10px; border: 1px solid #c0c0c0; background: #e0e0e0; }
.sidebox_body form textarea { font-family: verdana, arial, helvetica; font-size: 10px; width: 200px; height: 50px; overflow:hidden}
.sidebox_body form span { float:right;margin-right:20px;}
.sidebox_body form submit {border: 1px solid #c0c0c0; background: #e0e0e0;}
#content_right h1 { font-size: 20px; color: #056839; width: 100%; border-bottom:1px solid #056839; }
#content_right h2 { font-size: 12px; color: #056839; width: 100%; }
#content_right li {padding-bottom: 10px;}
any help would be much appreciated! thanks, ynot2k Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. heya still very new to css and IE is displaying whitespace between the two navigations and i cant fr the life of me find a fix... Well i set #tabcontentcontainer margins to -5 top it closes it but then displays wrong in firefox, is there a way to fix this ?? any help would be great thx. eg. Code:
#tabcontentcontainer{
margin: -5px 0px 0px 0px;
}
http://www.oraclestudio.com.au/css/start.php http://www.oraclestudio.com.au/css/style/two.css http:// 192.168.0.253/ index.php?option=com_content&view=article&id=50&Itemid=67 I need for the content to stack in front of content (as it currently does) so the content appears to scroll behind it. BUT - I need for the footer to sit at least below the fold so that it isn't so obtrusive. I'm tired of googling and can't spend any more hours trying to get it to work!! It's an artisteer template, joomla. Help? THANK YOU!! I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
For some reason the following HTML & CSS code do not render the same result as the code listed below it: CSS - Attached Style sheet Code:
td.style1{
background-color: #FFFFFF;
border-top: 1px solid #AAAAAA;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #AAAAAA;
}
HTML Code Code:
<table>
<tr>
<td class="style1">Some content to display</td>
</tr>
</table>
HTML (Intended display) Code:
<table>
<tr>
<td bgcolor="#FFFFFF" style="border-top: 1px solid #AAAAAA; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #AAAAAA;">Some content to display</td>
</tr>
</table>
Why wouldn't any browser follow the CSS in the stylesheet? Hi everyone, Dont actually know if this is possible (my css knowledge is way not what it should be!) Can I define a whole set of attriblutes for a table (fonts, links, hover links etc etc) and than just use it with <table class = "whatever"> etc and then that table will have all the properties I defined (for only that table, not for the rest of the page) if so how could I go about doing that. Any help is very appreciated! cheers **FIXED** Ok moving my site from tables to CSS in my spare time at work but im having some difficulty with height attr. Click me The Left and right bars - I would like them to go all the way to the bottom of the page. If anyone can help - please let me know! Thanks! Edit: Got it to work in Firefox just fine - but IE6 is still giving me problems. Edit #2: *sigh* needed to set body to 100% - man IE is bass-ackwards. Does anyone know of some good tutorials on how to use CSS rather than tables? If so, could you providea link. Thanks a lot. andrew Hello everybody, I am new to the forum and also a newbie to webdesign! I am hoping that somebody wants to help me out as I am trying to put the design of a table and the font used in CSS. I am trying to create a new table class out of: <table cellspacing="0" cellpadding="0" width="100%" class="tekst6" bgcolor="#E6373D"> (tekst6 = FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; ) How do I do this? Many many thanks in advance for your help! Regards Buzzman Hi I would like to replace the tables that make up my page with CSS. I have a header, footer, left column and the main body. Do you know of a link to a tutorial that can help. Or perhaps you know the CSS code. Any pointers gratefully received.. I am looking for advice on replacing a table layout (for form layout) with a CSS design. The purpose is to put together a PHP class that auto-generates forms so that the structure of the forms, is under control of an admin interface though an API. The problem is, that many of the clients that I do work for are very particular about the layout. In other words city, state and zip code must all be on one line, but phone number must have a row to itself, etc., etc.. The form must look exactly like the paper version. Generating a good looking form through an API using a table layout where i have to worry about column spans and so forth, is not something I am looking forward to. I would like to use a CSS layout instead. What is the best way to coax divs to work in the same way table cells and rows do and still deal with any goofy IE CSS quirks? Hey Guys, Hope you are all OK! I've been away abroad for a bit and now its back the the manic life here Has anyone got any good examples of creating pretty tables using CSS? I am ideally looking to to something that maybe has alternate colors on Columns and rows and changing colors where they cross?>!? or something equally as good for looking at data! Any links to examples would be great! Charlie Hello. I'm currently tweaking the layout of one of the websites I run. Every page on the site consists of a series of side boxes on the left and main content on the right and currently this divide is created though tables. I'm trying to replace the old tablular layout with a series of divs which are positioned with CSS. Below the header of my page is a content div, which contains two other divs, left and right. The rest of the site content resides in seperate divs in either the left or right div. I've managed to position the left div on the left hand side of the page and the right div on the right. However, the text in the right div is longer than the content in the left div and I'm finding that once the content on the left has finished, the content on the right is filling the whole of the page beneath it, when I actually want it to stay on the right and just leave the remainder of the left hand side blank. I've been trying to fix this for a while now and haven't managed to do so yet so I'm hoping someone here might be able to offer some suggestions. I've put up a sample page of the layout at http://www.mybb-emods.com/new/index.htm. Similarly, the CSS code I'm using is located at http://www.mybb-emods.com/new/stylesheet.css. If anyone could help me, I would really appreciate some advice. I've a feeling there's a really simple solution here, but I certainly haven't managed to find it yet. After discovering Css and finally understand it...(still need to get better) I have to ask, when is it good to use a table? what are their main function ? is there things you can do with a table that cannot be done with css? thanks. I grew up doing web programming knowing that tables were bad. It didn't take long before I read all the documents on why not to use tables for design. And I know firsthand... What still mystifies me to this day is why whenever I check another newer "professional" site, it's all in tables... sometimes with no CSS at all... sometimes with a little. I rarely see a site that has no tables. Why is this? Is it to minimize problem with IE? Hi, I always used tables for my layout but want to change that to CSS. Problem is, I don't know how to get started thinking of the layout in css. I mostly make my pages centered with tables, can I do this with CSS? Does CSS use absolute position ? I was making a site with tables, but want to change that to CSS Know of any good tutorials (for people who used tables before) greets I am curious how important it is to use CSS for tables these days? I am a more of a PHP developer but have been using HTML tables for my applications since I don't do anything fancy on the front-end. I am asking because I am planning to start work on an open source project. While the project itself is intended to be used inhouse for companies and not on the Internet, it would still be nice to know if CSS or HTML tables could affect it in positive or negative ways. Thanks. Hello all, I have a site which I am working on right now and there is going to be text on the right side, and 3 rows on the right which on the top there will be a page banner, on bottom, just a picture, and i want to repeat the background colors on the other side. Kind of confusing to explain but he brandyn.garlic.com/headstart/aboutus.html Thats a page on the site, as you can see, there is a blank spot where I want a background to repeat but the size will obviously vary by the size of the content on the right. If someone could assist me with that, I would greatly appreciate it. Thank you, Brandyn Hi, how can I draw these borders to a table using css? Thank you! |
|||||||