Positioning Monsters

[godonholiday]

Hey, I am trying to position some monsters on the side and sidebar of my WP site.
here is an image of the site and the monsters where I want them:
http://learnitpassiton.com/ABC/wp-conte … nsters.jpg

I dont know which WP file to put a ref of the img and then I am not sure of how to possition the images with css

could anyone help? cheers
gavin

[godonholiday]

Thanks,
in my sidebar.php it starts with:
<div class="col2">

and in the stylesheet it has:
.col1{
float: left;
width: 595px;
padding-right:15px;
}
.col2{
float: left;
width: 320px;

You mentioned that they need to be possitioned? should I change the css so that it is fixed? or will this mess up the theme?

Thanks
///// I tried this ///

I have tried this and the image shows bt does not move?

css/
.moster1 {
position: absolute;
left: 200px;
top: 100px;
height: 400px;
width: 100px;
padding: 1em;
z-index: 100;
}

In sidebar.php:

<img class="monster1" src="http://learnitpassiton.com/ABC/wp-content/themes/gazette/images/monster.png&quot; alt="Cool monster" />

[godonholiday]

Almost there… I think lol

So my sidebar.php now looks like this:

<div class="col2">

<div class="monster1" id="monster1">

</div>
<!–/adds<?php include(‘ads/ads-management.php’); ?>–>

<!–/adds<?php include(‘ads/ads-300×250.php’); ?>–>

<!–/adds<?php include(‘ads/ads-top.php’); ?> –>
<div id="appointment">

and the css style.css looks like this:

.col2{
float: left;
width: 320px;
position: relative;
}

and

.monster1 {
background: url (http://learnitpassiton.com/ABC/wp-conte … onster.png) no-repeat;
position: absolute;
left: 200px;
top: 100px;
height: 400px;
width: 100px;
padding: 1em;
z-index: 100;
}

Still not showing up? any ideas?

there are some other options for col2 in the style sheet, these i think are just for the tabs etc..
/*- Sidebar Tabs – Popular, Comments, Featured, Tag Cloud -*/

.sideTabs {
width:308px !important;
height:auto !important;
min-height:258px;
padding:5px;
border:1px solid #ddd;
background-color:#eeeeee;
float:left;
display: block;
}
.col2 .mootabs_title{
font-size: 12px;
width: 100%;
float:left;
}
.col2 .mootabs_title li{
float: left;
display:inline;
font-size: 11px;
line-height: 34px;
background: #ffffff;
color: #000000;
border:1px solid #ddd;
font-weight: bold;
font-size: 11px;
margin:0px 2px 0px 0px !important;
padding:0px 5px !important;
cursor: pointer;
}
.col2 .mootabs_title li:hover, .col2 .mootabs_title li.active{
border: 1px solid #ddd;
text-decoration: none;
}
.col2 .mootabs_panel {
display: none;
clear: both;
float:left;
height:auto !important;
}
.col2 .mootabs_panel.active {
display: block;
float:left;
}
.col2 .mootabs_panel ul{
width: 296px !important;
padding:5px !important;
border:1px solid #ddd !important;
margin:5px 0px 0px !important;
background-color: #FFFFFF;
min-height:203px;
}

[godonholiday]

I have been told that I should do the following, but that didnt work either?
" Okay, change that <div class="col2"> to <div class="col2" id="side"> and then include the following code:

#side {
position: relative;
} "

could it be that because I want the image to poke out the side of th main content area it is not working? although I am trying to have that one insde the sidebar?

http://learnitpassiton.com/ABC/wp-conte … nsters.jpg

[godonholiday]

So I have the little guys on there! I have a couple of questions though;

1) Will they show in explorer? I am on a Mac
2) If I want one on the left hand side of the site would I put the code in the page.php file? the Index.php or even the header.php file?

Thanks for all your help!

[Author]

Posts