SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    trouble lining up divs again...

    Trying to get this multi-div setup to line up correctly, some of it does, some of it doesn't.. here is my code..
    Code php:
    <?php
    echo '<div id="container">';
     
    foreach ($groups as $genre_abbreviation => $movies) {
    	echo '<div id="genre">';
    		echo "$genre_abbreviation";
    			echo '<div id ="status">';
    				echo 'Unwatched:' .$status[$genre_abbreviation]['UNWATCHED'] . ' , ' . 'Watched:' . $status[$genre_abbreviation]['WATCHED'];
    			echo '</div>';
    	echo '</div>';
     
    foreach ($movies as $movie) {
    	echo "<div id='movie' class='" .$movie['movie_status'] ."'>";
    		echo "$movie[movie_name]";
    		echo "<img src='" . 'status_' . $movie['movie_status'] . '.jpg' . "'>";
    	echo "</div>";
    	}
    echo '<br/>';
    }
    echo '</div>';
    ?>

    I wanted to make the img part have it's own div for styling purposes, so I did this.. basically a mirror of the div style of the (working) first part of the code:

    Code php:
    foreach ($movies as $movie) {
    	echo "<div id='movie' class='" .$movie['movie_status'] ."'>";
               echo "$movie[movie_name]";
     
            echo "<div id='moviestatus'>"
               echo "<img src='" . 'status_' . $movie['movie_status'] . '.jpg' . "'>";
            echo "</div>"
     
    	echo "</div>";
    	}

    But the moviestatus div just doesn't line up. I can't figure out why. The img always appears on the line under the movie name.

    Here is my CSS:

    Code CSS:
    #container {padding: 5px; margin-left: 40px; margin-right: 40px;}
    #genre {border: solid 1px black; margin-bottom: 5px;}
    #movie {border: solid 1px #000000; color: #000000; padding: 5px; line-height: 1em;}
    #status {float: right; padding-right: 5px;}

    If anyone has any ideas I would be beyond happy.. this one has really been hurting my head for days now...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You'll need to post just the HTML that is generated from the PHP for us to help with this. (We need to see what the browser sees, and PHP is removed before the page reaches the browser.)

    Ideally,post a live link, or at least the full page code with CSS embedded, to make it easier to examine the page. Also try to account for any missing images.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You'll need to post just the HTML that is generated from the PHP for us to help with this.
    I almost did that! hah.

    Will do.

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    really rough, but I'm hurried and have to shut down in a minute.. but here is the output of the first (working version) and the second (not working) version.

    works:
    Code HTML4Strict:
    <div id="container">
    	<div id="genre">Thriller
    		<div id ="status">Unwatched: 0, Watched: 1</div>
    	</div>
    	<div id='movie' class='WATCHED'>
    	Movie Name
        <img src='status_watched.jpg'>
    	</div>
    	<br/>
    </div>

    doesn't work:

    Code HTML4Strict:
     
    <div id="container">
    	<div id="genre">Thriller
    		<div id ="status">Unwatched: 0, Watched: 1</div>
    	</div>
    	<div id='movie' class='WATCHED'>
    	Movie Name
    		<div id="moviestatus">
    			<img src='status_watched.jpg'>
    		</div>
    	</div>
    	<br/>
    </div>

    Sorry if that doesn't help at all but I don't have a live example just yet..

    The only difference is that I have put a div around the <img> tag so that I may style the img separately from the movie name, but the img is not displaying on the same line as the movie name (it IS displaying correctly in the first version).

    Again sorry if my examples are not helpful.

    CSS is the same as in the original post obviously..

    Please let me know if I can clarify anything else.. if it is really too hard to help without a live example though, I understand.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you don't have to use a div to style the img.

    #movie img { your style rules..} ,(no div on the mark up)

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm an idiot, and what I am trying to do is THIS:

    Code HTML4Strict:
    <div id="container">
     <!-- these appear next to eachother... -->
        <div id="genre">Thriller
            <div id ="status">Unwatched: 0, Watched: 1</div>
        </div>
    <!-- these do not appear next to eachother -->
        <div id='movie' class='WATCHED'>
        Movie Name
        </div>
         <div id="moviestatus">
             <img src='status_watched.jpg'>
         </div>
     
        <br/>
    </div>

    Because I need to style the moviestatus separately and NOT have it affected by the class on the movie div..

    But it always appears on the next line.. is there any way at all to make it appear on the same line as the div above it?

    I've tried just having the img outside of the movie div, but not within a div itself, but it still appeared on the next line. Gotta be some sort of CSS I am missing? Or am I just going to have to give it a negative top margin to put it in place..

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm silly and putting float:left on both of the divs that I want on the same line seems to have solved this issue..


  8. #8
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Though I was hoping to be able to do float: right on the moviestatus div, but that breaks it.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Could you post a screen shot of what you are aiming at, as I'm a bit in the dark as to what you are aiming for here.

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2010
    Posts
    140
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Could you post a screen shot of what you are aiming at, as I'm a bit in the dark as to what you are aiming for here.
    Sorry for the late reply, I got it sorted, I feel kinda dumb.

    Sticking float: left; on both divs does seem to work fine and solve my issue.


Bookmarks

Posting Permissions

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