Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    27
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Problems with News Positioning


    As you se on the picture it dosn't look good, and i want the author/date/comments on the bottom right news-footer

    news-content.php
    PHP Code:

    <div id="post_bg">


    <img src="images/admin_icon.png" width="90px" height="90px" id="post_img">
    <a href="#"><label class="post_title"><?php
        
    echo $row['topic_title'];

    ?></a></label>
    <br />
    <p class="post_text"><font size="-1" face="Times New Roman, Times, serif"><?php
        
    echo $row['topic_content'];
     
    ?> <br /><br /></p></font>
    <label class="post_author">Posted by <a href="#"><?php
        
    echo $row['topic_author'];

    ?></a> <?php
        
    echo $row['topic_date'];
     
    ?> <a href="<?php
        
    echo $row['topic_url']; ?>">Comments</a> (<?php
        
    echo $row['topic_comments'];

    ?>)</label></font>

    </div>
    </div>
    Style Sheet
    Code:
    #post_bg {
    	background-image:url('images/post_bg.jpg');	
    	width:609px;
    	height:255px;
    	margin-bottom:10px;
    	background-repeat:no-repeat;
    	padding-left: 5px;
    	padding-top: 10px;
    }

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Post a link to a test page.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    27
    Thanks
    7
    Thanked 0 Times in 0 Posts

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    The floated elements escape from their parent overflow. As a result, their height is not added to the height of the parent. To bypass that, there are several methods. My favorite is inserting an empty DIV, as the child, to clear the floats:
    Code:
    <div id="parent">
    	<div style="float:left"></div>
    	<div style="float:right"></div>
    	<div style="clear:both"></div>
    </div>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    27
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    The floated elements escape from their parent overflow. As a result, their height is not added to the height of the parent. To bypass that, there are several methods. My favorite is inserting an empty DIV, as the child, to clear the floats:
    Code:
    <div id="parent">
    	<div style="float:left"></div>
    	<div style="float:right"></div>
    	<div style="clear:both"></div>
    </div>
    sry but i dont realy understand, where exactly do you want me to put these divs?,

    edit: i now also noticed if i create more than 3 news in the db all the right content on the site is moving under the news so it looks like a mess

    this is how the index.php looks:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EpxCMS</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="img/favicon.png" type="image/png" />
    </head>
    <br>
    <body>

    <div id="container">
    <?php include("theme/header.php"); ?>
    <?php 
    include("theme/clock.php"); ?>
    <?php 
    include("theme/navbar.php"); ?>

    <div id="left_content">
    <a href="/register.php"><?php include("theme/slider.php"); ?></a>



    <?php include("theme/news-content.php"); ?>


    </div>

    <?php include("theme/footer.php"); ?>


    </div> <!-- end #left_content -->

    <div id="right_content">
    <?php include("theme/server-info.php"); ?>
    <a href="/vote_shop.php"><?php include("theme/vote.php"); ?></a>
    <div id="latest_threads">
    <br />
        <div id="h-text-allign-lthreads">
           <h4>LATEST THREADS</h4> </div> <!-- end #h-text-allign -->
        <div class="text-allign-lthreads">
               <br />


    <?php include("theme/latest-threads.php"); ?>




    </div> <!-- end #right_content -->

    </div> <!-- end #container -->

    </body>

    </html>
    and the css:
    Code:
    /* CENTER */
    *{
    margin:0;	
    }
    
    
    
    
    
    /* ~~~~~~~~ TEXT ~~~~~~~~ */
    
    /* TITLE FONT STYLE */
    @font-face {
    font-family: OptimusPrinceps-custom;
    src:url('OptimusPrinceps.ttf');		
    }
    
    img {
    border:none;	
    }
    a:visited {
    	color:#65981a;	
    }
    
    a:link {
    	color:#65981a;
    	text-decoration:none;	
    }
    
    a:active {
    	color:#e09800;	
    }
    
    a:hover {
    	color:#e09800;	
    }
    
    /* ~~~~~~~~ Design ~~~~~~~~ */
    body {
    	color:#999999;
    	font-family:tahoma;
    	background-image:url('images/bg.jpg');
    	background-color:#000;
    	
    }
    #container {
    	left:50%;
    	width:988px;
    	position:absolute;
    	margin-left: -494px;		
    }
    #clock {
    	float:right;
    	margin-top:7px;
    	margin-right:20px;	
    }
    #clockbox {
    	font-size: 12px;
    	color:#65981a;
    }
    #header {
    	background-image:url('images/header.png');
    	height: 120px;
    	width:988px;
    	margin-bottom:4px;	
    }
    #navigation_bar {
    	background-image:url('images/navigation_bar.jpg');
    	width:988px;
    	height:35px;
    }
    
    #navigationbar-links {
    	width:655px;
    	float:left;
    	height:30px;	
    }
    
    .text-allign-sinfo {
    	margin-left: 30px;
    	margin-top: 10px;
    }
    #h-text-allign-sinfo {
    	margin-left: 65px;
    	
    }
    #h-text-allign-lthreads {
    	margin-left: 80px;
    	
    }
    .text-allign-lthreads {
    	margin-left: 30px;
    	margin-top: -20px;
    }
    .text_navigation {
    	float:left;
    	font-size:12px;
    	margin-top:10px;	
    	margin-left:20px;
    }
    #left_content {
    	margin-top:10px;
    	min-height:100px;
    	width:609px;
    	float:left;
    }
    
    #post_bg {
    	background-image:url('images/post_bg.jpg');	
    	width:609px;
    	height:255px;
    	margin-bottom:10px;
    	background-repeat:no-repeat;
    	padding-left: 5px;
    	padding-top: 10px;
    	
    }
    
    #post_bg-register {
    	background-image:url('images/register_bg.jpg');	
    	width:609px;
    	height:590px;
    	margin-bottom:10px;
    	background-repeat:no-repeat;
    }
    
    
    
    
    #post_img {
    	margin-right:5px;
    	width:75px;
    	height:75px;
    	float:left;
    	margin-top: 5px;	
    }
    .post_title{
    	font-size:24px;
    	font-family: OptimusPrinceps-custom;
    	color:#2f2f2f;
    }
    
    .post_author {
    
    	color:#181818;
    	font-size:8.83pt;
    	float: right;
    
    	
    }
    
    .post_text {
    		height:180px;
    		word-wrap: break-word;
    		margin-top: 30px;
    		magin-right:5px;
    		overflow:block;
    		font-size:8.83pt;
    		width: 96%;
    	
    		
    }
    .divider {
    	width: 290px;
    	height: 2px;
    	margin-top: 15px;
    	background-image:url('images/divider.jpg');
    	
    }
    #right_content {
    	margin-top:10px;
    	min-height:100px;
    	width:329px;
    	float:right;
    	
    }
    
    .server_info {
    	width:329px;
    	height:180px;
    	background-image:url('images/server_info.png');
    }
    .vote {
    	width:329px;
    	height:90px;
    	background-image:url('images/vote.png');
    	margin-top: 10px;
    }
    #slider {
    	width:609px;
    	height:120px;
    	background-image:url('images/slider.png');
    	margin-bottom: 10px;
    	
    }
    
    #latest_threads {
    	width:329px;
    	height:385px;
    	background-image:url('images/latest_threads.png');
    	margin-top: 10px;
    }
    
    
    
    #footer {
    	margin-top:10px;
    	margin-left:283px;
    	font-size:14px;
    	float:left;
    	text-align:center;
    	margin-bottom:20px;
    }
    Last edited by epxine; 11-18-2011 at 05:38 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •