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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS issues with parent and child <div>

    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.

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

    PHP Code:

    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:

    Code:
    #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;
    }
    Attached Thumbnails Attached Thumbnails CSS issues with parent and child &lt;div&gt;-look.png   CSS issues with parent and child &lt;div&gt;-look1.png  
    Last edited by kadeous; 07-12-2010 at 10:30 PM.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>
    Last edited by kadeous; 07-13-2010 at 12:26 AM. Reason: Updated to show the ID's are now not duplicated.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by kadeous; 07-13-2010 at 12:20 AM.

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Post a link or your new html output plus css.

  • #8
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>

  • #9
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed the issue by removing the ID tag from the submit input, embarrassing.


  •  

    Posting Permissions

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