PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!
Moderator: General Moderators
RobertGonzalez
Site Administrator
Posts: 14293 Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA
Post
by RobertGonzalez » Fri Nov 03, 2006 3:54 pm
I know it seems like we're trying to steer you away from your idea. For that I am sorry. It's just that it seems like you are doing too much with this. How many photos will be viewed on the screen? Can they all share the same styling? If so, why not make a class for images and apply that class to the img tag?
Code: Select all
img .special-style {
position:absolute;
width:107px;
height:80px;
z-index:1;
left: 256px;
top: 139px;
background-attachment: scroll;
background-image: url(pictures/'.$picture1.');
background-repeat: no-repeat;
background-position: left top;
}
Then in your output, you'd have something like...
Code: Select all
<img class="special-style" src="/path/to/image" alt="Some alternate text" />
ianhull
Forum Contributor
Posts: 310 Joined: Tue Jun 14, 2005 10:04 am
Location: Hull England UK
Post
by ianhull » Fri Nov 03, 2006 4:35 pm
Hi Everah,
I appreciate your help and I understand where you are comming from but I really need to just display div layers and text on my page.
As less as possible.
I will bear in mind your suggestions.
and thanks.
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Fri Nov 03, 2006 5:02 pm
I'm with ~Everah. You won't be gaining anything by uniquely styling each image. There's nothing wrong with creating your page the easy way (with DIVs & the ilk) - you won't see any higher SE placings by doing it this way.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ianhull
Forum Contributor
Posts: 310 Joined: Tue Jun 14, 2005 10:04 am
Location: Hull England UK
Post
by ianhull » Fri Nov 03, 2006 5:39 pm
Hi, Im not uniquly styling each image,
I am simply placing the images on the page and settig the position of them using css instead of echoing out a table
I have now managed to get this to work but only within the same web page.
here is what I get in my php page
Code: Select all
<style type="text/css">
<!--
#Picture4 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 190px;
background-attachment: scroll;
background-image: url(pictures/elite-pitch-20061103-165726.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title4 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description4 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture5 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 280px;
background-attachment: scroll;
background-image: url(pictures/medas-angle-20061103-170327.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title5 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description5 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture6 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 370px;
background-attachment: scroll;
background-image: url(pictures/Super-Phoenix-20061103-171138.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title6 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description6 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture7 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 460px;
background-attachment: scroll;
background-image: url(pictures/ph8-front2-20061103-171029.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title7 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description7 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture8 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 550px;
background-attachment: scroll;
background-image: url(pictures/sol-angle-20061103-171639.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title8 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description8 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture9 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 640px;
background-attachment: scroll;
background-image: url(pictures/brownlodge-20061103-172045.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title9 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description9 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture10 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 730px;
background-attachment: scroll;
background-image: url(pictures/ibiza-angle-20061103-172503.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title10 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description10 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture11 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 820px;
background-attachment: scroll;
background-image: url(pictures/Emporda-20061103-172847.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title11 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description11 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture12 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 910px;
background-attachment: scroll;
background-image: url(pictures/tent-angle-20061103-173542.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title12 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description12 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
#Picture13 {
position:absolute;
width:127px;
height:108px;
z-index:1;
left: 256px;
top: 1000px;
background-attachment: scroll;
background-image: url(pictures/ph6-angle-20061103-174104.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#Property_Title13 {
position:absolute;
width:369px;
height:22px;
z-index:2;
left: 369px;
top: 139;px;
font-weight: bold;
}
#Property_Description13 {
position:absolute;
width:369px;
height:54px;
z-index:3;
left: 369px;
top: 166;px;
}
-->
</style>
And here is the html
Code: Select all
<div id="Picture4"></div>
<div id="Property_Title4">Demo Title</div>
<div id="Property_Description4">My Description</div><div id="Picture5"></div>
<div id="Property_Title5">Demo Title</div>
<div id="Property_Description5">My Description</div><div id="Picture6"></div>
<div id="Property_Title6">Demo Title</div>
<div id="Property_Description6">My Description</div><div id="Picture7"></div>
<div id="Property_Title7">Demo Title</div>
<div id="Property_Description7">My Description</div><div id="Picture8"></div>
<div id="Property_Title8">Demo Title</div>
<div id="Property_Description8">My Description</div><div id="Picture9"></div>
<div id="Property_Title9">Demo Title</div>
<div id="Property_Description9">My Description</div><div id="Picture10"></div>
<div id="Property_Title10">Demo Title</div>
<div id="Property_Description10">My Description</div><div id="Picture11"></div>
<div id="Property_Title11">Demo Title</div>
<div id="Property_Description11">My Description</div><div id="Picture12"></div>
<div id="Property_Title12">Demo Title</div>
<div id="Property_Description12">My Description</div><div id="Picture13"></div>
<div id="Property_Title13">Demo Title</div>
<div id="Property_Description13">My Description</div>
The only thing I would like to do now is write the css to a external file.
If anyone knows how if will be greatly appreciated.
Thanks
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Fri Nov 03, 2006 5:42 pm
Copy & paste.
Use the <link rel...> tag ~Everah mentioned earlier.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ianhull
Forum Contributor
Posts: 310 Joined: Tue Jun 14, 2005 10:04 am
Location: Hull England UK
Post
by ianhull » Fri Nov 03, 2006 5:55 pm
if I copy and paste this then my table rows will only display the same records each time.