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;
}
Related
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing including adding display: block to the CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Home Page</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>
<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>
</body>
</html>
This is the only things I have in my css file:
body {
margin: 0 auto;
}
.logo {
max-width: 200px;
max-height: 200px;
}
.button {
border: 3px solid green;
}
sir here is final answer
sir you had given the class logo to the not to the img
so you have add class to the img not to the
if css you have just do this
<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">
here is css
.logo img {
max-width:20px;
}
this will work
There are few region behind it
for example
you didn't link the css file with html file.
size of your logo may be smaller then max-size
but as solution i would suggest you to use the css in the img for the temporary solution
like this
try to change with this
<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">
also by using the
body{
background-color:red;
}
you can check that your css file is linked or not
also check the console errors
OK so I have been having issues getting sprites to work on my website, so I decided to rewrite the w3 sprite tutorial from scratch to see what I was doing wrong. Here is the code I wrote:
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="img_navsprites.gif" alt="">
<img src="img_trans.gif" alt="" id="home"><br><br>
<img src="img_trans.gif" alt="" id="next">
</body>
</html>
style.css
#home{
width:46px;
height:44px;
background: url(img_navsprites.gif) 0 0;
}
#next{
width:43px;
height:44px;
background: url(img_navsprites.gif) -91px 0;
}
When I open this in Chrome the first image shows up but not the separate images. I have no idea what I have done wrong, by every account this code should work.
If you will look closely to example on W3 then you will see that you need "img_trans.gif" to be proper img file as well. It is just one pixel image in their example.
IMG element displays 'alt' attribute, which is empty in your code, when your 'src' is incorrect.
In my code class "slides" is working through external css link but class header is working through inline css only.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="slides">
<div class="header" style="width:100%; background-color:#630;"><img src="gz1.gif">
</div>
</div>
</body>
</html>
style.css
head,body{background-color:#CCC; margin:0; padding:0;;}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{position:fixed;}
I want to work class "header" code from external link instead of inline code...
To avoid inline css in your code, update your html and css like below:
Here we will remove inline styling from header div..
<div class="header"><img src="gz1.gif"></div>
And we will add the inline style of header div in the style.css like so...
head,body{
background-color:#CCC;
margin:0;
padding:0;
}
.slides{
overflow:hidden;
background:-moz-linear-gradient(bottom,red,white);
background:-ms-linear-gradient(bottom,red,white);
background:-o-linear-gradient(bottom,red,white);
background:-webkit-linear-gradient(bottom,red,white);
background:linear-gradient(bottom,red,white);
}
.header{
position:fixed;
width:100%;
background-color:#630;
}
I have a div centered on my page (width and height set, margin:auto). I am then adding images into it, and each image launches its own Shadowbox. However, there are two problems:
The shadowbox - while taking up the entire screen - is offset to the right side of the page. How do I get it back to center as if there was no div?
Each successive time I open a shadowbox on any given image (either all the same image or different image on each open), the shadowbox gets smaller. I didn't have this problem until I put the images inside the div.
You can see it in action here.
When I run it using the available Firefox consoles, I see a lot of warnings about fetching the height and width (presumably of the image). That partially explains the problems, but I'm not sure of the solution.
Source:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
<div id="pageDiv" style="background-color:#FFFFFF">
<img src="http://www.sport2play.com/baseball/pics/1.jpg" width="100px"/>
</div>
</body>
</html>
For what it's worth, the CSS:
#font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
body{
font-family:"Officina";
background-color:#AAAAAA;
}
img{
box-shadow: 3px 3px 7px #777;
background-color:#FFFFFF;
}
canvas{
background-color:#FFFFFF;
}
div{
width:500;
height:647;
margin:auto;
}
Thoughts on how to fix these two problems?
You need to use doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
It solves your 1st problem.
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>