|
HTML - 2 Problems Both Simple?
Hi guys,
Ok I have 2 problems, one I'm sure is really simple but my brain is dead. The other might not be so easy. First off I have a webpage, that has a table in it. Within one of the cells are a series of small images (150x112pix). All I want to do is make that cell have a scrollbar so that users can scroll through the images. Nice & simple but for some reason I can't get the damn thing to work. (certainly not in Firefox anyway) I've set the cell widths, the table widths, I've enabled no wrap, everything I can think of. But each time it just blows the table formatting out. I've played with CSS & even iframes but nothing will work within the cell of the existing table. The second is a question to scratch a itch I've always had. Is it possible to use a bit of script that changes a image for another on a certain date? For example, to save one having to add some snow at christmas, you could have a pre-made logo with abit of the white stuff on, then come the set date it automatically loads that image instead of the orignial & then after a set date (say a week after new year) it reverts back to the original. Cheers folks. Similar TutorialsHi Everyone i love this forum already Anyway, if someone could have a look at my basic site and see where i have gone wrong that would be fantastic. I have 3 niggles with a template im doing.I may redo the whole template now ive learnt as i think there maybe some stray code and/or ile convert it to css now im learning about div's ... anyway... the domain is... http://www.idealintexpools.co.uk/ (ignore the domain name - isnt staying there) 1. The main one is the white gap at the bottom of the fading image (IE) I spent about 2 hours trying to get rid of it and i bet its so simply 2. On firefox, there are huge gaps 3. The whole page slips off the side of the page slightly As i mentioned, because i have been fiddling i may need to redo it all from scratch but if anyone could at least give some pointers, ile be in your debt Cheers everyone Rob This is a table related issue. Is it possible to have one long row for your first row and then have 2 small columns on the 2nd row? I tried
Code: <table border="1" align=center cellspacing="1"> <tr><td background="./images/topbanner.gif" width="512" height="22"></td></tr> <tr><td bgcolor="#0099FF" width="22" height="22"></td><td> </td></tr> </table> And that didn't appear to work..it makes another column on the first row.. Hi, I'm being outsourced to turn an image into a website and I've been jumping through hoops all night trying to create a simple drop-down menu... Obviously it's not going well. All I want is that it is no more than 20px high, black no borders, white Arial Black or Verdana 10px all caps BOLD font, text mouseover to #fbb03b.. drop-downs that have a dark grey border on the bottom only (no other sides should have borders) and mouseover to #fbb03b for each link (same text formatting as base menu). This is becoming incredibly difficult for me, and things just keep going wrong. I'm using Adobe DreamWeaver CS4. This project is due in 12 hours, and I haven't slept, so I'm not exactly in for a learning experience right now, I just need immediate and effective help. Please help if you can. Thanks very much. Hi, I'm really new to HTML and CSS, but I'm trying to teach myself. Maybe you can help with this problem: I have a table on my homepage that contains 3 columns. I want the first column to have multiple rows (each at 75px high), but I want the 2nd and 3rd column to only have 1 row, and have variable height. I used a colspan tag in the HTML, which seemed to work, in Safari. But I'd like it to look the same in all browsers. In Safari, my first column, top cell, is displayed at the top of the table. And in Firefox and Chrome, that first cell is displayed at the bottom of the table. How can I get the cells to start at the top of the table (each 75 px high) and build from the top-down. For example, This is a screen-shot of what I'd like to have in all browsers: http://toddk.org/table-css-help.png Here is my site: http://toddandjill.com/ CSS: http://toddandjill.com/tkstyles.css These are the CSS properties for my table (also in the CSS file above): HTML Code: .home-table {
margin: 20px auto 0px auto;
border-spacing: 8px 0px;
}
.home-table .row1 {
width: 316px;
height: 0px;
NOborder: 3px dotted;
vertical-align: text-top;
}
.home-table .row2 {
width: 316px;
height: 75px;
border-bottom: 2px dotted #c1c1c1;
vertical-align: text-top;
}
Any help would be greatly appreciated, thanks!! Todd this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Hi all, This is my first post and its so simple that i am a bit embarrassed to post it, I have created a page with a flash video on it, but the only problem is cant workout how to centre the video, some help would be greatly appreciated, Here is the code, http://www.ogeetek.com/dave_test/test.txt And here is the website http://www.ogeetek.com/dave_test/test.html Thanks in advance, Hey. So I'm pretty good at stuff in general, my problem is that I do not have extensive experience with HTML/CSS so I don't know the best way to do this, or where to look for a way to do this. Basically, I want my layout to be like this: http://people.virginia.edu/~eee2a/Welcome.html in that I want there to be gray space on the side and a middle that scrolls. super simple right? I just don't know how to do it, and I don't know the best keywords to use on google for it. Thanks. take a look at this and can anyone tell be why it does this in ie it look fine in firefox and safari http://nathanoconnor.co.uk/kartingchampionships/site/ thanks I am very new to html editing but trying to work my way around. I have made my website in Dreamweaver and everything looks correct on dreamweaver and on firefox but when opened in IE, everything on my page becomes centered an underlined. The first item on the page is centered and underlined but the coding ends there. Not sure what I did wrong. Thank you in adavance for any help. Hi The bit of coding below works fine in firefox and ie 5 and older it does not show right in ie 6 and 7 Please can someone tell me how to fix this bug. <td align="left" valign="top" bgcolor="#E7EEF5"><ul type="square" class="style2"> <li class="style3">Ground Training, starting and schooling young horses</li> <li class="style3">Re-schooling and corrective training to overcome behavioural and physical problems</li> <li class="style3">Rehabilitation following injury or illness</li> <li class="style3">Training for horse and rider at all levels and disciplines</li> <li class="style3">Re building confidence between horse and rider</li> <li class="style3">Re-training race horses</li> </ul> </td> <td align="left" valign="top" bgcolor="#E7EEF5"><ul type="square" class="style2"> <li class="style3">Competition preparation</li> <li class="style3">Advanced Equine Dental Technician</li> <li class="style3">Tellington Touch (TTeam) Groundwork and bodywork</li> <li class="style3">McTimoney Manipulation</li> <li class="style3">Equine Sports Therapy</li> <li class="style3">Massage, Stretching and Bodywork classes for horse owners</li> </ul> </td> Hi, I am facing some problem. I am currently doing a html template. But I don't seem to be able to solve the gap problem I am facing (View my snapshot), can anyone help me? Thanks alot! Snapshot file: http://i49.tinypic.com/3t3eo.jpg HTML 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" />
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Darren Ng - Future Pilot</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.html"><span>Darren's</span> Website</a></h1>
<table><tr> <ul id="menu">
<li><a class="current" href="#">Home</a></li>
<li><a href="#">Practice</a></li>
<li><a href="#">Attorneys</a></li>
<li><a href="#">Accidents</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About Us</a></li>
</tr></table></div>
<div class="clr"></div>
</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<td align="center" valign="middle"><table width="1000" height="550" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="1000" height="360" align="center"><img src="images/header.gif" width="1000" height="360" hspace="0" vspace="0" border="0" align="top" usemap="#MapMap"></td>
</tr>
CSS File: Code: body {
font: .74em Tahoma, Verdana, Sans-Serif, Arial;
color: #7f7f7f;
background-image: url('images/bodypixel.gif');
background-repeat: repeat;
}
h1 { font: normal 5em "Trebuchet MS", Helvetica, Arial; }
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper { width: 984px; margin: auto; }
.clr { clear: both; }
#logo { float: left; padding: 30px 15px; }
#logo h1 a { color: #fff; }
#logo h1 a span { color: #808080; }
#menu { height: 44px; padding: 5px 0 0 4px; }
#menu li { float: left; font-size: 1.3em; text-transform: uppercase; }
#menu li a { color: #888; margin: 0 50px 0 0; }
#menu li a:hover { color: #fff; }
#menu li a.current { color: #fff; }
Hi everyone I hope some of you pros can help me out here? When you go to my site www.iMaciForums.com with IE 6 the text is all misaligned, I had the same problem with IE 7 & but I fixed that its just IE6 now. So could you take a look and let me know whats wrong with it, because it's driving me crazy Thanks. I recently bean using ssi instead of frames and i now have an issue... I do not know how to keep the menubar on the left hand side at the top... see as my page streaches it centers itself in the midle of the screen... i am using tables to create a framelike effect without the issues that frames create My OS is windows 7 64bit and have installed: - internet explorer 9 - Mozilla Firefox - Google Chrome My website is getting displayed correctly on Firefox and Chrome but is a bit of a mess on IE9 If you could have a look and let me know if there is anything I could do, would be much appreciated. Here is one page of my site that is bothering me: http://www.dashony.com/Solar%20panel...0projects.html Please check out the white menu, ( SpryMenuBarVertical ) using IE and one of the other 2. Thanks! Hi everyone, I recently landed myself a job as a web manager. It's been a long time since I done it however, as I've had children to bring up and so on - i'm a bit rusty but getting through it okay. I've hit a snag however and I'm wondering if anyone can help me... The website i'm charged with watching over works completely fine bar one problem, and its not even a big problem - just a bit annoying. One of the images, when opened in Chrome, floats to the left when it is supposed to be central. This is the only image to do this on the website in any browser. Has anyone got any tips for me? Hi guys, now i know this is my first post here, i have joined because i am really stuck and i would really appreciate any help. First off, just so you know - i know near enough nothing about HTML I am busy designing my site and i cant go much further as there is one issue really bugging me. My website is vBulletin (yes i know its PHP) and im using another script called vBadvanced CMPS (a portal mosification). I have tried to add a navigation bar to the left of my forums and it works! Only problem is, it really breaks up the forum. Take a look for yourself Link Notice the way its all broken up at the bottom? Anyway, i posted my problem on both the vBulletin & vBadvanced websites without much luck. One of the admins told me that i needed to get some errors fixed (all 109 of them)... I managed to narrow the errors down to 67 all in all. Here I really am stuck guys and im sure these errors will be relatively easy to fix for someone who has experience with HTML/PHP. if anybody needs me to i can paste the vBulletin templates that are causing the problems Any help would be great. Thanks Let me state my problem. Under my links which is under the banner, it says My Tickets, and User it seems in Internet Explorer it shows an extra 2px border on the bottom. Something to do with the height I assume. Now in firefox there is a 10px gap in between the Ticket Deck banner and the Links Bar. Also I can't keep to get the copyright centered for some reason :s . Here is the html: Code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html><head><title>Ticket Deck v. 1.0 beta</title>
<link href='index.css' rel='stylesheet' type='text/css' />
<body>
<div id='header'>
<div id='tlogo'><div id='logo'></div></div>
<div id='links'>
<ul>
<li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets'></a></li>
<li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area'></a></li>
</ul>
</div>
</div>
<br />
<div id='memberbar'>
<div id='textmargin1'>
test
</div>
</div>
<br/>
<div id='container'>
<div id="content">Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will
bring you directly to your ticket.<br/>
<div id="tickets"><div id="tbar"><div id="textmargin">Ticket Summary</div></div>
<div id="tcontain">
<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
<tr>
<th width='5%'>id</th>
<th width='30%'>Subject</th>
<th width='10%'>Priority</th>
<th width='23%'>Starter</th>
<th width='15%'>Status</th>
<th width='10%'>Dept #</th>
</tr>
<tr>
</table>
</div>
<br/>
<center>Welcome Guest! Please login to view your tickets!</center>
</div>
</div>
<div id="nav"><div id="navbar"><div id="textmargin">Login</div></div>
<div id="textmargin">
Username: <br/>
<input type="text" name="username" size="25" /><br />
Password: <br/>
<input type="text" name="username" size="25" /><br /><br />
<input type="hidden" name="do" value="new">
<center>
<input type="submit" name="Submit" value="Login" />
<input type="reset" name="reset" value="Reset" /><br/>
</center>
</div>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
lovely stats here
<br/>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
Update: Ticket Deck re
</div>
<div id="copyright">
<center>Powered by <a href="#">Ticket Deck</a> v. 1.0 Beta 1</center>
</div>
</div>
</div>
</body>
The CSS Code: body {
background: #f8f8f8;
color: #8a6600;
font: 12px verdana, arial, sans-serif;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
div#tlogo {
background-image: url(images/tlogo.gif);
width: 100%;
height: 25px;
}
div#logo {
background-image: url(images/logo.gif);
width: 197px;
height: 25px;
margin-left: 25px;
}
div#links {
height: 25px;
min-height: 25px;
width: 100%;
background-image: url(images/linksbg.gif);
padding: 0;
margin-top: 1px;
}
div#links ul {
list-style:none;
}
div#links ul li {
float:left;
}
div#header {
height: 51px;
}
div#container {
color: #ebba34;
height: 200px;
min-height: 100%;
width: 830px;
margin: auto;
}
* html #container {
height:100%;
}
*html #copyright {
position: absolute;
bottom: 0px;
}
div#date {
margin-right: 10px;
float:right;
}
div#nav {
color: #1b90b7;
border: 1px solid #61a5b9;
float: left;
width: 220px;
background: #e5f9ff;
}
div#navbar {
border: 1px solid #61a5b9;
width: 216px;
color: #1b90b7;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
height: 23px;
background-image: url(images/nav.gif);
}
div#navstrip {
width: 100%;
background-image: url(images/nav.gif);
height: 23px;
border-top: 1px solid #1b90b7;
border-bottom: 1px solid #1b90b7;
}
div#textmargin {
margin-left: 2px;
margin-top: 4px;
}
div#textmargin1 {
margin-left: 2px;
margin-top: 6px;
}
div#tickets {
background: #ffebb3;
width: 602px;
border: 1px solid #e8af3a;
float: right;
}
div#tbar{
width: 598px;
background-image: url(images/t_bar.gif);
height: 23px;
border: 1px solid #e8af3a;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}
div#tcontain{
width: 599px;
height: 18px;
margin-left: 1px;
margin-right: 1px;
}
div#content {
width: 602px;
color: #8a6600;
float: right;
}
div#memberbar {
color: #1b90b7;
style: bold;
width: 80%;
height: 28px;
background: #e5f9ff;
border: 1px solid #61a5b9;
margin:auto;
}
div#toutline {
border: 1px solid #cde1ed;
}
#copyright {
text-align: center;
height:20px;
position: absolute;
bottom: 0px;
position: bottom;
}
table,
tr,
td {
background: transparent;
font-size: 12px;
font-family: verdana, arial, sans-serif;
}
table th {
background: #fadc89;
font-size: 12px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
text-align: left;
padding: 2px;
}
table th a {
color: #003E67 !important;
text-decoration: none;
}
Any help is appreciated . I know that this isn't valid xhtml I haven't gone that far in fixing it to make it valid, just trying to fix the obvious problems. Thanks, Brian here is where my problem is. In ie the hover effect does not work, but in firefox it does! help. |
|||||||