I am having an issue with my CSS, It is by far something i am not good at but i cant seem to solve an issue where my Table will not display based on screen width. It used to be static but since changing the values to % of screen it has not made any visual changes to my Table. (UPDATED BASED ON ANSWERS/COMMENTS)
HTML / PHP
//Table Titles row
echo "<div class='tablediv' style='width:100%; border: 5px solid black'><table name ='ipv4' class='tableparent'><td class='tabled' width='100%'>IP Address</td><td class='table'>Subnet</td><td class='table'>PC Name</td><td class='table'>Owner</td><td class='table'>Customer</td><td class='table'>Customer Site</td></tr>";
//loops through search results and echo table
while ($row = mysqli_fetch_array($view)){
$id = $row['companyId'];
$company = $customers[$id];
echo "<tr><td class='tabled'>". $row['ip']."</td><td class='table'>". $row['Subnet']."</td><td class='table'>".$row['hostName']."</td><td class='table'>". $row['owner']."</td><td class='table'>". $company ."</td><td class='table'>".$row['siteName']."</td></tr>";
}
echo"</table></div>";
CSS
.table
{
border:1px solid black;
text-align: left;
padding:10px;
width:12%;
overflow:hidden;
}
.tabled
{
top:500px;
border:1px solid black;
text-align: left;
width:40%;
overflow: hidden;
}
.tableparent
{
border:1px solid black;
border-collapse:collapse;
width: 95%;
text-align: left;
padding:15px;
table-layout:fixed;
}
.tablediv
{
position:absolute;
width: 95%;
top:70px;
}
Currently this displays the table looking like this
Add width="100%" in table tag, it will set full width as parent div width
echo "<div class='tablediv' style='width:100%'><table width='100%' name ='ipv4' class='tableparent'><td class='tabled'>IP Address</td><td class='table'>Subnet</td><td class='table'>PC Name</td><td class='table'>Owner</td><td class='table'>Customer</td><td class='table'>Customer Site</td></tr>";
Found the issue, The page was POST'ed to by ajax. I then found that the result's div of the search was accidentally surrounded by another div, limiting its width. Thanks for the help
Related
I'm making a Wordpress module to reserve a room.
Now I use mPDF to create the contracts of the reservations automatically.
mPDF has problems with creating tables with on every row a border line.
When I create the table and view it in html everything looks fine. But when I create a PDF with mPDF the does not show me the row bottom border.
This is the html code that I use to generate the pdf:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
Can I resolve the problem by changing some of my code or is this a bug in mPDF?
From this document, it appears that borders for tr elements are supported by the latest version of mPDF (version 6).
Are you using the latest version?
Maybe you can try to apply a bottom border to the cells only, and not the rows? (Just make sure there are no table cellspacing or td cell margins, or you will see gaps in the borders).
That's how the page looks like currently: http://i.imgur.com/nEHLFUX.png[1] and there are couple of bugs that I would love you to help me with. 2 main ones I want the spell names to be aligned to the right next to little icons of spells and second of all there is a background picture and when I zoom the site out it moves downwards and to the left and I want it to always stay at the same place.
Now code:
class spell {
function do_spell($spellicon, $spellname, $spelltext, $changeinpower) {
echo '
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td ><img class="spellimage" src="/abilities/'.$spellicon.'"></td>
<td class="spellname">'.$spellname.' - </td>
<td class="spelldesc">'.$spelltext.'</td>
<td class="changeinpower"><img src="/icons/'.$changeinpower.'"></td>
</tr>
</table>
</div>
';
}
}
patch.php part
$karthus = new splash;
$laywaste1 = new spell;
$laywaste2 = new spell;
$karthus->do_splash('Karthus','cropkarthus','Karthus_0.jpg');
$laywaste1->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added a new indicator that shows the full area of effect','new.png');
$laywaste2->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added crit-style combat text and a unique sound effect for double-damage Qs','new.png');
Some css:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc; }
.spelltable {
width: 100%;}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;}
.spellname {
white-space: nowrap;
padding: 0 5px;
width: 10px;}
.spelldesc {
font-size: 15px;
line-height: 1.05em;}
.changeinpower {
width: 60px;}
/* And now the img in the background part */
.season2014
{
background-color:#f1f1f1;
background-image: url('/season_graphic/SEASON2014_2.png');
background-repeat: no-repeat;
background-position: 20% 50%;
background-origin: content-box;
background-position: fixed; }
<body class="season2014";>
PS. any kind of mistakes in code I would love you to point out I'm really new to the web-designing thingy
The problem with the background moving is from the background-position: fixed. This fixed value is not valid CSS. Try playing with the values available for the property to get the desired effect. More info on the Mozilla Dev Network for CSS with the background-size property.
About the name, I haven't seen any text-align: left in your CSS, that's maybe what you're looking for in your .spellname property. But more than that, the alignment problem comes from the width which is just width: 10px; in the .spellname property.
Because you fixed the total row width to 900px, why not use pixels all the way to define all the widths ? Like so:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc;
}
.spelltable {
width: 100%;
}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;
}
.spellname {
white-space: nowrap;
padding: 0 5px;
text-align: left;
width: 150px; /* Adapt to your needs */
}
.spelldesc {
font-size: 15px;
line-height: 1.05em;
text-align: left;
width: 658px; /* Adapt to your needs */
}
.changeinpower {
width: 60px;
}
And the corresponding HTML code
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td class="spellimage">IMG</td>
<td class="spellname">Name</td>
<td class="spelldesc">Text with plenty of info here</td>
<td class="changeinpower">IMG</td>
</tr>
</table>
</div>
On a side note, doing one table per item is loosing the whole purpose of tables: one item is one row of the table. You should have one table per category and each spell being a row in the according table.
I have a CSS related problem, that would look easy, but I have been slamming my head against the wall for the last hour, since the tweaks arround i tried are not applying.
For some odd reason, the select dropdown menu wont stick into the cell, but is placed above the table.See picture below
The loop code to generate the table is build up as followed: (i didnt bother posting the php cause thats not relevant)
echo '<tr class="items">';
echo '<td id="cell11">'.$Date.'</td>';
echo '<td id="cell21">'.$link.'</td>';
echo '<td id="Fright1">'.MakeUserRoleDropdown($StatusId).'</td>';
echo '</tr>';
The CSS is pretty basic:
select { width: 367px; font-family: Verdana; font-size: 12px; color: #666; background: white; border: 1px solid #CECECE; padding: 4px;}
.dropdownrole { width:150px;}
#cell11 { padding-left: 10px; padding-right: 10px; width: 200px; text-align:left;}
#cell21 { padding-left: 10px; padding-right: 10px; width: 200px; text-align:left;}
#Fright1 { padding-left: 10px; padding-right: 10px; width: 200px; text-align:right;}
table.items tr { height: 32px; background:url(../images/tableRow.png); border-top: 1px solid #CCC; padding: 0; margin: 0;}
.items { width: 100%; border-collapse: collapse; color: ##797979; font-family: Verdana; font-size: 11px; }
table { border-spacing:2px;}
dropdownrole is in this case te class applied to the dropdown menu.
As you see, the dropdown wont apply to the row and just is put above the table (even in the code it's not even in the cell) And I cant wrap my head arround why. I made cells already bigger in size (height and width) but no luck.
Did i do something wrong within the CSS?
EDIT
Per request of the dropdown function.
function MakeUserRoleDropdown($StatusId){
echo "<select name='StatusId' class='dropdownrole'>";
$results = LoadRoles();
while($row = mysql_fetch_array($results)){
echo "<option value='".$row['SgroupId']."' ";
if($StatusId == $row['SgroupId']){
echo "selected='selected'";
};
echo ">".$row['SgroupUser']."</option>";
}
echo "</select>";
}
And here is the output in HTML.
I Think the problem is, that you call MakeUserRoleDropdown which contains echos
you proceed to use this method in this string: echo '<td id="Fright1">'.MakeUserRoleDropdown($StatusId).'</td>';
Alter your MakeUserRoleDropdown to this:
function MakeUserRoleDropdown($StatusId){
$str = '';
$str .= "<select name='StatusId' class='dropdownrole'>";
$results = LoadRoles();
while($row = mysql_fetch_array($results)){
$str .= "<option value='".$row['SgroupId']."' ";
if($StatusId == $row['SgroupId']){
$str .= "selected='selected'";
};
$str .= ">".$row['SgroupUser']."</option>";
}
$str .="</select>";
return $str;
}
And you should be good.
Ok. Here is my problem. Regardless when i do my while loop to get my list elements out to the page, my images wont center. I have tried using divs and classes but nope. I have tried closing the tags and using html and opening the PHP tags but no. Here is the code. Help plz.
<?php
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
$name = $row['name'];
$desc = $row['longDesc'];
$cost = $row['cost'];
$qty = $row['quantity'];
$img = $row['imageFilename'];
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
}
?>
Here is the css:
ul#items li{
color: white;
padding: 10px;
display: block;
font-family: 'Alef';
height: 180px;
text-align: center;
width: 150px;
vertical-align: middle;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
display: inline-block;
margin: 10px;
}
ul#items li:hover{
border: 1px solid #8E8E8E;
}
ul#items img{
margin-top: 15px;
display: block;
position: absolute;
border: 1px solid black;
max-width:149px;
height: 118px;
width: fit-content;
}
Help please.
IMAGE OF PROBLEM:
http://i.stack.imgur.com/arzL0.png
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
You're not center'ing the 'img' tag in your code. Try this instead:
echo "<a href='paintings.php?id=$id'><li><center><img src='../../_/images/paintings/$img'><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
There are many places where your HTML could/should be improved. A lot of it depends on context we don't have, which is understandable, but doesn't make it easy to give you a complete answer.
To make it work and still look like your screenshot, I would first:
Move the anchor tags into the list item
Remove any IDs that are within loops that do not change per loop iteration. An id is a unique identifier. This doesn't have anything to do with your question, but is important.
Then refer to this (INCOMPLETE) fiddle to get started:http://jsfiddle.net/aNgcb/
The css might look something like this:
ul#items {
list-style-type:none;
overflow:hidden;
}
ul#items li {
color: white;
padding: 10px;
font-family:'Alef';
height: 180px;
text-align: center;
width: 150px;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
float: left;
margin: 10px;
}
ul#items li:hover {
border: 1px solid #8E8E8E;
}
ul#items img {
border: 1px solid black;
height: 118px;
max-width: 100%;
}
You can't center a "block" element with text-align: center;
You can try making the img display: inline-block; or just leave them at the default inline.
display: inline-block;
There is no problem in the php, the problem its with css. try putting a div there and make it margin-left: auto and margin-right:auto.
If you want a good answer, try posting a jsfiddle example. www.jsfiddle.com
I have a link after an image in my xhtml. The browser automatically puts a return character after the image so that the link is below the image. I want the link to be beside the image. How do I modify the CSS/XHTML for this?
PHP generates it like this(example code)
echo "<img class = \"c\" src=\"http:\/\/www.facebook.com\/favicon.ico\" alt=\"\"\/>";
echo "<a name = \"a1\" class = \"b\" href = \"$ass_array[url]\">$ass_array[name]</a>";
CSS
img.c
{
display:??;
}
a.b
{
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
width:100%;
border-bottom:1px solid #cccccc;
}
See: http://jsfiddle.net/thirtydot/vgnAa/
CSS:
.c {
display: block;
float: left;
margin-top: 4px;
margin-right: 4px;
}
.b {
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
border-bottom:1px solid #cccccc;
overflow: hidden;
}
Either float: left, float: right depending which side you want the link to be. Apply that to both, and make sure to have a clear div after.
This way you can still have that display:block on .b.
"float:left;" for both elements will work