|
CSS - Not Displaying A Table
Please help. I have a page with a table just inside the body tag, which i dont want displayed. This is an ad table and i have no control over it because my free host puts it there. I have my own table inside a <div> tag, which I do want displayed. How can i set up my stylesheet to not display the table just inside the body tag but to do display the table inside the div tag? thanks
Similar TutorialsHi, I wrote a code that would import some mysql data into my website. Now I want to format that data into a nice table. Table is probably the wrong term since I am trying to avoid HTML. Anyway I was wondering how you can embed CSS into a PHP script. here is my website: dicebaseball dot org The 4/27Bruins0Dragons0 is the data I am trying to make tabular Here is the code that I am trying to embed CSS into: Code:
<?php
mysql_connect("localhost", "....", "....") or
die("Could not connect: " . mysql_error());
mysql_select_db("...");
$result = mysql_query("SELECT * FROM scores")
or die(mysql_error());
$row = mysql_fetch_array( $result );
echo $row['game_date'];
echo $row['away_team'];
echo $row['away_score'];
echo $row['home_team'];
echo $row['home_score'];
?>
I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! Hi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the help! Surprise, surprise... [edit]link removed...[/edit] In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other... [note] The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development. [/note] hey all, i am working on new site but it is displaying wrong in IE (surprise surprise). i have been playing around to see if i can get it sorted but am not having any luck, if anyone can offer an idea that would be appreciated. here is the CSS Code:
<style type="text/css">
html, body {padding: 0;
color: #000; background: #eee;
font-family: Arial, Veranda, sans-serif;
margin: 0 140px 0 140px;}
h1 {color: #FFF; background: url('smallpardimg.jpg') center no-repeat #eef;
font: bold 200%/1em Arial, Verdana, sans-serif;
padding: 3em 1em 0; margin: 0 0 0 0;
border-left: 1px solid gray; border-right: 1px solid gray;}
#main {font-size: small; color: #AAA; background: #FFF;
margin: 0; padding: 2.5% 12.5%; clear: left;
border-top: 1px solid gray;}
#nav {margin: 0; padding: 0 0 0 0; float: left; background-color:#eef; border-left: 1px solid gray;
border-right: 1px solid gray;}
#nav li {list-style:none; float: right;
font-size: 12px; line-height: 20px; white-space: nowrap;}
#nav a {display: block; float: left; padding: 0 10px 0 10px;
text-decoration: none; font-weight: normal;
border: 1px solid; border-color: #EEF #EEF #EEF #EEF; color: #333; width: .1em;}
html>body #nav a {width: auto;} /* fixes IE6 hack */
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a {float: none;} /* End IE5-Mac hack */
#nav a:hover {background-color: #eef; color: #ccc;
border-color: #eee #CCC #eee #ccc;}
</style>
and here is how it is being used in the html Code: <h1></h1> <ul id="nav"> <li><a href="/render/">?</a></li> <li id="current"><a href="/newmed/">contact us</a></li> <li><a href="/photos/">about globalhotel</a></li> <li><a href="/design/">my account</a></li> <li><a href="/webdev/">hotels</a></li> </ul> <div id="main"> <p> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> and finally here is a link to the page where i am having probs. thanks in advanced RF I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out. Website is located at: myasvn.org/_/campusrec/temp.php PHP Code: /* Navigation Menu */ ul#menu { background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x; list-style-type: none; list-style-image: none; list-style-position: outside; width: 950px; height: 34px; display: block; line-height: 34px; z-index:2; } ul#menu li a { display: block; color: rgb(255, 255, 255); text-decoration: none; text-align: center; } ul#menu li a:hover, ul#menu li:hover { background-color: rgb(53, 60, 66); } ul#menu li { border-right: 1px solid rgb(53, 60, 66); float: left; } ul#menu li ul { position: absolute; left: -999em; background-color: rgb(238, 238, 238); width: 165px; list-style-type: none; list-style-image: none; list-style-position: outside; } ul#menu li li { border-right: medium none; width: 157px; float: left; line-height: 30px; } ul#menu li li a { border-bottom: 1px solid rgb(210, 210, 210); width: 157px; color: #000000; text-decoration: none; text-align: left; padding-left: 8px; display: block; } ul#menu li li a:hover { color: rgb(255, 255, 255); background-color: rgb(204, 0, 0); } ul#menu li:hover ul { left: auto; } ul#menu li:hover ul, #menu li.sfhover ul { left: auto; } I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here. I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether. You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box. Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it. I don't know what's wrong, but this HAS to be something simple I'm missing. In my XHTML I have Code: <div class="curved"></div> and for the CSS I have Code:
.curved {
background-image: url(Green_wavy_thing.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
}
The image isn't even displaying in any browser. What am I missing? I've tried quotes, etc to no avail. Is my code wrong? The image is in the same directory as the html and CSS files. Thanks, Chris Hi guys, Im hoping a CSS whizz can find an error in this code as I cannot for the life of me work out why content held in the 'main' div is appearing outside / overlapping the edge of the site design? It loads perfectly in Firefox Code: #wrap {
width: 820px;
background: #CCC url(content.jpg) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 10px auto;
}
/* Main Column */
#main {
float: left;
width: 70%;
padding: 0; margin: 0 0 0 5px;
display: inline;
}
Any help would be greatly appreciated I need some help desperately. I am a mediocre CSS guy I am working on a site for a friend of mine. I, for the life of me, can't seem to get an image displayed in IE8 It displays fine in FF. I have a zip file with the whole site so that someone who is an expert in CSS can show what is wrong. I would be very grateful if someone can help me with this. I am not allowed to provide my email since I am a new user. I promise not to be an annoyance to anyone who is willing to share his/her email me so that I can send the files for him/her to look at. I know I am asking too much, but I have no choice Hi, I have labels that aren't displaying properly in IE. I have used similar code in many parts of the site without problem. Please see this page in IE6. The label contents don't display If I move the labels outside of the content div it does display... Code: <div id="content"> <div id="tempcontent"> <div id='confirmation'> <p><label>Email address:</label>james@got.com<br></p> <p><label>Duration of stay:</label>2 day(s)<br></p> <p><label>Number of guests:</label>4<br></p> <p><label>Arrival date:</label>2007-01-03 00:00:00<br></p> <p><label>Departure date:</label>2007-01-05 00:00:00<br></p> </div> Code:
#content {
position:relative;
background-color:#ffffff; /* dcba72 */
margin-top: -1em;
#tempcontent {
margin: 4em 4em;
}
#confirmation {
margin: 2em 8em;
border: 1px solid #781351;
padding: 1em 3em;
}
label
{
width: 15em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color:black;
}
Does anyone know what's going on? I've downloaded a free CSS website template with the idea of just swapping out the graphics and text using Notepad. All is going well with one major exception - I cannot seem to change the graphics in the sidebar or main body. I put the new graphics in the same folder as the original graphics then just changed the img tag to reflect the new filename. This results in the image spacer icon displaying but the new image does not. What is strange is that the alt tag will change correctly, just no image. I know I'm overlooking something simple, but I seem to have hit the proverbial brick wall. Any help would be most appreciated! I tried to attach the files but don't see that option and evidently I'm not permitted to post the url. Just google "templatemo 050 metal" to pull up the files. Thanks for reading this and offering any help! |
|||||||