Support » Themes and Templates » css sidebar position

css sidebar position

  • Hi friends,
    in a two-column template I would like to place an image between these two.

    This image should remain at a fixed distance from the contents of the left column, never overlap, at different resolution monitor.

    I’ve been created a new sidebar and into this have put the image (correct?)

    this is the css parameter:

    #navigation_right {
    	background: #1b1b1b;
            right: -410px;
            position: relative;
            top: -800px;
            width: 200px;
    	float: left;
    	padding: 10px;
    	height: 100en;
            overflow: hidden;

    but so, the image go over the left column if i increase monitor resolution;

    could you suggest me the better way?

    many thanks!

    Davide, Italy

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hey.

    Could you please provide a link to your site so we can see a demonstration of what you described/all the source code. This will make it easier for forum volunteers to try and help you. Thanks. 🙂

    ..hoops, excuse me,
    here the link: http://www.teatroscientifico.com/casa/

    the image name is “logo_ts_copia.png”

    thanks 😉

    Could you take a look at this screenshot – http://awesomescreenshot.com/0571h3jq4d – and tell me if this is how you want your page to look. With the image just touching the sidebar’s border?

    yes, this is the right look 😉

    I was able to place the item at that point, however, resizing the browser window (over 1200px), it moves going to occlude part of the (left) texts;

    I think the ideal would stop it to the left column, is not it?

    many thanks!

    Ok. So firstly I’d recommend changing where the <div id="navigation_right">..<div> HTML markup that you’ve created for the image is placed.

    It should ideally be placed between:
    <div class="entry-meta"></div> and <div class="entry-content"></div>

    If you change this and then apply the following CSS rules:

    #navigation_right {
    position: relative;
    float: left;
    left: 93px;
    top: 130px;

    This should go some way to solving the problem. Let me know how you get on with this.

    thanks siobhyb 🙂

    now the image, resizing the browser window (over 1200px), doesn’t occlude the left texts,

    i’ve put the code on “page.php”

    <div class="entry-meta"></div><div id="navigation_right"><img src="/wp-content/themes/chaostheory/images/logo_ts_copia.png"></div><div class="entry-content"></div>

    but so go over the right text block:


    this is the style.css entry:

    #navigation_right {
    position: relative;
    float: left;
    left: 0px;
    top: -530px;

    is it correct to put it on page.php?
    i’ve try on sidebar.php but it goes to the left and below each item

    many thanks again

    Any changes you make firstly have to be made using a child theme. If you haven’t been using a child theme to make your changes, please revert back and create one now: codex.wordpress.org/Child_Themes. This will help in the long run, as I feel there’s quite a few errors in the code for your site at the moment.

    thanks for your very useful help!
    now the image seems in good position, i will test it on different monitor (resolution) later;

    the last question if possible:

    using the same method could I repeat a portion (top portion) of the same image up to a certain site height?


    <div class="entry-meta"></div><div id="logo_top"><img src="/wp-content/themes/chaostheory/images/top.png"></div><div class="entry-content"></div>


    #logo_top {
     	background-repeat: repeat-y;
    	position: relative;
    	float: right;
    	left: -426px;
    	top: -748px;

    using this code the image don’t repeat

    many thanks again

    Hi. Sorry for my delay in getting back to you. How are you getting on with this?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘css sidebar position’ is closed to new replies.