<div id="buttonpanel" style="display:None; float:left">
<apex:commandButton action="{!selectQuarter}" value="Go!" status="actStatusId2" reRender="pgBlckId,panelrender,panelrender1,panelrender14,panelrender15,panelrender24,panelrender23,panelrender12,panelrender13,panelrender2,panelrender21,panelrender22" id="button2"/>
<apex:actionStatus id="actStatusId2" title="This is the status for loading image">
<apex:facet name="start" >
<img src="/img/loading.gif" width="25" height="25" align="bottom" title="Loading"/>
<h3> Loading..</h3>
</apex:facet>
</apex:actionStatus>
</div>
I want to display these two div tags side by side. Please let me know how can I achieve this?
I do not see two divs....But changing your h3 elements inside the div to have inline display should work as inline elements do not start on a new line.
#buttonpanel h3{
display:inline;
}
Related
This is my current code:
<figure class="half">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
Unfortunately perhaps because the images are too wide, it still puts the second image on the next line. I want to avoid this - no matter how wide things get. How can I do this?
Just add css display:flex to parent container of images in your case figure.
<figure class="half" style="display:flex">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
You could put your images into table cells.
<figure class="half">
<table>
<tr>
<td>
<img style="width:400px;" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
</td>
<td>
<img style="width:600px;" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
</td>
</tr>
</table>
<figcaption>Caption describing these two images.</figcaption>
</figure>
I recommend just using a <span> tag and put no space in between them, then they will be side by side.
This could be achieved in many ways.
You could use flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could wrap it grid system and set image width to 100% or create table and set width of each td to be 50%
You can even set css for all of your images to be exactly the same size.
I've created a little fiddle for you https://jsfiddle.net/7kophdxq/.
I would strongly recommend using flexbox, since its the 'new way' of doing these kind of things. Of course you could use a table, but it isn't tabular data right?
For the general structure:
<div class="columns">
<div class="columns__item"></div>
<div class="columns__item"></div>
</div>
Each columns__item has a width of 50%. Inside each columns__item I've put a little image (and made sure it will not exceed a width of 100% of its container):
<figure>
<img src="http://lorempixel.com/400/400/" />
<figcaption>Image caption</figcaption>
</figure>
Hope it helps!
.half img {
display:inline-block;
}
.half figcaption {
display:block
}
or, if you want to keep images in one line, regardless the container size:
.half {
white-space:nowrap;
}
.half img {
display:inline;
}
.half figcaption {
display:block
}
Pick whatever suits you best;)
I have two images that I'm trying to center align horizontally. Currently they look like this...
But, I would like the "APPLY NOW" button to be horizontally aligned like so...
My current code for the two images is this...
<img class="alignright" src="image1.png" alt="" />
<img src="image2.png" align="right">
I've attempted to center align them without CSS, and I'd prefer not to use CSS if there is a way I can do it without it. If I have to use CSS, then I'd appreciate any help that is provided!
Thanks!
With CSS just use the vertical-align property with the value middle
More about vertical-align: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Without css... I've no idea.
add the following css to the parent box or element which the images are in:
style="display:table-cell; vertical-align:middle;"
hth
Just apply two rules to the second image .
<img class="alignright" src="image1.png" alt="" />
<img class="center" src="image2.png" align="right">
css code:
.center{
positon:relative;
top:50%;
bottom:50%;
}
I'm trying to have these 5 images to line up left to right however they are stacking top to bottom.
This is my HTML code
<div style="backgroundColorButtons">
<img src="images/white01.jpg" alt= "White Background" width="236" height="35" type='button' value='White Background' onClick="javascript:changeBGC('#ffffff');return false"
onmouseover="this.src='images/white02.jpg';"
onmouseout="this.src='images/white01.jpg'"
onmousedown="this.src='images/white04.jpg'"
onmouseup="this.src='images/white01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/black01.jpg" alt= "Black Background" width="236" height="35" type="button" value='Black Background' onClick="javascript:changeBGC('#000000');return false"
onmouseover="this.src='images/black02.jpg';"
onmouseout="this.src='images/black01.jpg'"
onmousedown="this.src='images/black04.jpg'"
onmouseup="this.src='images/black01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/red01.jpg" alt= "Red Background" width="236" height="35" type='button' value='Red Background' onClick="javascript:changeBGC('#ff0000');return false"
onmouseover="this.src='images/red02.jpg';"
onmouseout="this.src='images/red01.jpg'"
onmousedown="this.src='images/red04.jpg'"
onmouseup="this.src='images/red01.jpg'" />
</div>
There are two more buttons with similar code
This is the CSS Code that I am using;
.backgroundColorButtons{
float: left;
}
Instead of style use class
<div class="backgroundColorButtons">
I've also noticed that the way you use JS to change states is pretty painful, both for you, somebody who will edit the code one day, and the user it self. On every event (till all images are cached by the browser) you request the server for a new image resulting in an unprofessional time gap / wait - for the new image to be loaded.
Avoid where possible (anywhere is possible) inline JavaScript.
Explore the sprite images technique.
In your div declaration you have invalid syntax:
<div style="backgroundColorButtons">
If you want to assign class backgroundColorButtons to a div, you need to change it to:
<div class="backgroundColorButtons">
<div style=""> is allowed. but is used only for defining inline style, like so:
<div style="float: left;">
You should also consider defining width for your floated elements.
#container
{display:table;width:100%;}
#row{display:table-row;}
.left{display:table-cell;padding:10px;}
the html
<div id="container">
<div id="row">
<div class="left">1st image</div>
<div class="left">2nd image</div>
<div class="left">3rd image</div>
</div>
</div>
try using class instead of style should work
In Example <div class="backgroundColorButtons">
try to use .class in place of style="backgroundColorButtons" and style="backgroundColorButtons" is not valid inline css. you can do one of the below
1. add style="float:left" in place of style="backgroundColorButtons"
or
2. Make class name as
<style>
.backgroundColorButtons{
float:left;
}
</style>
and remove style in div add class="backgroundColorButtons"
<div id="surveyTitleEdit" style="float:left;overflow: auto;">
<input id="surveyTitleInput" size="25" type="text" name="Title" />
<span><img class="pointerCursor" src="image" alt="Save" title="Save"
onclick="save()"/></span>
<span><img class="pointerCursor" src="image" alt="Save" title="Save"
onclick=Edit();"/></span>
</div>
This is my code, I'm getting input box and first image in one line and the second image in another line , I want all the div data in one line , how can i achieve this?
Try this:
<div id="surveyTitleEdit">
<input id="surveyTitleInput" size="25" type="text" name="Title"/>
<img src="" alt=""/>
<img src="" alt=""/>
</div>
Now the only thing you have to make sure of, is that the div surveyTitleEdit is wide enough (has a width higher than the sum of the widths of the input and two images) to contain the 3 elements next to each other. Alternatively you can use the following CSS:
#surveyTitleEdit {
white-space: nowrap;
}
It should be onclick="Edit();". You forgot a ". Elements should be automatically aligned if the div container is wider enough. Whenever possible, avoid to attach events directly to TAGS. Instead, you can use jQuery (Or other frameworks) events.
Try specifying the height and width in the , as in:
<img src="image.jpg" width="200" height="150">
I have a div inside that div i have an image which says "Searching .." Now for this modal How to apply the border
<div id="waiting-dialog" title="Waiting" style="display:none">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5"/>
Retrieving all the required information based on your selection.This may take a few moments. Please wait...
</div>
And for this Modal I am having the image Appearing on Left side and Text not appearing properly .How can I make tthe text to
appear in neatly manner
Take the text in a separate div inside the "waiting-dialog" div only, then use the use style float:left for that new div and image. Now you can play around the new div position with paddings, margins and fonts etc to make it neat. see the below sample code.
<div id="waiting-dialog" title="Waiting">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5" style=" float:left;"/>
<div style=" float:left; padding: 5px;"> Retrieving all the required information based on your selection.This may take a few moments. Please wait...</div>
</div>