开发者

Ever Expanding Div to fit PHP/MySQL content

问答 作者：

I've created a blog main page using PHP and have included a sidebar and main area for the posts. When I add any more content to either the sidebar or the main content/posts area the content expands over the main div and the main div doesn't expand. How can I go about creating a div tag that will expand according to the content in the inner two divs.

Main Page:

<html>
<head>
<meta name="keywords" content="Mac user Ultan Casey TheCompuGeeks UltanKC">
<meta name="description" content="The Home of one of Ireland's budding Technology Reviewers Ultan Casey">
<title>Ultan.me - Home of Ultan Casey</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
<!--
a {text-decoration:none}
//-->
</style>

</head>
<div id="main">

<!-- Menu Start -->
<div id="menu">
<ul>
<li><a href="index.php">home</a></li>
<li><a href="index.php">about me</a></li>
<li><a href="index.php">archives</a></li>
<li><a href="index.php">contact</a></li>
<li><a href="index.php">gallery</a></li>
<div id="search">
<input type="text" name="q" value="search" />
<input type="button" name="Submit" value="Submit" />
</div>
</ul>
</div>
<!-- Menu End --> 

<img src="images/banner.png" />
<div id="posts">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');

$blog_postnumber = 5;
if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
    $page = 1;
}
else {
    $page = (int)$_GET['page'];
}
$from = (($page * $blog_postnumber) - $blog_postnumber);

$sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT $from, $blog_postnumber";

$result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error());

while($row = mysql_fetch_array($result)) {

    $date = date("l F d Y", $row['timestamp']);

    $title = stripslashes($row['title']);
    $entry = stripslashes($row['entry']);
    $id = $row['id'];
    $get_categories = mysql_query("SELECT * FROM php_blog_categories WHERE `category_id` = $row[category]");
    $category = mysql_fetch_array($get_categories);


    ?>

    <p><?php echo "<p><strong><a href=\"post.php?id=". $id . "\">" . $title . "</a></strong></p>"; ?><br /><br />
    <?php echo $entry; ?><br /><br />
    <p>Posted in <a href="category.php?category=<?php echo $row['category']; ?>"><?php echo $category['category_name']; ?></a> on <?php echo $date; ?></p>
    <hr /></p>



    <?php


}
?>

<div id="pages">

<?php
$total_results = mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM php_blog"));
$total_pages = ceil($total_results['num'] / $blog_postnumber);
if ($page > 1) {
    $prev = ($page - 1);
    echo "<a href=\"?page=$prev\">&lt;&lt;  Newer</a> ";
}
for($i = 1; $i <= $total_pages; $i++) {
    if ($page == $i) {
        echo "$i ";
    }
    else {
        echo "<a href=\"?page=$i\">$i</a> ";
    }
}
if ($page < $total_pages) {
   $next = ($page + 1);
   echo "<a href=\"?page=$next\">Older &gt;&gt;</a>";
}

?>
</div>
</div>
<!-- Sidebar Start -->
<div class="sidebar">

<!-- Item 1 -->
<div id="side-item"> 
<h2>
<a href="http://www.dailybooth.com/UltanCasey">
<img src="images/db-icon.jpg">Dailybooth
</a></h2>
<div id="side-item-content">
<center>
<img src="http://dailybooth.com/UltanCasey/latest/medium.jpg" />
</center>
</div>

</div>

<!-- Item 2 -->

<div id="side-item">
<h2><img src="images/connect.jpg" />Connect</h2>
</div>
<div id="side-item-content">
<div class="tweet-title"><p><a href="http://www.twitter.com/UltanKc">Latest Tweet:</a></p></div>
<div id="tweet">
<?php

function getTwitterStatus($userid){
$url = "http://twitter.com/statuses/user_timeline/$userid.xml?count=1";

$xml = simplexml_load_file($url) or die("could not connect");

       foreach($xml->status as $status){
       $text = $status->text;
       }
       echo $text;
 }

getTwitterStatus("UltanKC");

?>
</div>
<br>
<ul>
<li id="social"><a href="#">YouTube</a></li>
<li id="social"><a href="#">Twitter</a></li>
<li id="social"><a href="#">LastFM</a></li>
<li id="social"><a href="#">Email</a></li>
</ul>

</div>
<!-- Item 2 End-->
<div id="side-item">
<h2>Archives</h2>
</div>
<div id="side-item-content">

<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');

$result = mysql_query("SELECT FROM_UNIXTIME(timestamp, '%Y') AS get_year, COUNT(*) AS entries FROM php_blog GROUP BY get_year");

while ($row = mysql_fetch_array($result)) {
    $get_year = $row['get_year'];
    $entries = $row['entries'];

    echo "<a href=\"archives.php?year=" . $get_year . "\">Entries from " . $get_year . "</a> (" . $entries . ")<br />";
}

?>

<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');

$result1 = mysql_query("SELECT * FROM php_blog_categories ORDER BY category_name ASC");

while($row = mysql_fetch_array($result1)) {

    $result2 = mysql_query("SELECT COUNT(`id`) AS entries FROM php_blog WHERE category = $row[category_id]");
    $num_entries = mysql_fetch_array($result2);

    echo '<a href="category.php?category=' . $row['category_id'] . '">' . $row['category_name'] . '</a> (' . $num_entries['entries'] . ')<br />';

}
?>


</div>
</div>

</div>
<!-- Sidebar End  -->

</div>
</html>

CSS:

    *{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #eeeeee;
    height: 100%;
}

#menu {
    background-color: #282828;
    height:20px;
    width: 840px;
    padding: 10px;
}

#main {
    width: 860px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    -webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
    -moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}

#menu li {
    display: inline;
    list-style-type: none;
    height: 20px;
    margin-top: 10px;
    margin-left: 5px;
}

#menu a, menu a:visited{
    font-family: arial;
    color: #ffffff;
    text-decoration: none;
    padding: 3px;
}

#menu a:hover{
    font-family: arial;
    color: #282828;
    text-decoration: none;
    padding: 3px;
    background-color: #ffffff;
}

#search{
    float: right;
}

.sidebar {
    width: 260px;
    height: 100%;
    float: right;
    margin-right: 4px;
}

#posts {
    width: 590px;
    height: 100%;
    float: left;
}

#side-item h2 {
    background-color: #282828;
    width: 245px;
    height: 30px;
    font-size: 25px;
    font-family: arial;
    color: #ffffff;
    padding: 5px;
    padding-top: 6px;
    padding-bottom: 4px;
}

#side-item-content{
    border:1px solid #dadada;
    padding: 5px;
    width: 243px;
    margin-bottom: 12px;
}

#side-item h2 img {
    margin-right: 6px;
    float: left;
}

#side-item h2 a:link {
    text-decoration: none;
    color: #ffffff;
}

#side-item h2 a:hover {
    text-decoration: underline;
    color: #ffffff;
}

#side-item h2 a:visited {
    text-decoration: none;
    color: #ffffff;
}

#social {
    background-color: #282828;
    width: 223px;
    height: 20px;
    font-size: 20px;
    font-family: arial;
    color: #ffffff;
    display: block;
    margin-top: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 10px;
}

/*#social img {
    float: left;
    padding-top: -12px;
}*/

#social a:link {
    font-size: 20px;
    font-family: arial;
    color: #ffffff;
    text-decoration: none;
}

#tweet {
    width: 221px;
    padding: 10px;
    color: #242424;
    background-color: #f5f5f5;
    border:1px solid #282828;
    margin-bottom: -8px;
    font-family: arial;
}

#social a:hover{
    font-size: 20px;
    font-family: arial;
    color: #ffffff;
    text-decoration: underline;
}

#social a:visited {
    font-size: 20px;
    font-family: arial;
    color: #ffffff;
    text-decoration: none;
}

.tweet-title {
    background-color: #2dbfe9;
    color: #ffffff;
    width: 231px;
    height: 20px;
    border-left:1px solid #282828;
    border-right:1px solid #282828;
    border-top:1px solid #282828;
    font-size: 20px;
    padding: 5px;
    font-family: arial;
}

.tweet-title a:link, .tweet-title a:visited {
    color: #ffffff;
    text-decoration: none;
}

.tweet-title a:hover {
    color: #2dbfe9;
    text-decoration: n开发者_如何学编程one;
    background-color: #ffffff;
}
#pages {
    float: left;
}

Image:

Ever Expanding Div to fit PHP/MySQL content

First: Where are your <body> tags?

Ok here is how I made it works. It seems that #pages and #sidebar they should be in separate <div> tag. The code (I deleted PHP from it)

HTML:


<html>
<head>(content)</head>
<body> <!-- never forget about body tags!!!!!!!!!-->
<div id="main">
    <!-- Menu Start -->
    (...)
    <!-- Menu End --> 
    <div id="content"> <!-- this is new -->
        <div id="posts">
                   (content)
        </div>
        
        <div class="sidebar">
                  (content)
        <!-- Sidebar End  -->
        <div class="clr" /> <this is new>
    </div>
</div>
</body>
<

and CSS:


    \*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #eeeeee;
}

\#menu {
    background-color: #282828;
    height:20px;
    width: 840px;
    padding: 10px;
    position: relative;
}

\#main {
    width: 860px;
    margin: 0 auto;
    background-color: #ffffff;
    -webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
    -moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
.clr{
    clear: both;
}
\#content{
    position: relative;
    width: 860px;
}
.sidebar {
    position: relative;
    width: 260px;
    float: right;
    margin-right: 4px;
}

\#posts {
    width: 590px;
    position: relative;
    float: left;
}

I believe this should do the work.

PS. Shadow doesn't work in Opera.

Best Regards, ventus

继续阅读：cssexpandphp

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9