|
HTML - Table Row Horizontal Line
Hi:
I'm laying out a 7-col table with only vertical borders between the columns (i.e., rules="cols"). This shows correctly. However, after every 'n' rows or so, I wish to have a horizontal line across all seven columns of the table. Although I am a 'basic' CSS user (very basic), in this table I want to use 'plain vanilla' html or xhtml for this 'horizontal line' or border across the width of the table Thanks for any hints ! -Mel Smith -Mesa, Arizona Similar TutorialsHi: I'm a newbie and am designing my 1st screen using Transistional HTML. Without using CSS, is there a simple way to draw a horizontal line across the screen ? TIA -Mel Smith Hello all, I am trying to replicate a style I have seen on the site listed below, where they appear to be using the CANVAS command to create a gradient top and bottom margin. I can seem to find anything online about how to do this but obviously they have figured it out. http://www.xtrememac.com/ Any ideas or pointing me in the right direction are greatly appreciated. Thanks! I am trying to display a horizontal line using CSS and the results are fine when viewed with Mozilla Firefox 2.0, but not in IE6. I am not able to control the line height in IE6. In the test code below, I also included the deprecated properties code which works fine in both browsers. Any help to switching to CSS is greatly appreciated. ineuw <html> <head> <style type="text/css"> div.hr { background-color: #ff0080; border: 0px; clear: left; color: #ff0080; float: left; height: 5px; margin: 4px 0px 4px 0px; width: 100%; } </style> </head> <body> <br> <br> <!-- deprecated mode works fine in both Firefox and IE --> deprecated display <div><hr size="5" color="#ff0080" bgcolor="#ff0080" width="100%"></div> <br> <br> <!-- line-height of 5px in the css has no effect in IE --> css display <div class="hr"></div> </body> </html> Hi, i got a big problem; If you run this code in Firefox everything is ok - there is one yellow text input; But in Internet Explorer there are two red horizontal 1 pixel lines under and above text input; I have been pulling my hair since 2 days and still i dont know how to get rid of those lines?; Is this IE bug ? Please help me if you can; Thx; HTML Code: <html>
<head>
<style type="text/css">
table.myDrop-table
{
border-collapse: collapse;
background-color: red;
border-style: solid;
border-color: blue;
border-width: 0px;
border-spacing: 0px;
padding: 0px;
margin: 0px;
}
tr.myDrop-tr
{
border-collapse: collapse
border-width: 0px;
padding: 0px;
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
td.myDrop-td
{
border-collapse: collapse
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
input.myDrop-edit
{
border-width: 0px;
border-style: solid;
border-color: black;
background-color: yellow;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body bgcolor=white>
<TABLE class=myDrop-table cellpadding=0 cellspacing=0 border=0><TBODY>
<TR class=myDrop-tr>
<TD class=myDrop-td >
<INPUT class=myDrop-edit>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
i have script that shown image in table, i want the table shown in horizontal not vertical this is the entire script, and the table that influence is in the red i think below any idea guys what i need to edit? Quote: # Photo Album # 1.1 # # Displays a members photos class user_photoplog_album extends z_module { # Set the maximum amount of images any users are allowed to display var $max_images = 5; function contents() { $content = $this->content; $vbulletin = $this->_zoints->external->vbulletin; # If limit hasnt been set or is over the admin set maximum, set it to the admin max if(empty($content['max_pics']) OR $content['max_pics'] > $this->max_images) { $limit_sql = 'LIMIT ' . $this->max_images; } # Otherwise, let them set it else { $limit_sql = 'LIMIT ' . $content['max_pics']; } # Get all photos the user has $getphotos = $vbulletin->db->query_read(" SELECT * FROM " . TABLE_PREFIX . "photoplog_fileuploads WHERE userid=" . $this->zuser . " AND moderate=0 ORDER BY dateline DESC " . $limit_sql . " "); $html .= '<div class="' . $this->style['pmain1'] . '" style="padding: 0;">'; # Does the user have any photos? if ($vbulletin->db->num_rows($getphotos)) { # Display the top of the table $html .= ' <table border="0" width="100%"> <tr> <td width="100" overflow-x: scroll; overflow-y: hidden; align="center" class="phead"> Image </td>'; # Display the details? if(!$content['details']) { $html .= ' '; } $html .= ' </tr>'; # loop and display all that have been fetched from the DB while($photo = $vbulletin->db->fetch_array($getphotos)) { # Display image cell $html .= ' <tr> <td width="100" align="center" class="pmain2"> <a href="' . $this->_zoints->external->url() . 'imagehosting/image' . $photo['fileid'] . '.html" target="_blank""> <img src="' . $this->_zoints->external->url() . 'imagehosting/images/' . $photo['userid'] . '/small/' . $photo['filename'] . '" /> </a> </td> '; # Display the image details? if(!$content['details']) { $html .= ' '; } $html .= '</tr>'; } $html .= '</table> <p><a href="index.php?u=' . $this->zuser . '" target="_blank">View All Photos</a> </p> <div> <p>'; } # Nope, tell them they have none else { $html .= 'You don\'t have any photos. <a href="upload.php" target="_blank">Upload photos now!</a>'; } $vbulletin->db->free_result($getphotos); $html .= '</p> </div>'; return $html; } function update($content) { return $content; } function edit() { $content = $this->content; if($content['max_pics'] AND $content['max_pics'] < $this->max_images) { $limit = htmlspecialchars($content['max_pics']); } else { $limit = $this->max_images; } $html .= '<div class="pmain1">'; # Disable description checkbox $html .= 'Disable image details? '; $html .= '<input type="checkbox" name="mod[content][details]" ' . ($content['details'] ? 'checked="checked"': '') . ' /> <br />'; # Max pictures textbox $html .= 'Max pictures to display '; $html .= '<input type="text" name="mod[content][max_pics]" value="' . $limit . '" size="5" /> '; $html .= '<span style="font-size: 7pt; color: #848484;">(max ' . $this->max_images . ' allowed)</span> '; $html .= '</div>'; return $html; } } How can I draw an html table without horizontal cell borders? Hiya, I have a simple table with no borders, two columns wide. The only part of the table I want to make visible is the central vertical line that separates the two columns (no other vertical lines showing, and no horizontal lines showing). If it's possible, how can I do this? Thanks, James Something in this page is causing a vertical white line on the right hand side of the main table. Can anyone help me figure this out? www.massagelaunch.com Thanks. Can anyone help me out? I've set up a test site for a project where I have a scrollable table within an iFrame. Techincally, its an iFrame within an iFrame which gets you to a scrollable table I also added an auto-scroll with anchor-links. Everything finally works, but I really want to remove the horizontal-scroll bar that shows up, while keeping the vertical-scroll bar. (Upon testing, I found without the vertical-scroll bar, the anchor-links and auto-scroll don't work correctly.) here's the link to the test site: http://www.thegrandamerican.com/ here's the line of code I think is the correct place to make corrections: <iframe id="myiframe" name="myiframe" src="oprah june 09_news.htm" width="900" height="475" scrolling="yes" overflow-y: scroll></iframe> The hierarchy works as follows: index.htm > spotlight_news.htm > oprah june 09_news.htm The reason for all the iframes is to have elements on the higher pages that will stay in place, such as a music player and dynamic menu bar. other notes and associated files (for the auto scroll) a smooth-src-comments.js smooth.pack.js Thanks. - J Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover I am wanting to do a horizontal scrollbar like this http://felicefawn.com/fashion.htm with pictures inside. The pictures won't stay side by side, they go underneath therefore creating a vertical scrollbar. Anyone know how to do this? Help much appreciated!! Im working in a HTML page using also JSP (Java). In the HTML code I have a large string of information (horizontal string) that does not fit in the screen. I also would like to have this info aligned in colums. I am using <TABLE>. The problem with <TABLE> is that it put all the information in one screen, breaking the string in two parts, instead of having an horizontal scroll bar and using this scroll bar to see al the info. Thanks, John Morales I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn {
width: 630px ;
height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
overflow:auto;
padding:0px;
If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top">
<!-- bof breadcrumb -->
<div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> ::
Careers & Hobbies
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexProductList">
<h1 id="productListHeading">Careers & Hobbies</h1>
<div id="indexProductListCatDescription" class="content"> </div>
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
<option value="0">Items starting with ...</option>
<option value="65">A</option>
<option value="66">B</option>
<option value="67">C</option>
<option value="68">D</option>
<option value="69">E</option>
<option value="70">F</option>
<option value="71">G</option>
<option value="72">H</option>
<option value="73">I</option>
<option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
<div id="productListing">
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
</div>
</div>
</td>
How do I make two links next to each other? Here's the site: http://celticsinsider.webs.com Where it says "Submit An Article", I would like a couple links next to it. Here's my html code and css code: Code: *{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-color:#030303;
}
body{
width:869px;
padding:0 65px;
margin:0 auto;
height:100%;
position:relative;
}
html > body{
height:auto;
min-height:100%;
}
#top{
width:869px;
height:70px;
background-image:url(images/menu_bg2.gif);
background-position:top left;
background-repeat:repeat-x;
}
#menu{
width:869px;
height:70px;
background-image:url(images/top_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#menu ul{
background-image:url(images/menu_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:42px;
width:768px;
margin:0 auto;
}
#menu li{
height:34px;
float:left;
list-style-type:none;
padding:8px 9px 0 13px;
}
#menu li a{
display:block;
height:34px;
float:left;
}
.but1{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but1.jpg);
}
.but2{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but2.jpg);
}
.but3{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but3.jpg);
}
.but4{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but4.jpg);
}
.but5{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but5.jpg);
}
.but6{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but6.jpg);
}
.but7{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but7.jpg);
}
.but1:hover,.but2:hover,.but3:hover,.but2:hover,.but4:hover,.but5:hover,.but6:hover,.but7:hover{background-position:bottom left}
#active{
background-position:bottom left
}
#header{
width:869px;
background-image:url(images/photo.jpg);
background-position:top left;
background-repeat:no-repeat;
}
.home{
padding:240px 0 0 0
}
.gallery{
width:852px;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
padding:13px 0 8px 17px;
background-color:#0F0F0F;
overflow:hidden
}
.gallery div{
float:left;
margin:0 5px 0 0;
}
.gallery div p{
display:block;
background-color:#1F1F1F;
border-bottom:1px solid #383838;
line-height:16px;
text-align:center;
width:65px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#5E5E5E
}
#wrapper{
width:869px;
padding:6px 0 90px 0;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#9A9A9A;
}
.style1{
margin:8px 0 0 0;
}
#content{
width:869px;
background-color:#090909;
overflow:hidden;
padding:0 0 28px 0;
background-image:url(images/wrapper_bg.gif);
background-position:bottom left;
background-repeat:no-repeat
}
.title{
padding:11px 0 0 0;
height:26px;
margin:0 0 8px 0;
background-image:url(images/title_bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#left{
width:442px;
float:left;
padding:0 24px 0 17px
}
#left div{
padding:15px 0 0 0;
width:221px;
float:left;
}
#left p{
width:192px;
padding:13px 0 0 0
}
.more{
display:block;
color:#AE2A00;
text-decoration:underline;
margin:2px 0 0 0
}
.mo visited{text-decoration:underline}
.mo hover{text-decoration:none}
.block{
width:368px;
padding:12px 0 10px 1px;
overflow:hidden
}
.block img{
float:left;
border:1px solid #383838;
margin:0 11px 0 0
}
.block span{
background-color:#000000;
line-height:14px;
color:#29705B;
padding:0 15px 0 5px;
margin:2px 0 8px 0;
display:block;
float:left;
}
.block p{
float:left;
width:200px;
}
#footer{
width:869px;
position:absolute;
bottom:0px;
height:77px;
background-color:#0F0F0F;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Tahoma, sans-serif;
color:#9A9A9A;
font-size:10px;
}
#footer ul{
width:768px;
height:13px;
background-image:url(images/bot_bg.gif);
background-position:top left;
background-repeat:no-repeat;
width:768px;
height:13px;
margin:20px auto 15px auto;
text-align:center
}
#footer ul li{
display:inline;
}
#footer ul li a{
color:#9A9A9A;
text-decoration:none;
margin:0 9px;
}
#footer ul li a:visited{text-decoration:none}
#footer ul li a:hover{text-decoration:underline}
#footer p{
width:869px;
text-align:center;
font-size:11px;
}
#footer p a{
color:#CE3200;
text-decoration:none
}
#footer p a:visited{text-decoration:none}
#footer p a:hover{text-decoration:underline}
#about{
width:412px;
float:left;
padding:0 21px 0 17px;
}
.pic{
margin:17px 15px 18px 15px;
border:1px solid #383838
}
#about p{
width:375px;
margin:0 0 15px 15px
}
#history{
width:404px;
float:left
}
#history p{
width:375px;
padding:18px 0 0 0
}
#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#090909;
color:#fff;
border-bottom: 1px solid #090909;
}
#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
I want to create a website that both Firefox and IE will recognize my code where there is no vertical scroll. The page only scrolls horizontally. The site I am creating is for a portfolio and horizontal scroll is best for vieiwing such. Do I need to use CSS to make this work or how can I acheive this? Thank you Chaser With the "horizontal rule", is it possible to write over it? The reason I am asking is because I saw an example of a horizontal rule, and it reminded me of a footer. Are they used for footers if some cases? Cheers guys (and I apoligize for all the questions). I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he HTML: Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact and Networking</a></li> </ul> </div> CSS: Quote: #nav { height: 37px; text-align: center; background-color: #858585; } #nav ul { margin: 0; } #nav li { display: inline; } #nav a { padding: 9px 12px 9px 12px; line-height: 38px; border-left: 1px solid black; } Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to... Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li> </ul> </div> ...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align). This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality? |
|||||||