Jump to content

Change size of image of button?

eduard

By eduard
in HTML/XHTML

Recommended Posts

thescientist w3schools Guru

thescientist

Posted
Posted

best practice is to give it an ID or class and define the style properties in an external stylesheet.

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
best practice is to give it an ID or class and define the style properties in an external stylesheet.
Ok. thanks!
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
best practice is to give it an ID or class and define the style properties in an external stylesheet.
I don´t understand it!This I have now:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div id=header><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer</h4></b></a><a href="versions/english/image_and_text_database.html"><b><h4>English</h4></b></a></div><div id=link4><a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF"></a></div><div id="content"><img src="http://www.aquaculture.ugent.be/_img/database.jpg" id="dbimg" alt="img database"align="middle" width="320" height="256"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="320" height="256"></div><div id="footer"><p><h4>Eduard Lid</h4></p></div></HTML>*{margin:0px;padding:0px;}#header{border-style:solid;border-width:5px;border-color:#808080;content:100%;background-color:#6495ED;height:12em;}a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:120px;height:20%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;#link4{border-bottom-style:solid;text-decoration:none;display:block;background-color:#A9A9A9;width:120px;height:20%;padding:2px;}#content{height:16em;background-color:#EOFFFF;}#footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;height:14em;font-family:Arial,Helvetica,sans-serif;line-height:90%;text-align:center;font-size:40px;color:#000000;}
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted

This I got so far:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div id=header><a href="http://www.viadeo.com/es/profile/eduard.lid"><b><h4>Profile</h4></b></a><a href="web_designer/image_and_text_database.html"><b><h4>Web designer</h4></b></a></div><div id=2><a href="versions/english/image_and_text_database.html"><b><h4>English</h4></b></a><a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF"></a></div><div id="content"><img src="http://www.aquaculture.ugent.be/_img/database.jpg" id="dbimg" alt="img database"align="middle" width="320" height="256"><img src="images/me.JPG" alt="Eduard Lid" align="right" width="320" height="256"></div><div id="footer"><p><h4>Eduard Lid</h4></p></div></HTML>*{margin:0px;padding:0px;}#header{border-style:solid;border-width:0px;border-color:#808080;content:100%;background-color:#6495ED;height:6em;}a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:120px;height:20%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}#div2{border-style:solid;border-width:5px;border-color:#808080;content:100%;background-color:#6495ED;height:6em;}#content{height:16em;background-color:#EOFFFF;}#footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;height:14em;font-family:Arial,Helvetica,sans-serif;line-height:90%;text-align:center;font-size:40px;color:#000000;}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

can you at least explain your problem when you post the code? geez..anyway.. First, some of your id's aren't quoted. they should be in quotes. And you shoulnd't start ID/class names with a number. (in the CSS or HTML)

<div id=header><div id=2>

Also, I don't know what is so hard to understand about matching names in a style sheet with id's/classes in an HTML document.

#div2{border-style:solid;border-width:5px;border-color:#808080;content:100%;background-color:#6495ED;height:6em;}

has no corresponding ID in the HTML document. It's pretty darn simple, the names need to match.As far your original inquiry about resizing a button or image, I'm still not sure what the issue is. You just keep splattering code all over the place without telling us what the problem is or what you are seeing, and without any context, like telling us what you want to happen instead. As far as I can tell, there's nothing in your code that is targeting an image or a button. So what exactly are you trying to do?

Link to comment
Share on other sites
ste Member

ste

Posted
Posted

Is this the image you are referring to?

<img src="http://www.aquaculture.ugent.be/_img/database.jpg" id="dbimg" alt="img database"align="middle" width="320" height="256">
I can see you are sizing it down from it's original size in your html i.e. (width="320" height="256") Bear in mind the aspect ratio when you increase these.
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
can you at least explain your problem when you post the code? geez..anyway.. First, some of your id's aren't quoted. they should be in quotes. And you shoulnd't start ID/class names with a number. (in the CSS or HTML)
<div id=header><div id=2>

Also, I don't know what is so hard to understand about matching names in a style sheet with id's/classes in an HTML document.

#div2{border-style:solid;border-width:5px;border-color:#808080;content:100%;background-color:#6495ED;height:6em;}

has no corresponding ID in the HTML document. It's pretty darn simple, the names need to match.As far your original inquiry about resizing a button or image, I'm still not sure what the issue is. You just keep splattering code all over the place without telling us what the problem is or what you are seeing, and without any context, like telling us what you want to happen instead. As far as I can tell, there's nothing in your code that is targeting an image or a button. So what exactly are you trying to do?

If I refer to the homepage of my website (www.eduardlid.com)! Do you understand it then?
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Is this the image you are referring to?I can see you are sizing it down from it's original size in your html i.e. (width="320" height="256") Bear in mind the aspect ratio when you increase these.
No, it isn´t! (the Spanish flag)
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
If I refer to the homepage of my website (www.eduardlid.com)! Do you understand it then?
how about you just tell us exactly what the problem is, OR what element is having a problem, what you are trying to do, and what you want it do. why are we trying to guess? Just tell us. Be specific. Use details. I know this is not the first time we've asked for more clarity in your posts.edit:as the above post demonstrates, we can't read your mind. You should have just said something like "I'm trying to resize the spanish flag on my page, but it's not working. I want it to do {.....}. This is the code I've tried, but adding the dimensions to the {name of element} isn't working".If you had just done that, wouldn't be 10 posts deep just to find out you were talking about the spanish flag image.So, what are you trying to do? You have no styles on that image. What have you tried to do to change it? What exactly do you want done to it?
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
how about you just tell us exactly what the problem is, OR what element is having a problem, what you are trying to do, and what you want it do. why are we trying to guess? Just tell us. Be specific. Use details. I know this is not the first time we've asked for more clarity in your posts.edit:as the above post demonstrates, we can't read your mind. You should have just said something like "I'm trying to resize the spanish flag on my page, but it's not working. I want it to do {.....}. This is the code I've tried, but adding the dimensions to the {name of element} isn't working".If you had just done that, wouldn't be 10 posts deep just to find out you were talking about the spanish flag image.So, what are you trying to do? You have no styles on that image. What have you tried to do to change it? What exactly do you want done to it?
But isn´t the question obvious? Button 4 must have (obvious) the same size as button 1/3 (4 is an image!)
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
But isn´t the question obvious? Button 4 must have (obvious) the same size as button 1/3 (4 is an image!)
No, the question is not obvious. How are we supposed to know what you want your site to look like?Anyway,If you want to resize the image then do what scientist told you to do some ~10 posts ago. Give the image an id and set the dimensions in your CSS. You should know how to do that by now.......
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
But isn´t the question obvious? Button 4 must have (obvious) the same size as button 1/3 (4 is an image!)
the only question you asked was in the title
Change size of image of button?
first off there are no buttons in your HTML, and secondly there is more than one image. What part of that question specifies the spanish flag image, or that you are trying to target something you are self-referencing as image #4?
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

and just so you know, since images are inline elements, they won't take height or width styles natively. You could either make it the background image of a div element and then apply your styles to the div, or give the image a display property, probably to inline-block and then set height and width.

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
and just so you know, since images are inline elements, they won't take height or width styles natively. You could either make it the background image of a div element and then apply your styles to the div, or give the image a display property, probably to inline-block and then set height and width.
Actually, I think they are inline-block by default, so they will accept height/width styles. (EDIT: Tested and verified...)
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
and just so you know, since images are inline elements, they won't take height or width styles natively. You could either make it the background image of a div element and then apply your styles to the div, or give the image a display property, probably to inline-block and then set height and width.
Ok, thanks teacher!
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
No, the question is not obvious. How are we supposed to know what you want your site to look like?Anyway,If you want to resize the image then do what scientist told you to do some ~10 posts ago. Give the image an id and set the dimensions in your CSS. You should know how to do that by now.......
Thanks!
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Actually, I think they are inline-block by default, so they will accept height/width styles. (EDIT: Tested and verified...)
Sorry, but this reply I don´t understand! Do you mean what I supposed to be buttons are inline-blocks?
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Sorry, but this reply I don´t understand!
:) Really?It was in response to scientist's post saying you needed to change the display of the images to get them to accept height/width changes. You don't actually need to do anything with them. Simply putting a width/height on the image (without changing display) will change their width and/or height.
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
and just so you know, since images are inline elements, they won't take height or width styles natively. You could either make it the background image of a div element and then apply your styles to the div, or give the image a display property, probably to inline-block and then set height and width.
But it´s better to make buttons?
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

if you want an image, use an image. if you want a button, use a button. I have no idea what you want for your own site.

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
if you want an image, use an image. if you want a button, use a button. I have no idea what you want for your own site.
But you can have an image as button?
Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted

I don´t manage to get the size of the Spanish flag of my website smaller!a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:120px;height:20%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}*{margin:0px;padding:0px;}#header{border-style:solid;border-width:0px;border-color:#808080;content:100%;background-color:#6495ED;height:6em;}a:link,a:visited{border-bottom-style:solid;border-color:#808080;color:#6A5ACD;text-decoration:none;display:block;background-color:#A9A9A9;width:120px;height:20%;text-align:center;padding:2px;}a:hover,a:active{background-color:#000000;}#flags{border-style:solid;border-width:0px;border-color:#808080;content:100%;background-color:#6495ED;height:6em;}a:link,a:visited{text-decoration:none;display:block;width:60px;padding:2px;}a:hover,a:active{background-color:#000000;}#content{height:16em;background-color:#EOFFFF;}#footer{background-color:#6495ED;border-style:solid;border-color:#808080;border-width:5px;height:14em;font-family:Arial,Helvetica,sans-serif;line-height:90%;text-align:center;font-size:40px;color:#000000;}

Link to comment
Share on other sites
ste Member

ste

Posted
Posted

Is this the image you mean?

<a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF"></a>

Try just adding a width and height to it

<a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF" width="500" height="400"></a>

* It's not really ideal to set an image size in this way but hopefully this helps resolve the issue.

Link to comment
Share on other sites
eduard Devoted Member

eduard

Posted
  • Author
Posted
Is this the image you mean?
<a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF"></a>

Try just adding a width and height to it

<a href="versions/espanol/base_de_datos.html"><img src="http://www.enchantedlearning.com/europe/spain/flag/Flagbig.GIF" width="500" height="400"></a>

* It's not really ideal to set an image size in this way but hopefully this helps resolve the issue.

Yes, this is the image! But it´s better to set these properties in my CSS document? How? Someone has written to make a div in my HTML document! How?
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...