Unable to detect webelement from the HTML code - iframe

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.

Related

Having trouble with Bootstrap column order with media queries

I am building a template for a site and it needs 4 columns. In desktop mode, or anything above tablet width, it should display all 4 columns though the outer 2 are only for padding. When in mobile mode, the outer 2 are set to disappear, but I need the middle two to reverse their order. I tried setting the 'col-' setting to reverse when under 480px, but it isn't working. I'd appreciate someone looking over my work.
HTML
<div id="inus1" class="fk-row row">
<div data-text="text" align="center" id="inyb3" class="fk-col order-1">
</div>
<div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
<div id="ifo6l">
<div id="iq1zf" class="fk-headline">Thank you for your purchase!
</div>
<div data-text="text" id="ihleo">Order {{orderId}}
<div draggable="true" id="i6myy-2-2">
<div draggable="true" id="ii502-2-2-2">
<b data-text="text">
<span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
</b>
</div>
</div>
</div>
</div>
<iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>
</div>
<div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
<table id="orderSummaryTable" class="w-100">
<thead id="iweztk">
<tr id="ikyi1h">
<th colspan="3" id="i10uii">
<span data-text="text" id="iqvl9r">Order Summary</span>
</th>
</tr>
<tr id="ieggiv">
<th id="inwrj">
<span data-text="text" id="ipokfh">Item</span>
</th>
<th id="i259c">
<span data-text="text" id="i5gfso">Quantity</span>
</th>
</tr>
</thead>
<tbody id="items-list">
<tr>
<td class="cell cell-items-list">
</td>
</tr>
</tbody>
</table>
</div>
<div align="center" id="ijiyf" class="fk-col order-4">
</div>
</div>
CSS (just the media query)
#media (max-width: 480px){
#in2gu{
width:615px;
height:350px;
}
#i80rh{
width:100%;
}
#i33dp{
width:100%;
}
#inyb3{
display:none;
}
#ijiyf{
display:none;
}
#in2gu{
width:615px;
height:350px;
}
}

Bootstrap comes with ordering utilities. Try them by appending order-0, order1, etc. to your elements
https://getbootstrap.com/docs/4.0/utilities/flex/#order

Display the icon on the upper left on the td

Goal:
Display the icon on the upper left of the selected td when you have the cursor over the td.
Problem:
I have tried to find different solution but it doesn't go so well.
Thank you!
table.glyphicon-hover .glyphicon {
visibility: hidden;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
position:relative;
background-color: green;
}
.test {
text-align:right;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
</td>
</tr>
</table>
</div>

You need to set the td to have relative positioning and the icon to have absolute positioning. Then you can position it using left and top.
table.glyphicon-hover .glyphicon {
visibility: hidden;
position:absolute;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
background-color: green;
left: 0;
}
.table td {
position: relative
}
.test {
text-align:right;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
</td>
</tr>
</table>
</div>

See the below code
new class added .topleftIcon
All I'm doing is floating the icon to the left.
table.glyphicon-hover .glyphicon {
visibility: hidden;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
position:relative;
background-color: green;
}
.test {
text-align:right;
}
.topleftIcon{
float:left;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up topleftIcon"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up topleftIcon"></span>
</td>
</tr>
</table>
</div>

Change background color of the row that is checked not selected in angularjs

I have a table generated from ng-repeat. Each of the row has a checkbox. I want the rows which are checked to change their background color. I was trying it using ng-class but did not help, As soon as I select one checkbox, all the rows get their background changed.I understand what the mistake is, but dont know how to solve it.
This is my table
<table >
<tr>
<th>Select</th>
<th>Job List</th>
<th>Next Firing</th>
</tr>
<tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="myclass">
<td style="width: 247px; "><input type="checkbox" ng-model="x.checked" ng-click=countChecked($index)></td>
<td style="width: 247px; ">{{ x.Name }}</td>
<td style="width: 247px; ">{{ x.ID }}</td>
</tr>
</table>
This is my controller
$scope.countChecked = function(index){
var count = 0;
angular.forEach($scope.jobs, function(job){
if (job.checked) {
count++;
$scope.myclass='selected';
}
});
return count;
}
I need the "count" for a different purpose, which is working fine.
This is selected css
.selected{
background-color: #DEB887;
}

You can use the ngClass directive to give it a certain class when a job is selected like so:
<ANY ... ng-class="{ 'selected': x.checked }">
...
</ANY>

Just go through below snippet.
var app = angular.module('MyApp', []);
app.controller('MyController', function($scope, $filter) {
$scope.Customers = [{
CustomerId: 1,
Name: "Prashant Olekar",
Country: "United States",
},
{
CustomerId: 2,
Name: "Hemant K",
Country: "India",
},
{
CustomerId: 3,
Name: "Richard",
Country: "France",
},
{
CustomerId: 4,
Name: "Robert Schidner",
Country: "Russia",
}
];
$scope.checkedCount = function() {
return $scope.Customers.filter(function(orders) {
return orders.select;
}).length;
}
})
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected {
background-color: #E0F7FA;
}
</style>
</head>
<body style="margin: 30px;">
<div ng-app="MyApp" ng-controller="MyController">
<div class="container-fluid" style="margin-top: 40px;">
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<span style="font-size: 20px; margin-right: 50px;">Total Checked : {{checkedCount()}}</span>
</div>
</div>
<div class="col-md-12">
<table class="table table-condensed table-bordered text-center">
<thead style="background-color: #607D8B; color: white">
<tr>
<td></td>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="c in Customers">
<tr ng-class="{ 'selected': c.select }">
<td>
<input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
<td>{{c.CustomerId}}</td>
<td>{{c.Name}}</td>
<td>{{c.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

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>

Having issues with positioning elements on website

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

Resources