I have a small DIV with text-align:center. All it's contents must be centered. In this DIV I have a PHP code that generates a certain number of A HREF links with display:block. I want all these links to stand next to one another (till it's too wide for the div, then the need to jump to the next line) so I use float:left. However, if only two links (blocks) show up, they are aligned left in my DIV, instead of in the middle. So I want my links to show up next to each other, but I also want to center them inside my DIV. How do I do this?
CODE per request:
<div style="margin-left:200px;width:300px;text-align:center;background-color:">Pagina's:<br clear="left">
<?php
$sql = "SELECT COUNT(bedrijfsnaam) FROM profiles where plaats = '".$plaats2."'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / 1);
for ($i=1; $i<=$total_pages; $i++) {
echo "<a style=\"float:left;display:block;color:white;width:22px;text-align:center;text-decoration:none;font-size:20px;background-color:#483435;margin-left:4px\" href='".$plaatsnaam7.".php?page=".$i."'>".$i."</a> ";
};
?>
</div>
parent div must have
text-align: center
everything inside must have display: inline; float: none;
Related
I'm trying to insert a div into a HTML page using a for loop and the appendChild method in PHP. The issue I'm running into is that the first div always ends up stuck inside the second div, which always ends up stuck in the third div and so on and so forth. So how do I end the div at the end of the for loop?
///The PHP Side
// Create an insertion point for the Projects element
$projectInsert = $doc->getElementById("projects");
// Create a project Box
for ($x = $row_cnt; $x > 0; $x--) {
$sql2 = "SELECT * FROM `$prjct` WHERE id=$x";
$result2 = mysqli_query($db,$sql2);
$row2 = mysqli_fetch_array($result2,MYSQLI_ASSOC);
//Insert a project Box
$projectBox = $doc->createElement('div');
$projectBox->setAttribute("class","projectBox");
$project_element_title = $doc->createElement('p', $row2["title"]);
$project_element_description = $doc->createElement('p', $row2["description"]);
$projectInsert->appendChild($projectBox);
$projectInsert->appendChild($project_element_title);
$projectInsert->appendChild($project_element_description);
}
//Here's where it's inserting in the HTML
<div class="projectBar" id="projectsBar">
<h4 style="height: 30%; width: 100%; margin: auto;">Projects</h4>
<p id="projects"></p>
</div>
Here's photos of what's happening vs what I want to happen
https://docs.google.com/presentation/d/1OgthPueXHzGXyUi6L3DmgWTtOr6gHpfj8LgGh5OG85Y/edit?usp=sharing
Since I'm new I can't embed images.
Thanks for any and all help!
Instead of appending childs($project_element_title and $project_element_description) to parent($projectBox) you are appending it to super-parent($projectInsert), that's the problem.
So change:
$projectInsert->appendChild($project_element_title);
$projectInsert->appendChild($project_element_description);
To
$projectBox->appendChild($project_element_title);
$projectBox->appendChild($project_element_description);
(This has now been resolved - thanks #ChelseaStats)
I have built a web page in PHP. users log in and upload photos and stories, and the page displays the stories and photos immediately.
The problem is that the photos that the MySQL query and PHP return from the database are being displayed all over the place. I have printed them out in an id’d div but the CSS is having no control over their positioning.
Currently the query is like this:
$q1 = "SELECT * from images ORDER BY date ASC";
and they are displayed like this...
row1 = #mysqli_query($dbc, $q1);
echo '<div id = "pictures">';
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo '
<img style = "border: 1px solid black; padding: 10px;" height = "80" width = "80" src = "data:image;base64,'.$fix1['image'].'"><br>'.$fix1['image_id'].'
';}
echo '</div id = "pictures">';
What I would like to do is store all the 'while loop' programming in a variable, then print that variable out elsewhere on the HTML page away from php script so that when the database query is run, I can use the results to fill/initialize the variable (e.g. $displayPics) which will then be printed out on the html page where I want it to appear.
I realise this may be impossible and I am open to suggestions...
...or I might be willing to run a query with a limit of 20 giving results in descending date order and then assigning ‘loop-free’ PHP code to a variable which I can then print out on the page elsewhere.
Code could look something like this:
row1 = #mysqli_query($dbc, $q1);
$fix1 = mysqli_fetch_array($row1);
$displayPics = '
<img style = "border: 1px solid black; padding: 10px;" height = "40" width = "40" src = "data:image;base64,\'.$row1[$fix1[\'image\']].\'"><br>\'.$row1[$fix1[\'image\']].\'
';
(Above code is a shot at how I imagine it will look). (I think the img src code and html has been filtered out by the forum possibly).
But maybe this code will be repeated 20x in the variable with row number changing for each subsequent repetition perhaps?
(I basically want better control over the positioning of the pics coming back from the database).
in a foreach you can assign to a variable like this
$bob = ''; // set it
foreach($row as $image) {
// append to it
$bob .= '<div id=""><img src="" /></div>'.PHP_EOL;
}
print $bob;
similar would work for you.
if you use Bootstrap- you can assign a display class as it is rendered. The following will display each image as follows (4 across on a medium to large viewport, 3 across on a small viewport, and two across on a mobile sized viewport). Also note the use of figcaption to provide the caption on each image.
row1 = #mysqli_query($dbc, $q1);
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo "<div class='col-md-3 col-sm-4 col-xs-6'>
<figure>
<img style = 'border: 1px solid black; padding: 10px;' height = '80' width = '80' src = 'data:image;base64,".$fix1['image']."'/>
<figcaption>".$fix1['image_id']."</figcaption>
</figure>
</div>
";}
Simply write a function that returns all of the rows into an array of assoc arrays and loop through them when you need them elsewhere in the code and use conditional tests on the rows to have better control over where they go!
function getImages(){
$imgs = array();
while(($next = mysqli_fetch_assoc(...)){
array_push($imgs, $next);
}
return $imgs; //array of assoc arrays
}
I'm creating a horizontally scrolling web site. There's a container div which I want to retain a fixed height but expand as required horizontally to fit the content inside it. At the moment the div only expands horizontally as far as the page width. There are actually 9 images to display but only the first 4 are shown. See code and image below. How do I make the container div expand horizontally to show all images please?
css:
body
{
background-color:#dbdbdb;
}
div.infinite-container
{
background-color:#db0080;
height:180px;
}
img.infinite-item
{
width="320";
height="180";
margin-right:8px;
margin-bottom:8px;
display:inline-block;
}
.infinite-more-link
{
visibility:hidden;
}
PHP:
<div class="infinite-container">');
if ($num_results > 0)
{
$array = array();
while ($row = mysql_fetch_assoc($result))
{
$array[] = $row;
}
for ($i = 0; $i < $numImagesPerPage; $i++)
{
$filePath = "animations/".$array[$i]['animationid'].".gif";
echo('<img class="infinite-item" src="'.$filePath.'"/>');
}
}
echo('</div>');
This screenshot is after the changes below suggested by Andrei. The pink area is the container div. The images appear to break out below it.
From the code you posted, doing something like this should work:
body
{
background-color:#dbdbdb;
overflow:auto;
}
div.infinite-container
{
background-color:#db0080;
height:180px;
display:inline-block;
white-space: nowrap;
}
img.infinite-item
{
width: 320px;
height: 180px;
margin-right:8px;
margin-bottom:8px;
display:inline-block;
}
jsFiddle example:
http://jsfiddle.net/S6Abd/
What this does is:
set the display mode to inline-block on the container. This way the container will be as large as needed to contain all items.
set overflow:auto on body to show scroll-bars.
correct the width and height of each item.
add white-space: nowrap; to the container to force the items to stay on one line.
Add this CSS style :)
div.infinite-container
{
width:2952px; /* (320 + 8) * 9 = 2952 */
}
But on the serious note - DIV shows (kind of) all your images, only images 5-9 are in next line and because container have fixed height, then they are hidden.
hi i wonder if anyone can help, not entirely sure this is possible but i have a div container called <div class="scroll">
inside div scroll is a sql query that echoes comments posted by users from the database. the div scroll is set to a width of 600px and so the comments will be arranged in this div left to right, theres two comment boxes on each line, each comment box is just under 300px each as to align next to each other.
the comments are listed like so:
<div class="scroll">
comment 1 | comment 2
comment 3 | comment 4
comment 5 | comment 6
</div>
the comments are encased in the div "comment_box"
now what i have done is put a background image to the div "comment_box" this image is a pointer arrow that points to the left and is positioned on the left hand side of the div, but i also want to have a second background image for the comment boxes that align on the right, so in this instance comments 2, 4 and 6 will have a different background image/an arrow that points to the right on the right hand side of the div.
is this possible?
thanks
comment box{
.wall_post_case_branch {
background-image:url(../img/effects/arrow_left.png);
background-repeat:no-repeat;
background-position: center;
height:90px;
width:290px;
position:relative;
border:#ccc 1px solid;
}
mysql:
<?php
if(mysql_num_rows($wallposts_set) > 0) {
while ($posts = mysql_fetch_array($wallposts_set)) {
$age = days_from_date($posts['date_added']);
?>
<div class="comment_box">
<?php echo "{$posts['content']}"; ?>
</div>
You can do it as below.
<?php
$i = 0;
while ($posts = mysql_fetch_array($wallposts_set))
{
$class = ' odd';
if ($i++ % 2 == 0)
{
$class = ' even';
}
echo '<div class="comment_box'.$class.'">';
}
?>
and in css
.odd { background-image:imageone.jpg; }
.even{ background-image:imagesecond.jpg; }
I would right before the while loop make the variable $i = 0;.
It would use that to define what background color it should use.
Then in the while loop I would use this code:
while ($posts = mysql_fetch_array($wallposts_set)) {
$i++;
$age = days_from_date($posts['date_added']);
echo "<div class=\"comment_box_$i\">
$posts['content']}
</div>";
if ($i == 2)
$i = 0;
}
Then the boxes will have 2 difference classes, the one of the left will have the class="comment_box_1" while the right box will have class="comment_box_2".
Then you can create your CSS for the difference boxes.
Enjoy
You can also do this simply with CSS by using:
:nth-child(even)
:nth-child(odd)
The fiddle illustrates with background colors instead of images.
http://jsfiddle.net/ingvi/CFMcA/
hope it helps
$sql = mysql_query('SELECT * FROM mdl_course c');
foreach($sql as $ss)
{
$coursename = $ss->id;
$summary = $ss->summary;
echo '<div style="min-height:300px;">
<div style="min-height:100px,overflow:auto;overflow-y:scroll;">'.$summary.'
</div>
</div>';
}
Since I have more information in summary field from database and that too in html format, The summary displays out of the min-height.
I want the summary to be displayed within that height of div and overflow if it has more summary. Could anyone help me
?
You should use height as opposed to min-height, since if the height is more than 100px, it will just get larger, rather than scroll
So using height ... if the height came to 150px, you'll be able to scroll 50px down (if you see what I mean).