how do you put a presenter pic on top of a menu bar

HTML & CSS
#1

if you look at the new website i am creating you will see that there is a gap between the presenters picture and the menu bar. http://lcradio.co.uk/test/ i am working with ernie to create a brilliant dj script and want to know how can i get rid of that gap between the presenter and the menu bar to make it look like the presenter is sitting on the menu bar?

<link rel="stylesheet" href="http://lcradio.co.uk/menu/menu_style.css" type="text/css" />
l.c.radio
.style1 { text-align: center; } .style4 { margin-top: 4px; } 
<style type="text/css">

	.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}

.style2 {

color: #FF0000;

font-size: x-large;

}

.style5 {

text-align: right;

}

.style6 {

margin-top: 0px;

}

.style7 {

margin-top: 6px;

}

.style8 {

margin-top: 1px;

}

</style>

 

    

    


                                       

                              

                             

                   


<li><a href="http://lcradio.co.uk/" target="_self" title="About Us">Home</a></li>

<li><a href="http://lcradio.co.uk/test/about.htm" target="_self" title="About Us">About Us</a></li>

<li><a href="http://lcradio.co.uk/test/schedule.htm" target="_self" title="Schedule">

Schedule</a></li>

<li><a href="http://lcradio.co.uk/test/presenters.htm" target="_self" title="Presenters">Presenters</a></li>

<li><a href="http://lcradio.co.uk/test/events.htm" target="_self" title="Events">Events</a></li>

<li><a href="http://lcradio.co.uk/test/sponsours.htm" target="_self" title="Sponsor/Advertisers">

Sponsorship</a></li>

<li><a href="http://lcradio.co.uk/test/requests.htm" target="_self" title="Contact Us">Requests</a></li>

<li><a href="http://lcradio.co.uk/test/contact.htm" target="_self" title="Contact Us">Contacts us</a></li>

<li><br />

</li>

 

 

 

</div>

/#

#2

i added # cause it says when posting # (for any other code) so sorry if its not worked properly

#3

You don’t type the “#”, you press the button and it puts in and you place your code in the middle of those start/end tags…

Okay, first, this is a better way to create your array:
Instead of:
var bgImages = new Array();
and pushing values, just do:
$bgImages = array(“http://lcradio.co.uk/images/bg1.jpg”, “http://lcradio.co.uk/images/bg2.jpg”, “etc”);

much easier. PHP will automatically turn the var into an array this way! Saves some code…

Now, to place a picture in a banner, just use an IMG tag… Like:
You can add width’s and height’s or whatever you need.
If it is in a variable, it would be like this:

Good luck…

#4

i mean so i can get my buttons and presenter picture looking like this

#5

Well, I assume you mean to the right of the ON-AIR-NOW… The code in our other post let’s you pull the name and picture. You just have to use PHP to put it where you want. I would do it something like this:

Create a CSS entry for a floating picture. Adjust the location to it to be on top of the banner and in the correct position to make it look in place. So, in your CSS you would have a background for this entry and a picture name in it. Instead of the picture name, use the PHP code to insert the name there. Since PHP is done SERVER-SIDE before it gets into the browser, then, the CSS code would be create by the PHP code. Then, once in the browser, the CSS would position the picture.

Now, that may cause one issue, if all your pictures are different sizes, you may have to add picture sizes in your data base and adjust the CSS code a little to keep the bottom of the pix in place. Something like that should work. If you can’t figure it out let us know.

But, here is a link of how a few people floated one image over another with positioning. Might give you some ideas on various ways to do this:
http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html

Sponsor our Newsletter | Privacy Policy | Terms of Service