I linked my stylesheet to my base html file.
<title> <link rel="stylesheet" type="text/css" href="style.css">
and when i click go to link it goes to the right file. i can change the background color and all of the other margins. but when i insert a url the css seems to find the picture but doesnt load up to the html and if i click preview non of the images does load.
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
link your css under header tag not title tag as title tag is referring to Website Title.
<header>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
and the typo mentioned in comments, and ensure your destination is correct.]
p/s (typo)
picture{
background-image:url(img/header.jpg);
}
Like this below code paste in your html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="etbplaza.nl/css/style_basic.css"; />
</head>
<body>
<div class="picture"> your code hre </div>
</body>
</html>
CSS
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
This might be a typo:
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
picture has no class nor id selector which might causing the problem and/or may be try to use url('img/header.jpg'); within quotes. or url('../img/header.jpg') but we don't know where is the image is located.
Also try this:
Inspect Element
hover over the path and see is there the path is being loaded if yes
your image would show there
See this technique
change background-image:url(img/header.jpg/); to background-image:url(img/header.jpg); also make sure the /path/to/file is correct and if picture is a div class then it will be like .picture in your css
you have to use the css as in the form of class or id and try the code as
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
or as id
#picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
surly you got the preview of the Image to your HTML page.
Please check the path of css file is correct or not.
Related
I'm trying to automate an application and that has multiple HTML head and body tags present. Below is the sample provided. I tried all possibility using xpath, id , class etc. It doesn't work for this application alone as it as embedded HTML page inside the DOM. I guess, JavaScript loads the a new HTML page inside the page.
Even-though the XPath works in Chrome browser, when I put it in script and run, it throws an exception:
Exception in thread "main" org.openqa.selenium.NoSuchElementException: Unable to locate element: //*[text()='Continue'].
How to tackle this problem?
HTML DOM Sample:
<html class="UShellFullHeight">
<head>
<style id="antiClickjackStyle" type="text/css">
body {
display : none !important;
}
</style>
</head>
<body class="UiBody UShellFullHeight" role="application">
<div id="canvas" class="UShellFullHeight"></div>
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html id="home" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
.
.
.
<span id="WD8A-cnt" class="urNoUserSelect lsButton--contentlsControl--centeraligned urBtnCnt" style="pointer-events:none;">
<span class="lsButton__text " id="WD8A-caption" style="white-space:nowrap;">Continue</span>
</span>
</body>
</html>
</body>
</html>
try with tag:
//span[text()='Continue']
or
the best solution for this example is to use id, this element has id:
driver.findElement(By.id("WD8A-caption"));
Or this xpath which is the same
//span[#id='WD8A-caption']
Try with xpath by creating manually
Create Xpath Manually or
the element has id and also class name driver.findElement(By.className("lsButton__text "))
Thanks a lot for your time guys. I got the answer myself.
Answer is i need to switch the frame and do the operation on elements.
to switch frame.
driver.switchTo().frame("id");
I have some webapplications, written in Netbeans, using CSS.
When I run the file from Netbeans, all works fine. However, there seems to
be a difference when I acces the application from the browser !
this is a simple example :
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#border_top_and_bottom {
border-top-style: solid;
border-top-color: coral;
border-top-width: 0.5px;
border-bottom-style:solid;
border-bottom-color:coral;
border-bottom-width: 1.5px;
padding-bottom: 3px;
padding-top: 3px;
width :600px;
</style>
</head>
<body>
<div id="border_top_and_bottom">TODO write content</div>
</body>
</html>
and this is the result, when I acces the application from the web browser (IE):
as you can see, there is a border-line missing at the top.
This is one of the problems, features like a shadow on the box, or
creating tekst near a picture are not working eather.
this is very annoying for other users because I have never the same result !
(I hope my question is clear ?? )
make sure you are using the correct version of IE ... it worked fine on my IE11. the code looks fine
I'm currently doing a Scheduling module for our project, and to be able to achieve this, we are going to use DHTMLX Gantt. However, I cannot store the values that is entered into the gantt chart!
Here is my code for the chart
<!DOCTYPE html>
<html>
<head>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
<script src="codebase/dhtmlxgantt.js"></script>
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.load("events.php");
var dp = new dataProcessor("events.php");
dp.init(gantt);
</script>
</body>
</html>
and here is the code for the events.php
include ('codebase/connector/db_sqlite3.php');
include ('codebase/connector/gantt_connector.php');
$dbtype = "MySQL";
$res=mysql_connect("localhost", "root", "");
mysql_select_db("myfirstdb");
$gantt = new JSONGanttConnector($res, $dbtype);
$gantt->mix("open", 1);
$gantt->render_links("gantt_links", "id", "source,target,type");
$gantt->render_table("gantt_tasks","id",
"start_date,duration,text,progress,sortorder,parent");
?>
What seems to be the problem?
You php code seems ok. What happens when you try saving the event, can you check the server response? It may contain an error message.
Try also enabling logging for gantt connector so you could see an actual sql requests and their results
http://docs.dhtmlx.com/connector__php__errors.html
One other thing - make sure you've enabled auto increment for id column, otherwise connector will be unable to insert new records
i have a very simple layout where i have three icons in the right side of the HTML page and have hard coded the Heading in the middle.
I am giving the size of heading in percentage :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="images/upload.png">
<img src="images/render.png" class="menuc">
<div style="width: 100%;text-align: center;position: fixed;z-index: 100;background-color: #C2C2A3;height: 100%">
<span id="cannvasfilename" style= "position:fixed;left:40%; z-index: 100; color:#3C3C41; font-weight:bold; background:transparent;font-size: 200%;">Filename:Meshworks Test</span>
</div>
</body>
</html>
its a very simple page and u can see the layout using the link Test.
But when i am opening this HTML page in the browser , the icons shrinks and the heading also comes in small size.
So my question is that is there any way to set the size so that it automatically takes the page length and width and then set the size of the heading and the icons. ???
I am already giving the text size in percentage so i thought this will do the task. but no !
NOTE : you can check the link i have given. Its just a sample so don't see the alignments. Only the size variance is a issue.
It will come properly in your browser but try and open the link in your mobile phone browser. That is the issue !
What simple change i can do in the code to solve this problem ?
Okay, I'll answer my own question and close this question.
I used HTML meta tag in the head and the issue is solved.
<meta name="viewport" content="width=device-width, initial-scale=1">
It might help someone with the same problem!
How to handle hover on different element and change the images of different element by css only
For example, imagine that the image is use as background in "i", that we need to change to image when we mouse over on "div" on hover. And the element structure is ..
div
i
div
i want to do this purely in css and not in jQuery and js....
try this
div:hover i{
background:url(imageURL);
}
<style>
i {
background:url(1.png) no-repeat;
}
div:hover i
{background:url(2.png) no-repeat;
}
</style>
<body>
<div>
<i>
</div>
</body>
Okay, No issue. Your problem will be solved as with CSS and HTML code..
Follow the following code
CSS and HTML Code here -
<html>
<title></title>
<style>
#div_background{
background-image:url('imgname.extension');
height:xyz;
width:xyz;
}
#div_background:hover{
background-image:url('imgname.extension');
height:xyz;
width:xyz;
}
</style>
<body>
<div id="div_background"></div>
</body>
</html>
you can edit this code according to your structure
It is 100% working code.. After checking it in ur system please select this post as answer...