|
HTML - Gridding Graphics (naive Questions!!)
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 /> Similar TutorialsHey there, I'm feeling my through the dark trying to put an animated sliding panel on my site. It works, but its initial state is open, which defeats its purpose. Will someone please look at this short code and let me know what to do? Thanks! Here's the HTML, followed by the CSS, followed by the javascript: <html> <head> <link type="text/css" rel="stylesheet" href="Animated-Collapsible-Panel-5.css" /> <script language="javascript" type="text/javascript" src="Animated-Collapsible-Panel-5.js"></script> </head> <body> <!-- Animated collapsible panel, with separate CSS and JavaScript --> <div style="width:470px;"> <div class="squarebox"><div class="squareboxgradientcaption" style="height:20px; cursor: pointer;" onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div style="float: left">I bequeath myself to the dirt to grow from the grass I love...</div><div style="float: left; vertical-align:left"><img src="../images/collapse.gif" width="25" height="5" border="0" alt="Show/Hide" title="Show/Hide"/></div> </div><div class="squareboxcontent"> <img width="150" height="150" src="http://www.lesliehawes.com/wordpress/wp-content/uploads/2008/09/chief-joseph-pendleton-blanket-pattern.jpg" alt="This is an image" title="This is an image" /><br />Content goes here...</div> <img width="170" height="0" alt="" src="../images/shadow.gif"/> </div> </body> </html> .squarebox { width: 215%; text-align: center; overflow: hidden; } .squareboxgradientcaption { color: #ffffff; padding: 5px; background-image: url( ); background-repeat: repeat-x; } .squareboxcontent { background-color: #f5f5f5; padding: 10px; overflow: hidden; border-top: solid px #336699; } // not animated expand/collapse function togglePannelStatus(content) { var expand = (content.style.display=="none"); content.style.display = (expand ? "block":"none"); toggleChevronIcon(content); } // current animated collapsible panel content var currentContent= null; function togglePannelAnimatedStatus(content, interval, step) { // wait for another animated expand/collapse action to end if (currentContent==null) { currentContent = content; var expand = (content.style.display=="none"); if(expand) content.style.display = "block"; var max_height = content.offsetHeight; var step_height = step + (expand ? 0 : -max_height); toggleChevronIcon(content); // schedule first animated collapse/expand event content.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + interval + "," + step + "," + max_height + "," + step_height + ")", interval); } } function togglePannelAnimatingStatus(interval, step, max_height, step_height) { var step_height_abs = Math.abs(step_height); // schedule next animated collapse/expand event if (step_height_abs>=step && step_height_abs<=(max_height-step)) { step_height += step; currentContent.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + 2 + "," + 2 + "," + max_height + "," + step_height + ")", interval); } // animated expand/collapse done else { if (step_height_abs<step) currentContent.style.display="none"; currentContent.style.height = ""; currentContent = null; } } // change chevron icon into either collapse or expand function toggleChevronIcon (content) { var chevron=content.parentNode .firstChild.childNodes[1].childNodes[0]; var expand=(chevron.src.indexOf("collapse.gif")>0); chevron.src=chevron.src .split(expand ? "expand.gif" : "collapse.gif") .join(expand ? "collapse.gif" : "expand.gif") } 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 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? Hi, Where can I find graphics to use on my page? ------ Regards, Pretty 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? 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 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. 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 Is there any way of placing HTML buttons (not flash) over Flash swf movis on Dreamworks? Thanks 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 Hi Everyone, I have just written a web page for use as an email signature. My method for doing so is quite long winded, due to the nature of the signature that I have designed and the fact that I am using Outlook 2010. This is the process that I took to make my "email signature" - which is more accurately described as an Outlook Template: 1). Sent the HTML email from a server to my email address 2). Saved the email that I sent to myself (after a few minor alterations, such as removing the sender & subject) as an Outlook Template (.oft file) 3). Created a Macro which calls the OFT file when run 4). Added a button to the ribbon which runs the Macro when clicked My methodology is fine - and I have tested it with a single image inside the template, however when I performed a HTML cut on my original graphic - so that I could add functionality to the signature - I now see fine white lines in between all of the individual graphics. Please see this link for further explanation: http://www.systemcontrol.com.au/dd/fine-white-lines.JPG The "fine white lines" are only visible when the Outlook Template is opened (irrespective of whether opened manually or by Macro). I have seen this behaviour before on web mail, such as Hotmail, and adding this markup fixes the issue: Code: <style type="text/css">
img
{
display: block;
}
</style>
However once the original HTML is saved as an OFT I suspect that Outlook strips away any style information in the head of the document. If anybody can suggest how this markup can be added to the body of the document, or otherwise provide a solution (such as telling me how to manually edit an OFT file), it will be much appreciated. Thanks for your time. Kind Regards, Davo Hello all, I am currently building an HTML newsletter complete with graphics and it is all set up and appears fine in my IE and other web browsers. However, now I want to actually place this HTML and graphics in the actual e-mail form and test it. This may sound like like a stupid question, but does anyone know how to do this? For the life of me I can't think of any way to actually embed an .html file (or just the HTML coding) inside of an email and have it appear inside of say.. a Yahoo, MSN, google, or outllook express email form. I need to be able to do this to test an send my e-newsletter. I've searched the net for tutorials on how to do this but have come up empty handed. Any ideas on how to go about this? Thanks in advance! Hello everyone. Tho i am a new user, i need help on this one. 1)Does anyone have or know a ready rating and commenting system code that you can just stick on your HTML page? 2)Anyone know where to get Dreamweaver CS1+ for a pretty low price? I hope i posted in the right section. Please help me out! Thanks in advance! 1. Is there any HTML code that can allow me to create a newsletter for my website. So people can sign up with it, then whenever I want to send one out I just fill in some form for the new letter then hit send and it will send to all the people who signed up. Is there any html code to do this, if so what is the code? 2. I would like a link or something to useful html codes that I could use for my website. 1. Can I define two classes? For example: Code: <p class="one" class="two">Text...</p> 2. Can a class be defined as a number? For example: Code: <p class="1">Text...<p> Thanks. 01:: object won't touch the top of the page:: On my site, www.subliminalmusic.co.nr, I got a flash mp3 player in a frame at the top.. but, for some reason, the mp3 player won't touch the very top of the page. I want it where the mp3 player touches the very top of the page and is fixed in place instead of having a scroll bar on the right. 02:: how do you make frame1 close when frame2 browses off of the original domain?:: I'm wondering if it's possible to make my top frame, with the mp3 player in it, close whenever I go to an off-site link in the bottom frame? Where the top frame stays put whenever I browse my own site, but closes whenever I go to another website. It seems logical that I could make a list of safe-urls, or whatever.. something like.. where the top frame can recognize what's in the bottom frame.. and there'd be a list of urls in the code somewhere. If the url in the bottom frame isn't in the list of urls mentioned in the code, then the top frame closes. Is that possible? If so, can you tell me how to do it or point me in the right direction? Thanks in advance! -Anthony- |
|||||||