I want to get rid off small dots that appear when I use max-width (see // for details).
Here's my php that shows a messeage saved in session:
<?php
echo "<table id='delpos'>";
echo "<td id='del'>" . $_SESSION["del"] ."</td> ";
echo "</table>";
?>
And css that doesn't show background-color (until session exists) by using max-width + max-height :
<style>
#del {
background-color:red ;
color:white;
max-width:20px;
max-height:6px;
overflow:hidden; // tried using this to hide the small "red" dots...
}
#delpos {
margin-top:60px;
margin-left:30px;
position:absolute;
}
</style>
Please help:)
Related
I want to get rid off small dots that appear when I use max-width (see // for details).
Here's my php that shows a messeage saved in session:
<?php
echo "<table id='delpos'>";
echo "<td id='del'>" . $_SESSION["del"] ."</td> ";
echo "</table>";
?>
And css that doesn't show background-color (until session exists) by using max-width + max-height :
<style>
#del {
background-color:red ;
color:white;
max-width:20px;
max-height:6px;
overflow:hidden; // tried using this to hide the small "red" dots...
}
#delpos {
margin-top:60px;
margin-left:30px;
position:absolute;
}
</style>
Please help:)
I scan trough a folder for images by using php,
i put them in a div with the ID of images.
I want that div to scroll on the x-axis and hide everything that overflows on the y-axis.
So here's my code.
HTML and PHP:
<div id="images">
<?php
//Displaying images
$imgID = 0;
foreach($images as $image) {
echo "<img id='img".$imgID."' onClick='displayImg(".$imgID.");' src='".$image."' height='".$imgHeight."' width='".$imgWidth."' />";
$imgID++;
}
echo "<script>var maxImages = ".$imgID.";</script>";
?>
CSS:
#images {
overflow-y:hidden;
overflow-x:scroll;
height:<?php echo $imgHeight; ?>px;
border:solid 1px #c4c4c4;
align-content:flex-start;
}
#images img {
padding:5px;
cursor:pointer;
float:left;
}
I've experimented a bit, But nothing i've tried seems to work.
Your question is slightly out of context but how about something like:
http://jsfiddle.net/bassmanpaul/u9Xx6/
This goes on the assumption that you have the image widths available in php ($imgWidth) which can allow you to create a large inner container.
Failing that you may need to give us a JSFiddle to demonstrate your issue in greater detail...
I have done some research to find a way to use a link to expand/collapse some content. I can't see any problems with my code, but the link does nothing.
HTML code ;
echo "<div>";
echo "[Results]";
echo "[Results]";
echo "<table class=\"results\">";
Followed by php to populate table, then close the table and div.
CSS
.results, .show {display:none}
.hide:focus + .show{display:inline}
.hide:focus {display:none}
.hide:focus ~ .results {display:block ;
width: 20em;
margin-left: auto ;
margin-right:auto}
How can I add different font-styles to different rows?
I want all of them to have a different font-style. For example:
while($row = mysqli_fetch_array($result))
{
echo $row['Nimi']."<br>".$row['Kirjailija']."<br>".$row['ISBN']."<br>".$row['Kunto']."<br>".$row['Hinta']."€"."<br>".$row['Pvm'];
echo "<br>"."<br>";
}
I am not so good at php. But I gave a little try about it like this:
Slight modification to your code.. Adding a classing to each row!
i = 1;
while($row = mysqli_fetch_array($result))
{
/* adding <span class="row1"> row2 etc.. using i */
echo "<span class='row".i."'>".$row['Nimi']."<br>".$row['Kirjailija']."<br>".$row['ISBN']."<br>".$row['Kunto']."<br>".$row['Hinta']."€"."<br>".$row['Pvm'];
echo "<br>"."<br></span>";
i++;
}
Giving Styles in css based on row names:
.row1{
font-family: verdana;
}
.row2{
font-family: arial;
}
etc..
I am repeating once again, I'm not sure about syntax.. I am posting this only to share the concept hoping that it should work! :)
For example:
style="font-family:verdana;"
You can use inline styling <span style="color: red;">test</span>, or use classes of css: <span class="red-color">text</span> with a css
.red-color{
color: red;
font-family: Arial;
}
In general, it is better to use classes with an external css file - that would keep your code organized and scalable.
In your case it is possible to use inline style like:
echo "<span style=\"color: red; font-family: Arial\">" . $row['Nimi'] . "</span>" . "<span style=\"color: green; font-family: Verdana\">" . $row['Kirjailija'];
Also, it is not a good practice to use <br /> now-a-days. Better wrap each text with a <span>, or a <div>
I have the following css code:
#Layer3
{
position:absolute;
width: 89%;
height: 40%;
left: 10%;
top: 56%;
background-color: #f1ffff;
}
#Layer3 h1
{
font-size: medium;
color: #000033;
text-decoration: none;
text-align: center;
}
.tableheader {
border-width:10px; border-style:solid;
}
.tablecontent {
height: 95%;
overflow:auto;
}
However, when I use this PHP to generate the html
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';
echo "<table border='0' width='100%'><tr>" . "\n";
echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";
echo "</tr>\n";
// printing table rows
foreach ($rows as $row)
{
$pk = $row['ARTICLE_NO'];
echo '<tr>' . "\n";
table contens generated in here
echo '</tr>' . "\n";
}
echo "</table>";
}
echo "</div>";
which generates this html:
<div id="tableheader" class="tableheader">
<h1>hardy Auctions</h1>
</div>
<div id="tablecontent" class="tablecontent">
<table border='0' width='100%'>
<tr>
<td width='15%'>Seller ID</td>
<td width='10%'>Start Date</td>
<td width='75%'>Description</td>
the rest of table stuff
</div>
The stylesheet is correctly referenced so I am unsure what is causing the error. But there is no border around tableheader at all. Both of these layers are in Layer3 which no longer displays properly on the page.
#tableheader {
border: 10px solid #000;
}
Try giving it a color.
EDIT: since its id is tableheader, try changing the style selector to be an id. You could also try using !important to see if anything is overriding your class selector.
Specificity values:
inline: 1000; id: 100, class: 10, element: 1
!important trumps all other non-important declarations.
Start by browsing the HTML DOM in the rendered page either using Firebug in Firefox or using the IE Developer Toolbar in IE.
That way, you can see what styles are actually associated with the element in the rendered page. It's a lot easier to debug the issue from there.
One possibility is that there's a syntax error somewhere in the CSS file causing the styles not to be applied correctly.
I've just had a quick look at this and it seams fine, I've also created a local copy of these and the styles work out okay as well, I get a nice thick black border around the h1 text.
So from what your explaining something is either overwriting the styles, or the styles aren't being applied to the page.