Having issues with positioning elements on website - css

I'm having a few issues with the website I'm coding, and I can't find answers to them. First, here is the HTML code of the page I'm having issues with, and the code of the CSS linked to it:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/test.css">
<title>Capturing Life - Kim Chaffin Photography</title>
</head>
<body>
<div id="bg2">
<center>
<div id="logo">
<img src="../Pictures/logo.png" width="511" height="207" alt="Load Error">
</div>
</center>
<center>
<div id="flourish">
<img src="../Pictures/flourish2.png" width="462px" height="329px" alt="Load Error">
</div>
</center>
<center>
<div id="header">
<svg>
<rect x="100" y="100" rx="20" ry="20" width="1096" height="230" style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="headerfix">
<svg>
<rect x="100" y="300" width="1096" height="100" style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="tabbox">
<svg>
<rect x="100" y="300" width="1096" height="50" style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="tabs">
<ul type=none>
<table width="80%">
<tr>
<td>
<ul>
<a href="Home.html"><img src="../Pictures/Kim Photography_1.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_1.png'"
onmouseout="this.src='../Pictures/Kim Photography_1.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_1.png";
</script>
</td>
<td>
<a href="About Kim.html"><img style="border:0px;" src="../Pictures/Kim Photography_2.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_2.png'"
onmouseout="this.src='../Pictures/Kim Photography_2.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_2.png";
</script>
</td>
<td onmouseover="showmenu('portfolios')" onmouseout="hidemenu('portfolios')">
<a href="Portfolios.html"><img style="border:0px;" src="../Pictures/Kim Photography_3.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_3.png'"
onmouseout="this.src='../Pictures/Kim Photography_3.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_3.png";
</script>
<br>
<table class="menu" id="portfolios" width="124px" rules="cols">
<tr><td class="menu"><center><b>Maternity</b> </center></td></tr>
<tr><td class="menu"><center><b>Little Ones</b> </center></td></tr>
<tr><td class="menu"><center><b>Teens</b></center> </td></tr>
<tr><td class="menu"><center><b>Families</b> </center></td></tr>
<tr><td class="menu"><center><b>Events</b></center> </td></tr>
<tr><td class="menu2"><center><b>Pets</b></center> </td></tr>
</table>
</td>
<td onmouseover="showmenu('sessions')" onmouseout="hidemenu('sessions')">
<a href="Sessions.html"><img style="border:0px;" src="../Pictures/Kim Photography_4.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_4.png'"
onmouseout="this.src='../Pictures/Kim Photography_4.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_4.png";
</script>
<br>
<table class="menu" id="sessions" width="121px" rules="cols">
<tr><td class="menu"><center><b>Mini-Sessions</b></center> </td></tr>
<tr><td class="menu"><center><b>Full Sessions</b></center> </td></tr>
<tr><td class="menu"><center><b>Newborns</b></center> </td></tr>
<tr><td class="menu2"><center><b>Slice of Life</b> </center></td></tr>
</table>
</td>
<td onmouseover="showmenu('workshops')" onmouseout="hidemenu('workshops')">
<a href="Workshops.html"><img style="border:0px;" src="../Pictures/Kim Photography_5.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_5.png'"
onmouseout="this.src='../Pictures/Kim Photography_5.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_5.png";
</script>
<br>
<table class="menu" id="workshops" width="143px" rules="cols">
<tr><td class="menu"><center><b>SLR</b></center></td> </tr>
<tr><td class="menu"><center><b>Quick Tips</b> </center></td></tr>
<tr><td class="menu2"><center><b>Documenting Life</b></center></td></tr>
</table>
</td>
<td>
<a href="Client Galleries.html"><img style="border:0px;" src="../Pictures/Kim Photography_6.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_6.png'"
onmouseout="this.src='../Pictures/Kim Photography_6.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_6.png";
</script>
</td>
<td>
<a href="Contact.html"><img style="border:0px;" src="../Pictures/Kim Photography_7.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_7.png'"
onmouseout="this.src='../Pictures/Kim Photography_7.png';" alt="Load Error" /></a>
<script type="text/javascript">
img=new Image();
img.src= "../Pictures/Kim Photography on mouseover_7.png";
</script>
</td>
</tr>
<li>
</ul>
</table>
</ul>
</div>
</center>
</div>
</body>
</html>
CSS:
body
{
background-image:url('../Pictures/Black dot 2.png');
background-attachment:fixed;
font-family:Arial,Helvetica,sans-serif;
}
table
a
{
color:black;
text-decoration:none;
}
a:hover
{
color:#FFFFFF;
}
td.menu
{
background-color:#625D5D;
}
td.menu2
{
background-color:#625D5D;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
#bg2
{
background:#FFFFFF;
background:rgba(255,255,255,1);
width:90%;
height:90%;
margin:4em auto;
}
#header
{
position:relative;
top:-545px;
}
#headerfix
{
position:relative;
top:-1265px;
}
#tabbox
{
position:relative;
top:-1770px;
}
#tabs
{
position:absolute;
}
#flourish
{
position:relative;
top:-150px;
right:340px;
z-index:+1;
}
#logo
{
position:relative;
top:113px;
right:-240px;
z-index:+1;
}
These are the problems I'm having:
The code will not allow me to move the navigation tabs (div id="tabs"), which are stuck at the bottom of the page. If I apply any movement properties (i.e. "top:-1000px;"), the tabs disappear entirely instead of moving where I wish them to.
The white background (div id="bg2") causes the elements div id="header", div id="headerfix", div id="logo", div id="flourish", and div id="tabbox" to be pushed down and to the right, as opposed to the top and center position I want them to be in.
The navigation tabs Portfolios, Sessions, and Workshops are supposed to have drop-down menus under them. However, the menus simply don't appear for some reason.
I think those are the only problems I am currently having. However, if anyone finds any other problems in my code, I'd much appreciate it if you tell me.


Firstly, it looks like you have code errors in your HTML, concerning your < ul >. You should definitely make sure your tags are nested properly since this might be one of the causes of your problems. Also, there are 8 JavaScript errors on the page as you have it presented here.
Your #tabs div moves to the top for me when I use top: 0px; as it ought to. I'm not quite sure what trouble you are having with it.
Your white background appears to be containing the other divs, so that would not be moving your items around anywhere.
Without a live, working demo with images that we can view, there's not much we can do to troubleshoot this for you. Also, using tables for a drop-down navigation is inviting a whole slew of problems all on its own - you should consider switching to divs or a structured < ul >.

Related

Bootstrap table header color only shows when cell is hovered over

I have a table that I want to render with coloured header that is always on (not just when you hover over the cell.
<div class="container-fluid fieldcontain col-sm-6" >
<table class='table table-bordered table-striped table-condensed' >
<thead >
<tr>
<th class="bg-info text-white" scope="col">Tag</th>
<th class="bg-info text-white" scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">hello</td>
<td scope="row">william</td>
</tr>
</tbody>
</table>
</div>
I have tried variations on this including a custom CSS head style like this, but this also only fires when I hover over a header cell.
custom.css
.table .thead-blue th {
background-color: cornflowerblue;
foreground-color: cornflowerblue;
}
but whatever I do, when the page renders and your mouse is not hovered over the cell is grey. When you hover over a header column the colour is triggered.
I want that header colour all the time - not just when I hover of the header cell.
I've looked at examples etc. - but can't see why my default is grey. I thought it would do this all the time.
Can any one help please?
Stripped it right back - no grails site mesh or anything just two tables
<!DOCTYPE html>
<html>
<head>
<%--<meta name="layout" content="main" />--%>
<title>Bootstrap try out</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="row">
<%--<div class="container-fluid col-sm-6" >--%>
<div class="col-xs-4">
<table class='table table-bordered table-striped table-condensed ' >
<thead >
<tr>
<th class="bg-info text-white" scope="col">Tag</th>
<th class="bg-info text-white" scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">hello</td>
<td scope="row">william</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>now table with border</p>
<div class="row">
<div class="col-xs-4">
<table class="table table-bordered table-condensed">
<caption> Map table</caption> <!-- appears at bottom -->
<thead class="alert alert-info">
<tr >
<th>tag</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>there</td>
</tr>
<tr>
<td>Peter</td>
<td>Parker</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The first table is defaulted to grey,
the second table now has coloured headers.
the first table tries to add class to - no soap, the second version
i put the grails site mesh back in using main.gsp ub uncommenting the meta tag, and commenting the css links out (as they are the same in main.gsp)
as soon as you enable the site mesh - the rendering stops working correctly
so it looks like something in the grails site std site mesh/styles etc just makes things break

No. It's working. Try the in here codes. Or, add your all code.
.table .thead-blue th {
background-color: cornflowerblue;
foreground-color: cornflowerblue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid fieldcontain col-sm-6" >
<table class='table table-bordered table-striped table-condensed' >
<thead >
<tr>
<th class="bg-info text-white" scope="col">Tag</th>
<th class="bg-info text-white" scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">hello</td>
<td scope="row">william</td>
</tr>
</tbody>
</table>
</div>

I tried a brute force approach, on both the CSS and Jscript and covered/uncovered each until something broke the Bootstrap. This turns out to be in Grails' main.css. Then I went through the sections of the CSS and nailed it down to this
th {
background-color: #efefef;
background-image: -moz-linear-gradient(top, #ffffff, #eaeaea);
/*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea));*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#ffffff', EndColorStr = '#eaeaea');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eaeaea')";
color: #666666;
font-weight: bold;
line-height: 1.7em;
padding: 0.2em 0.6em;
}
I then went through each line in turn to test what works and doesn't - and it's down to one line of CSS!
The offending line is
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea));
If you comment that out (I don't know what it is or does) all of a sudden your Bootstrap starts to behave as it would in a stand-alone page.
So I still have some issues with colouring table headers in Bootstrap - but that can wait.
For any one who wants to see the latest position on Github:
project
Latest changes:
1) copied main.gsp to lcm-main and edited that so I could track what I was changing in layout.gsp
2) changed controller page's meta tag to use the lcm-main template
3) wasn't sure what was going on at one stage on Bootstrap - so i've installed latest CSS, stylesheets into assets and changed the application.js and application.css to pick up the latest Bootstrap 4.2.1
Tables are now rendering as I was expecting and headers can be made to go some colour.
So lcm-main.gsp looks like this
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="LCM Inventory"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:stylesheet src="lcm-application.css"/>
<%--<g:external file="lcm-app.css" />--%> <%--this works and knows default place for stylesheets --%>
<!--<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">-->
<%--<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>--%>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
<%--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
--%>
<g:layoutHead/>
<%-- header assets --%>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" role="navigation">
<a class="navbar-brand" href="/#"><asset:image src="inventoryDisksImage.png" width="7%" height="6%" alt="LCM Logo" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" aria-expanded="false" style="height: 0.8px;" id="navbarContent">
<ul class="nav navbar-nav ml-auto">
<g:pageProperty name="page.nav"/>
</ul>
</div>
</nav>
<g:layoutBody />
<div class="footer row" role="contentinfo" class="container-fluid">
<p>LCM Footer version x.y</p>
</div>
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
<asset:javascript src="application.js"/>
</body>
</html>
Now my controller page and the standalone page (no site mesh) seem to both behave the same way.
The revised application.js now looks this
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//= require popper.min
//= require bootstrap.4.2.1/bootstrap
//= require jquery-3.3.1.min
//= require LCM-app
//= require_self
and the application.css looks like this
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS file within this directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap.4.2.1
*= require grails
*= require main
*= require mobile
*= require lcm-app
*= require_self
*/
So finally I'm going to raise a bug and see if I can save any one 4 days of pain to get this far.

How to hide text without ID?

I’m writing a css style for a web page that displays text without id, inside a div. Here’s the bit i’m interested in:
<div class="wal2">
<meta content="***" itemprop="width"></meta>
<meta content="***" itemprop="height"></meta>
text1:
<a target="_blank" href="**********"></a>
<script type="text/javascript"></script>
<br></br>
text2:
<a target="_blank" href="***************"></a>
<br></br>
<table></table>
<br></br>
<br></br>
<img width="16" height="16" border="0" align="absmiddle" alt="" src="/files/color.gif"></img>
text3:
<br></br>
<table cellspacing="0" cellpadding="0"></table>
</div>
I want to know how do i hide ‘ text3:’ without hiding ‘text1: and text2:' with css, using
{ text-indent: 100%; white-space: nowrap; overflow: hidden; }
or { display: none !Important; }, or whatever else.. ?
And if that is not possible, how can i hide all three of them ?

To hide all text nodes (not the preferred solution, but requested nonetheless); you could try to collapse the visibility on the parent div and then restore it on the html elements:
.wal2 {
visibility: collapse;
}
a,
br,
table,
img {
visibility: visible;
}
<div class="wal2">
<meta content="***" itemprop="width"></meta>
<meta content="***" itemprop="height"></meta>
text1:
<a target="_blank" href="**********">link</a>
<script type="text/javascript">alert('script');</script>
<br></br>
text2:
<a target="_blank" href="***************">link</a>
<br></br>
<table></table>
link
<br></br>
<br></br>
<img width="16" height="16" border="0" align="absmiddle" alt="" src="http://lorempixel.com/400/200"></img>
text3:
<br></br>
<table cellspacing="0" cellpadding="0">
<tr>
<td>table cell</td>
</tr>
</table>
</div>

Unable to detect webelement from the HTML code

I came across a scenario where i am not able to detect the web element from the source code.
In my Code you can see an element
<a class="CSPortalGuiListItemDrag" ondragstart="CSPortalGuiList.onDragStart(event, '', '', '');" onclick="return false;" href="#"> By Suite </a>
which i am trying to detect.
Before that what i tried i,ll tell you in short
For locating element i used Xpath,className and also CSS. I tried both absolute as well as relative path but none of them worked.
Attempt A
1.Switching to default content.
2. switch to i-frame.
3. switch to i-frame 3. find element.
Attempt B
1.Switching to default content.
2. switch to i-frame 3.find element.
Attempt C
1. switch to i-frame.
2. find element.
All the attempts were unsuccessful and could not detect the web element.
Please help me with your valuable suggestions.
Below is the source code
<html>
<head>
<body>
<iframe scrolling="auto" frameborder="no" src="../admin?redirect=true&" marginwidth="0" marginheight="0">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de-DE" dir="ltr" xml:lang="de-DE" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="CSPortal Win ff17 ff SingleWidget SingleTab editmode" ffdragdropid="dd_1">
<div id="CSPortalPortalTitle" onclick="CS.reloadTopFrame();">Rupesh</div>
<div id="CSPortalPortalLogo" onclick="CS.reloadTopFrame();"></div>
<div id="header">
<div id="main" class="tabs1 t1 st0">
<div id="footer">
<div id="CSPortalWindow" class="CSPortalWindow" name="CSPortalWindow" style="width: 1000px; height: 568px; left: 20px; top: 20px; z-index: 10003;">
<div class="CSPortalWindowToolbar">
<div style="background-color: white; position: relative; overflow: auto; width: 1000px; font-size: 0px; height: 526px;">
<iframe frameborder="0" style="background-color: white; border: medium none; width: 100%; height: 100%; margin: 0px; padding: 0px;" src="../admin/portal.php?forward=core/extensions/portal/gui/framework/CSPortalGuiWidgetSelector.php&mode=add&PortalTabID=131&col=1">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%">
<head id="CSGuiWindowHead">
<body id="CSGuiWindowBody" class="Win ff17 ff hasHeight" oncontextmenu=";" style="background-color: #FFFFFF; height:100%;width: 100%;">
<div id="CSPortalLayoutManager_4367034" class="CSPortalGuiLayout">
<div class="CSPortalGuiLayoutInnerDiv">
<table class="CSPortalGuiLayout">
<tbody>
<tr>
<tr id="CSPortalLayoutManager_4367034_Middle">
<td id="CSPortalLayoutManager_4367034_Center" class="CSPortalGuiLayoutCenter" colspan="3">
<div class="CSPortalGuiLayoutCenterOverflow">
<div id="CSPortalLayoutManager_4367034_CenterContent" class="CSPortalGuiLayoutCenterOverflow2">
<table class="CSPortalGuiLayoutCenterTable" style="border-collapse: collapse; width: 100%; height: 100%;">
<tbody>
<tr>
<td id="Col1" class="CSPortalGuiLayoutCenterCol First Odd" width="200" height="0">
<div id="CSPortalLayoutManager_3849853" class="CSPortalGuiLayout">
<div class="CSPortalGuiLayoutInnerDiv">
<table class="CSPortalGuiLayout">
<tbody>
<tr>
<tr id="CSPortalLayoutManager_3849853_Middle">
<td id="CSPortalLayoutManager_3849853_Center" class="CSPortalGuiLayoutCenter" colspan="3">
<div class="CSPortalGuiLayoutCenterOverflow">
<div id="CSPortalLayoutManager_3849853_CenterContent" class="CSPortalGuiLayoutCenterOverflow2">
<div id="CSPortalGuiList_4885314" class="CSPortalGuiList unmarkable maxHeight list">
<style type="text/css">
<table class="CSPortalGuiListContainer">
<tbody>
<tr>
<td id="CSPortalGuiList_4885314_TdContent" class="CSPortalGuiListTdContent">
<div class="CSPortalGuiListOverflow">
<div id="CSPortalGuiListContentCSPortalGuiList" class="CSPortalGuiListContent">
<table class="CSPortalGuiListTable" name="CSPortalGuiList">
<tbody class="CSPortalGuiListBody">
<tr id="CSPortalGuiListItem_4885314_0" class="CSPortalGuiListItem first hasAction " clickhandler="1" onclick="var event=arguments[0]||window.event;var param=arguments[1];var tr=this;if (CSPortalGuiList && !CSPortalGuiList.clickItem(tr, event)) return false;tr.callback = function(event){ listCONTENTSERVModules(); };tr.callback(event);" style="" title="">
<td class="CSPortalGuiListItemContent">
<div class="CSPortalGuiListItemCaption">
<a class="CSPortalGuiListItemDrag" ondragstart="CSPortalGuiList.onDragStart(event, '', '', '');" onclick="return false;" href="#"> By Suite </a>
</div>
</td>
<td id="CSPortalGuiListActions_4885314_0" class="CSPortalGuiListItemAction">
</tr>
<tr id="CSPortalGuiListItem_4885314_1" class="CSPortalGuiListItem hasAction " clickhandler="1" onclick="var event=arguments[0]||window.event;var param=arguments[1];var tr=this;if (CSPortalGuiList && !CSPortalGuiList.clickItem(tr, event)) return false;tr.callback = function(event){ listCONTENTSERVVendors(); };tr.callback(event);" style="" title="">
<tr id="CSPortalGuiListItem_4885314_2" class="CSPortalGuiListItem hasAction " clickhandler="1" onclick="var event=arguments[0]||window.event;var param=arguments[1];var tr=this;if (CSPortalGuiList && !CSPortalGuiList.clickItem(tr, event)) return false;tr.callback = function(event){ listCONTENTSERVMostPopular(); };tr.callback(event);" style="" title="">
<tr id="CSPortalGuiListItem_4885314_3" class="CSPortalGuiListItem last hasAction " clickhandler="1" onclick="var event=arguments[0]||window.event;var param=arguments[1];var tr=this;if (CSPortalGuiList && !CSPortalGuiList.clickItem(tr, event)) return false;tr.callback = function(event){ listCONTENTSERVPreconfigured(); };tr.callback(event);" style="" title="">
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>

Try this code:-
//switching to the frame using the frameelement that has your concerned webelement
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(#src,'CSPortalGuiWidgetSelector')]")));
//Locating the element inside the iframe after switching to it.
WebElement ele = driver.findElement(By.xpath("//a[class='CSPortalGuiListItemDrag']"));
ele.click(); // in case you want to click the element
driver.switchTo().defaultContent(); //to revert to the default window.

How can I get my table to display above my ContentPlaceHolder?

I am trying to create a menu in the MasterPage that is displayed when a hyperlink is clicked. YardimDokumaniMenuAHREF is the hyperlink that displays the menu. As you can see, a javascript is called when I click on it. However contensts of the cells can not be displayed due to contentplaceholder. Please see the screenshot.
and this is my code. can someone help me out with this?
<a id="YardimDokumaniMenuAHREF" href="javascript:DisplayMenu('ctl00_YardimDokumaniMenuContent')" runat="server" title="">YARDIM DÖKÜMANI</a>
<%-- YardimDokumaniMenuAHREF triggers YardimDokumaniMenuContent to be displayed --%>
<div ID="YardimDokumaniMenuContent" runat="server" style="visibility:hidden; position:absolute; z-index:-99999">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
hadi bakalııııım
</td>
</tr>
<tr>
<td>
hadi bakalııııım333
</td>
</tr>
</table>
</div>
</li>
<li class=""><a href="~/Default.aspx" title="Ana Sayfa" runat="server" id="AnaSayfaLink">
Ana Sayfa</a> </li>
<li class=""><a href="~/Everyone/iletisim.aspx" runat="server" title="Bilgi almak istiyorum, şikayetim var, haklı müşteriyim.">
İLETİŞİM / YARDIM MASASI</a></li>
<li class="current_page_item" runat="server" id="OnlineIslemLink"><a id="A1" runat="server"
href="https://ode.a-kent.com/Yetki/Login.aspx">ONLINE İŞLEM</a> </li>
<li class="">
<asp:LinkButton ID="LogoutLinkButton" runat="server" CausesValidation="false" OnClick="LogoutLinkButton_Click">GÜVENLİ ÇIKIŞ</asp:LinkButton>
</li>
</ul>
</div>
<!-- globalNav end -->
</div>
<!-- header end -->
<div id="main">
<div class="panel fetaured" style="left: 192px; top: 0px; width: 755px;">
<div class="comments">
<b>GERİ</b>
</div>
</div>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="LeftPanelContentPlaceHolder">
</asp:ContentPlaceHolder>
Display menu function:
<script type="text/javascript">
function DisplayMenu(obj) {
obj = document.getElementById(obj);
obj.style.visibility = 'visible';
}
</script>

Remove the z-index:-99999from the YardimDokumaniMenuContent div style. If that doesn't work, ensure the z-index of that div is greater than the one of the background.

Aligning in multi-element div

I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>

Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>

Resources