1. 홈
  2. 질의 응답
  3. PHP/MySQL 컨텐츠에 맞게 확장 사업부

PHP/MySQL 컨텐츠에 맞게 확장 사업부

2010-07-25 2 views
1

PHP를 사용하여 블로그 기본 페이지를 만들었으며 게시물에 사이드 바 및 주요 영역을 포함 시켰습니다. 사이드 바 또는 메인 콘텐츠/포스트 영역에 더 많은 콘텐츠를 추가하면 콘텐츠가 기본 div 위에 확장되고 기본 div가 확장되지 않습니다. 내부 div의 내용에 따라 확장되는 div 태그를 만드는 방법은 무엇입니까?PHP/MySQL 컨텐츠에 맞게 확장 사업부

메인 페이지 :

<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; 
}

이미지 : alt text http://i28.tinypic.com/xap1f8.png

출처

2010-07-25 Anonymous

답변

0

첫째, 어디 <body> 태그는?

여기에 내가 어떻게 만들 었는지 확인하는 방법입니다. #pages과 #sidebar은 별도의 <div> 태그 여야합니다. 코드는 (나는 그것에서 PHP를 삭제)

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> 
<

및 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; 
}

나는이 일을해야한다 생각합니다.

추신. 오페라에서는 그림자가 작동하지 않습니다.

최고 감사합니다. ventus

출처

2010-07-25 12:09:09 Ventus

관련 문제

 관련 문제