• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

I need to place icons (Next, Back, Print, Show) on the right side of the page.

New Here ,
Apr 27, 2015 Apr 27, 2015

Copy link to clipboard

Copied

The current solution is to use the following in the CSS.

div.options {

  position:relative;

        width:100%;

        left: 860px;

        padding:2%;

        background:transparent !important;

However, this solution locks the icons to the right and they do not move when the window is sized:

Is there a responsive method I can use to accomplish my goal?

I am using RoboHelp 10.

Thanks - Dan

Views

252

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 27, 2015 Apr 27, 2015

Copy link to clipboard

Copied

Are you using WebHelp? Try:

div.options {

     float: right;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 28, 2015 Apr 28, 2015

Copy link to clipboard

Copied

Hello William,

Silly me. I’m using HTML5 – Desktop layout.

I know just enough HTML to get myself in trouble. I started with your “PnP-WH-Generic” layout and got it to this point:

Your first suggestion moves the icons to the right side of the screen. I need them to be as shown above.

Here’s the relevant (I believe) HTML:

And here’s what I believe is the applicable CSS info:

div.content

div.toolbarbuttons

div.toolbarbuttons > div

div.logo

div.searchsimple

div.options

div.printbutton

div.header div.showhidebutton {

height: 23px;

line-height: 23px;

float: left;

margin-top: 5px;

margin-left: .8em;

font-size: .8em;

padding: 0;

width: auto;

Thanks for your help!

Dan

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 28, 2015 Apr 28, 2015

Copy link to clipboard

Copied

Correct me if I'm wrong here, but why wouldn't this be as simple as inserting the images you need and configuring them so they appear on the right side of the screen?

tmp1.png

Cheers... Rick

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 07, 2015 May 07, 2015

Copy link to clipboard

Copied

I'd suggest trying the following HTML and CSS for the buttons:

<div class="content" id="content">

  <div class="contentplacer">

  <div class="contentbutton print"></div>

  <div class="contentbutton showhide"></div>

  <div class="contentbutton brsnext"></div>

  <div class="contentbutton brsback"></div>

  </div>

  <?rh-msp-topic class="wTopic" widgettype="topic" ?>

  </div>

div.contentplacer {

  height: 2em;

  width: 100%;

  margin: .5em 0;

}

div.contentbutton {

  float: right;

  height: 2em;

  width: 2em;

  background-color: red;

  margin-left: 1em;

}

Does that work ok for you?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 07, 2015 May 07, 2015

Copy link to clipboard

Copied

LATEST

Thank you. I will try this early next week and let you know how it goes.

Dan

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp