|
HTML - How To Align Objects?
Hi,
I am trying to create a 'Add to Basket' button on my site using HTML. I have created the following code whcih you can see in action at www.martinspares.com/shop.html (its about halfway down the page). The trouble is that the Quantity box is lower than the button but i would like them to be level which other. How can I achieve this? I am new to all this and am quite confused so any help is much appreciated. Paul HTML Code: <iframe name="cart1" width="0" height="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe> <form action="http://ww4.aitsafe.com/cf/add.cfm" target="cart1"> <input type="hidden" name="userid" value="66349534" /> <input type="hidden" name="nocart" /> <input type="hidden" name="return" value="www.martinspares.com/basket.html" /> <input type="hidden" name="product" value="Mac 600 Colour Wheel" /> <input type="hidden" name="price" value="26.97" /> <input type="hidden" name="scode" value="123456" /> <input name="units" type="hidden" value="2" /> <input type="text" name="qty" size="1"><input type="image" name="Submit" src="wpimages/Add to Basket.png" alt="Add Item to Shopping Cart" onclick="this.src='wpimages/Added to Basket.png'" /> </form> Similar TutorialsI am trying to insert the same html page http://www.danhead.com/store/dirtfest/index.html into several other pages including a myspace profile. Thanks to the blocking of iframes on MySpace the only solution I have found so far is to embed the html in an object. This is the code I am using now to insert the object: Code: <object type="text/html" data="http://www.danhead.com/store/test/index.html" width="420" height="800"></object> My problem is that the object is visible in Mozilla Firefox but not IE and possibly many other browsers as well, for I only have the two to check. With IE, all that appears is a blank frame the intended size of the object. My ultimate intention is to have both the object visible and the transparent background to show through on all browsers. You can view the code in use he http://www.dirtfest.com http://www.myspace.com/dirtfest Thanks in advance! Hi, I think this should be pretty simple to solve but can't find a resource online anywhere. I've written a photo viewing site using HTML server side includes. It is simply a large (480x360px) photo with an embedded object navigation menu below. The navigation menu has thumbnails of all the photos. It looks fine but the glitch is getting the navigation menu to change the large photo. I'm trying to avoid using JScript as it may be seen by those with basic computers (developing countries) although this is an option. The only resources I've found for this suggest creating a new page for each photo. This seems inefficient but I can't figure out if there's an elegant solution (CGI?) to pass which photo is required to a generic webpage. I'm pretty computer literate (degree in computer science in '99) but haven't programmed since I graduated and things have obviously moved on since then. You can see the page at http://osburn.co.uk/testpage/lebleu.shtml and the source below. Thanks for any help! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" href= "css/main.css" name="default" type="text/css"/> <title>Davellos test page - business portal</title> <META Name="KEYWORDS" Content=""> <META Name="DESCRIPTION" Content=""> </head> <body> <br><br /> <table class="davell_photo_standard"> <tbody> <tr><td> </td></tr> <tr align="center"> <td id="vu"><a href="movie.shtml"><img alt="Davell tulip" src="jpg/chalets/brad/large/brad.3.jpg" name='SlideShow' align="center" border="0"></a></td> </tr> <tr> <td><object name="lebleuembed" class="davell_smallphoto_embed" data="lebleu2.shtml"></object></td> </tr> </tbody> </table> </body> </html> I'm fixing a website for work, and I need help. I know that you can find out which browser the user is using, but is there anything else you can find out. Specifically, screen resolution or internet speed? Ok im am kinda new to html i have set up a website that in my mind is not to bad considering i dont know much.. but when i minimize my buttons and 2 logos at the top all smash up together and it looks like crap.. All the help i could get would be great.. thanks for all the help http://www.dlsvendingllc.com Hello all, Working on a site for a client, and unfortunately I'm getting some errors in IE. Chrome and Firefox seem to work fine, but with IE8 I'm not sure of the changes. Here is the page: http://redd-design.com/clients/shepedals/index.htm I'd love to hear some input...thanks! I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ ------------------------------------ My header looks weird. I tried using a table to get it down, but it doesn't want to seem to work the way I want it to. I want my search box and submit to ditchtime.com blocks to be right under each other all on the same line with my other ads. Instead the submit 2 ditchtime block is underneath everything else. Any table I could use to fix this? site http://www.ditchtime.com I try to put 2 Objects (probably the wrong word) in a line. I tried div, float and span. I think i just used them in the wrong Way, so may someone here can help me out? Code: <?if($CHAT_BOX$)?> <div class="boxContent" style="width: 50%;"> <div align="center">$CHAT_BOX$<?endif?> <?if($MYINF_5$)?> <div class="boxContent" style="width: 50%;">$MYINF_5$</div> </div> </div><?endif?> Thats the Code, its always Displayed $CHAT_BOX $MYINF_5$ i want it to be $CHAT_BOX $MYINF_5$ Hi, I'm adding a flash games page to my site. My question is - I have a swf file (say for pac-man), how do I put it in the html? Is this even how one goes about putting a flash game on a page? I've also tried this: I've seen a game that I want - then I've just looked at the source info - then copied the part that "is" the game... like say this: Quote: <object classid "clsid87CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400"> <param name="movie" value="http://www.flashstash.com/media/swf/catch33.swf"> <param name="quality" value="high"> <embed src="http://www.flashstash.com/media/swf/catch33.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="v" type="application/x-shockwave-flash" width="400" height="400"></embed> </object> ...and just pasted that in an html page, to see if it would work and it did. But, when I do that, is it actually just linking from that page and playing on my screen? What's the right way to go? Can anyone help me? http://cortlandareatribune.com/test2/index2.html i have not defined any margins, actually removed them all together, by my two SWF files are being displayed with big gaps between them. how do i get these to display as normal block elements without the gaps? edit: i'm an idiot. had a wrong height defined in the html. Hi Guys, I dont know if i am over thinking this, or just been dumb! But I want to position a flash object file in a div to the the center of my screen. However heres the catch, my flash file is 1900 pixels wide, and of course a screen can be anything wide. I can get CSS background images for divs ok, but not objects like a flash movies. So assuming my screen is 1600 wide, the user would see the center of my 1900 wide flash file with 150 pixels missing on the left aand right. For some reason, maybe i am tired, but i can not get it working or get my head into gear today. thanks for any input! Oh and heres an image of my problem to help explain it http://i44.tinypic.com/33p9e0l.jpg Hello. I need to insert MS Word and MS Excell documents directly into html file. I use <object> tag for these perposes. Everything is ok and the whole documents can be viewed in IE through html file. But the problem is that these documents can not be printed currently from html file! One possible reason is that version of server(office) to print these OLE objects must be exatly the same as the version of office they were created in. Is there are any others ways to create printable html (or xml) document with office OLE objects inside? Hi, I am trying to figure out how to make my links stay on the left side page while scrolling down or up. Not sure if this is the right place to post. Any help, codes, and/or examples would be great. Thanks I basically have some free code I found online for creating an overlay that reacts to javascript. It contains a quick time plugin and streams video when the user clicks a link. This is the code exactly as I received it and functions great. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But bugging/stuttering and browser incompatibility has made me want it to be a .swf file instead. So now I have a very basic flash object that plays my movie, splash.swf. Here is the code and it too functions perfectly: Code: <object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object> So now I have two independently working bits of code - one which opens the transparent overlay and plays a video using a quicktime object, and another that is simply a flash object to replace that quicktime object. So what I've done is replaced everything in between the [object]..[/object] in the first code with everything in between the [object]..[/object] in the second code, producing the following new code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object width="640" height="480"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab">
<param name="SRC" value="splash.swf">
<embed src="splash.swf" width="640" height="480"></embed>
</object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>
But what is this? By replacing the working quicktime object with the working flash object, Dreamweaver produces a syntax error that wasn't there before, and breaks the entire script. Clearly the script is referencing something within the tags that I am replacing, although it's not clear to me what. Hiyas, well I am trying to make an html website, and I got two things I trie to add to my page. One is a shoutbox using direct link code, and in the preview it displays fine, and works fine. Another is a teamspeak launcher I made, just a link and an image. I align one to the right the other to the left, and that works. The problem is, that the one on the right is level with the bottom of the shoutbox on the left, whereas I want them to be a part of two side columns eventually, where they are both the same length etc, not all uneven. Here is my preview page: http://i116.photobucket.com/albums/o...Untitled-1.gif I hope you see what I mean. Please help me, as I need this website online ASAP cos me and my clan are going to some tournaments and seriously need this online. Thanks in advance, Ferinos I'm trying to make this page/table align to the top of the page so that when the entire page is maximized, it will still "stick" to the top rather than in the middle of the page. The editor I am using (Visual Studio 2003) shows that it is at the top of the page but when running it and maximized the page, the content is centered to the middle of the page. Any ideas on how to resolve this? It is using a bit of CSS too..... Code: <body bottomMargin="0" rightMargin="0" MS_POSITIONING="GridLayout"> <form class="crm" id="crmForm" method="post" runat="server"> <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td> <table height="100%" cellSpacing="0" cellPadding="0" width="100%"> <TBODY> <tr> <td> <div class="simon"> <table style="TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%" border="0"> <COLGROUP> <col width="110"> <col> <col> <col width="120"> <TBODY> <tr> </tr> <tr> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24"> </td> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24">Candidate Details</td> <td style="FONT-WEIGHT: bold; WIDTH: 299px; BORDER-BOTTOM: black 1px solid" height="24">Vacancy Details</td> <td style="FONT-WEIGHT: bold; BORDER-BOTTOM: black 1px solid" height="24">Filtering Options</td> </tr> <!--etc..... --> css: Code: formButton
{
background-color: #6699cc;
padding: 2px 4px 3px 4px;
color: #000000;
font-size: 8pt;
font-family: tahoma;
height: 17px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr=#B4C5DF, EndColorStr=#91A9D0);
border-width: 0px;
}
TEXTAREA
{
font-size: 8pt;
font-family: tahoma;
width: 100%;
height: 100%;
border: 1px solid #7b9ebd;
}
.inputfields
{
font-size: 8pt;
font-family: tahoma;
width: 100%;
height: 19px;
border: 1px solid #7b9ebd;
}
INPUT.rad
{
width: 15px;
border: 0px;
cursor: hand;
}
DIV.tab
{
overflow-y: auto;
padding: 10px;
}
TD.sec
{
width: 100%;
color: #000000;
font-weight: bold;
padding-left: 0px;
padding-bottom: 2px;
text-overflow: ellipsis;
overflow: hidden;
}
TD
{
font-size: 11pt;
font-family: tahoma;
}
TD.bar
{
border-bottom: 1px solid #000000;
}
TD.req
{
font-weight: bold;
color: #9F2409;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
}
TD.statusBar
{
background-color: #63769B;
color: #ffffff;
padding-left: 5px;
height: 24px;
border-bottom: 1px solid #485673;
font-weight: bold;
}
LABEL
{
cursor: hand;
}
TD.radioLabel
{
padding-left: 2px;
padding-right: 10px;
}
TABLE.layout
{
table-layout: fixed;
width: 100%;
height: 100%;
}
div.tab
{
width: 100%;
height: 100%;
border: 1px solid #466094;
background-color: #EEF0F6;
display: none;
}
body
{
font-size: 11px;
margin: 0px;
border: 0px;
background-color: #EEF0F6;
cursor: default;
}
td
{
font-size: 11px;
}
table
{
cursor: default;
}
a
{
color: #0000ff;
font-weight: bold;
}
span.menu
{
height: 100%;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid #7288AC;
}
table.mnuBar
{
color: #000000;
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB);
}
td.mnuTitle
{
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
cursor: default;
color: #000000;
}
td.mnuRight
{
width: 100%;
text-align: right;
padding-right: 5px;
}
DIV.header
{
font-size: 20px;
font-weight: bold;
color: #000099;
margin-bottom: 20px;
border-bottom: 1px solid #000044;
}
TR.header
{
font-weight: bold;
background-color: #E0E3E8;
}
th
{
border-right:0;
border-left:0;
background:url(imgs/bar_line.gif) left center no-repeat;
}
dataGrid.Table
{
border-collapse: collapse;
border-spacing: 0;
background-color: #000000;
}
dataGrid.td, th
{
margin:0;
padding:0;
}
.Glass
{
background-image:url(Img/Blank.gif);
background-repeat:repeat-x;
}
.Glass:hover
{
background-image:url(Img/GradientBlue.gif);
background-repeat:repeat-x;
}
I have three DIV: <!-- Top 5 Hotels --> <div id="top5container"> HOTELS/RESORTS<br /> </div> <!-- Top 5 Restaurants --> <div id="top5container"> RESTAURANTS </div> <!-- Top 5 Shows --> <div id="top5container"> ENTERTAINMENT </div> I want to wrap those three DIVs (most likely in another DIV) and have them centered in this DIV. See www.vegastraveling.com and see on the welcome page. I want the 3 "top 5" to be centered... but I can't seem to have it work So it's basically centering 3 DIVs within a DIV. I'm learning HTML and the teacher has us learning deprecated tags - Just to let you. If I want to center this tag, where do I put the align code? <h1><font color="#4f4fc1">HTML Forums</font></h1> HELP! Hi, Can anyone tell me how i can accomplish this: http://www.tendervendors.com/dev/index-table.html without using display: table-cell. Atm, the exact same code, just without display: table-cell displays: http://www.tendervendors.com/dev/index.html Anyone got any ideas? TIA Matthew Millar why can't i align my texarea and my three side panels? http://www.hottunaint.com/press7test.html |
|||||||