|
HTML - Splitting An <li> Tag Into 2 Cells
Hi,
I have been challenged with creating the HTML for a news article list which is going on a website. I have started out by creating a test list using <ul><li> tags This is what the list looks like http://design2rent.co.uk/menu_test/index.html The data for this list will be grabbed from a database but the designer would like to have the date aligned to the right instead of at the end of the article, i have uploaded an image here for what the end result should look like. ignoring the backgroudn images ect as this is just a snippent of the design is it possible to have 1 list item split into 2 cells and align one of them to the left and the other to the right to acheive the end result layout? I've racked my brains with divs and tables but can't seem to find a solution and tried many google searches but not found any relevent topics. any help would be hugely appreciated Similar TutorialsHi all, I'm creating a table were lots of rows have to contain just one cell. There are a few exceptions where I need to or three cells in a row. At the moment I've created a all the rows with a collspan of 3 or 2. However, I was thinking it is a lot easier (and cleaner) if I could just have 1 cell to be the standard and then splitting this cell as neccesary. Is this possible in HTML or do I have to stick with my current solution? Thanks in advance! Hello, I've been trying to figure out how to separate part of string in html. I need to get one part from url (like this: www.youtube.com/watch?=xxxxxxxxxxx). How could I separate 11 characters after ?= (meaning the x part). Thanks already in advance! Help, Can anyone tell me why my website is splitting down the middle. In other words when I scroll down it looks like the left half and right half don't match. It happens on all computers. And, how do I fix it? The url is www.gotobreakingthrough.com Thanks i just started learning html today. and trying to get cell alignments figured out. I know in word, and other programs you can align text in 9 different spots in a cell. Top left, top center, top right middle left, middle center, middle right bottom left, bottom, center, bottom right but while im trying to use align="center" or using valign="middle" i cant get the text to align to the center of a cell only using align i can move across the top of the cell and using valign i can move across the left of the cell is there a way to use both together to get to the other portions of the cell ? Hi, I am developing a calendar application in ASP. The calendar is displayed in a table where each cell represents a date and has a + and - in it. The + represents people working on that date and the - those who are off. I need to add 'title' information to table cells so that when the user moves the cursor over the + or - the respective information to be shown. I tried to do this as follows: <td><title = "worklist">+</title><title="freelist">-</td> This doesn't work, nothing appears when the cursor hovers over either the + or -. I can combine the worklist and freelist and display it in one go with: <td title="listall">+=</title> but this is unsatisfactory. Too much data is displayed and the result looks messy. I dont want to double the amount of cells by having + and - in seperate cells either. Is there a trick that allows seperate <title> info in the same cell. Help would be appreciated, regards, Guy how to manage cells height, e.g. have control over them in HTML, say I want a height to be 2px. site http://members.dodo.com.au/~rouslan/...ite/index.html td height and tr height codes didn't work, table or cells keep stretching themselves up or down Hi, here's my code, and things are working as they should. My only problem is I can't seem to move my drop-down list from the cell it is in to the cell left one. (see photo) Can anyone see from my code whats going wrong? Site url: http://www.walthamforest-fc.co.uk/st...layer.php?id=3 Code: <TABLE
WIDTH="520"
ALIGN=center
BORDER=0
CELLSPACING=0
CELLPADDING=0>
<TR VALIGN=middle ALIGN=center>
<td><img src="http://www.walthamforest-fc.co.uk/stats/images/playerbar.jpg"></TD>
</TR>
<tr VALIGN=left ALIGN=center>
<td><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . "_1.jpg";
?>"/><img src="
<?php echo
$image_url = "images/" . $playerdata['id'] . ".jpg";
?>"/>
</td></tr>
<tr>
<td background="/stats/images/playernameback.jpg" width="308" height="46"> <font face="Arial" size="4"><span style="letter-spacing: 0pt"><font color="#018609">
<?php echo "$playerdata[firstname]" ?> <?php echo "$playerdata[lastname]" ?>
</TD>
<td>
<td background="/stats/images/playernameback.jpg" width="202" height="46"><?php
//
//Haetaan kaikki pelaajat dropdownia varten
//
$sql = '
SELECT P.PlayerID AS id,
P.PlayerLastName AS lastname,
P.PlayerFirstName AS firstname,
P.PlayerPublish AS publish
FROM tplss_seasons S
LEFT OUTER JOIN tplss_players P ON P.PlayerID = S.SeasonPlayerID
';
if($defaultseasonid == 0)
{
$sql .= "
WHERE P.PlayerID != '' AND
P.PlayerPublish = '1'
GROUP BY id
ORDER BY firstname, lastname";
}
else
{
$sql .= " AND S.SeasonID = '$defaultseasonid'
WHERE P.PlayerID != '' AND
P.PlayerPublish = '1'
GROUP BY id
ORDER BY firstname, lastname";
}
$query = mysql_query("$sql", $connection)
or die(mysql_error());
echo"<select name=\"playerid\">";
while($data = mysql_fetch_array($query))
{
if($data['id'] == $id)
{
echo"<option value=\"$data[id]\" SELECTED>$data[firstname] $data[lastname]</option>\n";
}
else
{
echo"<option value=\"$data[id]\">$data[firstname] $data[lastname]</option>\n";
}
}
echo"</select> <input type=\"submit\" name=\"change_player\" value=\"$txt_change\">";
mysql_free_result($query);
$ttl = (($_SESSION['getAdditional'] + 1) % 2) ? "Show": "Hide";
?>
</td>
</tr>
Hi: I have a long table (613 rows) with two columns (Containing Names, Addresses, Lot Numbers, and Phone Numbers, etc. I would like to format the cells of each column so that certtain fields (e.g., Phone Number is in a certain position in each cell). For example, I'd like this phone number to be right-aligned in the second row of each cell, etc Is there a standard, or easy way to do this ?? Thank for any help offered. -Mel Smith Hello, I made a goofy little website at adamvonwillis.com and if you look at the home page you will see a gap between the first and second rows. The rows need to be touching. If anyone could look at the code and help me out I would be very greatful! Thank you! For some reason i can't resize the weight on the cells i highlighted in black on the code below Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="388" height="92" background="top11.jpg"> </td>
<td width="312" height="92" background="top12.jpg"> </td>
</tr>
<tr>
<td width="700" height="353" colspan="3" background="main.jpg"> </td>
</tr>
<tr>
<td width="269" height="149"><a href="ImagensFinaisSite/picsleft/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('LeftPic','','ImagensFinaisSite/picsleft/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsleft/2_off.jpg" alt="Clicar na imagem para ampliar" name="LeftPic" width="269" height="149" border="0" id="LeftPic"></a></td>
<td width="157" height="149"><a href="ImagensFinaisSite/picscenter/1.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CenterPic','','ImagensFinaisSite/picscenter/1_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picscenter/1_off.jpg" alt="Clicar na imagem para ampliar" name="CenterPic" width="157" height="149" border="0" id="CenterPic"></a></td>
<td width="274" height="149"><a href="ImagensFinaisSite/picsright/2.jpg" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('RightPic','','ImagensFinaisSite/picsright/2_on.jpg',1)" onClick="return popImage(this.href,'Site author');"><img src="ImagensFinaisSite/picsright/2_off.jpg" alt="Clicar na imagem para ampliar" name="RightPic" width="274" height="149" border="0" id="RightPic"></a></td>
</tr>
</table></td>
</tr>
<tr>
</tr>
</table>
These are the cells i can't resize: <td width="388" height="92" background="top11.jpg"> </td> <td width="312" height="92" background="top12.jpg"> </td> I've tried messing around with colspan but i just can't get it working. Any idea whats wrong? When you have a table, and there is a lot of text in cells and you dont want the ENTIRE table stretch, what code can you add to the cell in order to give it scrollbars? The only way I found online is by css, but I'm not sure where to add the code. Any tips/help? Is there any way to get text to float from one cell to the other? And if not, is there any other way i can solve the problem of getting text around a picture? example: <table> <tr> <td>text start</td> <td>picture</td> </tr> <tr> <td colspan="2">text end</td> </tr> </table Hi, I'm new to HTML, i pretty much learned it by myself with online tutorials. Now i'm having problems with this web layout, There are empty spaces between cells and I can't remove them no matter what I do. I used cellpadding="0" and cellspacing="0" and style="border-collapse: collapse" but it made no difference. This is only happening on FireFox. On Internet Explorer it appears fine. I'm sure that I'm doing some stupid mistake somewhere. Here's the code of the whole page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Using CSS</title> <style> body { margin:0; } </style> </head> <body topmargin="0" leftmargin="0" bottommargin="0"> <table cellpadding="0" border="1" style="border-collapse: collapse" cellspacing="0" height = "100%"> <tr> <td><img src="images/Gray-Cut-(layout)_01.gif" height="64"></td> <td><img src="images/Gray-Cut-(layout)_02.gif" height="64"></td> </tr> <tr> <TD class="example" width="786" colSpan="2" heigh="100%"> <TABLE id="Table2" height="100%" cellSpacing="0" cellPadding="0" border="1" style="border-collapse: collapse"> <TR> <TD><IMG height="21" alt="" src="images\Gray-Cut-(layout)_03.gif" width="182"></TD> <TD width="100%" rowSpan="5"><iframe name="iframe" src="home.html" height = "100%" width="100%" frameborder="0"></iframe></TD> </TR> <TR> <TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_05.gif" width="182"></TD> </TR> <TR> <TD><IMG height="24" alt="" src="images\Gray-Cut-(layout)_06.gif" width="182"></TD> </TR> <TR> <TD><IMG height="35" alt="" src="images\Gray-Cut-(layout)_07.gif" width="182"></TD> </TR> <TR> <TD height="100%"> </TD> </TR> </TABLE> </TD> </tr> </table> </body> </html> Does anyone know the CSS or HTML (or combo) script to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cell(s) or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up... Hello everyone! I'm so glad an informative forum like this exists! I'm in Web-115 and was looking for a little help on an assignment as i'm not sure how to do this. Below are the things i'm struggling with and below it is the code. Any help would be greatly appreciated! 9. "Assign the cell in the top-left corner of the table the id name topLeft. Assign the cell in the top-right corner the id name topRight." Not sure where to insert this into my morning.htm file 13. "add the following styles for the table cells" (not sure where to insert "topLeft, topRight, etc or what to use as id to be indentified in CSS" HTML Code: <table class="programs" summary="Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00 p.m. (central time)"> <caption>All times central</caption> <thead> <colgroup> <col class="timeColumn" /> <col class="daysColumn" span="6" /> <col class="lastColumn" /> </colgroup> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th> </tr> </thead> Thanks so much! Justin Moose I'm working with this web page code (below) and I'd like to seperate the two cells (or tables, I'm not sure). The one on the left holds the log-in and the links, and the one on the right contains the main text. I've attached an image and am showing the borders just to show you where the cells are. (I'm adding the lower half of the code to a reply, due to sixe limitations of this post). I'd like to seperate these two and run a vertical line between them. Can you help me with this? Code: <HTML>
<HEAD>
<Title></Title>
<style type="text/css">
body {margin: 1px 100px; 0px 100px;
padding: 1px;}
</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><!--<IMG src="/smusermanager/images/logo1.gif" height=150 width=159 border=0>--></TD>
<TD valign=left width=795 height=1><IMG src="/images/topimg.jpg"> <IMG src="/images/topimg.jpg"></font></TD>
</TR>
<TR valign=top height=1>
<TD colspan=2 class=black><IMG src="/images/clear.gif" height=1 width=100% border=0></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 valign=top cellPadding=0 height=100% width=100% border=0>
<TR valign=top>
<TD width=10%>
<TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0>
<TR valign=middle>
<TD valign=middle class=lightgrey><IMG src="/images/clear.gif" height=20 width=160 align=absmiddle></TD>
</TR>
<TR valign=top height=2>
<TD><IMG src="/images/clear.gif" height=2 width=160 border=0></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=100% border=1>
<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" 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/hphon.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" 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" 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/hphon.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" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div>
</font>
</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>
Hi all, Happy NY Is there anyway to navigate links through tables and cells. I'd like to have some links on my page that change information (text only) within a specific cell or table without changing the page. Is this possible? I remember this being done in frames, but would rather not use frames if possible. Thanks. Hey everyone, I have a music video website and on each genre page, I want to build a table to list each band along with a thumbnail image. I know how to do this, however, I can't figure out how to add a cell without completely throwing off the rest of the table. For example, if I alreay have a 3 column table with Aerosmith, Alice Cooper and Chris Isaak in those 3 cells in the first row but I want to add a Beck video (which would need to go between Alice Cooper and Chris Isaak alphabetically), it throws off the cells in that row and in all the other rows of the entire table. I thought about using 1 cell tables for each band but I can't get them to sit next to eachother, they will only stack one on top of the other. Can someone give me some advice or direction? Does that make sense? |
|||||||