|
HTML - Text To Side Of Img, Then Underneath
Can I use the (now deprecated) align attribute to do this ....?
For the sake of simplicity, say I have 3 paragraphs of text. I want the first placed above an image, the 2nd next to it, and the 3rd below it. I can get the text to the left or right of the image, but when I resize the window, the 3rd paragraph can crawl upwards, and then appear right next to the image. I want to force the text placement as I described above. Thanks Similar TutorialsHello, I need help aligning text underneath an image. It seems that all the info I read shows how to align at the top, middle or bottom of an image, but to the side...not underneath. Here is my code. <td><a href="images/zc_shop_hdr1_111k.jpg"><img src="images/zc_shop_hdr1_16k.jpg" alt="Zion Cycles 5rd year in business" width="290" height="193" border="0"></a>February, 2008. Now in our 5th year, we're looking forward to many, many more!</td> If there is such a code that I am looking for, where would I insert it? Thank you in advance for any help! Regina Dear Htmlforums I only got 1 simple question! If i got a site with a comment box, where people can post a comment, and i want the comment they post to be shown on another side? Like when i go to www.whatever.com and post a comment ( Hello ) then the ( Hello ) comment will be shown at my other side with a comment box? What is the code for that? Hello all- This is my first post on HTML forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out. I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar. I've moved that line in the CSS, but it didn't help. Here is a link to my problem: http://www.durhamsafekids.org/main.html Here is my CSS code: Code: body {
font-size: 62.5%;
background: url(images/top-bdr.jpg) repeat;
}
p, li {
font: 1.2em/1.8em Sabon, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em "Helvetica Neue", sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em "Helvetica Neue", sans-serif;
color: #99cc33;
margin-bottom: 10px;
}
h4 {
font :Georgia, "Times New Roman", Times, serif;
color: #0078AA;
}
h3 {
font :Georgia, "Times New Roman", Times, serif;
color: #333399;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
width: 960px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(/images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #ffffff;
text-align: center;
}
#menu {
background: #ffffff;
}
#left-sidebar {
width: 185px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #99cc33;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: #006699;
font-size: 12px;
}
.footer a:link {
/* Applies to unvisited links in class mainNav */
text-decoration: none;
font-weight: bold;
color: #006699;
}
.footer a:visited {
/* Applies to visited links in class mainNav */
text-decoration: none;
font-weight: bold;
color: #006699;
}
.footer a:hover {
/* Applies to links under the pointer in class mainNav */
text-decoration: underline;
font-weight: bold;
color: #006699;
}
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.preload1 {background: url(menu/three_1.gif);}
.preload2 {background: url(menu/three_1a.gif);}
#nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}
#nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}
And here is my HTML code: 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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Durham County Safe Kids</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
<!-- #EndLibraryItem --></div>
<div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
<li><a href="#nogo4">Car Seats</a></li>
<li><a href="#nogo5">Spot the Tot</a></li>
<li><a href="#nogo6">Hyperthermia</a></li>
<li><a href="#nogo7">Distracted Driving</a></li>
</ul>
</li>
<li><a href="#nogo8">Poison Prevention</a></li>
<li><a href="#nogo9">Wheeled Safety</a></li>
<li><a href="#nogo10">Firearms Safety</a></li>
<li><a href="#nogo11">Water Safety</a></li>
<li><a href="#nogo12">Home Safety</a></li>
<li><a href="#nogo13">Pedestrian Safety</a></li>
</ul>
</li>
<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
</ul>
<!-- #EndLibraryItem --></div>
<div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>
<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
<h2>This website is currently under construction. Please come back soon!</h2>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->
<div id="footer">
<table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
<tr>
<th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
<th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
<th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
<th scope="col"><span class="footer"><a href="#">Links</a></span></th>
<th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
<th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
</tr>
</table>
<br>
<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
</div><!-- #EndLibraryItem --></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
As you can see from the linked screenshot, the text shows up on the right side of the page, not in the orange box. http://www.durhamsafekids.org/dskscreen.jpg Thanks all! ~Jeff http://www.gouramidesign.com/portfolio.aspx#webdesign See that website, how it opens a lightbox type of thing, but wth the image on the left side and then a text on the right side ?What scripts does that website use? I currenty use prettybox, a jquery script, but I dont want to JUST display images, io want to have a website portfolio and thi sis EXACTLY what I've been looking for! I'm having some trouble trying to get the following page to show the three link columns centered, side by side: http://centralmusic.com.previewmysite.com/links.php EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side. I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly). Alright so I actually tried a couple more things after typing that last paragraph. On this page: http://centralmusic.com.previewmysite.com/gallery.php I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things. Hey, I am using tables to create a layout in dreamweaver. The layout appears fine in the design view with Dreamweaver, but when viewed in Explorer all the tables appear side by side, instead one under the other. I have tried <p> and <br> between the tables, but no effect, still side by side in explorer. Not sure why this is happening. thanks in advance for your assistance, illusion I've got some hyperlinks underneath a (transparent) image. Because of this, they're not clickable. Mouse hover isn't even detected. Is there any way round this without placing the image beneath the hyperlinks? Hi, I'm new to HTML can anybody help me how to place to tables side by side Hello i am having some trouble aligning some checkboxes. I am trying to get them to sit side by side horizontally but when i do this with absolute positioning i will click the first set and it will check the second so i have to go way to the left of the first set to check mark it. Sorry for the butchered script. Thanks <div> <tr> <td height="40"> <label for="budget" class="label">Budget: From</label> <input name="budget" type="text" id="budget"> <span class="from">To</span> <label for="to" class="from"></label> <input name="to" type="text" id="to"> </td> </tr> </div> <tr> <td> <input name="boxesh" type="checkbox" id="home" value="walkdis"> <label for="home" class="checkboxes">Home</label><br> <input name="boxesb" type="checkbox" id="BoatDock" value="walkdis"> <label for="BoatDock" class="checkboxes">Boat dock</label><br> <input name="boxesv" type="checkbox" id="viewofwater" value="walkdis" title="Check the ones you want"> <label for="viewofwater" class="checkboxes">View of Water</label><br> </td> <td> Hi folks, I have a table and in one cell I have two images that normally appear side by side but when an a adjacent cell (or any cell in the same row) gets too large the images end up appearing on top of one another... is there some way to force them to stay side by side? I'd rather not have a table within the cell in question although i suppose i could if there's not some html or css way to make it work. Thanks in advance, Michael Hello, I'm using the Lytebox image script and I would like for my images to appear side by side and not vertically. This is the code that I'm using but for some reason it came out kind of odd. Website:http://www.marinaelizabeth.com/2011/...book-1_30.html Quote: <center>Click on images to enlarge and view them as a gallery.</center> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-kIL2bYltvuY/Tv5ZYiwh_PI/AAAAAAAAAWM/rajrPOgV4ok/s1600/4e8159ba888c8.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://4.bp.blogspot.com/-kIL2bYltvuY/Tv5ZYiwh_PI/AAAAAAAAAWM/rajrPOgV4ok/s1600/4e8159ba888c8.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-rQua3zWNynw/Tv5HzbTLgxI/AAAAAAAAAUs/Uk6T6DfLBTw/s1600/301041_2223476301499_1085460275_32542139_1266806142_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://1.bp.blogspot.com/-rQua3zWNynw/Tv5HzbTLgxI/AAAAAAAAAUs/Uk6T6DfLBTw/s1600/301041_2223476301499_1085460275_32542139_1266806142_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-_So5oCwC_zY/Tv5HzNghb7I/AAAAAAAAAUc/4uVJ24oiO6A/s1600/300161_2223481061618_1085460275_32542158_923192763_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-_So5oCwC_zY/Tv5HzNghb7I/AAAAAAAAAUc/4uVJ24oiO6A/s1600/300161_2223481061618_1085460275_32542158_923192763_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-NzLeC4jz9vg/Tv5Hy3xv3cI/AAAAAAAAAUQ/3q-062i7e2g/s1600/300161_2223480941615_1085460275_32542155_373340707_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://3.bp.blogspot.com/-NzLeC4jz9vg/Tv5Hy3xv3cI/AAAAAAAAAUQ/3q-062i7e2g/s1600/300161_2223480941615_1085460275_32542155_373340707_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/--K5mxuMSNDA/Tv5HywJFhvI/AAAAAAAAAUI/D5PxnOVYqtc/s1600/300161_2223480901614_1085460275_32542154_1471612777_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://1.bp.blogspot.com/--K5mxuMSNDA/Tv5HywJFhvI/AAAAAAAAAUI/D5PxnOVYqtc/s1600/300161_2223480901614_1085460275_32542154_1471612777_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-AEljI6VqRXQ/Tv5OS3ta-PI/AAAAAAAAAVc/NOdLmyO4_E4/s1600/311979_2223482901664_1085460275_32542161_509691087_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-AEljI6VqRXQ/Tv5OS3ta-PI/AAAAAAAAAVc/NOdLmyO4_E4/s1600/311979_2223482901664_1085460275_32542161_509691087_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-R27iVxEfLbM/Tv5OSf6kt-I/AAAAAAAAAVU/YQmkZr04C6w/s1600/301041_2223476421502_1085460275_32542142_204426155_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-R27iVxEfLbM/Tv5OSf6kt-I/AAAAAAAAAVU/YQmkZr04C6w/s1600/301041_2223476421502_1085460275_32542142_204426155_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> <br> <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-qQSPdm60jgQ/Tv5ZY-pmGXI/AAAAAAAAAWU/3F9MxBXbV7M/s200/312657_2223450300849_1085460275_32542123_217211886_n.jpg"><img style="float: left;display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="http://2.bp.blogspot.com/-qQSPdm60jgQ/Tv5ZY-pmGXI/AAAAAAAAAWU/3F9MxBXbV7M/s200/312657_2223450300849_1085460275_32542123_217211886_n.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a> Thanks in advance My code looks like this:
Code: <a id="commercialadvantages" href="/link1"><span> </span></a><a id="hearradio" href="/link2"><span> </span></a><a id="viewearnings" href="link3"><span> </span></a> When I go to the live view, they come out stacked like this: But I want them side by side, not stacked. Is it the <a> code that causes them to stack? What can I change in my code to make them side by side? Thx. I am trying to edit my image viewer on my site, but for some reason it works perfectly in chrome, safari and Firefox, but IE is giving me one issue. The images are being stacked vertically (one on to of the other) rather than show up all in one row horizontally. This is making my page longer in IE and just does not look the way I want it to..Any ideas at to what could cause this? here is a link to test the issue...I have tried everything that I know how to do, but have had no success..http://www.jewelryboxavenue.com/Ocea...-Box_p_58.html I have this table code, for two tables. It displays them one below the other. How can I change this so the two tables are side by side? Thanks. Code: <table width="100" border="1" cellspacing="0" cellpadding="12" bordercolor="#000000">
<tr>
<td bgcolor="#FFFFFF" width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">Type</font></font></b></font></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p>
</td>
<td width="60%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Number</font></b></font></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p>
</td>
</tr>
<tr>
<td width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">A</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
</td>
<td bgcolor="#FFFFF" width="50%">
<p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>1</b></font></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
</td>
</tr>
</table>
<br>
<table width="100" border="1" cellspacing="0" cellpadding="12" bordercolor="#000000">
<tr>
<td bgcolor="#FFFFFF" width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">Type</font></font></b></font></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p>
</td>
<td width="60%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">Number</font></b></font></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p>
</td>
</tr>
<tr>
<td width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">A</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
</td>
<td bgcolor="#FFFFF" width="50%">
<p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>1</b></font></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#800000">B</font></font></b></font></p>
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></font></p>
</td>
<td width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">2</font></b></font></p>
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></p>
</td>
</tr>
<tr>
<td width="50%">
<p align="center"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#800000">C</font></b></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#FFFFFF"></font></p>
</td>
<td bgcolor="#FFFFF" width="50%">
<p align="center"><font color="#FFFFFF"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"><b>3</b></font></font></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
</td>
</tr>
</table>
Hello, I'm trying to position two divs side by side at the bottom of the page so they serve as Next/Previous links to navigate between pages. HTML (no wrappers): <div class="left"><a href="#">PREVIOUS</a></div> <div class="right"><a href="#">NEXT</a></div> CSS: .left { float: left; } .right {float: right; } However, the end results produced: PREVIOUS NEXT I need them to be on one line like so: PREVIOUS NEXT How do I achieve the desired effect? Thanks Hello everyone. I want to display two lists side by side. When i float:left the first one, the second list collapses; that is, the nested and enclosing lists are actually aligned. How do I fix that? Thanks jenia <?xml version = "1.0" encoding = "utf-8" ?> <!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"> <head><style type="text/css"> li.fullBullet{list-style-type: disc;} li.hollowBullet{list-style-type: circle;} li.fullSquare{list-style-type:square;} li.letter{list-style-type:lower-alpha;} li.decimal{list-style-type:decimal;} li.roman{list-style-type: lower-roman;} #firstList{float:left; width: 100px; margin-right: 255px;} #secondlist{ } </style> <title>Insert title here</title> </head> <body> <ul id="firstList"> <li class="fullBullet">Outer-1</li> <li class="fullBullet">Outer-2 <ul> <li class="hollowBullet">Inner-1</li> <li class="hollowBullet">Inner-2</li> <li class="hollowBullet">Inner-3 <ul> <li class="fullSquare">Deep-1</li> </ul> </li> <li class="hollowBullet">Inner-4 <ul> <li class="fullSquare">Deep-2</li> </ul> </li> </ul> </li> <li class="fullBullet">Outer-3</li> </ul> <ol id="secondlist"> <li class="decimal">Outer-1</li> <li class="decimal">Outer-2 <ol> <li class="letter">Innter-1</li> <li class="letter">Innter-2 <ol> <li class="roman">Deep-1</li> <li class="roman">Deep-2</li> </ol> </li> </ol> </li> <li class="decimal">Outer3 <ol> <li>inner-3</li> </ol> </li> </ol> </body> </html> Hey, I've got to modify this web project but I haven't done any web programming for 4 years. Could you tell me how I would put two forms side by side on a page? They're similar to the following format from w3schools. The forms are pretty much identical in structure apart from the content. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset> </form> I am trying to create a website. I have a picture in the middle of the page. I want to put a comment box on the right side of it, but centered with the picture. I have it on my page now and the comment box is on the right, but it is higher on the page than the picture. Here is the code I am using.... <div align="center"><span style="font-family: Arial; font-size: 12pt;"><img alt="Pasquale Di Scipio / Filomena Priore" src="/patsy_and_filomena.jpg" width="423" align="middle" height="290"></center><align="right"><!-- BEGIN MyShoutbox.com CODE --> <iframe src="http://612085.myshoutbox.com/" width="205" height="400" frameborder="1" allowTransparency="true"></iframe> <!-- END MyShoutbox.com CODE--></span> What am I doing wrong? Here is my site address so you can see what I am talking about. Maria's Family Thank you |
|||||||