|
HTML - Rows Of Li Elements
Is there a way that anyone knows of to put list items side by side in a row? I'm currently working with some html/css/jquery that allows you to move li elements around and order them. However, instead of being on a new line for each element, I'd like to put several side by side in a row.
Is there any way with html/css to make this happen, or is there no way to change the "nature" of li elements? Similar TutorialsHow do I make element's change their height automatically depending on whether they have anything contained within them? My page background is a div's bg image but the div hasn't expanded to the size of the contained elements. The div's name is nicola-bg Here is the site I have the same problem too with #image-section. That div is styled to have large borders but the borders don't extend to the height of the div's containing elements. Can any body tell me how to delete rows by row id (rows are added/deleted inbetween rows dynamically so I cannt use the index property) Hey can someone help me and tell me how i can make like a paragraph in boxes that are side by side with borders please. Thank you. Hi there, I'm having a problem with spacing between rows n an html tabel. First let me stress that I am no expert and just know basics to get me by. I have been using this amazing bespoke platform for events websites and adding little bits of html in. The site in question is http://www.ffrp2.fatsoma.com/home.php. I'm sure that I am probably doing this the hard way but im a designer not a coder. My brother built the site builder but he's away skiing so cant ask him and a client wants his site down asap... Here's the code I have used <table width=960px border="0" cellspacing="0" cellpadding="0"> <tr height=332px><td width=960px> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_55.jpg"/></a> </td> </tr> <tr><td> <table width=960px border="0" cellspacing="0" cellpadding="0"> <tr height=447px> <td width=232px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=232px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_56.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_57.jpg"/></a> </td></tr> <tr height=90px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_58.jpg"/></a> </td></tr> </table> </td> <td width=218px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=175px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_59.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_60.jpg"/></a> </td></tr> <tr height=171px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_67.jpg"/></a> </td></tr> </table> </td> <td width=237px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=90px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_62.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_68.jpg"/></a> </td></tr> <tr height=85px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_64.jpg"/></a> </td></tr> <tr height=171px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_65.jpg"/></a> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> many thansk in advance for any help offerd Mark Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks Frank http://www.spartafitness.com/home.htm Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic. The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like Instead it looks like The code for the table is this: Quote: <table align="center" cellpadding="0" cellspacing="0" border="0" width="725"> <tr> <td width="725" valign="bottom" border="0"> <img src="/images/header.png" width="725" height="33" /></td> </tr> <tr> <td width="725" bgcolor="0099CC" align="center"> <p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day*** </td> <tr> <td width="725" valign="top" border="0"> <img src="/images/footer.png" width="725" height="33" /></td> </tr> </table> Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks. I am working on an application within a website. Most of the HTML for the entire site, I did not create myself, just some HTML and CSS for a specific application. Even in that application, I imported some of the text (which contains HTML tags) from a previous application. So, I only did a small portion of the HTML/CSS. My problem is that when users print out this page in IE6, some of the rows of the main table are missing from the printout. For example, this page: http://www.northcarolina.edu/pe_test/sample_pe.php Does any one have any knowledge of a bug that would cause IE6 not to print some rows? Does any one see any reasons why some rows in the tables (the ones with class='workplan') would skip rows when printing? Thank You. I can't figure out how to get IE to position this page at the top. This has consistently worked perfectly in FireFox, no matter what changes I try. It has consistently NOT worked in IE, it starts each page 180 px from the bottom of the header. And please don't rag on me for using tables. This is custom coding for a Perl system we are using. The programs generate tables and rows, and I have to fit my code into the generated pages. Here's the code that's currently running. I know there are duplicates in here, I kept adding things hoping something would wake IE up. It's interesting that with all this redundancy, FireFox has no problems at all. And both the HTML and the CSS validate. The first table is actually in the header, and closed in the footer, so it has to be there. ============================================= <table class="ac_mainbody" cellpadding=0 cellspacing=0 style="position: absolute; left: 260px; width: 550px; top: 180px;"><tr><td> <table width="85%" align="left" border="0" cellpadding="0"> <tr><td class="top_of_page" colspan="4" valign="top" style="vertical-align: top;"> <h5><font face=Georgia color="#990066" size="2"> Offering quality products that bring safety and comfort into your life. We seek out unique equipment and supplies designed to improve the quality of life for those with disabilities and those who assist them.</font></h5></td></tr> <tr><td style="text-align: center;" colspan="4"> ============================================= Everything after this point is lined up correctly in both browsers. It's the starting position that I can't get IE to recognize. I started with just CSS, here's the code: h5.top_of_page {font-size: 12pt; color: #990066; margin: 0px 0px 0px 0px; padding-right: 60px; font-weight: bold; text-align: left; vertical-align: top;} IE ignored everything, including the font color. That's when I started adding names and parameters one at a time, including valign and the font stuff. I also tried <p> and <div> instead of the second table. Same problem. I tried position=”relative” --- everything clumped together at the left, 180px too low on FireFox and 360px too low on IE I tried position=”fixed” --- everything clumped together at the left, and still low on IE Hi All, Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor: But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346 Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch! Afternoon everyone, I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser? Code: <table>
<label for="X">
<tr>
<td>
<input type="checkbox" id="X"/>
</td>
<td>
THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX
</td>
</tr>
</label>
</table>
Thanks! I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions. Hello, Can someone help me with this here. I want to make 3 tables with links to other sites on there. I want them to count down from 1 - 5 then 6 - 10 and 11 - 15. In the picture I want to have one big bar running across saying BEST LINKS and under it the website links. What I need is the code to divide/split the links. Code: <tr> <td width='100%' colspan='4' style='border: 1px solid #CCCCCC'> <table cellpadding='0' cellspacing='4' width='100%'><tr> <td width='25%' valign='top'> <?php include "topratedmenu.php"; ?> </td> <td width='25%' valign='top'> <?php include "mostpopularmenu.php"; ?> </td> <td width='25%' valign='top'> <?php include "topplayersmenu.php"; ?> </td> </tr></table> </td> </tr> <tr> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> </tr> How can you make a border appear between rows in a table but not between the columns? Hence you won't notice that there's actally any columns in the table since it's not squared, only the rows are marked, but the columns still are there to prevent the cells from ending up at different horizontal positions at the different rows. I'm trying to understand the need for <div> elements, couldnt we do the same things with a <p> element. I understand the <span> element because it allows you to have box models for inline elements. Is <div> mostly to keep things organized and easy to read? So i haven't been able to figure this out and in need of some assistance.Here is the code.want to put them in rows of 2 & columns of 4 but instead it put them in a list.Im sure this is a simple fix.I only have it set up to list 5 products but can set it up for more.If you need the entire page of code just let me know. The webpage for the code http://www.allyugioh.com/products_list <!-- Item loop --> <notag rst:define:img="item1:/ImageUrl" rst:define:notavailable="0" /> <notag rst:ifnot="{img}" rst:define:img="img/noimage.gif" /> <notag rst:if="{item1:/QtyAvailable} le 0" rst:define:notavailable="1" /> <div rst:if="item1:/Title"> <hr/> <a href="#" rst:content="item1:/Title" rst:href:lid="{item1:@id}" rst:href:pagename="product">name</a><br /> <img border="0" height="100" rst:attr:id="thumb{item1:@id}" rst:attr:src="{img}" src="img/imgb.gif" width="100" /><br /> <div class="prod_details_tab"> <b><i rst:content="{item1:/Price@currency}{item1:/Price}">$1</i><br /></b> <a href="#" rst:href:lid="{item1:@id}" rst:href:verb="ATC" rst:href:pagename="cart" rst:ifnot="{notavailable}">add to cart</a> </div> <i rst:content="">$1</i><br /> <i rst:content="">$1</i><br /> <br /><br /> </div> </notag> <!-- Item loop end --> Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes. Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> Hi. First time posting here, I hope this is a good place to get some quick help as I've hit a problem I can't figure out myself. I'm having problems with a site I'm working on: http://megansmetalworks.com/home.html My problem is this: the row I've created at the top of the page is far thicker in Firefox than in Safari (where it shows up exactly the height I wanted) In FireFox it is HUGE! how do I fix this? I must have made a mistake The code in question is as follows: <frameset rows="70, 20% framespacing="0" frameborder="0"> In safari it appears to show up correctly, 70 pixels tall. But in FireFox it is much larger and takes up the top half of the screen. Can anyone explain why this is? I need the navigation bar at the top to show up at the same height in all browsers. Thanks in advance. Ok, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type=text/css>
input
{
background-color: black;
color: white;
}
th
{
background-color: black;
color: white;
}
td
{
background-color: green;
}
</style>
<script type="text/javascript">
var a;
var b;
var c;
var d;
var e;
function inputtext(inputtext)
{
a=document.getElementById("inputcalculation").value;
b=inputtext;
c=a+b;
document.getElementById("inputcalculation").value=c;
}
function Evaluate()
{
d=document.getElementById("inputcalculation").value;
e=eval(d);
document.getElementById("outputcalculation").value=e;
document.getElementById("inputcalculation").value="";
}
</script>
<title>Help-In-Math Calculator</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="11" style="background-color: black">
<center>
<input type="text" id="inputcalculation" value="" />
</center>
</th>
</tr>
<tr>
<td colspan="11" rowspan="5">
<center>
<input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" />
<br />
<input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" />
<br />
<input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" />
<br />
<input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=÷ onclick="inputtext('/')" />
<br />
<input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/>
</center>
</td>
</tr>
<tr>
<td colspan=11>
<input type="text" id="outputcalculation" onfocus="blur()" />
</td>
</tr>
</table>
</body>
</html>
Hello everyone! Thank you for taking the time to read this. Could anyone please look at my site in IE or FF and tell me how to remove the gap between the table row that has the links at the top and the row that starts the content? The address is http://www.hard2kill.org. I figure it would be less cluttered by leaving the code off of this post and just accessing the page source from the site; however, if you would like me to post it here, I certainly can! When I view it in Chrome, it looks just fine. IE and FF show the gap. Yes, I know using tables this way is bad designing, but I am continually learning more and trying to transition from them, so please leave personal opinions to yourself. If a fix can be made, then I would appreciate your input! I have all the cellspacing, cellpadding, and borders set to 0 so I am at a loss. Thanks in advance! Hi, I have a form with html combo and input elements in a dialog with scrollbar. Problem I am facing is some of combo elements which are disabled disappear. When I scroll the disabled elements appear again. This happens only on IE. Works fine on firefox. Is there any issue with disabled elements as such. Thanks |
|||||||