Jump to content

Recommended Posts

I am trying to write a script for a basic forum and I am stuck at the moment purely on displaying the text vertically within a box.

Similar in design to this forum, on the index list page showing all of the topics, the title of each is shown in a box with a central vertical position.  I am trying to position my text the same vertically and I just cant get it to work.  I have tried all kinds of combinations of using vertical-align, line-height, padding etc etc.

Basicly, I have:

<div id="this-is-the-box-holding-text">

<span>This is the text that should be vertically central</span>

</div>

Any help would be much appreciated!
Link to comment
https://forums.phpfreaks.com/topic/33136-forum-display-centre/
Share on other sites

[quote author=jesirose link=topic=121293.msg498310#msg498310 date=1168115093]
This is HTML/CSS not PHP. Wrong Forum.
You tried http://www.w3schools.com/css/pr_pos_vertical-align.asp
[/quote]

I have tried the vertical-align property in both the parent and subject elements and it is not working!

Sorry about wrong forum, I have found that this area is best for getting response and thought that somebody may give me a suggestion.
Link to comment
https://forums.phpfreaks.com/topic/33136-forum-display-centre/#findComment-154435
Share on other sites

[quote author=jesirose link=topic=121293.msg498384#msg498384 date=1168118453]
What did you use for the value? Can I see the actual page live?
[/quote]

Bearing in mind it is a work in progress, here is the bit I am working on at the moment:

[code]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.board_group_holder {width: 780px; padding: 2px; border: 1px solid #000000; background-color: #FFFFCC; text-align: center}
.board_group_title_holder {width: 100%; height: 35px; border: 1px solid #000000; background-color: #FFBC00; text-align: left; padding-left: 10px}
.board_holder {width: 100%; height: 40px; border: 1px solid #000000; background-color: #FFFFCC; margin-top: 2px}
.board_title_holder {width: 60%; height: 38px; border-right: 1px solid #000000; float: left; padding-left: 10px; text-align: left}
.board_stats_holder {width: 15%; height: 38px; float: left; text-align: center}
.board_lastpost_holder {width: 25%; height: 100%; border-left: 1px solid #000000; float: right; vertical-align: middle}

.board_group_title {font-family: arial; font-size: 18px; color: #FFFFFF; font-weight: bold}
.board_title {font-family: arial; font-size: 16px; color: #FF1200; font-weight: bold; line-height: 19px}
.board_description {font-family: arial; font-size: 12px; color: #000000}
.stats {font-family: arial; font-size: 11px; color: #000000}

</style>

</head>

<body style="text-align: center">

<div class="board_group_holder">

<div class="board_group_title_holder">
<a class="board_group_title">Discussion Group</a>
</div>

<div class="board_holder">

<div class="board_title_holder">
<span class="board_title">Board Title</span><br><span class="board_description">Description of threads to be found in this board</span>
</div>
<div class="board_stats_holder"><span class="stats">Threads: 7</span></div>
<div class="board_lastpost_holder">

</div>

</div>

<div class="board_holder">

<div class="board_title_holder">

</div>

<div class="board_lastpost_holder">

</div>

</div>

</div>


</body>
</html>

[/code]

The bit I am currently trying to get right is to vertically align "Discussion Group" in the middle of the box it is in.
Link to comment
https://forums.phpfreaks.com/topic/33136-forum-display-centre/#findComment-154457
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.