Hiç PHP / MySQL içerik sığdırmak için Div'i genişletilmesi

0 Cevap php

Ben PHP kullanarak bir blog ana sayfası oluşturduk ve mesajlar için bir kenar çubuğu ve ana alanı dahil ettik. Ben kenar çubuğu veya ana içerik / mesaj alanı, ya da herhangi bir daha fazla içerik eklediğinizde içerik ana div üzerinde genişler ve ana div genişletmek değil. Nasıl iç iki divs içeriğine göre genişleyecek bir div etiketi oluşturma hakkında gidebilirsiniz.

Ana Sayfa:

<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: none;
    background-color: #ffffff;
}
#pages {
    float: left;
}

Image: alt text

0 Cevap

etiketler