I am trying to mount an image in the middle of another (slightly larger) image so that it appears to be within the larger image (a phone in this case). I am unsure of the proper way to make this happen and any help is much appreciated!
You need to set the z-index css property.
HTML:
<img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />
CSS:
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
/*
set top and left here
*/
z-index:1;
}
Here's a demo: http://jsfiddle.net/AlienWebguy/6VSBv/
<img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">
Of course, you will need to adjust the coordinates, and I would highly recommend putting the CSS in a stylesheet instead of inline. Here's a pretty good tutorial on CSS for more information: http://www.csstutorial.net/
So you are new to html and CSS. That's no problem, but your question is a little bit vague for SO's general format.
However, in a nutshell:
<style>
#phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;}
#display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;}
</style>
<div id="phone">
<div id="display">
Hello! What is up? Miley rocks!
</div>
</div>
Live example: http://jsfiddle.net/cbn4L/
This of course is a extremely simple example. And as you can see the inner container is not a image, but text.. Technically you can add there a image now.. but as we are easing you in to the world of HTML & CSS, then this is a better example and maybe can enhance your concept :)
Related
I tried to make an clipping mask on css but I think I'm on a wrong track. Here is the image that im trying to convert to html..
now that I tried it on my end, it looks like a mess:
CSS:
.img_nav_individual {
float: left;
border: 3px solid #fff;
margin-left: 8px;
outline: 1px solid #c1cacf;
max-width: 96px;
}
.img_nav_individual img { clip: rect(10px, 290px, 190px, 10px); }
HTML:
<div class="img_nav_individual"> <img src="img/parents1.png" />
<div class="image_nav_text"> <span>parents</span> </div>
</div>
Suggestions are very much appreciated. Thanks!
You should use overflow:hidden; attribute on img_nav_individual. That will help here is your example : http://jsfiddle.net/6wPvW/
Either use overflow:hidden; on the outer element or set the image as a background image to achieve what you are after.
If you want to use clip, then the image needs to have position: absolute or position: fixed properties to work.
I believe after looking both the images that we need to do this
<div class="img_nav_individual">
<img src="img/parents1.png" align="right" />
<div class="image_nav_text">
<span>parents</span> </div>
</div>
If you notice I have added align="right" to img tag
I know I should focus on code/technical. But I have a opinion, that why you not try crop these images before use it on html page? I think this way is simple and fast to go ahead!
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">
I try to display a span when the cursor of the mouse is on a help icon.
It works, but nevertheless, I don't manage to remove the border around the icon.
My CSS :
.info{
position:absolute;
border:none;
}
a.info{
position:absolute;
z-index:24;
background:none;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color:#FFF;
cursor:help;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
cursor:help;
bottom:0px;
left:26px;
width:150px;
padding:4px;
}
cd
Another thing - remember that if you have an with an empty src attribute, then none of these suggestions will work, a border will still get shown.
<img src="" style="width:30px;height:30px;">
Try this:
img{border:0;}
You can also limitate the scope and only remove border on some images by doing so:
.myClass img{border:0;}
More information about the border css property can by found here.
Edit: Changed border from 0px to 0. As explained in comments, px is redundant for a unit of 0.
img need src to use border is remover, i no know a why css is crazy
data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
So try example with SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">
So try example without SRC:
img.logo {
width: 200px;
height: 50px;
background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}
<img class="logo">
lol... css crazy! good fun
it's a good idea to use a reset CSS.
add this at the top of your CSS file
img, a {border:none, outline: none;}
hope this helps
<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I faced similar problem with img tag
I had added following line with img tag.
<img class="my-class">
And this is the css class
.my-class{
background-image: url('add.gif');
background-repeat: no-repeat;
display: inline-block;
width: 27px;
height: 27px;
}
I changed the img tag to span tag with same css class. Border is not visible now.
<span class="my-class"></span>
Use:
div {
background: url()
}
instead of <img>.
There is no borders in the div with background image.
maybe add border:none to under a.info:hover span or text-decoration:none
I realize this is a very old post, but I encountered a similar issue in which my displayed image always had a border around it. I was trying to fill the browser window with a single image. Adding styles like border:none; did not remove the border and neither did margin:0; or padding:0; or any combination of the three.
However, adding position:absolute;top:0;left:0; fixed the problem.
The original post above has position:absolute; but does not have top:0;left:0; and this was adding a default border on my page.
To illustrate the solution, this has a white border (to be precise, it has a top and left offset):
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">
This does not have a border:
<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">
Hopefully this helps someone finding this post looking to resolve a similar problem.
img {
text-indent: -20000px; /*some large value*/
}
did the trick for me (for Chrome). This will remove the alt icon as well, something to note.
What class do you have on the image tag?
Try this
<img src="/images/myimage.jpg" style="border:none;" alt="my image" />
Here's how I got rid of mine:
.main .row .thumbnail {
display: inline-block;
border: 0px;
background-color: transparent;
}
Thank for the answers,
The border is removed for Internet Explorer, but this there for Firefox.
So, I added this class to the img:
.clearBorder{border:none;}
And it worked!
Also, in your html, remember to delete all blanks / line feeds / tabs between the closing tag and the opening tag.
<img src='a.png' /> <img src='b.png' /> will always display a space between the images even if the border attribute is set to 0, whereas <img src='a.png' /><img src='b.png' /> will not.
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
if image dont have src or image url is not returning image, border will be there, so you have to set a empty but valid image , here is a example which will load a default image on image loading error
<img style="border:0;outline:none" width="200" height="200"
src="this-image-dont-exists.png"
data-default="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=="
onerror="if(!this.src != this.dataset.default) this.src=this.dataset.default" />
I do believe you need to add the border: none style to your icon element as well.
I usually use this on the top of css file.
img {
border: none;
}
Try this
<img width="30" height="30"/>
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});