Jump to content

HTML Issues with images

Recommended Posts

I'm having some issues with our HTML. Attached is the new version of our website that I'm working on but the pictures need to be in a horizantal line rather than the diagonal that they're currently in. The images are coded from our /admin.php site so they aren't directly linked in the code- is this what is causing the issue? Below is the code- any thoughts? I've tried everything that I know. The //fixed highlights are the smaller images up top and the //slideshow is the larger image... The website before hade the slideshow at the top and the fixed highlights at the bottom and we just want to flip it. xpc9af.png // fixed highlights $html = ''; $displayed = 0; $slide = unserialize(file_get_contents('images/home/highlights.txt')); if (count($slide)) { foreach ($slide as $key=>$param) { if ($param['active'] && ($displayed < 3)) { $html .= '<td>'; if ($param['URL']) $html .= '<a href="' . $param['URL'] . '">'; $html .= '<img src="/images/home/' . $param['image'] . '.jpg" width="250" height="150" border="0" alt="" style= float:left;/><br />'; if ($param['title']) $html .= '<h4>' . $param['title'] . '</h4>'; if ($param['URL']) $html .= '</a>'; $html .= '</td>' . "\n"; $displayed++; } } } if ($displayed) { print('<tr valign="top">' . "\n" . $html); if ($displayed < 3) { for ($i=$displayed; $i<3; $i++) print('<td style="width: 250px;"></td>' . "\n"); } print('</tr>' . "\n"); } // slideshow $html = ''; $slide = unserialize(file_get_contents('images/home/spotlight.txt')); if (count($slide)) { foreach ($slide as $key=>$param) { if ($param['active']) { $html .= '<div class="slide">'; if ($param['URL']) $html .= '<a href="' . $param['URL'] . '">'; $html .= '<img src="/images/home/' . $param['image'] . '.jpg" width="800" height="400" border="0" alt="" />'; if ($param['URL']) $html .= '</a>'; if ($param['title'] || $param['subtitle']) { $html .= '<div class="caption">'; if ($param['title']) $html .= $param['title'] . '<br />' . "\n"; if ($param['subtitle']) $html .= '<span class="subtitle">' . $param['subtitle'] . '</span>' . "\n"; $html .= '</div>' . "\n"; } $html .= '</div>' . "\n"; } } } if ($html) print('<div id="slideshow">' . "\n" . $html . "\n" . '</div>' . "\n" . '<div id="slidenav"></div>' . "\n"); // open lower grid print('<table cellpadding="0" cellspacing="25" border="0" style="margin: 0px -25px 0px -25px;">' . "\n"); // second row -- feeds and connect links if (dbconnect()) { print('<tr valign="top">' . "\n"); // news $sql = 'SELECT *,DATE_FORMAT(posted,"%M %e") AS pdate FROM news ORDER BY highlight DESC, posted DESC LIMIT 1'; $result = mysql_query($sql); if (mysql_num_rows($result)) { print('<td><h5>News</h5><p>' . "\n"); $row = mysql_fetch_assoc($result); mysql_free_result($result); print('<a href="' . ($row['url'] ? $row['url'] . '" target="_blank' : '/about/news.php?id=' . $row['ID']) . '">'); print($row['title'] . '</a><br />' . "\n" . '<span class="date">Posted ' . $row['pdate']); if ($row['source']) print('</span></p>' . "\n"); print('<p><a href="/about/news.php" class="social news">more news...</a></p>' . "\n"); print('</td>' . "\n"); }

Link to post
Share on other sites

Please post the html your code generates. EDIT Or, provide a link to your work in progress.

Edited by niche
Link to post
Share on other sites

It looks like you've floated the images but not the text. (I might even assume you were using the "align" attribute) What you should do is put both the text and the image into a container, and then float the container.

<div class="container">    <p>Text 1</p>    <img src="Image1" alt="Image 1"></div><div class="container">    <p>Text 2</p>    <img src="Image1" alt="Image 1"></div>

.container {    text-align: center;    float: left;}


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...