Alright, so basically I aligned 9 boxes in three rows vertically and horizontally, and used css to position them. Everything went fine and worked, until I included a php command to access a mysql database and echo certain rows inside the divs. The first box maintained it's position, however the second was too far to the right and higher than I originally set it to be, the 3rd one was all the way off the screen, you had to scroll to see it. I've attempted to fix this through positioning in html (and deleting the css commands), however this only works for chrome. In firefox the boxes seem to ignore the command and start at the left top corner.
the codes with the php inside look like this:
<div id= "box1"> <div style="position: absolute;background-color:#fff;width:250px;height:120px;border:0px;">
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("testtest") or die(mysql_error());
$query = mysql_query("SELECT * FROM posts ORDER BY time ASC LIMIT 0, 1;");
while ($row = mysql_fetch_array($query)) {
echo '<div style="font-weight: bold;">';
echo $row["Title"];
echo '</div>';
echo '<div style="font-weight: normal;">';
echo $row["Offer"];
echo '</div>';
}
?>
</div>
and the css codes look like this (obviously different for each box, but you get the point)
# box1 {
margin-top: -140px;
margin-left: 830px;
}
Thanks in advance for any help, I'm really stuck there and I can't seem to figure out why php would affect the positioning of a div..
You may want to re-write your page markup. Using a negative margin is probably not the best idea, especially if the boxes are position:absolute; Instead you could set a parent container for your boxes, and position each box based on that.
Have you set the overflow of the boxes?
here is a simple template...
With a bit of luck this will help solve your bug.
Hum i don't know if your forgot to print here, but you have a div tag not closed.
Related
I'm editing a website that contains an image slider that displays two images side-by-side, however when i view the website in chrome the images are not inline with each other like so: http://i754.photobucket.com/albums/xx182/rache_R/Untitled-1_zps6f3014ef.jpg
I use php and html to get data from a database and display the images based on the data gathered. I have tried to target the images individually in my css but it either doesn't work or effects both images.
Is there a correct way of targeting the images individually or how can i fix this?
php code:
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<u1>"; ?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4></li>
so i managed to solve it:
#media screen and (-webkit-min-device-pixel-ratio:0){
#mi-slider li {
vertical-align: top;
}}
Place the < ul> having a width so much that it can hold both images side by side and give style='display:inline' for the ul.. You will get the images inline
This is more of a css question.
You have one of to options, using an inline list or a float.
personally i line inline list, you could also use a table but that is considered bad practice.
You could also use java script to calculate the position, which is also bad practice if used improperly.
W3schools.com should be a good reference if you dont know how to implement these properties in css.
Next time please replace your php with static information so it looks better :) cheers
I am currently in the process of trying to build a screenshot gallery. I have complete the first step which is to make it possible for the user to upload the image to a mysql database.
That is how the images for the gallery are supplied to the gallery script. Unfortunately, I have spent months perfecting my ability to get various things into a database, but not so much time on how to take them from the database and display in a user friendly format.
Twitter Bootstrap Fluid Grid System
Twitter Bootstrap utilizes a fluid grid system to display data. You don't have to use it, but it makes for a much better looking layout. Now the screenshot gallery needs to display rows of images and each row is 4 columns wide. Now here is the kicker, This is the structure for each row.
http://pastebin.com/HvBK5rTC
I need to generate that row over and over. But I need the images that populate it to cease at 4, echo the appropriate closing divs, echo the opening divs for another row, and the echo four more images out, ect, ect.
I don't have any code for this because I do not know where to start. I can supply anything that you need if you can just help me get started.
Edit
This is what I have come up with so far, but I do not know how to close the <div class="row-fluid"> and open a new one.
http://pastebin.com/EADji2eh
You are pretty much there. mysql_* fn's are deprecated, you should use PDO etc.
You can do what you need by adding an outer loop for flow control, and using what you had already as an inner. The result array, it will automatically iterate through the result set for you without needing to keep track of offsets for limits etc.
build_gallery_fn.php:
function image_from_database() {
// use a running counter for flow control of the outer loop
$runningcount = 0;
$r = mysql_query("SELECT DISTINCT logo AS `img` FROM NewsArticles WHERE logo IS NOT NULL AND logo !='';");
//Get # of images in results to use as upper limit for outer loop
$img_ct = mysql_num_rows($r);
while ($runningcount <= $img_ct){
//rowcount reset to break content blocks
$rowcount = 0;
echo "<div class=\"row-fluid\">";
$runningcount++;
while(($rowcount <= 3) && $row = mysql_fetch_assoc($r))
{
$rowcount++;
$img = $row['img'];
echo '<div class="span2">';
echo "<span class='thumbnail'><img src='attachments/logos/$img'/> Photo # $runningcount of $img_ct</span>";
echo '</div>';
}
echo "</div>";
}
}
Output Holder:
<div class="container">
<h1 class="text-center">The American Pacific Group ScreenShot Gallery</h1>
<hr>
<?php
echo image_from_database();
?>
</div>
On my website, I am trying to fetch a description from a certain page, which works, but it just stays on one single line and you have to scroll sideways to read it. I want it to go up to a certain point and then go down a line, and repeat. Thanks.
How can I put the code on here so that it just shows the code, and doesn't try to portray it?
You can use the php function wordwrap.
echo wordwrap($description,75,"<br/>");
Alternatively you can put the element in a container with a fixed width.
echo "<p style='width: 400px;'>",$description,"</p>";
Currently I have a DIV with the name "containerX". The X however can change in any number, depening on the input of the user that submits a value. Based on the number I want to show a certain DIV with values.
Is it possible to create a "if / else" statement in PHP that shows a certain div based on the name.
E.g.
if div name = containter7 then show the following
else if div name = container 8 then show the folloing
and on.
Have tried a lot so far, but can't seem to work it out.
Thnx
Sure thing, assuming you're able to get a variable in PHP that represents the correct div name- There are a few different options, but this would probably be the best (works without too many changes).
Let's say you have the following divs-
<div id='div1'>Some div stuff(1)</div>
<div id='div2'>Some div stuff(2)</div>
<div id='div3'>Some div stuff(3)</div>
In the page's head tag, add a new style for hidden divs:
<style>
div.hidden {
display:none;
}
</style>
Then, change your divs to resemble the following:
<div id='div1' <?php if(divName!="containter1") echo "class='hidden'" ?> >Some div stuff(1)</div>
<div id='div2' <?php if(divName!="containter2") echo "class='hidden'" ?> >Some div stuff(2)</div>
<div id='div3' <?php if(divName!="containter3") echo "class='hidden'" ?> >Some div stuff(3)</div>
That bit of PHP will set each div to the hidden class we made earlier, if the variable divName isn't equal to the right string.
This is by far not the most efficient code, but if you aren't too experienced in PHP (which forgive me for saying, but judging by the phrase if div name = containter7, I would have to assume you're new-ish to the language), then this will get the job done with minimal PHP involvement.
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.