I have trouble with my CSS. I'm trying to correctly display this kind of array:
https://jsfiddle.net/ju8hmgp9/
I think the problem is maybe right there :
table {
display: table;
width:auto;
margin : auto;
border-spacing: 2px;
border-color: gray;
}
table td{
font-size: 8pt;
}
.empty{
background-color: #C7C7C7;
}
td, th {
display: table-cell;
vertical-align: inherit;
width: auto;
border: 1px solid gray;
border-collapse : collapse;
margin-left: 5px;
margin-right: 5px;
}
As I know, everything worked as well before, and I don't know how to fix this. How can I fix my problem ?
In your JSFiddle you have applied display: block; to the td element. If you remove this then the table displays as it should.
https://jsfiddle.net/4bx4n8fk/1/
Related
The red and yellow standard colors of xdebug can hurt your eyes after a few hours.
http://www.designified.com/blog/article/76/restyling-xdebug-output describes how to replace the style with javascript requiring jquery.
I was looking for a more straight forward way and finally found one.
The solution is the !important tag, it overrides the existing style values. Use the following css code to avoid eye cancer when using xdebug:
.xdebug-error {
font-size: 12px !important;
width: 95% !important;
margin: 0 auto 10px auto !important;
border-color: #666 !important;
background: #ddd !important;
}
.xdebug-error th, .xdebug-error td {
padding: 2px !important;
}
.xdebug-error th {
background: #ccc !important;
}
.xdebug-error span {
display: none !important;
}
.xdebug-error_description th {
font-size: 1.2em !important;
padding: 20px 4px 20px 100px !important;
background: #ccc no-repeat left top !important;
}
.xdebug-error_callStack th {
background: #666 !important;
color: #ddd !important;
}
Have a nice xdebug!
Yes you can. Try this css below.
table.xdebug-error {
width: auto;
background: white;
border: none;
border-spacing: none;
border-collapse: collapse;
box-shadow: 0px 3px 10px 0px black;
position: fixed;
top: 0px;
right: 0px;
z-index: 8888;
font: 14px verdana;
transform-origin: top right;
transform: scaleX(0.4);
opacity: 0.3;
transition: all 200ms ease;
}
table.xdebug-error caption,
table.xdebug-error th,
table.xdebug-error td {
text-align: left;
vertical-align: middle;
}
table.xdebug-error a img {
border: 0;
}
table.xdebug-error :focus {
outline: 0;
}
table.xdebug-error pre {
margin: 0;
}
table.xdebug-error tbody tr td,
table.xdebug-error tbody tr th {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
font-weight: normal;
}
table.xdebug-error tbody tr td {
padding: 3px !important;
vertical-align: top;
}
table.xdebug-error tbody tr th {
padding: 13px !important;
}
table.xdebug-error tbody tr td:nth-of-type(1) {
width: 5% !important;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] {
font-weight: normal;
background: steelblue;
color: white;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] span {
display: none;
}
table.xdebug-error tbody tr font[color='#00bb00'] {
color: #005e00;
}
table.xdebug-error tbody tr td small {
display: none;
}
table.xdebug-error tbody tr td i {
padding-left: 12px;
}
table.xdebug-error:hover {
transform: none;
opacity: 1;
}
CONS:
Depending on your other css defs, you may have to fiddle a bit until it looks as promised.
It's not as beautiful as a Laravel/Symfony error
PROS:
You can see the actual page, despite the error. (Message will be dimmed and pushed on the right side, appearing on mouse hover.)
It's nothing more than CSS
You can even add it to your page via CSS Live Editor Plugin or something similar; therefore, no need to add to your own code
It won't break your styling, won't stuff a whole lot of text into a tiny container where the error happened, etc. - because it's position:fixed.
Pleasant to the eye - you'll end up throwing errors just to see it again :)
Another option is to disable xdebug from overloading var_dump.
In the php.ini [XDebug] section add xdebug.overload_var_dump=0
Formatting the output is then up to you; one such way could be wrapping var_dump in your own debug function that prints <pre> tags.
// notice the line height, the padding(cellspacing), monospace font, font size, making readability better at least for me.
//
// A FILENAME : xdebug_stack_trace.css
//
// This is how the xdebug_stack_trace.css is called from the index.php page
//
// <style><?php require_once("./resources/css/xdebug_stack_trace.css");?></ style>
//
// notice that on the line above there is a space between the slash
// and the 'style', on the ending 'style' tag, otherwise the display
// get all messed up when this page gets loaded.
//
// make sure that when you copy the 'style' line from here to the
// index page, that you remove the extra space at the ending 'style'
// tag of the index page.
// +---------+---------+---------+---------+---------+---------+---------+
// orange/black td header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error th
{
font-family:monospace;
font-weight:normal;
font-size:15px;
padding: 6px 6px 6px 6px;
border:1px solid black;
background: #FFCC99; // orange
color:#000000; // black
}
// +---------+---------+---------+---------+---------+---------+---------+
// black/white th header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
line-height:1.6em;
padding: 10px 10px 10px 10px;
border:1px solid #000000;
background: #000000; // black
color:#FFFFFF;
}
// +---------+---------+---------+---------+---------+---------+---------+
// green/black td content one or more lines
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error td
{
font-size:14px;
padding: 6px 6px 6px 6px;
border:1px solid green;
background: #D1FFE8; // light green
}
// +---------+---------+---------+---------+---------+---------+---------+
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
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 am currently writing an addon module for our Billing Software, and the modules automatically inherit the template's CSS when you use any of the elements. For example, I use the "datatable" element for my tables, and it inherits the CSS style depending upon what template the user is currently using.
I want to hide the inner border that the "datatable" element has, and I am using tags to put all of my CSS in the module code. I am not quite sure how I can do this, but here is what the CSS looks like from the billing software's template style.css file.
table.form {
border: 1px solid #B8CBE7;
background-color: #fff;
padding: 0px;
}
table.form td.fieldlabel {
text-align: right;
font-weight: bold;
padding: 5px;
background-color: #E4ECF8;
}
table.form td.fieldarea {
text-align: left;
padding: 5px;
border-bottom: 1px dashed #ccc;
}
.tablebg {
background-color: #e9e9e9;
}
table.datatable {
padding: 0;
margin: 0;
}
table.datatable th {
background-color: #f3f3f3;
font-weight: bold;
text-align: center;
}
table.datatable td {
background-color: #fff;
text-align: center;
}
table.datatable tr.rowhighlight td {
background-color: #EFF2F9;
}
table.datatable tr:hover td {
background-color: #EFF2F9;
}
You can define the same datatable class again and set it's border as 0. You will just need to ensure this new css definition comes after the actual one
table.datatable {
border: 0px;
}
try append this line in CSS stylesheet:
.datatable{
border: 0 !important;
}
I'm trying to get my name and trip input fields to line, but they're all over the place.
http://prime.programming-designs.com/test_forum/viewboard.php?board=0
#formdiv{
margin: auto;
text-align: left;
width: 30%;
}
.fielddiv1{
background-color: #222222;
border: 2px solid #333333;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #222222;
border: 2px solid #333333;
vertical-align: middle;
width: 100%;
}
.fieldtext{
width: 100%;
background-color: #333333;
}
Remove the <br /> that's between those two fielddiv1 div's
You have a <br> between the divs that contain them.
Wrap both of them (the two divs with fielddiv1 class) into a single div. And also delete the line break in between them.