...

View Full Version : CSS issues with parent and child <div>



kadeous
07-12-2010, 10:11 PM
I'm using PHP with CSS. The following issue is what is occurring. The container <div> is working fine. The page1 <div> is working fine except that the image from page1 is getting feed into the .doit class. The qqtext <div> is displaying properly. I'm thinking there is an issue with the way I'm trying to place the <div> identifiers. Any help would be greatly appreciated as this has stumbled me for a few hours now. :eek:

Edit: Added pictures to demonstrate how it's rendering, the look1.png is how it should look.

PHP Code:


<?php

echo '<div id="container">';
echo '<div id="page1">';

// Database connection stuff

$form_block = "
<form method=\"post\" action=".$_SERVER['PHP_SELF'].">
<input type=\"hidden\" id=\"product\" name=\"product\" value=\"%s\">
<input type=\"submit\" id=\"someone\" name=\"submit\" class=\"doit\">
</form>";

while (condition) {
echo '<div id="qttext">';
echo 'a';
echo 'b';
echo sprintf($form_block, $content['id1']);
echo '</div>'; // close the qtext div
}

if (!empty(submit)) {
// Conditions
}

echo '</div>'; // Close the page1 div
echo '</div>'; // Close the container div
?>

Now the CSS is as follows:


#container {
position: relative;
width: 1000px;
margin-left: auto;
margin-right: auto;
}

#page1 {
background: url(images/qb.gif);
position:absolute;
left:64px;
top:183px;
width:569px;
height:812px;
}

#qttext {
color: yellow;
position: relative;
left: 24px;
top: 63px;
}

.doit {
background: url(images/qt.gif);
border: 1px dotted gray;
padding: 0px 0px 0px 0px;
}

met
07-12-2010, 10:39 PM
can't really deduce the problem without a link or at least the generated html source.

you are also reusing an ID which you shouldn't (presumably, as it's within a while loop)

also the echo '<div id="qttext">'; will be positioned in the same place for every iteration..so its likely you'll run in to problems.

a link or the entire html source could will be needed

kadeous
07-12-2010, 11:00 PM
<div id="container"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing - </title> <link type="text/css" rel="stylesheet" href="tlstyle.css" />

</head>
<body>
<div id="container">
<div id="header">
<a href="/atw/index.php"><IMG style="border:none;" SRC="images/_-03.gif" WIDTH=865 HEIGHT=105 ALT=""></a>
</div>






<div id="navbar">
<DIV ID="id-007"> <a href="vn.php"><IMG SRC="images/_-07.gif" WIDTH=139 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-008"> <a href="tk.php"><IMG SRC="images/_-08.gif" WIDTH=100 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-009"> <a href="tc.php"><IMG SRC="images/_-09.gif" WIDTH=89 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-010"> <a href="qt.php"><IMG SRC="images/_-10.gif" WIDTH=124 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-011"> <a href="ws.php"><IMG SRC="images/_-11.gif" WIDTH=100 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-012"> <a href="ee.php"><IMG SRC="images/_-12.gif" WIDTH=92 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-013"> <a href="tv.php"><IMG SRC="images/_-13.gif" WIDTH=209 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-018"> <a href="cn.php"><IMG SRC="images/_-18.gif" WIDTH=267 HEIGHT=37 ALT=""></a> </DIV> <DIV ID="id-019"> <a href="lt.php"><IMG SRC="images/_-19.gif" WIDTH=267 HEIGHT=37 ALT=""></a> </DIV> </div>


<div id="page1"><div id="qttext1">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext2">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext3">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext4">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext5">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">


</form></div></div></div><div id="footer">

</div>
</div>
</body>
</html>

skywalker2208
07-12-2010, 11:49 PM
For one thing before you post the code. Do as the other poster suggest and fix the ids to classes since you are using ids more then once. Ids need to be unique and should only appear on the page once.

Also don't use top, left, right to set up your page layout. You should let your page flow naturally.

kadeous
07-13-2010, 12:06 AM
I would fix the ID's if I knew how, currently I'm applying what I've already learned. The while loop has a static ID yet is reused to replicate that style in a few output statements.

I'm trying to do a foreach in that while loop to give each output a unique ID, but that means the CSS file is going to much larger, is that correct?

Edit:

I added the foreach loop and all ID's now are different yet the display is still the same as prior.

kadeous
07-13-2010, 12:49 AM
I think I'm following what your saying, I did some further reading and it seems absolute and relative positioning can cause issues.

So by free flowing you mean floats?

If so I've only learned positioning, so with that said how can I fix this issue?

I've added the foreach loop and now each of the ID's are different, I've added those to the CSS file, and removed absolute positioning with floating and specified widths. Now I have a somewhat more presentable page just need to figure out now how to recode the CSS for the Header, navbar, footer.. etc..

You still there lol?

skywalker2208
07-13-2010, 03:24 AM
Post a link or your new html output plus css.

kadeous
07-13-2010, 12:48 PM
<div id="container"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing - </title> <link type="text/css" rel="stylesheet" href="tlstyle.css" />

</head>
<body>
<div id="container">
<div id="header">
<a href="/atw/index.php"><IMG style="border:none;" SRC="images/_-03.gif" WIDTH=865 HEIGHT=105 ALT=""></a>
</div>






<div id="navbar">
<DIV ID="id-007"> <a href="vn.php"><IMG SRC="images/_-07.gif" WIDTH=139 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-008"> <a href="tk.php"><IMG SRC="images/_-08.gif" WIDTH=100 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-009"> <a href="tc.php"><IMG SRC="images/_-09.gif" WIDTH=89 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-010"> <a href="qt.php"><IMG SRC="images/_-10.gif" WIDTH=124 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-011"> <a href="ws.php"><IMG SRC="images/_-11.gif" WIDTH=100 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-012"> <a href="ee.php"><IMG SRC="images/_-12.gif" WIDTH=92 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-013"> <a href="tv.php"><IMG SRC="images/_-13.gif" WIDTH=209 HEIGHT=38 ALT=""></a> </DIV> <DIV ID="id-018"> <a href="cn.php"><IMG SRC="images/_-18.gif" WIDTH=267 HEIGHT=37 ALT=""></a> </DIV> <DIV ID="id-019"> <a href="lt.php"><IMG SRC="images/_-19.gif" WIDTH=267 HEIGHT=37 ALT=""></a> </DIV> </div>


<div id="page1"><div id="qttext1">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext2">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext3">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext4">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">
<div id="page1"><div id="qttext5">t: test<br>Open <br>XP Rd: 1 BAd: 20 Req: 1 Ey<br>
<form method="post" action=/atw/qt.php>
<input type="hidden" id="product" name="product" value="1">
<input type="submit" id="qt" name="submit" class="doit">


</form></div></div></div><div id="footer">

</div>
</div>
</body>
</html>

kadeous
07-13-2010, 01:31 PM
Fixed the issue by removing the ID tag from the submit input, embarrassing. :cool:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum