Displaying canvas in the same line - html

What i am trying to do here is to display several canvas in the same line. I have try display inline but it's not working. It's still display one per line.
<div>
<p>Camera</p>
<canvas class='camera' width='50' height='50'>
</div>
<div>
<p>Multimedia</p>
<canvas class='multimedia' width='50' height='50'>
</div>
This is what i have include in the style tag
<style>
.canvas{
display:inline-block;}
</style>

Remove the period in front of the CSS selector.
Should read canvas { not .canvas {
The latter select a class, whereas the former selects the actual tag.
Also, give the <div> and <p> tags a style of inline or inline-block as well. By default they are block elements.

You can do something like this
div {
display:inline-block;
}
Fiddle

Related

Can a pseudo element content be used to call an ID or a class?

Let's say I have an html element with an ID and another <div> element with a pseudo class like :before. Can I call the first element to the second one with the content attribute of a ":before" so that in the end there would be multiple cases of the first element on the page? Is this possible with just the CSS pseudo element?
HTML
<html>
<body>
<div>
<p id="boo">Hello</p>
</div>
<div id="baa"></div>
</body>
</html>
CSS
#baa:after
{content: "#boo";}
Result on the page
Hello
Hello
For the record, what you want is possible, but only in Firefox, using the -moz-element CSS function. See https://developer.mozilla.org/en-US/docs/Web/CSS/element
#baa::after {
display: block;
height: 2em;
background: -moz-element(#boo) no-repeat;
content: '';
}
<div>
<p id="boo">Hello</p>
</div>
<div id="baa"></div>
Since this only works in Firefox, I can't really recommend it. Use other methods instead.

HTML/CSS Remove Border (or Outline) from Image loaded in SPAN with CSS

I need to remove border/outline ( I don't know what exactly is ) from an image loaded in Span using CSS.
This is the HTML code:
<div>
<span class="BG"><img class="EU"></span>
</div>
And this is the CSS:
.BG{
background-color: #017b5b!important;
display:block;
}
.EU{
background-image: url('http://bet.dn1.it/images/broker.png');
background-position: -190px -362px;
width: 189px;
height: 50px;
display:block;
margin:0 auto;
}
You can find the example here: JsFiddle
Thank you very much to support.
Ciao
Since you are using background-image, change the html element.
You can use a span for example.
JSFIDDLE
https://jsfiddle.net/3vwjc26t/
<div>
<span class="BG"><span class="EU"></span></span>
</div>
You dont need an img tag for this. Just use a div.
<div>
<span class="BG"><div class="EU"></div></span>
</div>
This is because you are using a <img> element without a src attribute, since you are using CSS to add it as background-image you should switch to a different element type like a <span> or <div>.
Like so:
<div>
<span class="BG"><span class="EU"></span></span>
</div>
Edited Fiddle
So there are two things that you can do.
1. If you must use the <img> tag you can create a blank.gif (1px x 1px) transparent image and set the source to blank.gif <img src="blank.gif" class="EU">
2. As everyone else has said you can just change your <img> tag to a <span> or <div>
The default behavior of an <img> tag that does not reference an image or a valid image is to set a border around it. There does not seem to be a way to remove this border.

Div link and hover does not work

I am building new website and I've run into a little problem.
When I added next to my div and after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.
Here is HTML code:
<div id="centerbox">
<div class="profile"></div>
<a style="display:block" href="about.php"><div class="about"></div></a>
</div>
</div>
And here is CSS Code
#centerbox {
width:988px;
height:462px;
margin-top:8.7%;
margin-right:auto;
margin-left:auto;
}
.about {
width: 150px;
height: 150px;
display: block;
margin-left:15.8%;
margin-top:-150px;
background:url(/images/about1.png);
background-repeat:no-repeat;
}
This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.
When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.
If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.
See this post for further clarification
Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)
I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">
You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class

a href link for entire div in HTML/CSS

Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>

IE6 anchor wordwrapping (display:block, width:0)

Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>