|
CSS - Images Slices In Table In Div...
yes i am a css n00b and am trying to place a sliced image (with a link in one slice) from a table (yes adobe) into a <div> like this...
Code: <!-- display welcome div--> <div id="welcome"> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr border="0"> <td colspan="3"> <img src="images/welcome_01.jpg" width="536" border="0" height="99" alt=""></td> </tr> <tr border="0"> <td rowspan="2"> <img src="images/welcome_02.jpg" width="67" border="0" height="128" alt=""></td> <td> <a href="search.php"> <img src="images/welcome_03.jpg" width="124" height="107" border="0" alt="search viera florida real estate brevard fl"></a></td> <td rowspan="2"> <img src="images/welcome_04.jpg" width="345" border="0" height="128" alt=""></td> </tr> <tr> <td> <img src="images/welcome_05.jpg" width="124" border="0"height="21" alt=""></td> </tr> </table> here is my css snip... Code: #welcome{
padding: 10px 10px 10px 10px;
height: 250px;
color: #000000;
text-indent: 0px;
}
the problem is that the sliced image seems to have borders around each slice so the composite images is being rendered thusly.. link to jpeg URL http://www.viera-brevard-real-estate.com/badTable.jpg any ideas appreciated.. advTHANKSance, - mark Similar TutorialsHi Guys I am using the script here to create so called rollovers on image maps/slices. Now I would like to keep those image slices but add 2 or 3 level menus to them, Can this be done Please help DD I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images. While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only. What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div? As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated. ok, if you go he http://www.whiteazn.com/satworld/gallery youll see at the top, the image ... being overlapped by the row below .... im trying to use CSS without using tables ..... but any image not inthe first column, doesnt push the row under it down ... the first column is position: relative, the 2nd and 3rd columns are position: absolute (to get it inthe column position) .... any other way of doing it so that it will push the row down respectively? here is the html code that gets outputted to the screen for the whole gallery: PHP Code: <div id="galleryContainter"> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=42"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="100" height="60" alt="Gallery Image" /></a><br /><br /> testing completion of pagination again</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=41"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="180" height="110" alt="Gallery Image" /></a><br /><br /> testing image insert and page numbers</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=38"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=37"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=36"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=34"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=32"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=31"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=30"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=29"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=28"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=27"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> </div> here is the respective CSS: PHP Code: /***************** Gallery Styles *****************/ #galleryContainter { position: relative; width:552px; margin: 0px; } .galleryRow { position: relative; width: 552px; margin: 0px; padding-bottom: 5px; } .galleryImage1 { position: relative; top:0px; left: 0px; width: 180px; padding: 2px; } .galleryImage2 { position: absolute; top:0px; left: 188px; width: 180px; padding: 2px; } .galleryImage3 { position: absolute; top:0px; left: 376px; width: 180px; padding: 2px; } .galleryIMG { text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; } .galleryIMG img { border: 2px solid #900; } .viewImage { font-family: "Courier New", Courier, monospace; font-size: 12px; } thanks .... sorry if this seems easy ... im just new at trying this new thing of using all CSS, strict, no tables for layout, standards mentality of coding ... I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text. I made inline div and tables with these elements but it seems to wrap arbitrarily around the page. any suggestions? does anyone know how i can get 4 background images in my table, one for each corner of the table? they are curved images, as i am aiming for the table to have curved edges. Thanks Does anyone know how to manipulate images within spliced tables? I need to manipulate them with CSS so that that bottom half of the image is revealed only when it is clicked or hovered over? ("images/Home.gif", "images/services.gif", "images/Contact.gif", "images/Gallery.gif") <!-- Save for Web Slices (BannerEdit.psd) --> <table id="Table_01" width="974" height="220" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/SpliceBanner_01.jpg" width="974" height="137" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/SpliceBanner_02.jpg" width="78" height="83" alt=""></td> <td rowspan="3"> <img src="images/Home.gif" width="208" height="83" alt=""></td> <td colspan="4"> <img src="images/SpliceBanner_04.jpg" width="688" height="1" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/Services.gif" width="207" height="82" alt=""></td> <td colspan="3"> <img src="images/SpliceBanner_06.jpg" width="481" height="1" alt=""></td> </tr> <tr> <td> <img src="images/Contact.gif" width="205" height="81" alt=""></td> <td> <img src="images/Gallery.gif" width="198" height="81" alt=""></td> <td> <img src="images/SpliceBanner_09.jpg" width="78" height="81" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine. So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one. Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to. My other issue (if youre still interested) is a problem with the CSS command: Code: table
{
empty-cells: show;
}
which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps? Thank you much in advance. I will try to explain as simple as I can: I have rollover drop down menus, made with <DIV>'s. Showing and hiding them with JavaScript/CSS, usual stuff... While opening and closing menus, and hovering the menu items, table's bkg images are kind of "blinking". I am using CSS to put bkg image to a cell Code: background-image:url(/burakueda/images/bg_gifs/down_end.gif); . I realized that, browser tries to download bkg images everytime I open a pulldown menu, or hover a menu item. I have other images in same page, inserted with <IMG> tag, they don't have any problem. Anyone knows anything about this? Thanks in advance for any help http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? |
|||||||