|
HTML - Occupying The Same Vertical Space Across The Horizontal Plane
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 Similar Tutorialshi ! I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ... HTML Code: scrolling="yes" but with this the horizontal scroll is also visible, what I don't want Is there a way to enable just the Vertical one?? i have script that shown image in table, i want the table shown in horizontal not vertical this is the entire script, and the table that influence is in the red i think below any idea guys what i need to edit? Quote: # Photo Album # 1.1 # # Displays a members photos class user_photoplog_album extends z_module { # Set the maximum amount of images any users are allowed to display var $max_images = 5; function contents() { $content = $this->content; $vbulletin = $this->_zoints->external->vbulletin; # If limit hasnt been set or is over the admin set maximum, set it to the admin max if(empty($content['max_pics']) OR $content['max_pics'] > $this->max_images) { $limit_sql = 'LIMIT ' . $this->max_images; } # Otherwise, let them set it else { $limit_sql = 'LIMIT ' . $content['max_pics']; } # Get all photos the user has $getphotos = $vbulletin->db->query_read(" SELECT * FROM " . TABLE_PREFIX . "photoplog_fileuploads WHERE userid=" . $this->zuser . " AND moderate=0 ORDER BY dateline DESC " . $limit_sql . " "); $html .= '<div class="' . $this->style['pmain1'] . '" style="padding: 0;">'; # Does the user have any photos? if ($vbulletin->db->num_rows($getphotos)) { # Display the top of the table $html .= ' <table border="0" width="100%"> <tr> <td width="100" overflow-x: scroll; overflow-y: hidden; align="center" class="phead"> Image </td>'; # Display the details? if(!$content['details']) { $html .= ' '; } $html .= ' </tr>'; # loop and display all that have been fetched from the DB while($photo = $vbulletin->db->fetch_array($getphotos)) { # Display image cell $html .= ' <tr> <td width="100" align="center" class="pmain2"> <a href="' . $this->_zoints->external->url() . 'imagehosting/image' . $photo['fileid'] . '.html" target="_blank""> <img src="' . $this->_zoints->external->url() . 'imagehosting/images/' . $photo['userid'] . '/small/' . $photo['filename'] . '" /> </a> </td> '; # Display the image details? if(!$content['details']) { $html .= ' '; } $html .= '</tr>'; } $html .= '</table> <p><a href="index.php?u=' . $this->zuser . '" target="_blank">View All Photos</a> </p> <div> <p>'; } # Nope, tell them they have none else { $html .= 'You don\'t have any photos. <a href="upload.php" target="_blank">Upload photos now!</a>'; } $vbulletin->db->free_result($getphotos); $html .= '</p> </div>'; return $html; } function update($content) { return $content; } function edit() { $content = $this->content; if($content['max_pics'] AND $content['max_pics'] < $this->max_images) { $limit = htmlspecialchars($content['max_pics']); } else { $limit = $this->max_images; } $html .= '<div class="pmain1">'; # Disable description checkbox $html .= 'Disable image details? '; $html .= '<input type="checkbox" name="mod[content][details]" ' . ($content['details'] ? 'checked="checked"': '') . ' /> <br />'; # Max pictures textbox $html .= 'Max pictures to display '; $html .= '<input type="text" name="mod[content][max_pics]" value="' . $limit . '" size="5" /> '; $html .= '<span style="font-size: 7pt; color: #848484;">(max ' . $this->max_images . ' allowed)</span> '; $html .= '</div>'; return $html; } } Hi, I recently taught my self HTML and CSS so i'm still a bit shaky i started making a website to practice. i made a website with a top nav bar and a side nav bar. i can't seem to get my text to sit in the corner of both like in most websites it just seems to sit in the middle of the vertical side bar here is my HTML code and CSS code HTML 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>Testing... 1 2 3</title> <link rel="stylesheet" type"text/css" href="CSS1.css" /> </head> <body> <h1> Testing Website </h1> <ul id="nav-list"> <li><A href=Home>Home</A></li> <li><A href=HTML>HTML</A></li> <li><A href=CSS>CSS</A></li> <li><A href=JavaScript>JavaScript</A></li> <li><A href=XML>XML</A></li> <li><A href=PHP>PHP</A></li> <li><A href=SQL>SQL</A></li> </ul> <ul id="side-bar"> <li><b>HTML Intro</b></li> <li><A href=SQL>HTML Home</A></li> <li><A href=SQL>Intro</A></li> <li><A href=SQL>Getting Started</A></li> <li><b>Basics</b></li> <li><A href=SQL>Basics</A></li> <li><A href=SQL>Elements</A></li> <li><a href=SQL>Attributes</a></li> </ul> <p> lets have a look </p> </body> </html> HTML Code: @charset "utf-8";
/* CSS Document */
body {
background-color:black;
color:white;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align:center;
}
ul#nav-list {
list-style: none;
margin: 0;
padding: 0;
width: 750px;
height: 20px;
}
ul#nav-list li {
display:inline;
}
ul#nav-list li a {
text-decoration:none;
padding:5px 0;
width:100px;
background: #999;
color:#fff;
float:left;
text-align:center;
border-left:1px solid #000;
}
ul#nav-list li a:hover {
background-color:#666;
}
ul#side-bar {
list-style: none;
margin:0;
padding:0;
width: 100px;
}
ul#side-bar li a {
text-decoration:none;
padding:5px 5px;
background:#999;
color:#FFF;
float:left;
width: 90px;
text-align: center;
margin-right: 20px;
}
ul#side-bar li a:hover {
background:#666;
}
p {
color:#FFF;
}
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. I have a paragraph that has a horizontal line beneath it. The gap between these two elements is too large. How do I get the line closer to the last line of text in the paragraph? I have tried everything from margins to padding attributes and nothing works for me yet. Here is my code at the moment; Code: <P style="MARGIN-BOTTOM: 0em; FONT: 2.5em verdana, sans-serif; MARGIN-LEFT: 20px; WHITE-SPACE: nowrap; LETTER-SPACING: -4px; TEXT-ALIGN: left"> <img src="logo10.gif"> Heading Text <SPAN style="MARGIN-BOTTOM: 0em; FONT-WEIGHT: bold; COLOR: rgb(255,153,0); FONT-STYLE: italic; WHITE-SPACE: nowrap"> More text</SPAN></P> <hr style="MARGIN-LEFT: 20px; color: rgb(255,153,0); height: 15" /> Hello all, The team I work on is going to be creating a .NET application which reads organization information from a database and creates a dynamic Org Chart. One of common features in an org chart is lines that show reporting structures. Does anyone have any recommendations on how we could dynamically create such lines that would need to go both horizontally and vertically? Thanks 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> I 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. yea, i know it makes me sound like the biggest noob ever but i am so ive put together a few pages with nothing but a list in <ul> tags and i somehow managed to make them horizontal, but now...i want it to be vertical and ive gone over every single line and not been able to work it out so i was hoping maybe you guys could help me out heres the css.... Code: body {
background-color: #e3e3db;
background-image: url(bg.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin: 0;
padding: 0;
}
#menu {
}
#menu li {
float: left;
height: 28px;
margin: 0 5px 0 0;
white-space: nowrap;
}
#menu li strong, #menu li a {
float: left;
height: 22px;
padding: 6px 16px 0 22px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -10px -28px;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
/* hide overflowing text */
max-width: 290px;
overflow: hidden;
text-overflow: ellipsis;
}
#menu li span {
float: left;
height: 28px;
width: 6px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -4px -28px;
}
#menu li.selected strong, #menu li.selected a {
background-position: -10px 0;
color: #000000;
font-weight: bold;
}
#menu li.selected span {
background-position: -4px 0;
}
#menu li:hover strong, #menu li:hover a {
background-position: -10px -56px;
}
#menu li:hover span {
background-position: -4px -56px;
}
#menu li.selected:hover strong, #menu li.selected:hover a {
background-position: -10px 0;
}
#menu li.selected:hover span {
background-position: -4px 0;
}
-thanks in advance 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" <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 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 Hey guys! I seriously need your help!! I have searched everywhere and tried everything, but can't seem to get this to work. Basically I have a DIV tag with one line of text in it. The text needs to be in the middle of the DIV, vertical and horizontal. Now, it looks fine, except in IE, which makes me sad. Does anyone know a way to fix this? You can see the site here (please don't judge me, its not finished!) http://www.juicenothing.com/index.php It's the Lady Gaga text in the header part. Thanks! Jared Trying to get my main content to centre in the middle of the page (vertically). Having problems... Can move the content from the top (with margin) but cannot work out how to get the whole thing to constantly float in the middle /centre. Any help hugely appreciated. thx Hi All, I've been trying to vertically align the span inside the div, but I have no idea why it's not working. Any clues? HTML 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>
<title>Untitled Page</title>
</head>
<body onload="init()">
<div style="background-color: gray; width: 100%; height: 40px; text-align:right; vertical-align:middle">
<span style="background-color: #CCCCCC; font-size: 9pt">Settings</span>
</div>
</body>
</html>
I get this error message when trying to validate my page in 4.01 transitional. What html code can I use to get a vertical alignment with my tables. Error Line 18, column 79: there is no attribute "VALIGN" . ... cellspacing=10 align="center" valign="top"> Thanks I have had a look at this previous thread - but i still have an unwanted and unnecessary vertical scrollbar when using IE7. Can anyone help me get rid of it - please Even with a no-brain - one line page the scrollbar is displayed Heres my page Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title Page</title>
</head>
<body style="overflow:hidden">
<p>One line of text</p>
</body>
</html>
I've had a browse through the forums and done a bit of googling - but I haven't found a solution Is there an easy way to make a vertical line? For example, some equivalent to <HR> ? Thank you. Is there a way to align something in the dead centre of the page? here is my code so far. Code: <html>
<head>
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #BFE4FF;
}
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="801" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="2">
<img src="images/logo_01.jpg" width="136" height="117" alt=""></td>
<td rowspan="9">
<img src="images/spacer_03.jpg" width="30" height="600" alt=""></td>
<td>
<img src="images/spacer_04.jpg" width="611" height="20" alt=""></td>
<td rowspan="9">
<img src="images/spacer_04-05.jpg" width="23" height="600" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="7"><iframe name="iframe1" src="home.html" width=611 height=557 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></iframe></td>
<td>
<img src="images/spacer.gif" width="1" height="97" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_01.jpg" width="136" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td>
<a href="home.html" target="iframe1"><img src="images/button_home.jpg" width="136" height="46" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td>
<a href="srchpat.html" target="iframe1"><img src="images/button_srchpat.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td>
<a href="newpat.html" target="iframe1"><img src="images/button_newpat.jpg" width="136" height="48" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td>
<a href="help.html" target="iframe1"><img src="images/button_help.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/spacer_2.jpg" width="136" height="252" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="229" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_05.jpg" width="611" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
</table>
</body>
</html>
I have managed to centre the page horizontally but i would like to also have the page vertically centred Thanks 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 |
|||||||