I am trying to get my table to alternate colors but I am having some difficulty.
if ($i % 2 == 0)
$color = "grey";
else
$color = "white"; $i++;
$table .= "<tr style=backround-color=$color>";
This does not work. I have tried this as well but it did not work either.
$table .= "<tr:nth-child(even) {background: #CCC}; tr:nth-child(odd) {background: #FFF}; >";
You misspelled background and you don't use = in CSS, you use :. I also added quotes around your attribute values as it is best practice:
$table .= "<tr style='background-color:$color'>";
The last line in your question isn't even close to valid HTML or CSS. Looks kinda neat though.
I found an interesting link here that does what you are looking for. I put the code from the link into a jsfiddle and here is the css styles that I got from the link:
.TFtableCol{
width:100%;
border-collapse:collapse;
}
.TFtableCol td{
padding:7px; border:#4e95f4 1px solid;
}
/* improve visual readability for IE8 and below */
.TFtableCol tr{
background: #b8d1f3;
}
/* Define the background color for all the ODD table columns */
.TFtableCol tr td:nth-child(odd){
background: #b8d1f3;
}
/* Define the background color for all the EVEN table columns */
.TFtableCol tr td:nth-child(even){
background: #dae5f4;
}
Related
I am working on a piece of code that displays a table that shows different drug details. I have a color coding system, red = danger, yellow = alert, green = safe.
However I am not happy with the colors that I am using. Is there any way of inserting brighter colors into this code below?
<?php $row_class = "";
while($row = mysql_fetch_assoc($dbResult1))
{
if($row['total_mai'] <= 2)
$row_class = "success";
else if($row['total_mai'] >= 5)
$row_class = "danger";
else if($row['total_mai'] >= 3 and $row['total_mai'] < 5)
$row_class = "warning";
// echo $row_class;
?>
The colors actually aren't in your code here. The colors are defined in classes in your css. Somewhere in the header of your file, you'll need to look for a reference to a css file:
<link rel="stylesheet" type="text/css" href="mystyle.css">
It could also be in the actual html page between <style> tags.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Though there will be a lot there, you're probably looking for sections which look something like this:
.success {
color: green;
}
.danger {
color: red;
}
.warning {
color: yellow;
}
There could be many other attributes defined too, but the .word "selector" tells the browser to render colors on the text with these classes you're adding. To change the colors, change the attributes. You might not see color names liek above. You could see hex colors (something like #d0e4fe;). The W3Schools page on CSS is a good place to get started. They also have a nice color reference for color names:
There are other ways the CSS might reference the classes, so you might want to look at a tutorial on Selectors. For instance, they might use tr.danger { ... } to reference only danger classes which are applied to table rows.
If using Bootstrap
Then I'm not an expert, so I can only help so much, but Bootstrap pre-defines some of these styles for you. You could make new classes and use !important to override the classes with new colors. Important can get confusing since it's a "nevermind" to previous CSS, but you need it here if bootstrap is applying the background to cells individually. I just found some code on another answer here about doing this in Bootstrap:
.table tbody tr > td.success {
background-color: #dff0d8 !important;
}
.table tbody tr > td.error {
background-color: #f2dede !important;
}
.table tbody tr > td.warning {
background-color: #fcf8e3 !important;
}
.table tbody tr > td.info {
background-color: #d9edf7 !important;
}
.table-hover tbody tr:hover > td.success {
background-color: #d0e9c6 !important;
}
.table-hover tbody tr:hover > td.error {
background-color: #ebcccc !important;
}
.table-hover tbody tr:hover > td.warning {
background-color: #faf2cc !important;
}
.table-hover tbody tr:hover > td.info {
background-color: #c4e3f3 !important;
}
This would be in your own CSS file preferably. If you start modifying the Bootstrap css file, it could get frustrating if you need to upgrade Bootstrap to a new version. The "important" takes care of your settings being more, well... important.
You could also use the links I added above to learn how to make your own classes and then add your own classes instead of Bootstraps.
So I have a $res
$res = $conn->query("SELECT username, Hours,joined FROM users ORDER by Hours DESC LIMIT 10");
which leads to this table:
while ($row =$res->fetch_assoc()){
echo "<tr><td>" .$row["username"] ."</td><td>"
. $row["Hours"]."</td><td>".$row["joined"]."</td></tr>";
}
Then using html and css:
table, td, th {
background-color:#F2F2F2;
font-size:20px;
left:20px;
th {
background-color: green;
color: white;
}
How do I make the first output a certain color, which in this case would be #F2F2F2(light gray) background. Then a second output(column) a white background color? Then third output #F2F2F2 again, so it's basically every other time. I am thinking about an if statement? but couldn't exactly think of a specific one. So far I am getting, as planned, a ugly pure gray back grounded table.
There is a cleaner way to do it with CSS3 you can do this without using php using the nth_child() selector like this
table, td, th {
background-color:#F2F2F2;
font-size:20px;
left:20px;
th {
background-color: green;
color: white;
}
tr:nth-child(even) {
background-color:#fff
}
In your case this makes all the even table rows i.e 2,4,6.... have a background color of white, you can also change the argument even to odd, depending on how you want to use it. It should also be noted that Internet Explorer 8 and earlier versions do not support the :nth-child() selector
This is a quick and dirty way:
$i=0;
while ($row =$res->fetch_assoc()){
$bg="";
if ($i & 1) $bg=' bgcolor="#f2f2f2"';
echo "<tr$bg><td>" .$row["username"] ."</td><td>"
. $row["Hours"]."</td><td>".$row["joined"]."</td></tr>";
$i++;
}
I'm creating a horizontally scrolling web site. There's a container div which I want to retain a fixed height but expand as required horizontally to fit the content inside it. At the moment the div only expands horizontally as far as the page width. There are actually 9 images to display but only the first 4 are shown. See code and image below. How do I make the container div expand horizontally to show all images please?
css:
body
{
background-color:#dbdbdb;
}
div.infinite-container
{
background-color:#db0080;
height:180px;
}
img.infinite-item
{
width="320";
height="180";
margin-right:8px;
margin-bottom:8px;
display:inline-block;
}
.infinite-more-link
{
visibility:hidden;
}
PHP:
<div class="infinite-container">');
if ($num_results > 0)
{
$array = array();
while ($row = mysql_fetch_assoc($result))
{
$array[] = $row;
}
for ($i = 0; $i < $numImagesPerPage; $i++)
{
$filePath = "animations/".$array[$i]['animationid'].".gif";
echo('<img class="infinite-item" src="'.$filePath.'"/>');
}
}
echo('</div>');
This screenshot is after the changes below suggested by Andrei. The pink area is the container div. The images appear to break out below it.
From the code you posted, doing something like this should work:
body
{
background-color:#dbdbdb;
overflow:auto;
}
div.infinite-container
{
background-color:#db0080;
height:180px;
display:inline-block;
white-space: nowrap;
}
img.infinite-item
{
width: 320px;
height: 180px;
margin-right:8px;
margin-bottom:8px;
display:inline-block;
}
jsFiddle example:
http://jsfiddle.net/S6Abd/
What this does is:
set the display mode to inline-block on the container. This way the container will be as large as needed to contain all items.
set overflow:auto on body to show scroll-bars.
correct the width and height of each item.
add white-space: nowrap; to the container to force the items to stay on one line.
Add this CSS style :)
div.infinite-container
{
width:2952px; /* (320 + 8) * 9 = 2952 */
}
But on the serious note - DIV shows (kind of) all your images, only images 5-9 are in next line and because container have fixed height, then they are hidden.
I apologize is any of this does not look right, it is my first time asking a question on this site.
I am creating a webpage using html, css, and php. Specifically, I am trying to create subnavigation links on my page using information from a database.
Here is the code I have:
foreach ($subArr as $sub => $result)
{
if (mysql_num_rows($result) > 0)
{
$resultString .= '<a id="$sub" style="cursor: poimter; color: #0076cf;" href="$sub">'.' | '.$sub.' | '.'</a>';
}
}
$subArr is an array of subcategories that I would like the user to be able to click on the link with the subcategory's name and it will take them to that part of the same page. As of right now, all it does is create one giant link under all of the subcategory names instead of creating each individual link.
Obviously I need some sort of loop, but I am not sure how to look through the $resultString to change both the anchor id and href.
Any help is much appreciated!!
(Of topic, but important)
You have a typo, it should be :
style="cursor: pointer; ..."
Instead of :
style="cursor: poimter; ..."
There is an error in your code.
You put variable in '' which php won't parse to get proper result you need to put variable in "".
foreach ($subArr as $sub => $result)
{
if (mysql_num_rows($result) > 0)
{
$resultString .= '<a id="'.$sub.'" style="cursor: pointer; color: #0076cf;" href="'.$sub.'"> | '.$sub.' | </a>';
}
}
Moreover it looks weird to have same ID as href is.
I've noticed you use mysql_* function which are depracated and will be removed in future. Consider using PDO or MySQLi instead.
foreach ($subArr as $sub => $result)
{
if (mysql_num_rows($result) > 0)
{
$resultString = '<a id="$sub" style="cursor: pointer; color: #0076cf;" href="$sub">'.' | '.$sub.' | '.'</a>';
}
$resultstring="";
}
you seem to be on the right track but have a few things mixed up.
Menu
Firstly when making a menu you want to use an unordered list, then style it with CSS. A basic example of this is:
<ul class="menu">
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
You then style it with the following CSS
ul.menu, ul.menu * {
list-style: none;
padding: 0;
margin: 0;
}
ul.menu {
width: 100%;
height: 20px;
background: #ccc;
padding: 5px 0; /* Add padding top and bottom */
}
ul.menu > li {
height: 20px;
line-height: 20px;
float: left;
}
/* Make a tag fill the entire LI so users can click
anywhere, not just on the text. */
ul.menu > li > a {
display: block;
padding: 0 10px; /* Add padding between items */
color: #000;
text-decoration: none;
}
ul.menu > li > a:hover, ul.menu > li > a:active {
background: #000;
color: #FFF;
}
/* Add divider between items, except last item (Does not work with earlier versions of IE) */
ul.menu > li:not(:last-child) {
border-right: 1px solid #000;
}
PHP Loop
Firstly a note. You're using mysql, which is depreciated. That means that in a version of PHP some time soon it is not going to be available any more. A lot of people recommend you learn PDO. Personally I prefer MySQLi over prepared statements, but that's just my preference. Either is fine, but learn one of them.
Now for your loop. You seem to be checking for a result from your mysql query within your loop, that's wrong. I'm guessing above that you have a query which loads it's results into $subArr. You need to call mysql_num_rows before you load them into $subArr.
The loop itself is fine other than that once you apply it to a list as above. Your final code should look something like this. Note, I've used MySQLi in my example, I recommend you do the same although it shouldn't be too hard for you to convert it to MySQL if you wish to.
<?php
$subArr = array();
$query = "SELECT something FROM somewhere";
$result = $mysql->query($query);
if($result->num_rows) {
while($row = $result->fetch_assoc()) { //I personally prefer fetch_assoc over the others, but fetch_row or fetch_array are both fine here too.
$subArr = $row;
}
}
//Lets output the menu
$resultString .= '<ul class="menu">';
foreach($subArr as $sub => $result) {
$resultString .= '<li>' . $result['name'] . '</li>'
}
$resultString = '</ul>';
As one last point of note, you don't need to put a cursor: pointer on an a tag, it has that styling by default.
I hope this manages to clear some things up for you.
I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.
My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....
<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...
and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)
Is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!
My PHP file
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">";
echo "<li>" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</li></ul>";
}
My CSS file
#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">;
echo "<li><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></li></ul>";
}
Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.
As an example
span.psuedo-col {
display: inline-block;
width: 10em;
overflow: hidden;
}
Or you could use
`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */
The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.
Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:
#sidebar li {
float:left;
width:33%; /* three columns with equal width */
}