PDA

View Full Version : Repeating a DIV layer downwards with new data


Mark_W
06-12-2007, 07:11 PM
Ok, so after spending a few more hours trying to work out why only one out of five news items were appearing on my front page I finally decided to take a look at my source code, only to find out that the other 4 items had been outputted into the page...they have just layered behind and on top of each other.

My problem as you can see is that I cannot repeat a DIV layer which has properties already set to it, to repeat downwards with new data being added.

Can someone please help me?

This is my CSS code for the content areas.

#content {

background:#FFFFFF;
width:480px;
height:auto;
border:#000000 1px solid;
position:absolute;
left:160px;
top:160px;

}

#content #contop {

background:#CC0000;
width:476px;
height:15px;
border-bottom:#000000 1px solid;
padding:2px;
font-size:12px;

}And this is my content DIV tags.

<?php do { ?>
<div id="content">
<div id="contop"><?php echo $row['news_name']; ?></div>

<?php echo $row['news_brief'];?> <br>
<a href="news.php?id=<?php echo $row['news_id']; ?>" >More</a>

</div>

<?php }while ($row = mysql_fetch_array($result)); ?>Thank you for your help.

domedia
06-12-2007, 07:19 PM
Simple: remove the absolute positioning, you currently place all the divs in the same position.
If you give an idea of what kind of design/output you're looking for, I can probably write the correct CSS for you.

Mark_W
06-12-2007, 07:29 PM
Ah! Thank you Domedia. Got it all sorted out now.

For one of my ICT projects at school I created a football ground guide website, however I created it all in tables and decided that one day I would created it without using tables, so that is what I'm up to now. However, I also decided I wanted to make it easier to add news, instead of having to re-upload pages all the time, so that's where the PHP has come into everything.

Thank you once again.

Mark_W
06-12-2007, 09:52 PM
Actually maybe I haven't. I'm a bit of a virgin with CSS, I understand what most of the properties mean, but when it comes to implementing them all together I'm not overly comfortable.

If you have a spare 5 minutes, and you don't mind Domedia, could you have a look through the coding?

This is the CSS

body {

background:#CCCCCC;

}

#container {

background:#009900;
width:800px;
height:600px;
border:#000000 1px solid;
position:relative;

}

#container #header {

background:#009988;
width:800px;
height:130px;
position:relative;

}

#container #underheaderone {

background:#D6D6D6;
width:650px;
height:20px;
border-bottom:#000000 1px solid;
position:absolute;
font-size:10px;

}

#container #underheadertwo {

background:#D6D6D6;
width:150px;
height:20px;
border-bottom:#000000 1px solid;
position:absolute;
right:0px;
font-size:12px;
font-weight:bold;
text-align:center

}

#container #logbox {

background:#FFFFFF;
width:150px;
height:150px;
border-bottom:#000000 1px solid;
border-top:#000000 1px solid;
border-right:#000000 1px solid;
position:relative;
left:0px;
top:30px;

}

#container #logbox #top {

background:#CC0000;
width:146px;
height:15px;
border-bottom:#000000 1px solid;
position:relative;
padding:2px;
font-size:12px;

}

#container #logbox #input {

position:inherit;
top:10px;
font-size:12px;
padding:2px;
text-align:center;

}

.label {
position:relative;
top:10px;
font-size:12px;
padding:2px;

}


#content {

background:#FFFFFF;
width:480px;
height:auto;
border:#000000 1px solid;
position:absolute;
left:160px;
top:160px;

}

#content #contop {

background:#CC0000;
width:476px;
height:15px;
border-bottom:#000000 1px solid;
padding:2px;
font-size:12px;

}

#rightcolspons {
background:#FFFFFF;
width:146px;
height:200px;
border-bottom:#000000 1px solid;
border-top:#000000 1px solid;
border-left:#000000 1px solid;
position:absolute;
top:160px;
right:0px;

}
#rightcolspontop {

background:#CC0000;
width:146px;
border-bottom:#000000 1px solid;
font-size:12px;

}

#rightcolads {
background:#FFFFFF;
width:146px;
height:200px;
border-bottom:#000000 1px solid;
border-top:#000000 1px solid;
border-left:#000000 1px solid;
position:absolute;
top:360px;
right:0px;

}

#rightcoladtop {

background:#CC0000;
width:146px;
border-bottom:#000000 1px solid;
font-size:12px;

}

This is the HTML (I've taken the PHP out of it.)

<!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=ISO-8859-1" />
<title>Playaway UK</title>
<link href="css/pukexternal.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="header"></div>
<div id="underheaderone"></div>
<div id="underheadertwo">

</div>

<div id="logbox">
<div id="top">Login...</div>
<form action="" method="get" id="login">
<table width="140px" border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td class="label" colspan="2">Username:</td>
</tr>

<tr>
<td colspan="2"><input name="user" type="text" id="user" size="16" /></td>
</tr>

<tr>
<td class="label" colspan="2">Password:</td>
</tr>

<tr>
<td colspan="2"><input name="pass" type="password" id="pass" size="16" /></td>
</tr>

<tr>
<td width="40px"><input name="submit" type="submit" id="submit" value="Login" /></td>
<td class="label" align="center"><a href="register.php">Register</a></td>
</tr>
</table>
</form>
</div>

<!--MENU-->
<div id="contentcontainer">
<div id="content">
<div id="contop"></div>
Content
</div>
<div style="height:5px;"></div>
</div>

<div id="rightcolspons">
<div id="rightcolspontop">Sponsors</div>
</div>

<div id="rightcolads">
<div id="rightcoladtop">Advertisements</div>
</div>
</div>
<!-- Div id="container" -->

</body>
</html>

As you will notice I haven't changed the 'absolute' position of the content box like you said. I did originally however.

Thanks for your help

Mark

domedia
06-13-2007, 01:44 PM
Hey Mark, what am I looking for? Just give me a general idea, and I'll be of assistance asap.

Mark_W
06-15-2007, 05:29 PM
Hey Domedia, thanks for replying and sorry for the late reply. What I originally wanted was some advice really on how to go about coding the layout with CSS. But since then I have decided its probably best that I research more into it myself and use a mixture of online tutorials and downloading CSS layouts which have already been made so I can understand them more.

I wont be able to do this any time soon sadly as I have a mixture of exams and preparation at work for being on Security at the Wimbledon Championships. So hopefully I will be able to focus more on CSS and PHP once the tennis has finished.

Thanks for your help,

Mark