I created a <div> element and I'm going to use below css style withing the <div> element.
#girls {
background-image: url("girl.gif");
}
Here is my HTML <div> element (This element contains in index.html page):
<div id="girls">
<p>
<b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
experience every time you visit. Whether you're just stopping by to check in on email over an elixir,
or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</div>
But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?
Try this:
#girls {
background-image: url("../girl.gif");
}
I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../
<!DOCTYPE html>
<html>
<head>
<title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
background-image: url('demo.gif');
height: 200px;
width: 50%;
}
</style>
<body>
<div id="girls">Sample Text
</div>
</body>
</html>
If you are using external CSS then Change your directory path of the image & try again.
else Inline Stlying go with the sample code
image link
https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif
Related
Here is the full code:
https://www.w3schools.com/code/tryit.asp?filename=FVPUZUO2Z6YQ
For some reason, my link is hidden only when I'm using sponsor-link class. Every other class is okay, even if other classes are identical, like button-link class:
<html>
<head>
<style>
.button-link {
}
.sponsor-link {
}
</style>
</head>
<body>
<a href="aaaa" class="sponsor-link">
11111
</a>
</body>
</html>
How is it making any sense? What is the actual problem with the class name sponsor-link?
This is due to Ad Block being enabled. Pause it on the page you're working on and then you'll see that sponsor-link style will work. But of course, your best bet is to change the name of that style.
i use body background image different page different background image
Example
<body class="home">
<body class="contact">
but w3 validator error:
"Start tag body seen but an element of the same type was already open." , "Cannot recover after last error. Any further errors will be ignored."
i can use with Jquery
<script>
$('body').addClass("home");
</script>
<script>
$('body').addClass("contact");
</script>
But i want use Html Css no Jquery please help me
All right, you open one element body and then want to open another. One html page must contain one body element. It's a standart.
You are wanting a different background image for EACH page home.html, and contact.html.
home should look like this.
<body class="home">
contact
<body class="contact">
then put the appropriate css with each for different backgrounds
I hope this isn't too vague of a question, but I feel like I'm running into a brick wall, so I'd really appreciate any and all feedback.
In a nutshell, what I'm trying to do is create a simple webpage, wherein the content is maintained by someone else (who has very little coding knowledge). My thought was to set up a page with a big frame in the middle, and to have tabs up top that would change the content in the frame. (This way, the person who maintains the page will only need to worry about the individual pages that are displayed in the frame; they'll never have to make changes to the main webpage itself.) So far, I've gotten this to mostly work pretty well.
The problem I'm having is with the height of the frame. More accurately, I'm having a problem with the div it's inside of. I'd like it to be adjustable - based on the height of the content it's pulling in - but I can only seem to set the height manually. The reason I want it adjustable is because the content it's pulling in for each tab is going to vary.
Thank you in advance for any suggestions you may have... even if it's to tell me to try another solution altogether. My main goal here is to create something that can be maintained by someone who doesn't really know any html. I figured using a frame would be perfect, since they could update that piece in Word, but there may be some other method I'm not thinking of. I'm open to all suggestions.
*edit: Here's some sample code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Indexfiles\style.css" />
</head>
<body>
<div id="wrapper" style="text-align: center;">
<div id="menubar" style="display: inline-block;text-align: center;">
<a href="Indexfiles/iframe1.htm" target="Mainframe"><div id="tab"><h6>Tab 1
</h6></div></a><a href="Indexfiles/iframe2.htm" target="Mainframe"><div id="tab"><h6>Tab 2
</h6></div></a><a href="Indexfiles/iframe3.htm" target="Mainframe"><div id="tab"><h6>Tab 3
</h6></div></a><a href="Indexfiles/iframe4.htm" target="Mainframe"><div id="tab"><h6>Tab 4
</h6></div></a><a href="Indexfiles/iframe5.htm" target="Mainframe"><div id="tab"><h6>Tab 5
</h6></div></a><a href="Indexfiles/iframe6.htm" target="Mainframe"><div id="tab"><h6>Tab 6
</h6></div></a>
</div><br />
<div id="maincontent">
<iframe src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
</div>
</body>
</html>
If you use iframe you can dynamically adjust the size of the iframe to fit the content using javascript as follows:
var iframe = document.getElementById(iFrameId);
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
Edit:
You can try to see if this will work:
<script>
function resizeIFrame() {
var iframe = document.getElementById("MainFrame");
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
}
</script>
<div id="maincontent">
<iframe id="MainFrame" onload="resizeIFrame();" src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
This is what my iframe*.htm files looks like as an example:
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
float:left;
border:1px solid rgb(200,200,200);
}
</style>
</head>
<body>
<div style="float:left; width:160px; height:500px;">Frame</div>
</body>
</html>
Important: when testing this you must run these files through a web server and have the files in the same domain otherwise your browser will block the request due to security issues.
If you have Chrome installed you will see the following error message when you view the javascript console:
As long as the div has an id, it's height can be updated in an included css file.
your_page.html:
<link rel="stylesheet" href="your_style.css" />
<div id="your_frame">
[Frame Contents]
</div>
your_style.css:
#your_frame{
height: 40px // Just tell your developers to change this number (they'll never have to open the html file). Also, if you have google chrome, you can fiddle with this number in the Developer tools.
}
Depending on the scenario, you can use javascript to set the height more intelligently.
EDIT:
Here's an approach that requires even less maintenance:
The div inside of your html page:
<div id="your_frame">
<div id="your_contents">
Contents Go Here
<br>
<br> More Contents
<br> Even more contents
</div>
</div>
The css:
#your_frame{
border-style:solid; # <-- using a solid border so you can play with these code chunks in JSfiddle.net
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
}
#your_contents {
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
margin-top:10px; # <-- I think what you're really after is the margin adjustments
margin-bottom:10px;
margin-left:10px;
}
By default a div will automatically extend to the height of its parent container. Changes in this behavior often relate the the position property of its children. For instance if all of a divs children are absolutely positioned the height of the div will be at its default height. I don't have an example of what you are doing so I can only guess at the cause of your issue.
Alternatively, if you are open to alternatives. The scenario that you present is typically solved by the use of Content Management Systems. You would just need to customize the look and feel for your purposes.
http://en.wikipedia.org/wiki/Web_content_management_system
I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>
I need to display the following div’s as it is on the screen according to the HTML, but when I print the Claimant Name, Case Info, Contacts, Files should print on 1st page and Claimant Name, Service should print on 2nd page.
Can someone please show me a way to solve it using CSS?
<body>
<div>Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
<div>Service</div>
</body>
You cannot guarantee how HTML is printed - it simply isn't possible. If you need to guarantee how a document will print you'll need to create something like a PDF using iTextSharp or similar
Same answer I posted at CSS Creator:
DIV doesn't lend any semantic meaning so there's most definitely a better way to mark it up. It does involve adding a second name field but I don't see that as any sort of problem.
<!DOCTYPE html>
<html>
<head>
<title>Le documents judiciaires</title>
<style type="text/css" media="screen">
#secondPage .name {
display: none;
}
</style>
<style title="text/css" media="print">
#secondPage {
page-break-before: always;
}
</style>
</head>
<body>
<div id="firstPage">
<div class="name">Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
</div>
<div id="secondPage">
<div class="name">Claimant Name</div>
<div>Service</div>
</div>
</body>
</html>
You can use CSS to show and hide various elements on a monitor display and a printed version. for instance, you could have Claimant Name on the document twice, but the second one is hidden on the screen. It could be visible when printed.
However, you can't control paging when a web page is printed. You may want to consider a pdf or other printed document format for that. HTML is much more oriented towards browser display than paper printout.
With the page break properties (browser support is variable). Make sure that your stylesheet applies to print media.