8 replies [Last post]
Julieo
Offline
Regular
Last seen: 15 years 16 weeks ago
Joined: 2006-06-19
Posts: 22
Points: 0

I am making a HTML/CSS page "template" to enhance my ebay listings. Leave it to me to try to take something simple and make it complicated. =/

My problem is that I want to be able to float an image but because my code gets imported into eBay's already existing HTML tags I have to leave my HTML tags out. Which means that if I float an image it floats off of their tags and I have no control over where I want to float my image.

Am I out of luck on the cute little image floating in the corner of my page?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: A challenging float question

Julieo wrote:
My problem is that I want to be able to float an image but because my code gets imported into eBay's already existing HTML tags I have to leave my HTML tags out.

I don't understand what this means. Could you explain it in more detail?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Julieo
Offline
Regular
Last seen: 15 years 16 weeks ago
Joined: 2006-06-19
Posts: 22
Points: 0

A challenging float question

I've been selling stuff on eBay and decided it would be fun to make borders and add cute graphics with html/css to enhance the stuff I am selling. Make it look pretty. =)

I am essentially adding my html to the description section of an auction, which is inside eBay's existing html.

I have it all looking good and have learned a lot in the last month or so. The one thing I have been unable to do is to take an image and float it on top of another image. Normally ( I think) you would use "float". But because float positions itself off of the root element tag <html> and that tag belongs to eBay I am unable to position the image where I want it.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A challenging float question

That didn't really help. :?
As for floats positioning themselves from <html>, not sure where you got that from.
Can you show us some code or a link so we're not guessing as to what it is you're trying to do and why it doesn't work?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Julieo
Offline
Regular
Last seen: 15 years 16 weeks ago
Joined: 2006-06-19
Posts: 22
Points: 0

A challenging float question

Bleh, I just talked to someone..who doesnt know much about CSS but he thinks that what I am looking to use is "absolute".

Does absolute position itself off the <html> tag?

I don't have any active listing on eBay right now so I dont have anything to show. =/

Julieo
Offline
Regular
Last seen: 15 years 16 weeks ago
Joined: 2006-06-19
Posts: 22
Points: 0

A challenging float question

Ok, I just threw something together real quick.

See those 3 flowers in the upper left hand corner? I want those to sit ontop of the second (lighter pink) border. Keep in mind that this gets imported into ebays already existing html tags so I am unable to put in my own tags.

<div id="first-border">
<div id="SB-Border">

<div id="container">
<div id="img-symbol">
<div id="intro">
<img class="pageHeader" src="http://i81.photobucket.com/albums/j224/joloughlin/Shabby/header.gif" alt="header">

<center>
<font face="georgia" color="#000000" size="5">
<!--Start Title-->
Title goes here
</font>
</Center><br>
<!--End Title-->

<!-- FIRST IMAGE GOES HERE -->
<center>
<img class="top" src="http://i81.photobucket.com/albums/j224/joloughlin/Shabby/first-image.jpg" alt="First Pic"/>
</center>

<center>
<img class="bottom" src="http://i81.photobucket.com/albums/j224/joloughlin/Shabby/second-image.jpg"/>
</center>

<div>
<h3>
<img class="description" src="images/description.gif" alt="description">

<p class="p1"><span>Description goes here.
</span></p>
<p class="p2"><span>Second Paragraph description goes here.
</span></p>
<p class="p3"><span>More text here.
</span></p>
</h3>
</div> <!-- Close Description -->

</div> <!-- Close Intro -->

<div id="supportingText">
<h3>
<div id="explanation">
<img class="shipping" src="images/shipping.gif" alt="shipping">

<p class="p1"><span>Shipping details go here</span></p>
<p class="p2"><span>More shipping detail here.</span></p>
</div>

<div id="participation">
<img class="payment-info" src="images/payment.gif" alt="Payment">

<p class="p1"><span>Test</span></p>
</div>

<div id="benefits">
<img class="terms-of-sale" src="images/terms-of-sale.gif" alt="Sale">
<h3><span></span></h3>
<p class="p1"><span>Test</span></p>
</div>

<div id="requirements">
<img class="requirements" src="images/requirements.gif" alt="Requirements">

<p class="p1"><span>
test
</span></p>
</div>
</h3>
</div> <!-- Close Supporting Text -->


</div> <!-- Close Img-Symbol -->
</div><!--Close Container-->
</div><!--Close Ldesigns-->
</div><!--Close SB-Border-->
</div> <!-- Close First Border-->

<style>

#img-symbol {
background-image: url(http://i81.photobucket.com/albums/j224/joloughlin/Shabby/symbol.gif);
background-repeat: no-repeat;
background-position: relative;
top: 100px;
left: 100px;
padding: 0px;
z-index: 30;
}

#first-border {
margin: 80;
padding: 0px;
background: #fff url(http://i81.photobucket.com/albums/j224/joloughlin/Shabby/first-border.jpg);
margin: 0px;
padding: 60px;
border: 3px solid #f6bdd2;
}

#SB-Border {
padding: 2px;
border: 3px solid #f0e2b3;
margin: 0;
background-image: url(http://i81.photobucket.com/albums/j224/joloughlin/Shabby/second-border.jpg);
}

#container {
margin: 30px;
padding: 30px;
border: 3px solid #f0e2b3;
background-image: url(http://i81.photobucket.com/albums/j224/joloughlin/Shabby/first-border.jpg);
color: 000000;
font-size: 16px;
font: Georgia, palatino, serif;
font-weight: bold;
text-align: center;
}

img.description {
background-repeat: no repeat;
background-position: center;
margin: 0px;
padding: 0px;
}

img.shipping {
background-repeat: no repeat;
background-position: center;
margin: 0px;
padding: 0px;
}

img.terms-of-sale {
background-repeat: no repeat;
background-position: center;
margin: 0px;
padding: 0px;
}

img.payment-info {
background-image: no repeat;
background-position: center;
margin: 0px;
padding: 0px;
}

img.requrements {
background-image: no repeat;
background-position: center;
margin: 0px;
padding: 0px;
}

img.pageHeader {
padding: 40;
}

#LinkList {
margin-left: 3px;
}

a:link {
font-weight: bold;
text-decoration: none;
color: #2F6E7A;
}

a:visited {
font-weight: bold;
text-decoration: none;
color: #2F6E7A;
}

a:hover, a:active {
text-decoration: underline;
color: #2F6E7A;
}

img.top {
vertical-align: text-top;
border: 5px solid #E7ECA6;
padding: 0px;
margin: 30;
}

img.bottom {
vertical-align:text-bottom;
border: 5px solid #E7ECA6;
padding: 0px;
margin: 30;
}

</style>

<SCRIPT LANGUAGE="Javascript">
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
var EnableRightClick = 0;
if(isNS)
document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
if(EnableRightClick==1){ return true; }
else {return false; }
}
function mousehandler(e){
if(EnableRightClick==1){ return true; }
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
function keyhandler(e) {
var myevent = (isNS) ? e : window.event;
if (myevent.keyCode==96)
EnableRightClick = 1;
return;
}
document.oncontextmenu = mischandler;
document.onkeypress = keyhandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A challenging float question

Julieo wrote:
See those 3 flowers in the upper left hand corner?

Um, no. I don't see any flowers in what you posted. Do you?

But anyway, with regards your previous post: if you use position: absolute on something it will take its coordinates from the window unless you apply position: relative or absolute to the parent of the element in question. So if you can apply position: relative to whatever element contains the bit of the page you're working with, you'll then be able to position your images absolutely relative to that container and not the window.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Julieo
Offline
Regular
Last seen: 15 years 16 weeks ago
Joined: 2006-06-19
Posts: 22
Points: 0

A challenging float question

Ok so, that presents a new problem. hehe

Now the flowers sit below the child image. I tried using z-index: 30; but that didnt seem to work as far as bringing the image to the top layer.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A challenging float question

z-index only works on elements that have position: relative or absolute also applied.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference