I'm developing a website for the first time. I have used two div tags. One is outer container whose width and height are set to 100%. Other one is inside container. I want to set this to the center vertically. similar to this website: http://www.bigcinemas.com/IN/home.aspx.
But its not working. I tired something like this:
index.jsp
<div class="container">
<div class="banner">
<a class="logo" href="index.jsp">
<img src="images/logo.png" alt="Rainbow Entertainment" width="250px" height="50px"/></a>
<div id="login">
<table style="background-color: purple">
<tr><td>Username : <input type="text"></td>
<td>Password : <input type="password"></td>
<td>Sign in<input type="submit"></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
menu.css
.container{
width: 100%;
height: 100%;
}
#banner{
width: 60%;
padding-left: 30%;
padding-right: 30%;
position: absolute;
}
.logo{
margin-top: 5px;
float: left;
width: 20%;
position: relative;
}
#login{
width: 30%;
float: right;
padding-left: 10%;
}
#menu{
height: 20%;
width: 70%;
}
.menu_items{
width: 80%;
color: white;
}
Also I want to the difference between id and class.
I was looking for a similar solution earlier today - check the answer on this question. How to vertically center a div for all browsers? . It sounds like the code provided there will suit your needs.
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
CSS
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Related
ImageHow can I handle this window which popup when saving a record I tried Actions class, robot class but nothing seems to work.
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget
ui-widget-content ui-front critical-dialog ui-dialog-buttons" aria-
describedby="ui-id-7" aria-labelledby="ui-id-8" style="height: auto;
width:
300px; top: 302.005px; left: 611.48px;"><div class="ui-dialog-titlebar ui-
corner-all ui-widget-header ui-helper-clearfix"><span id="ui-id-8"
class="ui-dialog-title"> </span><button type="button" class="ui-
dialog-titlebar-close fa fa-close"></button></div><div id="ui-id-7"
class="ui-dialog-content ui-widget-content" style="z-index: 3000000;
width: auto; min-height: 28.86px; max-height: none; height: auto;"><div
class="title"></div><div class="message">Search updated successfully!
</div></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-
clearfix"><div class="ui-dialog-buttonset"><button
type="button">OK</button></div></div></div>
and
<iframe tabindex="-1" aria-hidden="true" role="presentation"
title="Intentionally blank" name="lpSS_38260369681" id="lpSS_38260369681"
src="https://lpcdn.lpsnmedia.net/le_secure_storage/3.7.0.1-
release_442/storage.secure.min.html?
loc=https%3A%2F%2Fqa.criticalmention.com&site=10551349&env=prod"
style="width: 0px; height: 0px; position: absolute; top: -1000px; left:
-1000px; display: none;"></iframe>
Before interacting with an element inside of an iframe, you need to switch to it:
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[title='Intentionally blank']")));
The graph on the website looks like :
enter image description here
I need to read the pop up data when i hover on the graph. I cannot do inspect element on the pop up data.
In HTML i can see below code:
<div id="view5561218686836924094_14132909152772909395" class="tab-tvView tvimagesNS" style="background-color: rgb(255, 255, 255); left: 20px; top: 25px; width: 192px; height: 230px;">
<div class="tvScrollContainer tvmodeRectSelect" style="cursor: pointer; left: 0px; top: 0px; width: 192px; height: 230px;">
<div class="tvBackgroundContainer" style="background-color: rgb(255, 255, 255);"/>
<div class="tvimagesContainer" style="width: 192px; height: 230px;">
<canvas class="tabCanvas tab-widget" width="192" height="230" style="width: 192px; height: 230px;"/>
<canvas class="tabCanvas tab-widget" style="position: absolute; left: 0px; top: 0px; width: 192px; height: 230px;" width="192" height="230"/>
</div>
<div class="tvdrag" style="display: none;">
<div class="tvdrag_image" style="display: none;"/>
<div class="tvdrag_mask" style="display: none;"/>
</div>
<div class="tvdrag" style="display: none;"/>
</div>
Please help. Thank you.
I have html code like this:
<div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 8 1 start top">**CRED ID:** </div>
<div style="display: inline-block; position: absolute; top: 84px; bottom: auto; left: 115px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="3 1 8 1 start top">**11111972**</div>
<div style="display: inline-block; position: absolute; top: 103px; bottom: auto; left: 5px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="2 1 10 1 start top">**CAQH ID:** </div>
<div style="display: inline-block; position: absolute; top: 103px; bottom: auto; left: 115px; right: auto; width: auto; height: auto; max-width: none; max-height: none;" _afrc="3 1 10 1 start top">**11189685**</div>
if something shows as two stars for you it is supposed to be bold. I made the text bold so it shows up better. Anyway I can use //div[contains(text(),'CRED ID:')] to get the div element containing "CRED ID". The actual cred id value is "11111972". I am wondering how, when I use the above xpath, I can tell it to get the text value of the next div (i.e., 11111972). I can't really use a ../div because there are earlier and later divs at this level. Can anyone suggest?
I could use a #FindBy and make a List, find the index if "CRED ID" and add 1 I suppose, but it seems like there should be another way?
Thanks
p.s. I never really understodd following-sibling but I do not know whether that would work here?
You can use the following-sibling axis:
WebElement credId = driver.findElement(By.xpath("//div[contains(text(),'CRED ID:')]"));
WebElement credIdValue = credId.findElement(By.xpath("following-sibling::div"));
Or, you can reach it in one go:
WebElement credIdValue = credId.findElement(By.xpath("//div[contains(text(),'CRED ID:')]/following-sibling::div"));
I was tring to make a question answer forum in which each question being displayed is having three divisons : Answers Count,View count,Question.So for achieving this I do something like this :
<div id="container">
<div id="a">
<p align="center">0</p>
<p align="center">Answers</p>
</div>
<div id="b-wrapper">
<div id="b">
<p align="center">0</p>
<p align="center">Views</p>
</div>
</div>
<div id="c-wrapper">
<div id="c">
<p align="center">Question</p>
<p align="right">Asked By Micheal</p>
</div>
</div>
<br style="clear: both;">
</div>
In css i did :
#container {
width: 800px;
}
#a, #b-wrapper, #c-wrapper {
float: left;
}
#a {
width: 10%;
background-color: #0ff;
}
#b-wrapper {
width: 10%;
}
#b {
margin-left: 20px;
background-color: #0f0;
}
#c-wrapper {
width: 60%;
}
#c {
margin-left: 20px;
background-color: #EEEEEE;
}
Now I am facing two problems.
The divison for Answer is getting a bit bigger in height.How to manage it.
I am fetching questions from database Like :
while(rs.next){
String myid=rs.getString("ID");
//display here all three divisons where rs is ResultSet
}
So here problem is that i want to assign this myid to each of the divison And on click of any divison move to second.jsp.
Please help to solve these problems.
I have an issue while selecting a dropdown which is also an input field using selenium webdriver and java.
1) After the pop up appears, I will have to click the drop down and select a field and tab to the next drop down and select one more drop down and select a field .
2) These drop downs also act as input fields, so I used the input id for my xpath and it does type in the box instead of selecting it. Now I don't want to go that route.Instead want to select from the dropdown itself.
Here is the HTML of the pop up. ANy ideas??
Here is what I have written:
WebElement orgUnitText = driver.findElement(By.xpath("//input[#id='textfield-1137- inputEl']"));
orgUnitText.sendKeys("HRD");
logger.info("entered OrgUnitText");
WebElement orgUnitAbb = driver.findElement(By.xpath("//input[#id='textfield-1138- inputEl']"));
orgUnitAbb.sendKeys("HRD");
logger.info("entered OrgUnit abbreviation");
Thread.sleep(15000);
List<WebElement> options = driver.findElements(By.id("combobox-1140-inputEl"));
options.get(0).sendKeys("HR_ADMINS");
List<WebElement> options2 = driver.findElements(By.id("combobox-1141-inputEl"));
options2.get(0).sendKeys("HR_USERS");
WebElement textArea = driver.findElement(By.id("textareafield-1143-inputEl"));
textArea.sendKeys("HRD");
WebElement saveButton = driver.findElement(By.xpath("//a[#id='button-1146-btnEl']"));
saveButton.click();
logger.info("entered OrgUnit description");
</div>
<div id="orgunitpanel-1134-body" class="x-window-body x-window-body-default x-layout-fit x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable" style="background: none repeat scroll 0% 0% white; width: 690px; left: 0px; top: 20px; height: 178px;">
<div id="form-1135" class="x-panel x-fit-item x-window-item x-panel-default" style="padding: 5px; margin: 0px; width: 688px; height: 176px;">
<div id="form-1135-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="width: 678px; left: 0px; top: 0px; height: 166px;">
<span id="form-1135-outerCt" style="display: table; width: 100%; table-layout: fixed;">
</div>
</div>
</div>
<div id="toolbar-1145" class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct" style="width: 690px; right: auto; left: 4px; top: 202px;">
<div id="toolbar-1145-innerCt" class="x-box-inner " role="presentation" style="width: 684px; height: 22px;">
<div id="toolbar-1145-targetEl" class="x-box-target" style="width: 684px;">
</div>
</div>
</div>
<div id="boundlist-1150" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default x-resizable x-boundlist-resizable x-boundlist-default-resizable" tabindex="-1" style="right: auto; left: 1101px; top: 407px; width: 176px; z-index: 29001; height: auto; display: none;">
<div id="boundlist-1150-listEl" class="x-boundlist-list-ct x-unselectable" style="overflow: auto; height: auto;">
<div id="boundlist-1150-southeast-handle" class="x-resizable-handle x-resizable-handle-southeast x-boundlist-handle x-boundlist-handle-southeast x-boundlist-handle-southeast-br x-unselectable" unselectable="on"></div>
</div>
<div id="ext-gen1284" class="x-mask" style="z-index: 29001; width: 176px; height: 133px; right: auto; left: 1101px; top: 407px; visibility: hidden;"></div>
<div id="loadmask-1151" class="x-mask-msg x-layer x-mask-msg-default" style="right: auto; left: 1143px; top: 457px; z-index: 29003; display: none;">
<div id="loadmask-1151-msgEl" class=" x-mask-msg-inner">
</div>
</body>
</html>
Just use class Select that wraps WebElement and contains functions that allows to select option by value, visible text, get list of options and so on.