Is it possible to us a display:block for and input submit? or do I have to create an image for the submit button?
<div class="signin_btn">
<a title="Current Members Sign-In" class="l_helpl" href="/">SIGN-IN</a>
</div>
You can even do this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<style type="text/css">
.button
{
width: 100px;
height: 200px;
background-color: Red;
cursor: pointer;
display: block;
</style>
<div>
</div>
</body>
</html>
<a title="Current Members Sign-In" class="l_helpl" href="/">
<span class="signin_btn">
SIGN-IN
</span>
</a>
This should do the trick. And of course change your styling to suit the changes.
I think it is stupid for a person having more than 500 reps to ask this question. Anyway here is how I would do it
<div class="signin_btn">
<a title="Current Members Sign-In" class="l_helpl" href="/" style="display:block;">SIGN-IN</a>
</div>
But please be remembered that it is a bad practice to have a block level element inside an inline element.
Related
HTML
<div class="div1">
<ul class="dropdown">
<li>example</li>
</ul>
<div>
CSS
.dropdown{
visibility: hidden
}
.div1:focus .dropdown{
visibility: visible
}
I'm trying to make click event in css using focus without jquery and I need it when I am clicking on div1 it will hide a dropdown ul.
Is there any way to do that?
You can't do that with "focus", but you may do that with "active". Active is accepted by most browsers as the "click" event (i.e. while you click on an element it is active).
Check the code below. I have just tested with Chrome and it works as you intended. Also tested with Internet Explorer; it "sort-of" works with this too (the second selector is specifically for IE).
Hope this helps you out. Good luck!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
.div1 {
border: 1px solid green;
}
.div1:active .dropdown {
display: none;
}
.dropdown:active {
display: none;
}
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
test
<ul class="dropdown">
<li>example</li>
</ul>
<div>
</body>
</html>
What about using javascript
<div id="div1">
<ul class="dropdown" id="ul1">
<li>example</li>
</ul>
<div>
<style>
.hidden {
visibility: hidden;
}
</style>
<script>
document.getElementById('div1').onclick=function(){
var element = document.getElementById("ul1");
element.classList.add("hidden");
};
</script>
JSFiddle: http://jsfiddle.net/4Ls0ygp3/
I have the following html code in my page:
<a class="fancybox" href="best-price.php">
<div id="bestprice">
</div><!--visitorinfo-->
</a>
At the validator I have the following message:
<div id="bestprice">
The mentioned element is not allowed to appear in the context in which
you've placed it; the other mentioned elements are the only ones that
are both allowed there and can contain the element mentioned. This
might mean that you need a containing element, or possibly that you've
forgotten to close a previous element.
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
Any ideas?
You can't put a <div> tag inside of an <a> tag for doctypes prior to HTML5. But you could do something like this.
<a class="fancybox" href="best-price.php">
<span id="bestprice">
</span>
</a>
4.01 transitional: http://validator.w3.org/#validate_by_input
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<head>
<title>test</title>
</head>
<body>
<a class="fancybox" href="best-price.php">
<span id="bestprice">
</span>
</a>
</body>
</html>
HTML5: http://validator.w3.org/#validate_by_input
<!DOCTYPE html>
<head>
<title>test</title>
</head>
<body>
<a class="fancybox" href="best-price.php">
<span id="bestprice">
</span>
</a>
</body>
</html>
Note: As Rob mentioned in the comments. This,
<a class="fancybox" href="best-price.php">
<div id="bestprice">
</div>
</a>
Will validate in HTML5, but not in the older doctypes.
Use <span> to replace <div>
<a class="fancybox" href="best-price.php">
<span id="bestprice">
blabla
</span><!--visitorinfo-->
</a>
And add CSS, to make it acts like a block element:
#bestprice {
display: block;
}
Here's my code. I'm trying to add an image called lg.png into the HTML and be able to edit the length/width in the css file. The lg.png is located in the same folder as the index.html and styles.css
Tried looking online for this answer but can't seem to get any luck.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>yournetid</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<img id="my_image" src="lg.png" alt="image error"/>
<body>
<p>
Here's some awesome pictures!
</p>
</body>
CSS:
body {
}
img#lg background:url(lg.png);
width:200px;
height:100px;
You are trying to use CSS selector img#lg which makes no sense. You are telling CSS to look for an image with id of 'lg' but you did not set any id to your image.
Also, setting the background-image:ur(lg.png) is not the same as <img src='lg.png'>.
To fix it:
Add id to your image
Target the id in your CSS.
Change your HTML:
<img id="my_image" src="lg.png" alt="image error">
CSS:
#my_image {width:200px; height:100px; }
If you wanted to change CSS properties of ALL images, you'd use the following:
img {width:200px; height:100px; }
Hope this helps!
Use a div and set the background property:
HTML:
<div class="my_image"></div>
CSS:
.my_image
{
background:URL('path/to/img.png');
width:100px;
height:100px;
}
So this is probably a very minor adjustment that needs to be made to the HTML/CSS code but here is the issue I've been facing. My code for a general HTML page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="sites/css/style.css" rel="stylesheet" type="text/css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="main_content">
</div>
<div class="footer">Copyright © 2012-2013.</div>
</div>
</body>
</html>
The CSS for the .wrapper class is as follows:
.wrapper {
border: 1px solid #ddd;
margin-left: auto;
margin-right: auto;
width: 980px;
}
I finding that when I put content into any of the other DIVs that go on the page especially when using either float: left; or float: right; the border for the wrapper does not continue on down the page unless I use a class called:
.clearer {
clear: both;
}
and put a DIV:
<div class="clearer"></div>
at the bottom of every DIV that is floated. Is there something I'm not doing correctly here or is this a common issue?
Any help or advice appreciated!
Thanks!
Dave.
This is a common issue, which you can usually fix by adding overflow: auto to the #wrapper. If that doesn't work, your clearer solution is another often-used alternative.
First off I do not consider myself to be anything more than a hack at HTML/CSS. With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not. I would like the help topics to move from topic to topic without a scroll bar.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
<div class="leftnav"><p>Something</p></div>
<div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
<div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>
Setup.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
<p>Get Help #2
<a href="Help.html#help2" target="help">
<img src="helpicon16.png" alt="help2" class="help_icon"/>
</a>
</p>
<p>Get Help #3
<a href="Help.html#help3" target="help">
<img src="helpicon16.png" alt="help3" class="help_icon"/>
</a>
</p>
</div>
</body>
</html>
and the css
#charset "UTF-8";
.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}
.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}
.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}
iframe.help {
overflow : hidden;
}
div.spacer {
height: 1000px;
}
Any help would be greatly appreciated
I suppose adding the Help.html might make this easier to replicate
Help.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
remove :
scrolling="no"
and it works for Chrome 21 on windows.
Edit
Still remove the scrolling="no" but change the html code for Help.html to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
See here: testing.dpwebdev.co.uk/stackoverflow/anchors