center in table-cell

I have this two functions :

[php]function setServTitel() {
extract($GLOBALS);
if(!isset($_GET[‘service’]))
$_GET[‘service’] = “Spulaanbod”;

switch($_GET['service'])
{
case "Spulaanbod": echo "<h2>Spullen Aangeboden</h2>";break;
case "Spulgevraagd": echo "<h2>Spullen Gevraagd</h2>";break;
case "Hulpaanbod": echo "<h2>Hulp Aangeboden</h2>";break;
case "Hulpgevraagd": echo "<h2>Hulp Gevraagd</h2>";break;
case "Leenaanbod": echo "<h2>Te Leen Aangeboden</h2>";break;
case "Info":echo "<h2>Info</h2>";break;
}

}[/php]

and :

[php]function setPages() {

extract($GLOBALS);
if(!isset($_GET['page']))
	$_GET['page'] = 1;
	
switch($_GET['service'])
{
case "Spulaanbod": $result = $db->query("SELECT COUNT(*) AS Aantal FROM AanbodSpul;");break;
case "Spulgevraagd": $result = $db->query("SELECT COUNT(*) AS Aantal FROM Vraag;");break;
case "Hulpaanbod": $result = $db->query("SELECT COUNT(*) AS Aantal FROM DienstenA;");break;
case "Hulpgevraagd": $result = $db->query("SELECT COUNT(*) AS Aantal FROM DienstenV;");break;
case "Leenaanbod": $result = $db->query("SELECT COUNT(*) AS Aantal FROM Uitleen;"); break;
}

foreach($result as $row)
{ extract($row); }

$pages = ceil($Aantal/24);
echo "<h2>Pagina ".$_GET['page']." van $pages</h2>";

}[/php]

I use these functions in the following code :

[php]

";setService();echo"

";setServTitel(); echo" "; setPages(); echo"
";setServices(); echo"
$menu
[/php]

But as you can see in the picture the table-cell overlaps the boundary of the service div (blue one).
I have tried to center it but it doens’nt work.

http://expopunt.nl//.kwikweb/paginas/indexbody.php

What could be the problem ?

Thanks in advance


Farid,

You got a lot of work to do to get it looking the way you want… But your first step is removing the display:block from the

tags

Or create a new class that memics the

tags and remove the display:block and apply it to the section you want to.

You also need to increase that table from 30px height to 35px height.

I did. what is the next step ?

You didn’t…

You still have Spullen Aangeboden wrapped in the

tags.

I removed the display:block as you said.

create a new class that memics the

tags and remove the display:block and apply it to that section

Do that, cause you use H2 all over and when you fix it for that one section, it will distort the other sections…

I don’t know how to do that. Than I think I need the font-size of a h2 tag ?

Can you please tell me how to do it. Because I have not that much experience with html/php.

you are talking about CSS not PHP now, does your page use an external stylesheet or is there styles in the header?

You can mimic the

just set the font-size you want

font-size:18px;

Also you should never rely on <h#> tags, because different browsers assign different sizes to it and you won’t be able to control what it looks like. It’s always best to set the size you want inside the tag and override the default.

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

If you click on that link and scroll down to H2, you will see the default assignment per version of browser you are on.

I already solved it.

I have external style sheet with h2 :

[code]h2 {
color: White;
font-size: 18px;
font-family: Arial, Helvetica, Sans-serif;
text-align: center;
font-style: normal;
font-weight: bold;
margin-top: auto;
line-height: 30px;
vertical-align: middle;

}[/code]

the line-height: 30px; was the problem .

Thank you for your support !

I still have a problem.

If I don’t use the h2 tag the text isn’t centered :

[php]function setServTitel() {
extract($GLOBALS);
if(!isset($_GET[‘service’]))
$_GET[‘service’] = “Spulaanbod”;

switch($_GET['service'])
{
case "Spulaanbod": echo "<span style='margin-top: auto; vertical-align: middle;'>Spullen Aangeboden</span>";break;
case "Spulgevraagd": echo "<h2>Spullen Gevraagd</h2>";break;
case "Hulpaanbod": echo "<h2>Hulp Aangeboden</h2>";break;
case "Hulpgevraagd": echo "<h2>Hulp Gevraagd</h2>";break;
case "Leenaanbod": echo "<h2>Te Leen Aangeboden</h2>";break;
case "Info":echo "<h2>Info</h2>";break;
}

}[/php]

[php]

"; setServTitel(); echo" "; setPages(); echo"
";setService(); echo "
";setServTitel(); echo"
[/php]

http://expopunt.nl//.kwikweb/paginas/indexbody.php

It is centered, it’s your H2 tag that’s not showing up centered :stuck_out_tongue:

It’s giving you an illusion that the centered one is not really centered.

You really have the most complicated HTML layout with CSS I ever seen, you should rethink it and start from scratch.

I second that. Rewriting your views would make it a lot easier to maintain later on. Some common guidelines that are good to follow

[ul][li]don’t use tables for layout, tables are for tables only.[/li]
[li]don’t use inline css[/li]
[li]don’t use inline javascript[/li]
[li]don’t echo/print html[/li]
[li]don’t have html output in functions (or try not to, at least give them names that imply that it’s some kind of rendering)[/li][/ul]

What is so complicated about it ? I just want some text(with different sizes) centered in a div.

How can I use html code in a php file without printing it ??

How can I center text in a div without using a table ?

By separating your logic and views.

a simple example of how it could be done

index.php
[php]<?php

function render ($page, $title, $content) {
$pages = array(‘header’, $page, ‘footer’);

foreach ($pages as $page) {
include_once ‘template/’ . $page . ‘.php’;
}
}

$page = !empty($_GET[‘page’]) ? $_GET[‘page’] : ‘home’;

switch ($page) {
case ‘home’:
render (‘home’, ‘Welcome to my website’, ‘This is just some demo content!’);
break;

case ‘about’:
$title = ‘About my site’;
$content = ‘This content could be loaded from a store somewhere, like a database or api.’;
render ($page, $title, $content);
break;

default:
render (404, ‘Page not found’, ‘The requested page could not be found, please try again later!’);
break;
}[/php]

style.css
[php].box {
width: 300px;
height: 150px;
border: 1px solid #000000;
text-align: center;
display: table-cell;
vertical-align: middle;
}[/php]

template/header.php
[php]<!doctype html>

<?= !empty($title) ? $title : 'My site' ?> [/php]

template/footer.php
[php]

[/php]

template/home.php
[php]

<?= !empty($title) ? $title : '' ?>

<?= !empty($content) ? $content : '' ?>

[/php]

template/about.php
[php]

<?= !empty($title) ? $title : '' ?>


<?= !empty($content) ? $content : '' ?>

[/php]

template/404.php
[php]

<?= !empty($title) ? $title : '' ?>

<?= !empty($content) ? $content : '' ?>

[/php]

Then you can use the following links to try it out
yoursite/yourfile.php
yoursite/yourfile.php?page=home
yoursite/yourfile.php?page=about
yoursite/yourfile.php?page=somethingelsethatdoesntexist

css, see example above

Basically do all your logic in php first, then render your views when you’ve got all your data :slight_smile:

Sponsor our Newsletter | Privacy Policy | Terms of Service