Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Positioning Monsters

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23867
    godonholiday
    Member

    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

    #52584
    godonholiday
    Member

    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" />

    #52595
    godonholiday
    Member

    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;
    }

    #52603
    godonholiday
    Member

    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

    #52605
    godonholiday
    Member

    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!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.