|
HTML - Graphics Sizing Question
Is there an HTML script that will automatically proportionately size a graphic?
Say you set the Height=100 then the Width=?? would be automatically adjusted depending on the actual size of the parent graphic. Similar TutorialsHow do I make this simple HTML/CSS page look the way I want? If you render this code in a browser, you will see what I'm trying to do. Thanks! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>Vertical Sizing Test Page</title> </head> <body style="margin: 0; background-color: #FFF; font-family: Verdana; font-size: 10pt;"> <div style="background-color: #FED; padding: 10px; height: 25px;"> Top Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> <div style="background-color: #DEF; padding: 10px; margin: 10px; border: 1px dotted black;"> <h2>Main Content Area</h2> I want this to vertically fill the remainder of the page.<br/> <br/> There should not be any unused space below the bottom banner.<br/> <br/> If there is a lot of dynamic content in this section, the user will need to scroll. However, if there isn't a lot of content, the user shouldn't have to scroll.<br/> <br/> This should also be vertically centered. </div> <div style="background-color: #FED; padding: 10px; height: 25px;"> Bottom Banner. I want this to be sized in pixels to accommodate raster backgrounds. </div> </body> </html> Can someone tell me how the graphics in these CSS pages would be created originally? Thanks http://www.templateworld.com/free_templates.html Hey guys, Another question Like this website, how do I use the images like they do, where they have 3 boxes on the homepage? I wanted to create something similar, but do not have a clue about the coding. Please do not say "add this code to this code" blah-dy-blah. As I won't understand a thing lol. If you have time, could you give me a basic table with curved edges. Even better, would be to create a table 250x380 which is a basic Blue colour? Cheers guys, Preemo I must be having a brain cramp, but I can't figure out why their little gaps between these header graphics. There are three of them should not be there. http://netresults.sk.ca/plans.php Any ideas why, would be much appreciated. Thanks Hi, Where can I find graphics to use on my page? ------ Regards, Pretty For a designer/programmer, which program is required or best to have? The book I am studying from is using Adobe Photoshop Elements 8 and I keep seeing "Dreamweaver" mentioned on the net so do I have to get both softwares to prepare for any jobs or only one or is there another? Which software or softwares would you guys recommend I get for the future to deal with these digital files processing please? I have two graphics in a cell. If I only put in the top one, everything is fine. Once I insert the bottom one in, a space to the right of the top one appears. I cant get rid of it. Anyone have any ideas? TIA Scott Hi, I'm new to this forum and this is my first post. I have a large GIF image (2000x1000px approx) which is an interactive map. Since most screen resolutions will be less than this, is there any way to get the image to display centred rather than the bottom right-hand corner? Ok so I'm not html savvy, but my companies programmer left us and now I have to pick up the slack, so I need some help! I have two graphics, one is an embedded .swf file for a flash banner, and the second is a jpeg image I want them both to line up on the same line like this but when I put the two codes next to each other in html, the second graphic goes to the next line below the first graphic. I tried to do an image style moving the second image a few pixels over to the right (relevant to the first) I'm so confused, if someone can help me code this, I would be very grateful here are the codes I'm working with: <div style="width: 608px; border: solid 1px;"><object width="608" height="158" data="http://milkshakekicks.com/images/homepageflash.swf" type="application/x-shockwave-flash"><param name="FlashVars" value="clickTAG=http%3A//www.milkshakenyc.com/kicks" /><param name="menu" value="false" /><param name="scale" value="exactfit" /><param name="AllowScriptAccess" value="always" /><param name="src" value="http://milkshakekicks.com/images/homepageflash.swf" /><param name="flashvars" value="clickTAG=http%3A//www.milkshakenyc.com/kicks" /></object></div> and <img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/fanny_site_ads.png" BORDER=1px /> ok, this might be very elementary but I can't figure out how to do this basically I built a block of square links that have a javascripted mouseover feature someone on here actually coded it for me (spyboy, thanks) the block of graphics gridded itself nicely, but I need to move the whole thing over to the right a few pixels (because I have major compulsiveness since I'm a designer) heres a screenshot of how it looks now as you maybe notice, the block of graphics are too much to the left, I need to center them. They only really need to move to the right probably 20 or so pixels heres the javascript code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function change(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>
</head>
<body>
<a href="http://www.sassnyc.com/contact"
onmouseover="change('friends', 'http://andrewsass.squarespace.com/storage/friends_on.png')"
onmouseout="change('friends', 'http://andrewsass.squarespace.com/storage/friends_off.png')">
<img src="http://andrewsass.squarespace.com/storage/friends_off.png" border="0" name="friends" />
</a>
<a href="http://www.massnerder.blogspot.com"
onmouseover="change('danielle', 'http://andrewsass.squarespace.com/storage/danielle_on.png')"
onmouseout="change('danielle', 'http://andrewsass.squarespace.com/storage/danielle_off.png')">
<img src="http://andrewsass.squarespace.com/storage/danielle_off.png" border="0" name="danielle" />
</a>
<a href="http://www.csaustodesign.com"
onmouseover="change('sausto', 'http://andrewsass.squarespace.com/storage/sausto_on.png')"
onmouseout="change('sausto', 'http://andrewsass.squarespace.com/storage/sausto_off.png')">
<img src="http://andrewsass.squarespace.com/storage/sausto_off.png" border="0" name="sausto" />
</a>
<a href="http://www.alexmoskowitzphotography.blogspot.com"
onmouseover="change('alex', 'http://andrewsass.squarespace.com/storage/alex_on.png')"
onmouseout="change('alex', 'http://andrewsass.squarespace.com/storage/alex_off.png')">
<img src="http://andrewsass.squarespace.com/storage/alex_off.png" border="0" name="alex" />
</a>
<a href="http://www.milkshakenyc.com"
onmouseover="change('milkshake', 'http://andrewsass.squarespace.com/storage/milkshake_on.png')"
onmouseout="change('milkshake', 'http://andrewsass.squarespace.com/storage/milkshake_off.png')">
<img src="http://andrewsass.squarespace.com/storage/milkshake_off.png" border="0" name="milkshake" />
</a>
</a>
<a href="http://www.pegasus17.com"
onmouseover="change('pegasus', 'http://andrewsass.squarespace.com/storage/pegasus_on.png')"
onmouseout="change('pegasus', 'http://andrewsass.squarespace.com/storage/pegasus_off.png')">
<img src="http://andrewsass.squarespace.com/storage/pegasus_off.png" border="0" name="pegasus" />
</a>
</a>
<a href="http://www.greenbusinesscompetition.com"
onmouseover="change('GBC', 'http://andrewsass.squarespace.com/storage/GBC_on.png')"
onmouseout="change('GBC', 'http://andrewsass.squarespace.com/storage/GBC_off.png')">
<img src="http://andrewsass.squarespace.com/storage/GBC_off.png" border="0" name="GBC" />
</a>
</a>
<a href="http://www.kyeonyc.com"
onmouseover="change('kyeo', 'http://andrewsass.squarespace.com/storage/kyeo_on.png')"
onmouseout="change('kyeo', 'http://andrewsass.squarespace.com/storage/kyeo_off.png')">
<img src="http://andrewsass.squarespace.com/storage/kyeo_off.png" border="0" name="kyeo" />
</a>
</html>
Any help/advice is appreciated! Thanks Hi to everyone,have just made my first site,its basically a sales page that i made in word 2010,i have added 1 graphic(jpg) and a watermark running through the page,i have managed to upload it through my ftp panal,but when i go online to view my page the graphic and watermark are missing(in firefox) and the graphic is missing in IE(but the watermark is visible),and they have been replaced by boxes with a symbol in the top left corner,i saved the copy as indexhtml,any help would be much appreciated,simon Hello, I'm not too sure where I'm going wrong here. I've created a graphic for use as a background image, which contains a text box in the middle of the page. I've sliced the image and adjusted the html to include a rowspan, which can be seen at this url: http://www.magicalwonders.com/graphics/test.html Borders have been left on so that the layout is easier to see. I was expecting the two cells either side of the cell that I've rowspanned to stretch as extra text goes in the box - however, this doesn't seem to work and the design gets completely broken, as in this url: http://www.magicalwonders.com/graphics/test2.html I don't won't to be restricted in the amount of text I can include, so can anyone point me in the right direction and advise on the correct way to get this to work? Many thanks, Myles Is there any way of placing HTML buttons (not flash) over Flash swf movis on Dreamworks? Thanks How can I make my forms smaller. I already know how to control length, but how can I make the height lower. Ok I was just informed that on our companies site that there is a new window that pops up when a link is clicked. This is supposed to happen but the one thing I am trying to figure out is that the new window is rather small and the customer has to always enlarge it. They are using IE. I have tested it with IE7 with the same results as reported but it has also been tested with FF and SeaMonkey and the new window is large. Is this an IE thing, perhaps a setting or do I actually have to add something to my CSS/HTML to account for this? Thank you for the help. Hi, I'm using an image for my web background, but I have a little problem. I have to go and size the image correctly in the image editing program for it to look right, but then if you resize the webpage it doesn't look right. Is there a way to make the image automatically resize itself depending on the size of the person's screen? Hi, I have been having issues with a scroll bar on my page, and have tried a few different html codes, and have messed with sizing but am not getting the result I want. Here is the page I am referring to: http://userwww.sfsu.edu/~davidson/ar...tractbody.html I would like for there to be only the horizontal bar, like I have. But I would like the box to be smaller (i've tried making the grid's width smaller, but then the scrollbar doesn't have the pictures side-by-side, but pushes one to the bottom and it creates a vertical scroll bar). I would like it to be so that one picture or one and a half pictures, it doesn't matter, is shown. i want less to be automatically visible. i want it so you just scroll to view the rest, all side by side. Hopefully that makes sense? Thank you!!! Im having problems getting my table to the right size. I want it to be 100% of the page but it only becomes 100% of whats inside the table. Any ideas what to do to solve this? Thanks Jake At the mo, the code is Code: <table summary="News" width="100%"> I've got an applet with some features, one of which a background image. It's actual size is 10.60 inches wide by 5.30 inches of height. Using WIDTH="744" and HEIGHT="600" (as shown on the code below) does not display the entire image. Can someone tell me the right setting of values to fix it? Is there a code to authomatically capture whatever the size of the .jpg and make it fit? Thanks in advance. Here's the html: <p align="center" <APPLET code=string WIDTH="744" HEIGHT="600"> <param name="para_back" value="background.jpg"> </APPLET> </p> How can I make the browser window that my site is in automatically have specific height/width dimensions? Making toolbar and scrollbar go away would also be nice. |
|||||||