Jump to content

tommybfisher

Members
 View Profile  See their activity

  • Posts

    26

  • Joined

  • Last visited

    Never

Profile Information

  • Gender
    Not Telling

tommybfisher's Achievements

Member

Member (2/5)

0

Reputation

  1. tommybfisher
    I've created a photo gallery with php. The gallery is functioning fine, apart from when an image is uploaded the page displays a couple of the images stacked over one-another. The page is displayed in the correct layout when the page is refreshed. This is happening after each photo upload. I wondered if anyone has come across this problem or if its obvious if there's something in my script that's causing this? <?php echo "<div class='gallery_row_divide'>"; include "processes/connection.php"; $table = "gallery"; $i = 0; $data = mysql_query("SELECT id, name, filetype FROM $table ORDER BY id DESC") or die(mysql_error); while ($datarow = mysql_fetch_array($data)) { $name = $datarow['name']; $id = $datarow['id']; //determine photo & thumbnail name and location if($datarow['filetype'] == "image/png") $type = "png"; else $type = "jpg"; $photo_name = "000". $id; $photo_name = substr($photo_name, -4); $photo_name = $photo_name. "." .$type; $thumbname = "tb_" .$photo_name; $thumbname_address = "uploads/thumbs/" .$thumbname; $photo_address = "uploads/" .$photo_name; //display image echo "<div class='gallery_photo_divide'><div class='gallery_photo_valouter'><div class='gallery_photo_valmid'><div class='gallery_photo_valinner'><a href='$photo_address' class='lightbox'><img src='$thumbname_address' alt='photo by $name' class='shadow pic' /></a><br />"; if(!empty($name)) echo "<div class='gallery_text_divide'>Photo taken by " .$name. "</div><!--end of .gallery_text_divide-->"; else echo "<div class='gallery_text_divide'> </div><!--end of .gallery_text_divide-->"; echo "</div><!--end .gallery_photo_valinner--></div><!--end .gallery_photo_valmid--></div><!--end .gallery_photo_valouter--></div><!--end of .gallery_photo_divide-->"; ++$i; if($i % 3 == 0) echo "</div><!--end of .gallery_row_divide--><div class='gallery_row_divide'>"; } if(!($i % 3 == 0)) echo "</div><!--end of .gallery_row_divide-->"; mysql_close($con); ?>
  2. tommybfisher
    np2br was exactly what I was looking for. Thanks!
  3. tommybfisher
    I have created a php guestbook for my site. The only problem I have with it is that when a user puts a carriage return in their entry, it is not replicated in the viewed post. I'm trying to figure out how I turn these returns into <br /> tags for display. Do I do something with the php that handles the input (i.e. somehow replace carriage returns with <br />'s) or is it to do with the output php code? Any pointers would be gratefully appreciated. This is the php for the guestbook entries output: <?php include "connection.php"; $table = "guestbook"; $data = mysql_query("SELECT * FROM $table ORDER BY id DESC") or die(mysql_error()); echo "<div class='divide_message'>"; while($info = mysql_fetch_array( $data )) { $date = date("d/m/y",strtotime($info['date'])); echo "<div class='block message'>"; echo "<div class='message_name'>" . $info['name'] . ""; echo "<span class='date'>" . $date . "</span></div><br />"; echo "<div class='message_message'>" . $info['message'] . "</div>"; echo "</div>"; } echo "</div>"; ?>
  4. tommybfisher
    fixed, somehow had an extra closing div in my code :-\
  5. tommybfisher
    My site has a footer which remains at the bottom of all my pages, regardless of the height, apart from the page which accesses the mySql database via the while loop. This page contains a simple guestbook I created. As posts are added to the guestbook, the page's height grows, but the footer ignores the height of the page and sticks to the bottom of the screen and not the bottom of the page. I've tried to contain all the posts in a div with overflow:hidden to ensure it pushes down the footer div, but this seems to have no effect. I've used an absolute position on the footer to make sure it stays to the bottom of the page for when the page height is less than the screen. I've had a search for this problem, but haven't yet found any solutions, so any advice or pointers would be grateful. The basic format of the page is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <link href="css/reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <link href="css/style.form.css" rel="stylesheet" /> </head> <body> <img src="images/bg.jpg" class="bg" /> <a name="top"></a> <div id="wrapper"> <div id="header"> <div id="logo"> </div> </div> <div id="menu"> </div> <div id="body" class="clear"> <link href="css/style.guestbook.css" rel="stylesheet" /> <div class="block"> <h1>Guestbook</h1> <p>Please sign the guestbook below with any opinions or advice you may have for us. We'd love to hear your thoughts.</p> </div> <div class="block"> <form action="includes/guestbookincl.php" method="post"> <label for="name">Name</label><input type="text" id="name" name="name" /> <input type="submit" id="submit" value="Post message" /> <label for="text">Your message</label><br /> <textarea id="text" name="text"></textarea> </form> </div> <div class='divide_message'> <!--FIRST WHILE LOOP--> <div class='block message'> <div class='message_name'>Frankie H<span class='date'>30/08/11</span></div><br /> <div class='message_message'>Wonderful news!</div> </div> <!--END OF FIRST WHILE LOOP--> <!--SECOND WHILE LOOP--> <div class='block message'> <div class='message_name'>James Thorton<span class='date'>30/08/11</span></div><br /> <div class='message_message'>So pleased for you both, can't wait to see you then!</div> </div> <!--END OF SECOND WHILE LOOP--> </div> <!--end of .divide_message--> </div> <!--end of #body--> <div id="footer"> © 2011 </div> </div> <!--end of #wrapper--> </body> </html> The significant css elements are: html { height: 100%; } body { height: 100%; } #wrapper { width: 1000px; background-color: #f0f9ff; min-height: 100%; margin: 0 auto; text-align: center; position: relative; overflow: hidden; clear: both; } #body { width: 1000px; padding-bottom: 20px; } #footer { height: 20px; font-family: helvetica, arial, sans-serif; font-size: 0.6em; color: #777777; position: absolute; bottom: 0; left: 380px; } .block { padding: 10px; margin: 10px; text-align: left; border: 1px solid #a1dbff; position: relative; overflow: hidden; } .divide_message { overflow: hidden; }
  6. tommybfisher
    Ok, I understand. So I definitely need to keep the fallback font list for when @font-face isn't supported. I'll still keep searching for the solution to get the fallback font italicized and not the @font-face. Many thanks
  7. tommybfisher
    I've read all the documentation regarding the Google Font API and that only seems to apply when you're linking to web-fonts, and not when you have a font file embedded on the page. Although, it may be that a fallback font is not required if the font-file is embedded in the page, as would there ever be a situation when it couldn't be accessed and would have to use the fallback font?
  8. tommybfisher
    Thanks Frank, Well that's good to know for Windows machines, however, I'm on Macs here and it doesn't seem to be installed on these machines. I've read something about .wf-active/.wf-inactive class names, I think it's something to do with what I'm trying to achieve but I'm not entirely sure how to use it. I've had a search online and can't seem to come up with any advice.
  9. tommybfisher
    I have a font linked to my css which is already italic. My fallback font is Georgia, which I want to be displayed in italic if my linked font is not available. If I just set the font-style to italic, it makes the linked font double-italicised which I don't want. How can I make Georgia and the other fallback fonts italic, without affecting the linked font? h2, h3, h4 { font-family: "LobsterTwoBoldItalic", Georgia, "Times New Roman", Times, serif; font-size: 20px; }
  10. tommybfisher
    Solved it. Just had to add absolute positioning on the pseudo-element.
  11. tommybfisher
    I have a semi transparent wrapper element made from a 1px squared translucent png file. I have another png file which is an opaque motif that I want to 'fix' to the top of the semi transparent wrapper. Using the :after pseudo-element, I have tried placing the motif as a background image. This method doesn't show the image at all. Displaying the image using 'content' shows the motif, but I can't get the content from the child containers to float over it, it simply sits at the bottom. Is it possible to use the pseudo-element of :after (or :before) to achieve what I am after? I could of course combine the png background and motif into one image, but then I lose the flexibility of the semi-transparent background growing with the pages contents. My current css for the wrapper is: #wrapper { position: relative; width: 1000px; min-height: 100%; background-image: url(../images/40p.png); background-repeat: repeat; margin: 10px auto; padding: 10px; overflow: hidden; text-align: center; } #wrapper:before { content: url(../images/flourish.png); float: right; }
  12. tommybfisher
    Got it! Thanks! The best thing is I understand how this one works (I couldn't get my head around how the original way worked). Thanks for the clear explanation.
  13. tommybfisher
    Thanks for your response. The height on body and html weren't originally min-height. That was just me trying anything to get it to work (desperation!). Regarding shrink-wrapping div elements, I did search online for a while to try to find how to do it and this method seemed all I could find. I do agree that css should be for style only. Do you know of any good tutorials on this issue as I need the wrapper to continue behind the floats. Many thanks
  14. tommybfisher
    Hi. My page consists of a 1000px wide wrapper with all content contained inside. With the current CSS code, the wrapper stretches to the bottom of the screen if the content is less than the screen height. The problem is, that if the contents continue past the height of the screen, the wrapper will still continue behind the content, but stop maybe 10px from the bottom. I want the wrapper to continue to the very bottom on all pages. I can't figure out from my code what might be causing this. The site is pieced together from php includes, but I don't think that could affect this. I wondered if the #wrapper:after div might be affecting this, but no change with this problem after commenting it out. Any ideas? CSS * { margin: 0px; padding: 0px; text-decoration: none; } html { min-height: 100%; } body { background-image: url(../images/background.jpg); background-repeat: repeat; min-height: 100%; padding: 0px; margin: 0px; } #wrapper { width: 1000px; background-color: #333333; min-height: 100%; margin: 0px auto; } /* to fix floated elements to allow wrapper to continue down behind them */ #wrapper:after { clear: both; content: "."; display: block; height: 0px; visibility: hidden; } HTML structure (I've cut out the irrelevant parts) <html> <head> </head> <body> <div id="wrapper"> <div class="mainbody"> /*content*/ </div> /*close mainbody*/ </div> /*close wrapper*/ </body> </html>
  15. tommybfisher
    I've got it fixed. I had png compression set to 100, didn't realise png compression only goes from 0 - 9. Many thanks for the help
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.