...

View Full Version : Problems with News Positioning



epxine
11-18-2011, 10:34 AM
http://img689.imageshack.us/img689/5452/1123sy.png
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



<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


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

Kor
11-18-2011, 11:09 AM
Post a link to a test page.

epxine
11-18-2011, 11:24 AM
http://epxgaming.no-ip.org/

Kor
11-18-2011, 11:55 AM
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:


<div id="parent">
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
</div>

epxine
11-18-2011, 02:39 PM
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:


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


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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum