Grow your CSS skills. Land your dream job.

Positioning Monsters

  • # January 2, 2009 at 6:26 pm

    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

    Rob
    # January 2, 2009 at 6:42 pm

    nice monsters! :D

    What I would do is, for the monster on the sidebar put him in the "sidebar.php" file. save him as a PNG with transparency, then make a new DIV element for him to live in. Position the element with either relative or absolute.

    Depending on if the sidebar is wrapped in a DIV element or not, (it might not be it might just be a UL) – just make sure whatever DIV (possibly body, or content, or whatever you call the main section) has a position defined, otherwise your monster div will default to the browser window, and not stay where you want it to…

    then z-index him to the top :)

    So it would be something like for the monsta div…

    Code:
    div#monster1 {

    width:*imagewideth*px
    height:*imagewideth*px
    background:url (monster/pic/location/image.png) no-repeat;
    position:absolute;
    top:*however far from the top of the containing div you want*px
    right:*coz its on the right, its best to do it from the right*px
    z-index:100;

    }

    This would style an element called <div id="monster1"></div>

    # January 3, 2009 at 4:06 am

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

    Rob
    # January 3, 2009 at 6:27 am

    nearly there :)

    make sure you have a relative position set on class="col2" – it should not change anything. Just pop in position:relative; with no defining numbers.

    if you put your monster div inside that div probably right at the top of all the sidebar stuff is best, and dont use the img tag to display your monster, I would just use the CSS for the DIV.

    So

    .moster1 {
    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;
    }

    Unless you really want google to pick up the image, I dunno you might :)

    If the image does not move with your content its normally because its found its position from the browser window, and not the div its contained in. So you just need to add position:relative; to col2 – like this

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

    see how that goes :)

    # January 3, 2009 at 9:29 am

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

    # January 3, 2009 at 10:40 am

    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

    Rob
    # January 3, 2009 at 11:29 am

    going to your site the monster is showing up for me, you just need to position him right.

    [img]http://learnitpassiton.com/ABC/wp-content/themes/gazette/images/monster.png[/img]

    He is showing in the middle of your sidebar, you just need to position him with your top/right positions to get him in the right place. Hes even relative to the col2 div :) which is good :)

    I did

    .monster1 {
    background:transparent url(images/monster.png) no-repeat scroll 0 0;
    height:105px;
    width:73px;
    position:absolute;
    left:200px;
    top:586px;
    z-index:1000;
    }

    that showed him just standing above the "our flickr photos" box

    This is in Firefox, I have not checked in IE7…

    for the height and width you dont need to go any bigger than the image itself. You also dont need padding.

    # January 3, 2009 at 11:46 am

    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!

    Rob
    # January 3, 2009 at 7:07 pm

    1) Will they show in explorer? I am on a Mac

    Works in both IE7 and IE6 – the only thing that dosnt work in IE6 is the PNG transparency, but if you want to fix that you can use an IE6 PNG hack to make it work.

    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?

    If you mean off the page I would be tempted to put it at the bottom of your header – if you want it on everypage that your header displays on of course (which I think is everyone in your case :) ) If not you can put it in the index.php file if you like, I just like to keep things in the "includes" as to say, so you can keep track of things :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".