Member Avatar for pjrey

http://naniboujou.com/index_pr.php

my div for the logo is:

div.nani-logo {
	position:absolute;
	left: 560px;
	top: 28px;
	z-index:2;

and my code is:

<div class="nani-logo">
<img src="images/headdress_title_red.png" width="234" height="299" style="border: 0px;" />
</div>

how can i have the image always show up in the top right corner (on top of the top right corner of the TABLE? css is not my strong suit... at all....

i want it to look like attached image

please help
thanks
pj

want.jpg 64.34 KB
Edited by pjrey because: n/a
  • 2 Contributors
  • 3 Replies
  • 115 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by pjrey
Member Avatar for pjrey

ok, i kinda got it with this

<p style="margin-left:-80px; margin-top:-328px; z-index:2">
<img src="images/headdress_title_red.png" width="234" height="299" style="border: 0px;" />
</p>

by placing it above the shield and address.. only thing is.. if i go -30 on the margin-left then it breaks.. i want part of the arrow to go over the poster image... grrrr

i want it inserted where it currently is.. but i want it to be above everything.. like a z-index.. but it is pushing the table apart...

Edited by pjrey because: n/a
Member Avatar for almostbob

if this is a tablet or phone and the screen is only 250px wide? calculating a distance from the left edge wont work

none of the styles described so far will work if the window size is changed
trying to patch something together from incomplete code is difficult,

all the answers are right, but they wont work

we can't see what is breaking apart, and tables... 1980?
if possible post the full code of the page at least down to the broken table

part of the problems may be caused by using a block level element to contain the logo image (without a 'display:inline;') this is completely unneccessary, styles can be applied directly to the image, example below.
cant guarantee this example as not seen the full code of the page

.nani-logo { position:absolute; right:0; top:28px; border:0; z-index:2;}
<img class='nani-logo' src='images/headdress_title_red.png' width='234' height='299' alt='required alt text' />

absolute means the logo will stick to the top like the menu bar at the top of this page, fixed can make a logo that stays in place while the page content moves underneath it (or negative z-index moves over the top of it) like the menu bar at the bottom of this page

Edited by almostbob because: n/a
Member Avatar for pjrey

almost bob, thanks for replying...
it seems i got it to work.. probably not the best way.. so far, it looks great on FF and IE.. havent even tried mobile yet... http://naniboujou.com/index_pr.php

what i did was wrap the whole table in a div.. and then use a containing div inside...
is this really bad?

i dont know what else to do... i i put it where i wanted to, it would break the tables apart..

thanks again

pj

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.