I have a simple php page, with the main content placed in a table which is centred. I want to place a menu which starts at the upper right corner. The code is like this:
echo "<table class=\"center\">";
while($row= mysql_fetch_array($query))
{
echo "<tr>";
echo "<td>";
... content...
echo "</td>";
echo "</tr>";
}
echo "</table>";
echo "<table class=\"topRightTable\">";
while($row= mysql_fetch_array($query2))
{
echo "<tr>";
echo "<td>";
... content ...
echo "</td>";
echo "</tr>";
}
echo "</table>";
With this css:
table.center
{
margin-left: auto;
margin-right: auto;
text-align: left;
}
table.topRightTable
{
position:absolute;
top:50;
right:50;
}
body
{
min-width: 600;
}
This works fine, until the window resizes. Then the right menu will float along with the window, be positioned over other elements. How to avoid the menu item moving along with the window?
I have tried to set the min-width of the page to 600, and hoped this would prevent the right menu from moving further, but with no luck.
The qustion is: how to prevent the right-menu-table from colliding with the center-table
The other answer is correct. Assuming you table's parent is body:
body, html{
margin:0px;
padding:0px;
width:100%;
min-width:600px;
}
table.center {
margin-left: auto;
margin-right: auto;
text-align: left;
}
table.topRightTable{
float:right;
}
If the <body> is not the parent, change it to .parent{ min-width:600px;}
You've positioned the table absolute which means it won't be rendered in the same plane as other elements. If you want the table to stay position:absolute, make the other elements also positioned absolute and put all of them into a container that's positioned:relative with a set width. Or (even better) float the elements.
Related
I'm still learning, please go gentle with me.
When I run my script everything works except the full formatting with my css. In the snipped of code, I would like the . However, when I have the div in the middle of the , as seen below, when I run the page I have two lines of information. Line one contains the flag image, line two contains my outputted "luchthavencode", underlined as desired.
How would I format the css / php/html code so that they all are contained within one line.
If I move the to before the img, everything is in a line as desired -- it's OK that when you hover over the flag the name comes up, also), it also generates two lines.
echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'> <div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>";
Using the following css styles
.top10_luchthaven {
position: relative;
border-bottom: .1em dotted;
width:30px;
}
.top10_luchthaven:hover:after {
background: url(http://globe-trekking.com/vg/img/hovercard-bg.png) repeat-x;
border-radius: 5px;
bottom: 5px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 400px;
}
.top10_luchthaven:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
with the full table php/html code:
echo "<table width='200px' border='0' cellpadding='2' cellspacing='2'>";
echo "<tbody>";
echo "<tr>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>#</strong>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>Luchthaven</strong>";
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>No.</strong>";
echo "</tr>";
$line = 1;
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td bgcolor='#C6DEFF'>$line</td>";
echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'> <div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>";
echo "<td width='60px' bgcolor='#C6DEFF'>".$row['sum']."</td>";
echo "</tr>";
$line++;
}
echo "</tbody>";
echo "</table>";
The problem is that divs are block level elements by default, which means they line break, so you need to have CSS that instructs those divs to be inline with the image next to it. Try doing this...
.top10_luchthaven {
display: inline;
}
If that doesn't work, then do display: inline-block instead.
Trying to create a broad sheet for a school such that it loops the result database and fetches a student records and display it horizontally.
css controlling the style for the ul
#my-list{
background: #f7f7f;
padding: 8px; /* Give the items some air to breathe */
}
#my-list > li {
display: inline-block;
zoom:1;
*display:inline;
background:#99FFFF;
/* this fix is needed for IE7- */
}
#my-list > li > a{
color: #666666;
text-decoration: none;
padding: 3px 8px;
}
#my-list > li > a:hover{
color: black;
}
It starts the loop here for the scores. My problem is that I want to be able to display all the scores on one row but it breaks into a new line after each subject is displayed. I want it on a row eg: Biology ca(10) exam(70) total(100) Economics ca(10) exam(70) total(100), till the loop is completed but it keeps breaking into a new line.
do{
echo"<li>";
echo "<table width='200' border='1'>";
echo "<tr>";
echo "<td>".$dbfieldscore['subject_name']."</td>";
echo "<td>".$dbfieldscore['CA']."</td>";
echo "<td>".$dbfieldscore['exam']."</td>";
echo "<td>".$dbfieldscore['total']."</td>";
echo "</tr>";
echo "</table>";
echo "</li>";
} while($dbfieldscore=mysql_fetch_assoc($resultscore));
echo "<ul>";
echo "</td>";
It loops the database for student score. Here is the problem, I want to display the output horizontally but it goes to the next line.
Add white-space:nowrap; to the #my-list rule
#my-list{
background: #f7f7f;
padding: 8px; /* Give the items some air to breathe */
white-space:nowrap;
}
and to leave the inner contents unaffected you can add
#my-list > li {white-space:normal;}
Replace with this, add the spaces to visualize the output in a proper way as per your need.
echo "<td>";
do{
echo $dbfieldscore['subject_name']." ";
echo "CA: ".$dbfieldscore['CA'];
echo "Exam: ".$dbfieldscore['exam'];
echo "Total: ".$dbfieldscore['total'];
} while($dbfieldscore=mysql_fetch_assoc($resultscore));
echo "</td>";
This image shows my website's homepage.
http://i163.photobucket.com/albums/t315/smc22_2007/Website.png
I want rows of 4, not rows of 5.
Here is my php code:
<?php
$query = "SELECT * FROM UFPProducts";
$results = mysql_query ($query, $connect);
while ($row = # mysql_fetch_array($results))
{
print
"<div id= 'item'>" .
"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>£".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".
"</div>";
}
Here is the CSS for the above:
#item {
width:100px;
text-align:center;
border: 1px solid #D9D9D9;
padding: 0px;
list-style: none;
width: 150px;
float: left;
margin-right: 15px;
margin-bottom: 15px;
border-radius: 10px;
-moz-border-radius: 10px; /* firefox rounded corners */
-webkit-border-radius: 10px; /* Safari rounded corners */
min-height: 220px;
}
#item li h1 {
text-align:center:
}
#item li#white{
min-height: 220px;
}
How can I display rows of 4, not 5?
Thankyou
From looking at the code, there doesn't seem to be anything that "forces" five rows that you could simply change to four. It is quite possible that the width of the parent element naturally causes the items to appear in rows of five. If that is the case, you have a couple of options. You could add left and/or right margins or change the widths of the items to make them wider and force them to overflow to the next row sooner. Or, you could implement a counter in the PHP that would add a <br> tag (or similar) after every four items. You could also shrink the parent element, though that might not be an option. The CSS options are simple enough, in #item, increase the width:
#item {
width:100px;
/*... other css ...*/
}
In the PHP:
<?php
//rest of code
$counter=0;
while ($row = # mysql_fetch_array($results))
{
print
"<div id= 'item'>" .
"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>£".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".
"</div>";
$counter++;
if ($counter==3) {
$counter=0;
print "<br>";
}
}
Your products are currently set to float with a width of 150px. Since you're floating it will continue to add items until they don't fit (ie, if your items are 10px wide in a 75px wide container and you add 8, you'll see 7 on one 'row' with 1 on the next). You can simply increase the width to fit the container that your products are in until you've got 4 items per 'row'. Your margins and any padding also add to this so keep that in mind.
#item {
...
width: 200px;
...
}
If you don't want to increase the width of your product cells, then increase the margin to the increase the effective width of the elements.
#item {
...
margin-right: 20px;
...
}
You should also update your items to use a class instead of an ID since ID are supposed to be unique on a page.
.item {
...
}
<div class='item'>...</div>
As far as I see, while loop does not enforce any restrictions. Well my suggestion would be something like this:
$i = 1;
$cssClass = 'item';
$columns = 4;
while ($row = # mysql_fetch_array($results))
{
$class = $cssClass;
if (($i % $columns) == 0) {
$class .= ' clear';
}
print "<div id='{$class}'>" .
"<p>Product id " . $row["ProductID"] . "</p>" .
"<p><img src=" . $row[" Image"] . "></p>" .
"<p>£" . $row["Price"] . "</p>" .
"<p>" . $row["Description"] . "</p>" .
"</div>";
$i++;
}
And then in css define:
.clear { clear:both; }
I have posts that are echoed out of my mysql database. If there is more than one, they are echoed in separate divs in order of decreasing rank number (taken from DB). However, when the divs are echoed, the all overlap on the top. I believe this is a CSS problem. The thing is that each div has several sub divs. I think the "position" attribute might have contributed to this. I would like for each div to be echoed out with about 100px between each one. Thanks.
CODE:
$post = array();
$f=0;
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area'>";
echo "<div id='badge'><span style='color: gray;'>Answered by:</span>";
include 'badge.php';
echo "</div>";
echo "<div id='areapost'><pre>$post[$f]</pre></div>";
$f++;
}
echo "</div>"; /*end area*/
CSS CODE:
#area {
background-color: #fff;
border: 1px solid red;
width:500px;
height: 300px;
}
#badge{
position: absolute;
top: 0px;
left: 0px;
}
#areapost{
position: absolute;
top: 0px;
right: 0px;
height: 300px;
width: 380px;
background-color: #E0E0E0;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
The "area" is the entire post container. The areapost and badge are elements inside "area"
All elements in the page must have a unique id, otherwise you get unexpected behavior.
Fix this, and see where it puts you.
Try moving the opening "area" div tag out of the conditional:
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area'>";
should be:
echo "<div id='area'>";
while($row=mysql_fetch_assoc($g)){
$post[]=$row['post']
since you want area to contain everything else
You almost always need to open and close divs at the same level of looping. Here you are opening the <div id='area'> inside the while loop and closing it outside the while loop. They need to either both in, or both out. Also, your id's ought to be unique, over your whole page, else you should be using classes on those divs.
You also need to not position all these areas absolutely. I've added a content div around everything. Position this absolutely, and the area class relatively. You don't need the styling on #area, change it to .area.
$f=0;
echo "<div id='content'>"
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area-'" + $f + " class='area'>";
echo "<div class='badge'><span style='color: gray;'>Answered by:</span>";
include 'badge.php';
echo "</div>";
echo "<div class='areapost'><pre>$post[$f]</pre></div>";
echo "</div>"; /*end area*/
$f++;
}
echo "</div>"
also try using relative positioning, with 100px space on each. this way each div will be spaced relative to the previous div, rather than one spot, causing them to overlap.
So far i have this code:
function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; display:inline;'>";
while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";
}
which produces this:
Does anyone know how to make the above centered so its in the middle?
Any ideas appreciated.
Thankyou
Update:
I have tried styling as a block and doing margin:0 auto with a fixed with but thats a problem, i need it to stretch along 100% of the width because the fields 'IP, City, Region, Country Name and Country Code will be filled in via GeoLoc services automatically, so having a fixed width of say 500px is not big enough therefore it needs to be the whole width, I want it centred because if there is someone viewing my webpage that there info doesnt use the whole width it would look better centered.
I hope this makes sense.
Try this:
<ul style='list-style-type: none; display:block; width:500px; margin:0 auto;'>
If you want to center the content of the UL without providing a fixed width probably the easiest way is the following:
function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; text-align: center;'>";
while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";
}
Wrap the ul in a div and then add this CSS:
.className {
margin:0 auto;
}
HTML:
<div class="className">
<ul style='list-style-type: none; display:inline;'>
<li style='list-style-type: none; display:inline; padding-right:5px;'>Stuff</li>
</ul>
</div>
Change the ul style to block