|
HTML - Make Image Hang Off Edge Of Table
alright, i have an ad (which is in an iframe from the advertiser) on the right side of my site thats a little bigger (by 30px) than the rest of the content on that side.
http://www.greendayauthority.com/ You'll see it on the rightside. You'll also see how because it's bigger, it forced that cell it's in to stretch, and pushes the other stuff to the side (you can see that by looking at the top banner, and how it's smaller than the content when they should be lined up). What i want to do is maybe place that ad in a div or something so that it'll hang over the right side of the table, instead of pushing the other things away from it. Can anyone help me out? Similar TutorialsHello all, First time posting to the forums here. I'm creating a table and each row represents a "tab" of the UI. Each cell has a background image that looksl ike this. however, when I render my table and have text in the cell, the right edge of the tab is chopped off like this.. Any recommendations on some CSS or table attributes that I can aplly to make both rounded ends of the background image appear? I've tried turning off table borders, cell spacing and cell padding. Any help would be greatly appreciated. Thanks. I've seen (and cannot find again) a header piece of artwork that was justified a percentage distance from the left of the page. Another plain slither of header artwork was repeated seamlessly across the total width of the page. It went 'behind' the prime piece of artwork and reappeared. The 'joins' were invisible. The header seemed / appeared to be one piece of artwork that went across the page regardless of how wide the page was with the piece of artwork always remaining between the centre of the page and the left hand edge of the page. The distance of the piece of artwork got nearer to the left hand edge of the page the narrower the page got. How does one achieve that? Both images were hosted by ImageShack. I barely understand all that myself! My knowledgebase is a little above zero. Thanks in advance, MD. the bold stuff is what i added in to try and make it sortable and it didn't work. Code: <?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><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title />
<link rel="stylesheet" type="text/css" href="example.css"/>
<meta name="author" content="my name" />
<link href="http://www.joostdevalk.nl/" rev="made" />
<script type="text/javascript" src="sortable.js"></script><meta name="generator" content="StarOffice/OpenOffice.org XSLT (http://xml.openoffice.org/sx2ml)" /><meta name="author" content="my name" /><meta name="created" content="2007-04-03T18:49:47" /><meta name="changedby" content="Ryan Gleason" /><meta name="changed" content="2007-05-04T16:38:49" /><base href="." /><style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; }
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { padding:0; }
* { margin:0; }
*.ta1 { }
*.ce1 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-style:none; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.ce2 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-width:0.0133cm; border-left-style:solid; border-left-color:#000000; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.Default { font-family:Arial; }
*.Heading { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Heading1 { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Result { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.Result2 { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.co1 { width:1.3516in; }
*.co10 { width:0.7854in; }
*.co11 { width:0.5681in; }
*.co12 { width:0.8925in; }
*.co2 { width:0.9925in; }
*.co3 { width:0.6984in; }
*.co4 { width:0.622in; }
*.co5 { width:0.372in; }
*.co6 { width:0.3827in; }
*.co7 { width:0.9055in; }
*.co8 { width:0.6661in; }
*.co9 { width:0.6772in; }
*.ro1 { height:0.1783in; }
</style></head>
<body dir="ltr">
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
<table border="0" cellspacing="0" cellpadding="0" class="ta1">
<colgroup><col width="150" /><col width="110" /><col width="78" /><col width="69" /><col width="41" />
<col width="42" /><col width="101" /><col width="110" /><col width="74" /><col width="78" /><col width="75" /><col width="75" /><col width="75" /><col width="87" /><col width="63" /></colgroup>
that should be what you need..i exported an excel file as an xhtml file and read the source code and that's how it was, real unorganized and such. basically it's got stats of baseball players and i want to make them easily sortable. i created a sortable table using another piece of code but have to manually enter everything in if i do it that way. I'm working on my new site and my next step is to figure out how to make a cell stretch to the width of a page regardless of the size. I'm not sure what this is called. Here is the site. Let's just use the yellow menu bar for an example. I need to make it stretch to the right of the page. http://C-41productions.com/C-41_2008 Thanks so much. Is it possible to make each row in a table a link to a website? (regardless of how many columns there are). I need to go to the experts here , what I need to do is the following. I have an Adobe Edge animation, I need to take that animation along with a JQuery dropdown menu and put both on one html page. I have basic html knowledge to the point where the edge animation is saved as an html page ( edge automatically does this which includes all the Javascript files separately) So far I'm able to take the edge <div> and ad it to any html page as long as I copy the scripts to the head of that page. The trouble I'm having is adding the JQuery dropdown. It would be impossible for anyone reading this to know EXACTLY wht I mean without seeing the code, I do not want to add abunch of it or add a link to the files until someone replies and can actually look. any help? RD How do I make a table with a fixed width stay centered even if the browser window's horizontal size is smaller than the table's horizontal size? align="center" makes the table centered as long as the browser window is bigger than the table. If the browser window is smaller, the table will be cropped on the right size only, not on both size. I would like to do this to have a table with a fixed width and a background image, so that no horizontal scrolling bar appears if the screen resolution if too small for the table. The image should howerver stay centered no matter what the windows size is. Thanks. Not sure if I worded that right. But I have a 3 column table with three rows. And I want a row with no columns at the top that is the full width, so I can put a title in there. how do I do that? Here is my current title. Thank you. Code: <table id="box-table-b">
<thead>
<tr>
<th width="175" scope="col">Website</th>
<th width="69" scope="col">Lowest <br />
Price</th>
<th width="50" scope="col">BUY</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxxx</td>
<td>x</td>
<td><a href="#">Here</a></td>
</tr>
<tr>
<td>xxxxx</td>
<td>x</td>
<td><a href="#">Here</a></td>
</tr>
</tbody>
</table>
Hi. I want part of the text in my table header to be bold, but I also want another part of it to be regular font. I'm kind of new to HTML. How would I do this? Thanks, Brad Hello! Is there any way to make a table showing a folder in your FTP? I have an FTP thats is locked, so is there anyway to make it an autologin I just want it to show the files, not the 'Go up a directory' button And is there anyway to make tthe links so people can click on them to open the file the directory HOW CAN I DO THIS Tap Back Josh.R Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there! I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest). This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens. So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here. Code: <BODY STYLE="margin-top: 0px; margin-left: 0px">
<TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
<TR HEIGHT=90>
<TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
 
</TD>
</TR>
<TR HEIGHT=500>
<TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
<TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
**Navigation menu on the left side goes here**
</TABLE>
</TD>
<TD WIDTH=800 VALIGN="top">
<DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
**All code for the scrollable cell in the lower right goes here**
</DIV>
</TD>
</TR>
</TABLE>
</BODY>
So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you! Well I have so much work tonight and I just can't get this down. http://phs.psdr3.org/WebsterUniversi...HTMLQuestions/ Question number 6 Follow all directions give me the code pplleeaassee Yeah, it's probably a real simple question but it's bugging the heck out of me. I'm trying to design my first layout (hence why it looks so simple), but it's not working out. Here's the layout: http://www.lifeschronicles.net/index_test_brown.html I want the content boxes (pale brown) to run all down the page. How do I do that? Please help. Edit: Ok I have finally realised what I need to do. So simple! Haha. Can ignore/delete this thread if you want to. Sorry guys! Hello, I am making a squad list for my football team and i have created a table containing all the information; squad number, name , position etc. In the last column i want to have it so there is a blank field or a field with a ver small thumbnail in and when the cursor hovers over this an image appears, but only whilst the cursor is over that small part. hope this make sense Ive got this nice 900x600 transparent background for my website.. but its 1,2 MB large...... Im guessing its too large to load in an acceptable amount of time.. So, ive tried saving it for the web & devices.. and, well.. PNG 8bit sucks. It doesnt support transparancy? Anyone know what to do? What program to use? I want to keep the quality, dimension, and format (since PNG is the only one who supports transparent shizz right?) Cheers, thank you Right now i'm trying to make it so that an image is on my webpage, and when someone rolls their mouse over it, it changes to another image. It's a simple image conversion, all I changed is the arrow's depth. Thanks! Help-my-HTML Hi Guys i have this image and i wont to add a link to it so it will take the user back to the home page, Would some one be able to help me? im aware this is pre amateur for some... Heres the snippet..... HTML Code: <table width="850" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 110px">
<td style="background-image: url(/images/logo.png); background-position: left top;
background-repeat: no-repeat">
</td>
<td style="background-image: url(/images/ssl.png); background-position: right top;
background-repeat: no-repeat">
</td>
</tr>
</table>
I wont to add the link to the image "Logo.png" any suggestions or examples? Thanks for looking.. Hi. I am making a template for my site, and i really need my title image to display at the very top of the page, so the top of the image touches the bottom of the tool bar of the browser. This is currently what my page looks like www.skyhigh3d.com/testpage.html I would like the top of the black image to touch the top of the browser, so there is no background visable above the image. The image and navbar are in a table, so really i need to table to be at the very top. I know this is possible becuase i have seen many sites with the image at the very top, but no matter what i do it doesnt seem to work. Your help would be very much appreciated. Thanks -JC Hiya, I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks |
|||||||