I work with mPDF to generate invoices to send to my customers. I have an invoice that has some metadata that is listed using an li element. I want the dots from the li element to not be visible. I've tried applying 'list-style-type: none;' to the element in which this information is displayed. I've tried both
of this inline and in the actual CSS.
<?php
foreach ( $invoice->get_columns_data() as $index => $row ) {
echo '<tr class="item">';
// Display row data.
foreach ( $row as $column_key => $data ) {
$templater->display_data_recursive( $column_key, $data );
}
echo '</tr>';
}
?>
The PDF ignores all changes to the metadata that is passed through, but it will change the tr element's background, for example.
.item {
list-style-type: none!important;
background-color: yellow;
}
list-style-type: none; will not work, even if I add !important
background-color: yellow; will work regardless.
Example of element change
I don't know what to do to get this element to listen to my CSS.
Could anyone help me out or point me in the right direction so I can continue?
Simple add css line to local page:
.item{list-style-type: none!important;}
Or add new class like
//css .nodots{list-style-type: none!important;}
//php echo '<tr class="item nodots">';
Related
I am trying to create a three column layout with PHP/HTML/CSS. The left column contains an image then text underneath that image, each image and text is on a separate line. The right column is the same as the left column, but with different images and texts. The middle column contains images and texts NEXT to each other, so one image and one text is on one line, one image and one text is on the next line and so forth. I have a container div that will house these columns, the container is 85% of the page. So each column will be roughly 28%. Right now, I am focusing on just the left and right columns. These columns only have images and not text for simplicity sake (My output image). When I run the code, the output is each image sitting next to each other, instead of each image being on a separate line floating to their respective positions.
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=container>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#container{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
float: left;
width: 28.33%;
}
#left img{
width: 100%;
}
#right{
float: right;
width: 28.33%;
}
#right img{
width: 100%;
}
This is how the output looks like:
Dataset:
<div id=container></div><div id=container></div><div id=container></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/R/r/2/q/P/4/blue-number-one-hi.png><br><p>4</p></div></div><div id=container><div id=left><img src=http://bsccongress.com/im3/blue-number-two-clip-art.png><br><p>5</p></div></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png><br><p>6</p></div></div><div id=container><div id=left><img src=http://2.bp.blogspot.com/-x0uSxqUaYQA/UCEr1WV_1AI/AAAAAAAAC_0/QHrtbsfcK1s/s1600/blue-number-four-md.png><br><p>7</p></div></div><div id=container></div><div id=container><div id=right><img src=http://bsccongress.com/im7/blue-number-five-clip-art.png><p>9</p></div></div><div id=container><div id=right><img src=http://www.clipartbest.com/cliparts/Rid/gq7/Ridgq7AnT.png><p>10</p></div></div>
It is creating an inline of the images instead of putting them on separate lines. How can I correct this problem?
Grid layout
Since you are looking for a grid layout, you would find a framework such as Bootstrap very helpful. With Bootstrap, your HTML would be as simple as:
<div class="row">
<div class="col-xs-4">Left</div>
<div class="col-xs-4">Middle</div>
<div class="col-xs-4">Right</div>
</div>
If you don't want to use a library for some reason (why not?) then take a look at their CSS.
Don't repeat yourself
Create your class as a variable, then create the HTML:
$class = 'middle';
if( something_here ){
$class = 'left';
}
echo "<div class='$class'>Content</div>";
Convert special characters
Your database variables might contain characters that cause errors in your HTML. To prevent that, create a simple function:
function html($str){
return htmlspecialchars($str, ENT_QUOTES);
}
Then use:
<?php echo html($row['field_name']); ?>
Your images issue
If you want your images to be blocks, simply use a class called block on your images, and create this CSS:
.block{
display:block;
}
PHP templating
Instead of:
$this = $row['this'];
$that = $row['that'];
echo "<p>$this</p>";
echo "<div>$that</div>";
You can actually jump between PHP and HTML:
<?php if( something_here ){ ?>
<p><?=html($row['this'])?></p>
<div><?=html($row['that'])?></div>
<?php } ?>
Now your code is shorter, easier to edit, and easier to read, including your source code.
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 have been developing a website that makes use of a css sprite nav bar.
The css for one section which is already set as active follows.
ul#navigation li#navigation-1 a
{
background:url(images/btn_navbar.png) no-repeat -1px 0;
width:90px;
}
ul#navigation li#navigation-1 a.current
{
background-position:-1px -90px;
}
ul#navigation li#navigation-1 a:active,ul#navigation li#navigation-1 a:hover
{
background-position:-1px -45px;
}
I set the active state for the other sections using the following HTML/PHP
<li id="navigation-8"><a href="<?php $page = get_page_by_title('Contact'); echo get_permalink ($page ->ID); ?>" title="CONTACT" <?php if ( is_page('Contact')) { echo 'class="current"' ; } ?>><span>CONTACT</span></a></li>
The problem is that the current 'active' section still has the :hover property which leads to a flicker and unwanted removal of the active state until the mouse leaves the section.
Ideally I would like to simply remove the hover property for the currently selected section.
How is this possible? could I do some jquery wizardry?
Many thanks.
Robert
You can specify the psuedo classes for the "current" link:
#navigation-1 a.current,
#navigation-1 a.current:hover,
#navigation-1 a.current:active {
background-position:-1px -45px;
}
I also recommend you put these below the other #navigation-1 a styles as well, as they will override the styles they inherit from those.
I want to point out that there is no need to write a selector with 2 ids. Ids are always unique, so there's no need to even specify an element either because there will never be two of them (with valid html).
These are all the same (assuming your markup stays the same and you have no unused css):
ul#navigation li#navigation-1{}
#navigation li#navigation-1{}
#navigation-1{}
Give the non-current links a class as well via:
if ( is_page('Contact'))
{ echo 'class="current"' ; }
else
{ echo 'class="notcurrent"' ;}
And then change your css to this:
ul#navigation li#navigation-1 a.notcurrent:active,
ul#navigation li#navigation-1 a.notcurrent:hover
{
background-position:-1px -45px;
}
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 */
}