Page 2 of 2

Posted: Fri Nov 03, 2006 3:54 pm
by RobertGonzalez
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" />

Posted: Fri Nov 03, 2006 4:35 pm
by ianhull
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.

:D

Posted: Fri Nov 03, 2006 5:02 pm
by pickle
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.

Posted: Fri Nov 03, 2006 5:39 pm
by ianhull
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

Posted: Fri Nov 03, 2006 5:42 pm
by pickle
Copy & paste.

Use the <link rel...> tag ~Everah mentioned earlier.

Posted: Fri Nov 03, 2006 5:55 pm
by ianhull
if I copy and paste this then my table rows will only display the same records each time.