PDA

View Full Version : Some table positioning troubles



BlomsterPolle
Apr 19th, 2017, 07:17 PM
Hello,
im having some troubles modifing a table...

My plan is to center the table, and position it right beneath the search box on my page. I can't modify it at all.. Not even the width of the table.
I don't know what i am doing wrong, and yes, HTML, PHP and CSS are all pretty new to me.
As you can see, i have a class named "table.stats" that should set the width of the table, but also center it.
It's like it wont recognize that a class has been linked to the table since it wont change the widt, font type, or anything. :/ (I don't know if you even can use classes in tables - again, it's new to me)

I hope that someone out there can help me.. :/

The page at the moment
http://i.imgur.com/5MpVh7o.png

CSS


table {
text-align: center;
font-family: 'Muli', sans-serif; It still uses the arial font type..
border-collapse: collapse;
}

table.stats {
margin: auto;
width: 40%;
}

TABLE CODE


if ($result->num_rows > 0) {
echo "<section class='container'>";
echo "<h4 id='fade2' style='position: absolute;margin: auto;border: 3px solid #bdc3c7;margin-left: -200px;width: 300px;padding: 10px;' class='text-center quick-overview'><b>Quick overview</b><br><br><b>Money:</b> User1<br><b>Online time:</b> User2<br><b>More to come..</b> </h4>";
echo "<h4 class='center' style='margin-bottom: 30px'>Displaying <b><u>$result->num_rows out of $total->num_rows</u></b> results...</h4>";
echo "<table class='stats As you can see, it SHOULD change the width and all that..' id='fade'><tr><th class='text-center'>Player</th><th class='text-center'>Rank</th><th class='text-center'>Moneys</th><th class='text-center'>Online time</th><th class='text-center'>Last seen</th></tr>";
echo "</section>";
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["navn"]. "</td><td>" . $row["rank"]. "</td><td>" . $row["penge"]. "</td><td>" . $row["onlinetid"]. "</td><td>" . $row["sidst_set"]. "</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}

deathshadow
Apr 19th, 2017, 10:57 PM
You've got... a LOT of issues in there that should be fixed before you even THINK about worrying about the layout... you've got bold tags around elements that aren't entity names, H4 around things that are highly unlikely to indicate the start of subsections of any H3 on the page, multiple echo doing a single echo's job, double quotes making outputting valid HTML harder, slow string additions instead of comma delimits on your echo, static style in the markup, tags that haven't even existed in two decades like <u>, painfully vague classes like "container" that don't even say what the content IS, a gibberish class where you seem to have just typed in a sentence, purely presentational classes like "text-center" defeating the entire reason to even be using CSS in the first place, closing a section tag mid-table resulting in invalid HTML...

... and from all that, I'll be buggered if I can figure out what the content is, what the proper markup should be, much less what you are trying to achieve for layout.

I'm guessing WILDLY here, but a more semantic output would likely be coded something more like this:



if ($result->num_rows > 0) {

echo '
<div class="quickOverview">
<h2>Quick Overview</h2>
<dl>
<dt>Money:</dt>
<dd>User1</dd>
<dt>Online time:</dt>
<dd>User2</dd>
</dl>
More to come...
<!-- .quickOverview --></div>

<hr><!-- indicate change in topic without a new H2 -->

<table class="results">
<caption>
Displaying <strong>', $result->num_rows, ' out of ', $total->num_rows, '</strong> results...
</caption>
<thead>
<tr>
<th scope="col">Player</th>
<th scope="col">Rank</th>
<th scope="col">Moneys</th>
<th scope="col">Online time</th>
<th scope="col">Last seen</th>
</tr>
</thead><tbody>';

while ($row = $result->fetch_assoc()) echo '
<tr>
<th scope="row">', $row['navn'], '</th>
<td>', $row['rank'], '</td>
<td>', $row['penge'], '</td>
<td>', $row['onlinetid'], '</td>
<td>', $row['sidst_set'], '</td>
</tr>';

echo '
</tbody>
</table>';

} else echo '0 results';


But you really didn't show us enough of what else is going on with the page or what you desire as a result to dial it in for certain.

I think a LOT of what might be biting you is the endless multiple "echo for nothing" mated to the double quotes and overall lack of formatting and semantics. Some extra whitespace and less echo's would have made the inappropriate </section> placement stand out more, as well as the various other flubs and misuse of HTML tags.

... and remember, HTML is for saying what things ARE, NOT what you want them to look like -- so generally speaking if you have style="" in your markup? You're doing it wrong. If you're using <b> just because you want something bold instead of because it would be bold for grammatical reasons? You're doing it wrong. That's the basics of semantic markup -- aka using HTML properly.

Just like how a H2 indicates the start of a major subsection of the page, an H3 indicates the start of a subsection of the h2 preceding it, and a H4 indicates the start of a subsection of the H3 preceding it -- and I most verily doubt you had a valid candidate for a H3 on that page. They do NOT mean "draw the text in different weights and sizes" just as HR means a change in topic, NOT "draw a line across the screen" -- that's just their default appearance.

BlomsterPolle
Apr 20th, 2017, 05:09 PM
Thank you very much for your answer, Deathshadow!
I know that my current "setup" for this part of the site sucks and looks ugly asf.

I wasn't sure how to set it up nicely, when you're mixing html into a php part, and i did also get a bit confused because of all those echos. (Lot's of code in one single line)

The current look of the page
http://i.imgur.com/mvUDzmz.png

I managed to center 2 elements of the page by adding "<div class="center">" above the <section> part, but the same method won't center the whole table.
It won't make a border around the "quick overview" either. :/
And i actually don't know why the background of the table is green.. I haven't worked with green on this page, and the stylesheet file doesn't contain any green. :confused:



table {
background-color: yellow; As you can see, i tried to change the background color, but this didn't work either.
text-align: center;
font-family: 'Muli', sans-serif !important;
border-collapse: collapse;
}

.results {
margin: auto;
width: 20%;
}

.center {
text-align: center;
margin: auto;
}

.quickOverview {
border: 3px solid #bdc3c7;
width: 200px;
}


Current code


if ($result->num_rows > 0) {

echo '
<div class="center quickOverview">
<h2>Quick Overview</h2>
<dl>
<dt>Money:</dt>
<dd>User1</dd>
<dt>Online time:</dt>
<dd>User2</dd>
</dl>
More to come...
</div>

<hr>

<div class="center">
<section>
Displaying <strong>', $result->num_rows, ' out of ', $total->num_rows, '</strong> results...
</section>
</div>
<div class="center">
<table class="results">
<thead>
<tr>
<th scope="col">Player</th>
<th scope="col">Rank</th>
<th scope="col">Moneys</th>
<th scope="col">Online time</th>
<th scope="col">Last seen</th>
</tr>
</thead><tbody></div>';

while ($row = $result->fetch_assoc()) echo '
<tr>
<th scope="row">', $row['navn'], '</th>
<td>', $row['rank'], '</td>
<td>', $row['penge'], '</td>
<td>', $row['onlinetid'], '</td>
<td>', $row['sidst_set'], '</td>
</tr>';

echo '
</tbody>
</table>';

} else echo '0 results';


I am sorry if this is an obvious mistake i am doing or something i have forgotten. Im learning ;)

BlomsterPolle
Apr 20th, 2017, 05:14 PM
Update...

I just tried accessing the page using a new browser and suddenly the table was centered on the page, and the border around "quick overview" was visible..
Im feeling stupid haha.

I really appreciate your help, and sorry for this mistake haha.. :D