agk23 Posted April 19, 2010 Share Posted April 19, 2010 Hello, I am fairly new to web programming, so I'll apologize in advance if there is a simple solution to this. I am trying to create a script that will display every picture file in a directory in rows of three. I have been able to work out the css for it but when I try and put it into php, the pictures won't line up correctly. Instead of putting them in rows of 3s there is one picture stretched out per row. You may notice in my divs that after the first picture, i have to subtract a 100% on the top alignment. This is because without it, it lists them diagonally down to the right. I don't know if there is a quick fix for this or not, but I can work around it. Anyways, here is my code. I have only programmed it to accept 3 pictures so far. I have to plug in a few more if statements. This first script is my html/css that works how I want it to: <html> <head> <title>Taipei Night Life</title> </head> <style type="text/css"> body { background:#000000; background-image: url('images/skyline.jpg'); background-repeat:no-repeat; background-attachment:fixed; } </style> <body> <div style="position:absolute; left: 19%; top: 21% ; width: 60%; height: 60%; opacity: .6; background: #000000"> </div> <div style="position:absolute; left: 19.5%; bottom: 20.5%; overflow-y: scroll; overflow-x: hidden; width: 60%; height: 60%; opacity: .5; background: #FFFFFF"> <div style=" width: 33%; height: 100%;"> <img src='images/1.jpg' width=100% height=100%> </div> <div style="position:relative; top: -100%; left: 33%; width: 33%; height: 100%;"> <img src='images/2.jpg' width=100% height=100%> </div> <div style="position:relative; top: -200%; left: 66%; width: 33%; height: 100%;"> <img src='images/3.jpg' width=100% height=100%> </div> </div> </body> </html> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Next is my php file that replaces the above html file and includes getImages.php All I do is replace the last three divs with an include line ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <html> <head> <title>Taipei Night Life</title> </head> <style type="text/css"> body { background:#000000; background-image: url('images/skyline.jpg'); background-repeat:no-repeat; background-attachment:fixed; } </style> <body> <div style="position:absolute; left: 19%; top: 21% ; width: 60%; height: 60%; opacity: .6; background: #000000"> </div> <div style="position:absolute; left: 19.5%; bottom: 20.5%; overflow-y: scroll; overflow-x: hidden; width: 60%; height: 60%; opacity: .5; background: #FFFFFF"> <?php include("getImages.php");?> </div> </body> </html> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Next is my php script that I am just trying to recreate the last three divs. I have echoed the variables and they seem to be all right. Any help is appreciated!!!! Thanks in advance. Please let me know if you need some more information ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <?php $number = "1"; $filename = "images/".$number.".jpg"; $top = "0"; $left = "0"; while(file_exists($filename)) { echo '<div style=\"position:relative; top: '.$top.'%; left: '.$left.'%; width: 33%; height: 100%;\"> <img src=\''.$filename.'\'width=100% height=100%> </div>'; $number = $number + 1; $filename = "images/".$number.".jpg"; $left = $left + 33; $top = $top - 100; } ?> Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/ Share on other sites More sharing options...
aeroswat Posted April 19, 2010 Share Posted April 19, 2010 First of all why are your top and left attributes a %? Also why are you changing your top for every single div? Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044672 Share on other sites More sharing options...
agk23 Posted April 19, 2010 Author Share Posted April 19, 2010 I thought that you can express how you want your divs laid out as a percentage of the browser window, so it is more adaptable to different screen resolutions. my website is essentially a rectangle 60% of the screen that is centered in the center of the browser. I am changing the top % div every time because when I kept it at the same level it started looking like this: X X X I am not sure why it was doing that, but I found that if i just subtracted 100%, it aligned in a row like this: XXX But if there are any newbie mistakes I am making please let me know. I have only programmed business applications and GUI's in vb and java. This is all pretty new to me and I would like to learn the proper way to do things. Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044675 Share on other sites More sharing options...
agk23 Posted April 19, 2010 Author Share Posted April 19, 2010 Maybe this will help. Here are two screen shots of my webpage currently. The one where it shows three pictures is what is being done by my manual css and the other one with one stretched picture visible is what my php does. It shows all three I just have to scroll down to see them. The two pictures should be attached to this post Any help is greatly appreciated. Thank you. [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044682 Share on other sites More sharing options...
aeroswat Posted April 19, 2010 Share Posted April 19, 2010 I thought that you can express how you want your divs laid out as a percentage of the browser window, so it is more adaptable to different screen resolutions. my website is essentially a rectangle 60% of the screen that is centered in the center of the browser. I am changing the top % div every time because when I kept it at the same level it started looking like this: X X X I am not sure why it was doing that, but I found that if i just subtracted 100%, it aligned in a row like this: XXX But if there are any newbie mistakes I am making please let me know. I have only programmed business applications and GUI's in vb and java. This is all pretty new to me and I would like to learn the proper way to do things. You should figure out why it is doing that instead of just making a fix for some bad css. You would be better off getting help in the css forums too. I'm not very good at css myself and the php isn't really your problem. I will check out the pages but no guarantees Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044683 Share on other sites More sharing options...
aeroswat Posted April 19, 2010 Share Posted April 19, 2010 What I would recommend is try placing top: 0% and left: 0% in your manual code on that first div to see if it does the same thing as having no attribute defined for that div. If at that point it shows the exact same as the include then you know what's wrong Also do $number++ Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044685 Share on other sites More sharing options...
agk23 Posted April 19, 2010 Author Share Posted April 19, 2010 I have done that but there has to be something I'm doing wrong, if I am echoing, what I think is, the same code out but getting a different result. Does anyone know why this is? I wasn't sure if the ++ function was supported in php. Thanks. Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044697 Share on other sites More sharing options...
agk23 Posted April 19, 2010 Author Share Posted April 19, 2010 I fixed it by getting rid of the escape keys on the Quotations inside the echo. Thanks Link to comment https://forums.phpfreaks.com/topic/199024-php-echo-css-script/#findComment-1044711 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.