css sidebar position

  • danjde

    (@danjde)


    10 years, 9 months ago

    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)
  • Siobhan

    (@siobhyb)

    10 years, 9 months ago

    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. 🙂

    Thread Starter danjde

    (@danjde)

    10 years, 9 months ago

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

    the image name is “logo_ts_copia.png”

    thanks 😉

    Siobhan

    (@siobhyb)

    10 years, 9 months ago

    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?

    Thread Starter danjde

    (@danjde)

    10 years, 9 months ago

    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!

    Siobhan

    (@siobhyb)

    10 years, 9 months ago

    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.

    Thread Starter danjde

    (@danjde)

    10 years, 9 months ago

    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:

    http://awesomescreenshot.com/0cb1h67dcf

    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

    Siobhan

    (@siobhyb)

    10 years, 9 months ago

    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.

    Thread Starter danjde

    (@danjde)

    10 years, 9 months ago

    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?

    example:
    html

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

    css

    #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

    Siobhan

    (@siobhyb)

    10 years, 9 months ago

    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.