HTML - Vertical Alignment Of Text And Images

I am hoping that someone may have a solution for me - in one of my table columns I have 3 images (logos that link to sites) and I have set them with a vertical top alignment - so that when the page goes long - the logos stay at the top - this works perfectly in all browsers, except (of course) IE... would anyone know how to fix this?
My site can be viewed at http://bebywebtest.9k.com/history.html ... if you click open the collapsible menus - you can see the logos - start to center themselves down the page - instead of staying at the top...

<br /> </td>
<td width="5" rowspan="3">&nbsp;</td>
<td width="380" height="179" bordercolor="#000066" bgcolor="#FFFFFF"><div align="center"><a href="http://www.israelbonds.ca"><img src="Images/header-march-2006.gif" alt="bonds" name="israelbonds" width="256" height="100" border="0" valign="top" id="israelbonds" /></a></div></td>
</tr>

SO - if anyone has any suggestions on how to remedy this fiasco - I would be most grateful!
Thanks.

Hi all,

Newbie here.

So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment.

I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window".

This is the table instantiation:

<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise.

Has anyone encountered this before and can you help?

The site is http://www.thechapelstudios.co.uk

Hello to all Forum members.

It's my first post here. I have a problem on my site using FF 2.0 and opera.

When you open http://review4dummies.com/test/index.php you see it has horizontal alignment = center, but when you click on link About Us the site will move about 10 pixels to the right and of course its centered but... huh not exactly. When you browse and click on link Contact Us its back to normal. Clicking on report-a-bug does not move site too.

I was checking whole code and noticed that if i add some paragraphs and blank tables to the about-us.php file everything seems to be ok.

This is driving me nuts, any help will be apreciated.

PS: in ie6 everyting seems to be ok.

PS2: I also noticed this bug on some sites:

eg. home.pl when you click on menulink "Praca" it will move horizontaly too.

eg2. nazwa.pl when you click on menulink "KONTAKT" it will move too.

Anybody?

Best Regards!

Hello,

I'm trying to program a couple unordered lists into my web page and I encountering a problem.

I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one.

Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm

Here's the code for the bottom two cells with the lists in them:

Code:

<tr>
<td style="vertical-align: top; padding-left: 0px; padding-top: 0px;">
<ul type="disc" style="margin: 1em;">
<li>Elegant dining room</li>
<li>Fireside lounge</li>
<li>Library and computer room</li>
<li>Craft room & country kitchen</li>
</ul>
</td>

<td style="vertical-align: top; padding-left: 0px; padding-top: 0px;">
<ul type="disc" style="margin: 1em;">
<li>Wellness and exercise spa</li>
<li>Beauty salon</li>
<li>Theater and multi-purpose room</li>
</ul>
</td>
</tr>

Does anyone know why they refuse to be aligned with the top of the cells?

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.

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.

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><font size="2">Newmarket Chamber of Commerce</font></strong>
<br />
<font size="2"><strong><em>President &amp; Ceo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ; &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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

I am having an alignment issue with a row of images. The site is located he http://www.teewala.com/teewala

I cannot figure out why the three images are shifted slightly to the right. The code is very simple, so I figure the solution should be simple. Any help is greatly appreciated.

Thanks!

OK well This workse perfectly with a .html document, but when I use .php it all goes bad,

http://rapid-hook.com/script-2/index.php

The arrows ar suppose to be aligned with each other, but theres a gap between the table, for the bottom only, not sure how to fix this.

Hello All,

Wondered if anyone could help. Have designed a website at www.kerrsminaturerailway.co.uk.

The first problem is the JQuery slide menu nav bar does not match the width of the body. I've set the width of the nav bar as 100% on the CSS, and with both Firefox and Internet Explorer, there is a white gap on the right hand side. Any ideas how to fill this in and have a nav bar the width of the body?

The second problem is I have two links on the banner area, to a Facebook and Twitter group, but both images appear to be hidden by the banner. How do I get them to overlap the banner?

Many thanks in advance, we'd be grateful of any help on both, to smarten up the website.

Peter

hello all,
I found a simple effect that make the text scroll vertical which it's prefect for my website.


Code:

<div align="center">
<marquee scrollamount="2" direction="up" loop="true" width="35%">
 <center> 
THIS 
IS COOL
</center>
</marquee>
</div>

the thing is, how can I make it stop on RollOver / hover

Hi,

I just thought I'd jump right in with my query. I'm looking to make Text in a table cell vertical, I've come up with solution of inserting <br />'s after each letter

<table>
<tr><th class="green">O<br />n<br />e</th>
<th>Two</th>
<th>Three</th></tr>
</table>

but I just wanted to know, is there a way of achieving this without doing this, can I control the size of the cell with css?

thanks

htmlhex

Hello everyone, would someone please help me with just vertically centering the text within the box that says "This page was last updated on Monday, May 16, 2011 @ 10:39 AM" it's for my site located @ http://www.trillionaireme.com

Here is my CSS code:

Code:

body {background-color:#ffffff;border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
h1 {background-color:#f5f5f5;font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;} 
h2 {font-size:17px; color:grey; font-family:arial;word-spacing:30px;text-align:center;}
p {font-size:11px; color:grey; font-family:arial;}
p.bordertop {border-style:solid;border-width:5px;border-color:gray;border-top-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
p.borderbottom {border-style:solid;border-width:5px;border-color:gray;border-bottom-color:#ffffff;border-left-color:#ffffff;border-right-color:#ffffff;}
 
IMG.displayed {display:block; margin-left:auto; margin-right:auto;}
a:link {color:grey; text-decoration:none;}
a:visited {color:grey; text-decoration:none;}
a:hover {color:#c0c0c0; text-decoration:none;}
a:active {color:#c0c0c0;text-decoration:none;}
div.page {width:920px;padding:0px;border:0px;margin:0px auto;}
div.logo {width:200px;padding:0px;border:0px;margin:0px auto;}


div.topleftbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:20px;left:1px;font-size:11px;color:grey; font-family:arial;}

div.topmiddlebox {text-align: center;width:375px;height:25px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:270px;font-size:11px;color:grey;font-family:arial;text-align:center;margin-}

div.toprightbox {width:250px;height:250px;padding:0px;border:1px;border-style:solid;border-color:#dcdcdc;position:relative;top:-15px;left:394px;font-size:11px;color:grey;font-family:arial;text-align:right;}

My html code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html><title>TrillionaireMe</title><link rel="shortcut icon" href="images/trillionaireme.ico">
<head><link rel="stylesheet" type="text/css" href="trillionaireme.css" /></head><body>

<h1>&nbsp</h1><div class="logo"><a href="http://www.trillionaireme.com">
<img class="displayed" src="http://www.trillionaireme.com/images/trillionaireme.jpg" width="196" height="233" border="0" /></a></div>
<h1>&nbsp</h1>
<p class="borderbottom">&nbsp</p>
<div class="page"><h2>
<a href="http://www.trillionaireme.com/fitness.html">Fitness</a> 
<a href="http://www.trillionaireme.com/nutrition.html">Nutrition</a>
<a href="http://www.trillionaireme.com/money.html">Money</a>
<a href="http://www.trillionaireme.com/relationships.html">Relationships</a>
<a href="http://www.trillionaireme.com/parenting.html">Parenting</a>
<a href="http://www.trillionaireme.com/music.html">Music</a>
<a href="http://www.trillionaireme.com/literature.html">Literature</a>
<a href="http://www.trillionaireme.com/you.html">You</a>
<a href="http://www.trillionaireme.com/them.html">Them</a>
<a href="http://www.trillionaireme.com/vision.html">Vision</a></h2>
</div>

<div class="page">
<div class="topleftbox">This is the top left box.
<div class="topmiddlebox">This page was last updated on Monday, May 16, 2011 @ 10:39 AM
<div class="toprightbox">This is the top right box.
</div></div></div></div>


</body></html>

hi

i am new to HTML, but a quick learner.

i am really stuck though.....i am trying to change the font and size on a simple paragraph on my website.....here is the HTML i put in

<p align=center> <font size="4" face="century gothic" > ********** my text ********* l</font>

but now the lines in the paragraph are really squished together vertically......is there a HTML code i am missing to add in

here is a link to see what it looks like.....http://www.cocosshoppe.com/store/eco...?idCategory=76


Please find it in your really smart hearts to help me ;J

i want to space out my text a bit more, i think it's too close together but i dont' know how to fix it, please help!

http://leilanimunter.com/news.htm

THANK YOU!!!