|
HTML - Align Images Along The Sides
Bear with me as I'm not that good at this HTML stuff! OK, I've started a website from a free template I found on the net and what I want to do now is run some 125 x 125 images down each side of the page (like this) but I can't work out how to do it in HTML or CSS. This is the actual website. Hoping someone can help!
Similar TutorialsSo first off I would like to say I am new to website design & html. I have really just messed around with free templates in an attempt to make a decent website. Please feel free to talk to me like a child. My main problem is with images on my site not aligning. I have looked over the code so many times and do not understand why they are out of wack! Here is the url http://www.springfieldsqueencityroll...y.com/T&S.html I would apreciate any feedback you could give me. Thanks in advance! Anne-Marie Also I don't know if the code is needed on this post but if a code is needed just let me know I will be happy to provide it. Hi, I inserted three thumbnail images on a post on Wordpress. They are 133x100 px and the code was <p> <img src="thumbnails/dog1.jpg" alt="Adog"> <img src="thumbnails/pelusa.jpg" alt="A dog"> <img src="thumbnails/puppies.jpg" alt="Puppies"> </p> When I view the post they show one under the other. Why they align one under the other and not one after the other if they are really small and seems to be enough space for the three of them. Considering <img> element is an in-line element. Hello I have images on my site found here. You can see them on the top news bar, RSS feed, Facebook, Twitter How can I make those same line, aligned to the right. Here is the current code for this section. HTML Code: <div id="contenttitle">RuneHints, Clan & RuneScape News <a href="http://feeds.feedburner.com/RunehintsNews"><img src='http://runehints.com/forums/public/style_images/master/feed.png' alt='RSS Feed' id='rss_feed' class='clickable' /></a><a href="http://www.twitter.com/runehints"><img src="http://twitter-badges.s3.amazonaws.com/t_mini-a.png" alt="Follow runehints on Twitter"/></a><a href="http://feeds.feedburner.com/RunehintsNews"><img src="http://runehints.com/images/f_logo.png" alt="Follow RuneHints on Facebook" width="16" height="16" /></a></div> Hi, I've got an image 25x25px which i'm trying to vertically align in a 35px high list element. The css attached to the image is: width: 25px; height: 25px; border: 0px; vertical-align:middle; and the css attached to the list element is: font-size: small; height: 35px; border-style: ridge; border-width: 0px 0px 2px 0px; I'm trying to find a way of getting the browser to vertically align through css. I'm not trying to use padding, etc on the image, because i'm worried that when a user enlarges the text, or its rendered by different brwosers, etc, the image will mis-align itself. I thought vertical align was the right attribute, because i thought it vertically aligned all inline elements. but when i've attached it to the image, nothing has happened. http://www.tendervendors.com/contact.php I'm trying to vertically align the little picture of a house, in the navigation bar. I'm greatful for any help you can give, Matthew Millar Hey, I want an image in the dead center of a frame. All I have so far is: <center><img src="images/banner_ani.gif"></center> I don't know how to vertically align the image. Could someone please fix it for me or tell me how. I tried googling everywhere but all I could find was stuff that involved CSS. Thanks Is there a way to block align justify images? HTML Code: <body> <div align="justify" style="width:450px;"> <img src="1.jpg" width="50" height="50"> <img src="2.jpg" width="50" height="50"> <img src="3.jpg" width="50" height="50"> <img src="4.jpg" width="50" height="50"> <img src="5.jpg" width="50" height="50"> <img src="6.jpg" width="50" height="50"> </div> (bottom example) Hello HTML experts; a nooby here. Searched for this and found tons of posts but none seemed to fit my question or fix my problem. To show what I am trying to do, I put all the details he http://www.sticksite.com/align/ Is there a solution that a nooby can understand? THANKS for your time! Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? The navigation column on the left side of this web page only shows 3 sides of its border. Can you tell me why? (I've attached an image too). Thanks Code: <HTML>
<HEAD>
<Title></Title>
<style type="text/css">
body {margin: 1px 100px; 0px 0px;
padding: 0px;}
table.with_color
{
background-color : #ffffff;
}
</style>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
<TR valign=middle height=10>
<TD class=headera1><IMG src="/images/clear.gif" height=1 width=159 border=0></TD>
<TD width="100%" align=right class=headera2> </TD>
</TR>
<TR>
<TD class=headera3><IMG src="/images/clear.gif" height=1 width=159 border=0></TD>
<TD width="100%" align=right class=headera4> </TD>
</tr>
<TR valign=top>
<TD></TD>
<TD valign=left width=795 height=1><IMG src="/images/topimg11.jpg"> <IMG src="/images/topimg2.jpg"></font></TD>
</TR>
</TABLE>
<TABLE cellSpacing=10 valign=top cellPadding=0 height=100% width=100% border=0>
<TR valign=top>
<TD width=10%>
<div style="border: solid 1px #8B7D7B;"><div style="border: solid 1px #000000;"><div style="border: solid 4px #ffffff;">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
</TABLE>
<table class="with_color" cellSpacing=0 cellPadding=0 width=100% border=0>
<TR>
<TD><font class=tbody>
<form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp">
<table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr>
<tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr>
<tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr>
</td></tr></table></td></tr></table></td></tr></table></form>
<div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"><a href="?action=login"> Home</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphone1.gif">--><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphone2.gif">--><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphone3.gif">--><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphone4.gif">--><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;">
<a href="?action=forgotusername"> Contact Us</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphone5.gif">--><img src="/images/hphone5.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><!--<IMG src="/images/hphone7.gif">--><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font><br><br></div>
</TD>
</TR>
</TABLE>
</TD>
<TD width="1" height=100% background="/smusermanager/images/dot.gif">
<TABLE cellSpacing=0 valign=top cellPadding=0 width=1 border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD>
</TR>
<TR valign=top height=3>
<TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=1 border=0></TD>
</TR>
</TABLE>
</TD>
<TD width=100%>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/smusermanager/images/clear.gif" height=20 width=1 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD class=white><IMG src="/smusermanager/images/clear.gif" height=2 width=1 border=0></TD>
</TR>
<TR valign=top height=3>
<TD class=gray><IMG src="/smusermanager/images/clear.gif" height=3 width=11 border=0></TD>
</TR>
<TR>
<TD valign=top><font class=tbody>
<style>
Hi There I Was if someone could please help me with the design of this website. It started off as a template and i have edited and changed things as i have learnt. I would like to offer advertising space on each side of the page but it keeps leaving about a 50 pixel gap between the banner and the page !! If anybody can help me out please. The page is located on http://www.sapokershop.co.za/test.jpg Thank you This works fine in firefox but IE has one of the boxes cut off - help? http://cleanroomconsumables.com/WebLead2_bak2.asp Thanks! Jen P.S. This is NOT a pathetic post to try and drive web traffic either - this isn't the actual URL the page will be. Hello, For ages I have been trying to figure out how to add sides to my table, however I can not figure it out, please help. Basically I want side added to the table on this page of my host. - If anyone could help me that would be great. Thanks. Hi, How do I get my table to be flush with the top and sides of the screen? Currently there is a spacing in automatic between. Thanks I want to align some text on opposite sides of the same line, ie: (but obviously without the underscore) <<<previous_____________________________________________________________ next>>> and I'm not sure how as if I just use p align, the "next" will be one line below the "previous"... any suggestions? thank you! i have a javascript running a scrolling text on my site and im trying to position it to either align to the right or set x,y coordinates... i already tried putting align =right in the tag and it didnt work here is what im working with... http://www.freewebs.com/fallingrain11/1.html here is the call up im using i also <iframe width="165" height="215" src="irawr-scrollernewstic.html" SCROLLING="no" FRAMEBORDER="0" border=0></iframe> 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'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 |
|||||||