I have a PHP site that displays a table of images.
Each image has a "backdrop" to them that is user defined. So, users can say "I want the red backdrop" and all images will be displayed, with a 10 pixel border of their color.
Also, it is a staticy backdrop.
To accomplish this, I first echo the static image, then the user color image, then the table image.
echo "<img src='Static.jpg' width='60' height='60' />";
echo "<img src='User$userColor.jpg' width='60' height='60' />";
echo "<img alt='TableImage' width='50' height='50' />";
Currentley, I push the latter two images up by attaching this to them:
style='position:relative; top:-55px; margin-bottom: -55px;'
This seems very hacky. Is there a nice CSS way I can stack the images, so that when I change the size or order I don't have to scan and edit the stylings of every image?
Thank you.
Your question is a bit unclear, but instead of using an image to create the 10px border around the static image, why not just use CSS by adding a class to each image you want the border?
.staticImage { border: 10px solid <?php print $color; ?>; }
You could store the color of border they want in a cookie for example.
CSS:
<img alt='TableImage' width='50' height='50' style="border: 10px solid $userColor"/>
Related
I am working plotting one html/php table using following code.
$color=array("#000000","#0000FF","00FFFF","#00FF00","#FFFF00","#7FFFD4","#FF0000","#FF9900","#FFFFFF","#00BFFF");
echo "<br>Color Codes:<br><br>";
echo '<table border="1" cellpadding="0" cellspacing="0"><tr>';
for($i=0;$i< sizeof($color); $i++)
{
echo "<td height='5px' width='10' bgcolor='".$color[$i]."'>($i/10)</td>";
}
echo '</tr>';
echo '</table><br>';
But when I plot this I get following output:
Here height does not decrease with height paramer as I need to just create rectangular boxes.
I replicated your code and didn't see what you're seeing, so I think you may have other styles on the page where you're plotting this that are interfering with the layout. You can take the height attribute off the td elements; then try adding a style="" attribute on the table and testing different properties.
<table style="line-height: 1;"> - try that for starters.
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 want to display a image in a div section. Here is the css i am using
#imagesection {margin:10px 10px 10px 10px; float:left; border: 5px solid #f0f0f0;}
#container {width:90%; margin:3% 0px 0px 10%;}
#full_page {height:auto; width:auto;}
#name {background-color:#FFF; word-wrap:break-word; word-break:}
</style>
The image is being displayed well but when i added text ($name) It's loosing the style. Please check the image below
<div id="full_page">
<div id="container">
<div id="Gallery">
<div id="imagesection">
<img src = <?php echo $picture;?> />
<div id="name">
<?php echo $name; ?>
</div>
</div>
</div>
</div>
</div>
I want the text to be continued in new line if length of image is exceeded.
I mean the text should be automatically adjusted with correspondence to image inside div, With out leaving blank spaces.
Please suggest me what should be done to achieve this...
Updated Snapshot :
Apply Float on your image tag
For example:
css
{
#image
{
float: left;
}
}
<img id="image" src = <?php echo $picture;?> />
Update:
After watching your updated screenshot. What I sugggest you can do is to get the width of the image and then pass that to your div that will automatically stops the text to overflow the div
Here is the code of getting height and width
<?php
list($width, $height, $type, $attr) = getimagesize("image_name.jpg");
echo "Image width " .$width;
echo "<BR>";
echo "Image height " .$height;
echo "<BR>";
echo "Image type " .$type;
echo "<BR>";
echo "Attribute " .$attr;
?>
Always set your img width, height, border and alt tags. I would also set the width of the image div and the text div explicitly. If you set all three of them to 500px for instance, the text should wrap.
I am trying to display images vertically 5 per row using php and I have achieved it.
I am also using a div and this seems to be creating a problem.
Images are displayed horizontally, but there seems to be a huge space between each image.
Heres the php code:
<table width="500" border="0" cellpadding="2" cellspacing="3">
<tr>
<?php
// get the images for the new videos
$query = "SELECT * FROM videos";
$result = mysql_query($query);
$numimages = 0;
while ($row = mysql_fetch_assoc($result)) {
extract($row);
// extract youtube id
preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches);
// $matches[ 1 ] should contain the youtube id
?>
<td valign="top">
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="<?php echo $video_title;?>">
<img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" />
</a>
</div>
</td>
<?php
$numimages++;
if ($numimages%3 == 0)
echo "</tr><tr>";
}
?>
</tr>
</table>
This is the css:
#videogallery {
width:500px;
zoom:1;
}
#videogallery span{
display:block;
}
#videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:3px;
width:160px;
font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-weight:normal;
color:#333333;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#videogallery a img{
display:block;
border:none;
margin:0;
}
#videogallery a:hover{
opacity:1;
}
I have noticed a few things. First, ids must be unique in html, but they are not in your document. You create <div id="videogallery"> in a loop, so that id appears multiple times. You should change the id into a class (or remove the div completely).
Also #videogallery is set to have a width of 500 pixels, which is also the width of the containing table. If you plan to have 5 images next to each other, the width of a div (or an image) should not exceed 100 px. Reducing the width should already help you to reduce the gap between images.
It's generally not a good idea to use tables for layout, it should be possible to get the same effect without tables. That gives you more flexibility. (Determining the number of images per row should be a layout issue, not a code issue.)
90% of that code is completely redundant.
You don't need the tables (in fact, it's considered very poor practice to use them for layout like this these days), and you don't need the wrapper <div> elements around your images.
Your <a> tags are already styled with display:inline-block;, so actually they should already line up horizontally without any of that stuff. Just put them next to each other, without all the extra junk, and they'll line up quite happily for you. You can use margin and padding to put any extra spacing between them that you do require.
All you need beyond that is a single wrapper <div> around the whole lot to enforce a fixed width for the whole block, so that they wrap onto new lines at the right points.
Hope that helps.
there seems to be a huge space between
each gap.
Do you mean a 7 pixel gap?
<table width="500" border="0" cellpadding="2" cellspacing="3">
you may avoid <table> alltogether by using div and css float see this http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
See http://jsfiddle.net/ZfyRb/