|
HTML - Vertical Space Between Images
I just started learning HTML from through Lynda.com. I ran into a problem of which I cant seem to find what went wrong. This image I horizontally splitted it in 3 parts which needed to resolve in HTML as 1 image. Between each image there now is a horizontal space. This is only the case in Firefox and Google Chrome. In Explorer it works fine. What did I do wrong?
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/1.gif" alt="" /></td> </tr> <tr> <td><img src="images/2.gif" alt="" /></td> </tr> <tr> <td><img src="images/3.gif" alt="" /></td> </tr> </table> Thank you. Similar TutorialsI just have a small formatting issue, that I think is being caused by a dreamweaver template I created, that I need some quick help with. Under the main banner is a space that I want to get rid of, but I can't figure out what's causing it. In my template, the editable area starts with the div right under the banner... so I'm thinking somewhere in there is my issue. Here is a link to the site - www.captaintees.com/graphictees.html Any help is greatly appreciated. you can view the page: www.yanglihao.com <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <title>浩</title> <head id="ctl00_Head1"> <style type="text/css"> <!-- A:link {color:#993333;text-decoration:none} A:visited {color:#993333;text-decoration: none} A:hover {color:#778833;background:#553333;text-decoration: none} body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #111122; margin: 0; padding: 0; text-align: center; color: #000000; } .thrColFixHdr #container { width: 780px; background: #CCCCDD; margin: 0 auto; border: 1px solid #000000; text-align: left; } .thrColFixHdr #header { background: #221122; padding: 0 10px 0 20px; } .thrColFixHdr #header h1 { margin: 0; padding: 10px 0; width: 780px; } .thrColFixHdr #sidebar1 { float: left; width: 150px; background: #111522; padding: 15px 10px 15px 20px; } .thrColFixHdr #sidebar2 { float: right; width: 160px; background: #111522; padding: 15px 10px 15px 20px; } .thrColFixHdr #mainContent { margin: 0 200px; padding: 0 10px; } .thrColFixHdr #footer { padding: 0 10px 0 20px; background:#111122; } .thrColFixHdr #footer p { margin: 0; padding: 10px 0; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } .STYLE3 { font-size: xx-small; color: #999966; } --> </style> <title> Untitled Page </title></head> <body class="thrColFixHdr"> <form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw9kFgICAw88KwAJAQAPFgQeCERhdGFLZXlzFgAeC18hSXRlbUNvdW50AghkFhBmD 2QWAgIBDw8WBB4EVGV4dAUG5a2k54usHgtOYXZpZ2F0ZVVybAUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTFkZAIBD2QWAgIBDw8WBB8CBRjmsqHmnInml6DnvJjml6DmlYXnmoTniLEfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTJkZAICD2QWAgIBDw8WBB8CBQzpvJPlkLnoh6rnlLEfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTNkZAIDD2QWAgIBDw8WBB8CBQblir/liKkfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTRkZAIED2QWAgIBDw8WBB8CBQPniLEfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTVkZAIFD2QWAgIBDw8WBB8CBQzpvJPlkLnoh6rnlLEfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTNkZAIGD2QWAgIBDw8WBB8CBQnlpbPlranlrZAfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTZkZAIHD2QWAgIBDw8WBB8CBQ/kuI3lj5HnmoTmg4XkuaYfAwUafi9hcnRpY2xlLmFzcHg/YXJ0aWNsZUlEPTdkZGSwWPnKc69cmrv7vR5KoJ9/RM55iA==" /> </div> <div id="container"> <div id="header"> <table width="100%" border="0" background="image/yanglihaobarner.jpg" style="height: 40px"> <tr> <td></td> </tr> </table> <div id="sidebar2"> <div id="tip" style="font-size:medium;color:#FFCC00;height:400px"> <span style="color: #ccff33; font-size: 16pt;"><a target="_blank" href="Default.aspx">首页</a></span> | <br /> <br /> <span style="color:#9933cc"> <span style="font-size: 16pt"><a target="_blank" href="album.aspx">相册</a></span></span> | <br /> <br /> <span style="color: #cc9933; font-size: 16pt;"><a target="_blank" href="uploadPhotoes.aspx">上传</a></span> | <br /> <br /> <span style="color: #cc9933; font-size: 16pt;"><a target="_blank" href="liuyan.aspx">留言</a></span> | <br /> <br /> <span style="color: #cc9933; font-size: 16pt;"><a target="_blank" href="Login.aspx">聊天</a></span> | <br /> <br /> </div> </div> </div> <div id="sidebar1"> <table width="100" border="0"> <tr> <td><span class="STYLE3">用户名</span></td> <td> <input name="username" type="text" id="username" size="10" /></td> </tr> <tr> <td><span class="STYLE3">密码</span></td> <td><input type="password" id="password" size="10" /></td> </tr> <tr> <td> </td> <td><input type="button" onclick="validate" value="确定" /></td> </tr> </table> <br /> <br /> <table id="ctl00_DataList1" cellspacing="0" border="0" style="border-collapse:collapse;"> <tr> <td> <a id="ctl00_DataList1_ctl00_HyperLink1" href="article.aspx?articleID=1" style="text-decoration:underline;">孤独</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl01_HyperLink1" href="article.aspx?articleID=2" style="text-decoration:underline;">没有无缘无故的爱</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl02_HyperLink1" href="article.aspx?articleID=3" style="text-decoration:underline;">鼓吹自由</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl03_HyperLink1" href="article.aspx?articleID=4" style="text-decoration:underline;">势利</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl04_HyperLink1" href="article.aspx?articleID=5" style="text-decoration:underline;">爱</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl05_HyperLink1" href="article.aspx?articleID=3" style="text-decoration:underline;">鼓吹自由</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl06_HyperLink1" href="article.aspx?articleID=6" style="text-decoration:underline;">女孩子</a> </td> </tr><tr> <td> <a id="ctl00_DataList1_ctl07_HyperLink1" href="article.aspx?articleID=7" style="text-decoration:underline;">不发的情书</a> </td> </tr> </table> </div> <div id="mainContent"> <div style="height: 890px; width: 344px"> <blockquote> <br /><br /> <center><strong>女孩子 </strong> <p>我爱着自由，爱着孤僻。 </p> <p> 在学校，我认识很少的女孩子。 曾经感觉她们会如我想象中的那么热情，又知情达理。 很想知道她们有什么奇怪的想法，深邃的感情。 男女不会像爱情电影中的主人公可以天天躺在缀着玫瑰花的炕上，也不会只有如毛片中机械的亢奋。 </p> <p>我爱走在遥远的后面望着她们的背影，略去她们的妍媸，幻想她们一定有什么秘密的故事。</p> <p>我幼稚地去试着和她们搭讪，像素面的姐姐或妹妹。她们应该会忽视我所有的缺点吧。</p> <p>现在，我才感觉到我想的很可能是错的，或多或少。</p> <p>我有时在她们面前说出有关性这些被忌讳的话题。 她们惊讶地沉默，不知道是否嗤之以鼻过。想去问一问她们对低俗的理解，却心思疲惫。</p> <p>我对于她们也许只是太普通的人，不是爱人，不是兄弟，不是朋友。人似乎只是为了直接的好处或潜在的利益在伪善与高贵中徘徊。</p> </center> </blockquote> </div> </div> <br /> <table width="779" border="0" align="center"> <tr> <td> </td> </tr> <tr> <td> <div align="center"> </div> </td> </tr> </table> <br class="clearfloat" /> <div id="footer"> <table width="100%" border="0"> <tr> <td> </td> </tr> </table> </div> </div> </form> </body> </html> OK - I want you you to know, I don't know what I'm doing. But I'm trying to build my web site and I'm just about there but am having one problem. The problem page is he http://www.danielrubio.com/clientlogin.html and he http://www.danielrubio.com/listeningroom.html I can't get the navigation area on the left to occupy the same vertical position as the login form. With the second page I can't get the navigation area on the left to occupy the same vertical position as the links to my MP3's. The reason I set things up this way to start with was to keep the form and the links centered on the page no matter what size window or screen resolution. Here is the code for the first problem page: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="luckydog" && password=="sunshine") { window.location="http://www.danielrubio.com/heidi/juliexyz.html"; done=1; }
<!-- The user above is Julie Rubio 070216 -->
if (username=="bighands" && password=="hardwork") { window.location="http://www.danielrubio.com/guest/12345678.html"; done=1; }
<!-- The user above is Guest 070216 -->
if (username=="member1" && password=="password1") { window.location="page1.html"; done=1; }
if (username=="member2" && password=="password2") { window.location="page2.html"; done=1; }
if (username=="member3" && password=="password3") { window.location="page3.html"; done=1; }
if (done==0) { alert("Invalid login!"); }
}
// End -->
</script>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="keywords"
content="daniel rubio, composer, orchestrator, tuba, new orleans, last days, derringer, sidewalk, second line, music, bmi, garritan, dixieland, theater, jazz, bourbon, imdb">
<meta name="robots" content="index, follow, noarchive">
<meta name="description"
content="Daniel Rubio is a composer and orchestrator for theater film and television from New Orleans and a tuba player">
<title>DANIEL RUBIO</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(192, 192, 192); height: 646px;"
alink="#000099" link="#000099" vlink="#990099">
<table
style="text-align: left; font-family: Helvetica,Arial,sans-serif; background-color: transparent; width: 100%; height: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td colspan="2" rowspan="1"
style="text-align: center; width: 100%; height: 96px;"><big><big><big><span
style="font-weight: bold;"> </span></big></big></big>
<h1 style="font-weight: bold; height: 25px;">D <small>A
N I E L</small> R <small>U B I O</small></h1>
<big><big><big><small><small>Composer
| Orchestrator</small></small></big></big></big></td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="width: 100%; height: 108px;"> <big><big><big><img
style="position: absolute; width: 108px; height: 144px; top: 57px; left: 96px;"
alt="Photograph of Daniel Rubio"
src="../../photogs/DanBW45a.jpg"></big></big></big><font
size="+1"> </font>
<div style="text-align: center; margin-top: 0px; height: 92px;"><font
size="+1"><span style="color: rgb(51, 51, 51);"></span></font><big><span
style="color: rgb(51, 51, 51);"><big><small><small><small><br>
<br>
<big><big><big>C</big>LIENT <big>L</big>OGIN<br>
<br>
<br>
<br>
<br>
</big></big></small></small></small></big></span></big><big><span
style="color: rgb(51, 51, 51);"><big><small><small><small><big><big>
<center>
<form name="login">
<table style="width: 225px;" border="1"
cellpadding="3">
<tbody>
<tr>
<td colspan="2"> <br>
<div ="">
<center><font size="+2"><b>Welcome!</b></font></center>
</div>
</td>
</tr>
<tr>
<td>Username:</td>
<td><br>
<div style="z-index: 2;"><input
name="username" type="text"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" type="text"></td>
</tr>
<tr>
<td colspan="2" align="center"><input
value="Login!" onclick="Login()" type="button"></td>
</tr>
</tbody>
</table>
</form>
</center>
</big></big></small></small></small></big></span></big></div>
</td>
</tr>
<tr style="color: rgb(51, 0, 153);">
<td
style="vertical-align: top; text-align: center; width: 20%; background-color: rgb(153, 153, 153); height: 337px;"><small><big><big>
</big></big><br>
<a href="http://www.danielrubio.com/index.html">Home</a><br>
<br>
<a href="http://www.danielrubio.com/clientlogin.html">Client
Login</a><br>
<br>
<a href="http://www.danielrubio.com/listeningroom.html">Listening
Room</a><br>
<br>
<a href="http://www.danielrubio.com/biography.html">Biography</a><br>
<br>
<a href="http://www.danielrubio.com/news.html">News</a><br>
<br>
<a href="http://www.danielrubio.com/links.html">Links</a><br>
<br>
<a href="http://www.danielrubio.com/sitemap.html">Site
Map</a><br>
<br>
<a href="http://www.danielrubio.com/feedback.html">Feedback</a></small></td>
<td style="text-align: center; width: 80%; height: 337px;"><br>
<div style="position: absolute; left: 240px; top: 377px;"><span
style="font-weight: bold;"><span
style="color: rgb(0, 0, 0);"></span> </span><br>
<span style="font-weight: bold;"></span></div>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="text-align: center; width: 100%; background-color: rgb(153, 153, 153); height: 96px;"><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Copyright
© 2006 - </span><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">2007
by </span><a
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"
href="http://www.danielrubio.com/feedback.html">Daniel Rubio</a><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">.
All worldwide rights reserved.</span><br
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">
<span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Second
Line Music™ is a trademark of Daniel Rubio.</span><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"><br>
</span></td>
</tr>
</tbody>
</table>
<span style="font-family: Helvetica,Arial,sans-serif;">
</span>
</body>
</html>
I think that if you help me to understand the correct approach to the first page, I can then apply it to the second page. Thanks for any help, Dan I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? Hello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do? --------------------------------- here is the code i am using --------------------------------- <p> <strong><font color="blue">_______________________________________________</font></strong> </p> <p style="MARGIN-RIGHT: 0px" dir="ltr"> <font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>   ; <strong><font size="2">Newmarket Chamber of Commerce</font></strong> <br /> <font size="2"><strong><em>President & Ceo & nbsp;   ; <font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font> </p> <font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow"> <font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong> <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905 898-5900 ex. 223</strong></font></font></font> <br /> <font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font> </p> Hi all, Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week. I have a site beautifully designed (can be seen here as a static jpeg) and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task. I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner. HTML Code: <body>
<div id="butttons">
</div>
<div id="nav">
<img src="images/layout/images/Side_nav.png"/>
</div>
<div id="butttons">
<div id="nav_Home">
<img src="images/layout/images/Home.png"/>
<div id="nav_Portfolio">
<img src="images/layout/images/Portfolio.png"/>
<div id="nav_Contact">
<img src="images/layout/images/Contact.png"/>
</div>
</body>
And then this is the Refferenced style sheet HTML Code: #nav {
position: absolute;
top: 0px;
left: 0px;
}
div.nav_side {
background-image: url(images\layout\Side_nav.gif);
background-repeat: no-repeat;
background-position: top center;
width: 36px;
height: 594px;
}
#buttons {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 500px;
left: 36px;
}
.nav_home {
background-image: url(images\layout\Home.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(images\layout\Portfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(images\layout\contact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
I literally just started learning Html /CSS / Java a month ago; spare no details! ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me. Look at the too pages. P1= http://chapai.net/xhtml_prob/html_smpl.htm Code: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>html Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ....................... P2= http://chapai.net/xhtml_prob/x_smpl.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML Sample</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
..........
P1 page is smooth but P2 page is not. Hare is white space at the uper side and lower side of the images. How to remove this space? Please Help. I have white space around my images with the grey border. I put in a picture that was larger than the previous cell size than removed it (the width and height code as well) but it still leaving the white space around the left and right sides of the images. http://www.diversink.com/publications.htm this is the page i'm working on Any ideas to why this is happening would be greatly appreciated Thank you, Rainseed Whenever I use mouseover images on top of one another (in a column for example), there is always a small gap in between them. Is there anyway to get rid of this space? Even when I put border and vspace to 0 and even omit using a <br>, that annoying gap appears! Any suggestions? i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer. i got the design for the site from a template but i remade a majority of it and used photoshop to slice it. so heres the problem, the page is fine the way it is, but i need to be able to type in the white area. i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image. please help me. thanks in advance. http://haskinsart.awardspace.com/index.html above is the page with the image as the white space (the body(where i want to type)) http://haskinsart.awardspace.com/indexart.html and this one has the table. but as u can see now i have gaps!!! please help me. Hi all, I have a HTML document, with two images one below the other e.g. <img id="Image1" src="web/images/en/1.jpg" alt="Image"/><br/><img id="Image1" src="web/images/en/1.jpg" alt="Image"/> To make my doc XHTML compliant, i am adding following doctype declaration in my doc: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> But because of the above declation, there is a minor gap observed between the images, if i remove the Doctype declaration, the space disappears. Can somebody help me on this, is there any workaround to resolve the same or what could be the probable reason for this behavior. i almost went crazy trying to troubleshoot this one... thought i'd share. HTML Code: <style type=text/css>
a:link {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
</style>
<table width="200" border="0" cellspacing="0" cellpadding="0"><tr>
<td width="100" valign="top">
<a href="link">Sample text </a>
<td width="100" valign="top">
<a href="link">Sample text</a>
</td></tr></table>
Turns out a "space" at the end of the link text pushes the text upwards slightly. Simply remove the space (or add on to the other line) or use the space code [ ] The css also plays a part, this doesn't appear happen when text is "unformatted" I am having trouble aligning input fields to the bottom of the cell. Here is the link: It looks correct in Firefox, but not in Internet Explorer. Please compare the link in both browsers. http://www.sandmanmedia.net/draft/chrisbaran.html Is there an easy way to make a vertical line? For example, some equivalent to <HR> ? Thank you. <div align="center"> <table height="117" cellspacing="0" cellpadding="0" border="0" class="btn1 boxbtn1"> <tr> <td> <a href="images/gymfu.png" rel="lightbox[roadtrip]" title="Gym Fu - Branding">image #1</a></td> </tr> </table> </div> ----- I've tried 'valign="middle" ' in the html code, and also 'vertical-align:center' in the css. no joy. Can anyone help? I need to align an image so it is in the dead center of my frame. This is because when the window is resized, the menu and header change size and go out of wack. I tried putting the image in a table, but i cant get anything to work. We arent allowed to use any CSS for the assignment, only pure HTML. The following is my code for my header: <html> <body background="images/backgrounds/header.png"> <table border="0" align="center" valign="center"> <tr> <td><img src="images/banner2.png"></td> </tr> </table> </body> </html> Thanks in advance... Hello can anybody help my with html about a vertical line with wat codeyo can make a vertical line for your website in html. Erwin have some html code which is putting some image buttons into a menu which goes across the top of the page. I want to change this too make them go down the page. I have a css file with the code that looks like this Code: Code: #nav_menu
{
/* background: transparent; */
background: #ddd;
border: #dcdce9 solid thin;
/* margin: 10em; */
position:absolute;
top: 70px;
left: 0px;
padding: 0pt;
right:0px;
height: 51px;
/* bottom:200px; */
}
and the html code looks like this Code: Code: <ul id="globalnav">
<li><a href="index.php?here=home" class="" id="home">Home</a></li>
<li><a href="index.php?here=daybook" id="daybook" class="">Day Book</a></li>
<li><a href="index.php?here=wms" id="wms" class="">Work Management System</a>
<ul>
<li><a href="index.php?here=staff" id="staff" class="">Staff</a></li>
<li><a href="index.php?here=shifts" id="shifts" class="">Work shifts</a></li>
</ul>
what part do i need to change to make it go vertically? I have a vertical scrollbar in green colors and it can be viewed in IE 7 but when I look page in Firefox 3.0.15 it can not be viewed in green colors. page: http://www.astrosport07.webs.com/ Can I do something that scrollbar to appear in green colors in "all" brawsers? Hello, I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be. I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus. I can center align the flash like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- PICHI Media (c) 2008 All Rights Reserved --><HTML><HEAD><TITLE>Always Follow Dreams</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
html,body {
height:100%;
width:100%;
overflow:auto;
}
body,td,th {
color: #000000;
}
body {
background-color: #FFFFFF;
background-image: url();
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}
.style4 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#apDiv1 {
position:absolute;
width:324px;
height:25px;
z-index:1;
left: 354px;
top: 303px;
background-color: #000000;
visibility: hidden;
}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
</head>
<BODY>
<CENTER>
<DIV align=right></DIV>
</CENTER>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
<TBODY>
<TR>
<TD width="0" height="0" align=center vAlign=middle>
<P align="center">
</script><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" >
<param name="movie" value="test.swf">
<param name="quality" value="high">
<embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed>
</object>
</noscript></P>
</TD>
</TR></TBODY></TABLE>
</BODY></HTML>
As you can see this source code will center align both ways horizontally and vertically. I belive this is doing the job: Code: <TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
<TBODY>
<TR>
<TD width="0" height="0" align=center vAlign=middle>
<P align="center">
Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie. I can do this with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body onLoad="window.document.test.focus();"> <center> <table width="100%" height="100%" align="center"> <tr> <td valign="middle" align="center"> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code </script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test"> <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed> </object></noscript> </center> </td> </tr> </table> </body> </html> The focus part works with this i believe: <body onLoad="window.document.test.focus();"> where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error: 'window.document.test' is null or not an object This page is right now on my site: http://www.danandrei.ro And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean. My question is: IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ? Thank you. |
|||||||