HTML - An Image That Repeats Itself Until It Hits 100% Width

im creatinh a box containing a text. The box must be wide enough to fill a text.

menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that?

Hi,

Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad.

http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5

Thanks alot
Joe

Hi everyone:

Any help appreciated.

Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window.

Development: I'm using a Mac, and I don't have ready access to a PC to experiment.

What I tried:
Code:

	<table>
		<tr>
			<td><img src = "a.png" style = "width: 100%" /></td>
			<td><img src = "b.png" style = "width: 100%" /></td>
			<td><img src = "c.png" style = "width: 100%" /></td>
		</tr>
	</table>
	<p class = "caption">A caption for the 3 images</p>
	<p class = "legend" >A legend for the three images</p>

What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals.

What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element.

What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly.

What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left.

What's the trick to get around this IE "gotcha" please?

Thanks from a newbie.

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

CSS:
Code:

<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

Does anyone know the average width of a screen in html code? I'm using a widescreen labtop to create a website, and I'd like to design it for the normal size screen.

</HEAD><FRAMESET border=0
frameSpacing=0 frameBorder=0 cols=132,*,132 margin="0"><FRAME
src="index_files/left.htm" noResize><FRAME src="index_files/center.htm"
noResize><FRAME src="index_files/right.htm" noResize></FRAMESET></HTML>

that is my IFrame, how do I set the max width to something ?


trying to make my iframe same width as my banner

www.smileguild.com

Hello!

I am trying to figure out how sites makes banners that are always 100% of the screen width no matter what resolution.

I tried <table width=100% border=0> but there is still some white space around the edges so its not really 100%.

Is it a style sheet command that does this?

Thanks!

Hi, I'm having an issue with a table that I could use some help with.
Code:

<table width="10">
<tr>
<td width="10">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()_+/*-+</td>
</tr>
</table>

As you can see, the letters contained in the <td> when printed are much wider than 10px, but because there are no spaces between the text, it stretches past 10px. I'm trying to find a way so that even though there are no spaces dividing the text, the text still stays within 10px width and doesn't stretch the table. I've tried fixed width and max-width, neither worked.

Any suggestions?

Hey all.

This is my first post on this forum and I'm new to HTML and CSS, so please bear with me. I apologize if it's in the wrong forum.

I've got a problem with my HTML code (I combine HTML with CSS).

Imagine I have a navigation bar on the left that takes up 10 'em's. Just to the right of that navigation bar is the space that contains the actual content of the page (separated by <div id="actualcontent"> </div> tags.

Works just fine... till I define a table within that content tags. The table is almost always too large (a horizontal scroll bar appears) or too small. I want the table to fill exactly 100% of the width of the "<div id="actualcontent"> </div>" tags, not 100% of the width of the whole window (which would include the navigation bar).

Code:

 <table width="100%"> </table>

makes the table as wide as the window. Yet, I want it to be only as wide as its parent (the actual content).

I do not want to set the width to something like "80%" and HOPE that the size is okay and no horizontal scroll bar shows up. Because it could be too much or too less once the user resizes the window. However, if I specify the width in pixels or 'em's (in CSS) I'll have the same problem: I can never be sure that the table will fill out EXACTLY 100% of its parent, the width you specify seems to always be the width in relation to the whole window.

Is there a solution to my problem?

Thanks in advance ,
AvoC

Code:

<?php
if (file_exists("install.php")) {
	die('You are seeing this message because either you haven\'t ran the install file yet, and can do so <a href="install.php">here</a>, or already have, and <strong>must delete it</strong>.');
}

if (!isset($_GET['info'])) {
	$preconfig_db_unnecessary = true;
}
require 'config.php';
$menufile = (KU_STATICMENU) ? 'menu.html' : 'menu.php';
$menusize = (KU_MENUTYPE == 'normal') ? '30px' : '10%';
$mainsize = 100-$menusize . '%';
header("Expires: Mon, 1 Jan 2030 05:00:00 GMT");
?>
<!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" xml:lang="en" lang="en">
<head>
	<title><?php echo KU_NAME; ?></title>
	<link rel="shortcut icon" href="<?php echo KU_WEBPATH; ?>/favicon.ico" />
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: auto;
		}
		#menu {
			position: absolute;
			left: 0px;
			top: 0px;
			margin: 0;
			padding: 0;
			border: 0px;
			height: 100%;
			width: <?php echo $menusize; ?>;
		}
		#main {
			position: absolute;
			left: <?php echo $menusize; ?>;
			top: 0px;
			border: 0px;
			height: 100%;
			width: <?php echo $mainsize; ?>;
		}
	</style>
</head>
<?php
if (isset($_GET['info'])) {
	require KU_ROOTDIR . 'inc/functions.php';
	echo '<body>';
	echo '<h1>General info:</h1><ul>';
	echo '<li>Version: kusaba x ' . KU_VERSION . '</li>';
	$bans = $tc_db->GetOne("SELECT COUNT(*) FROM `".KU_DBPREFIX."banlist`");
	echo '<li>Active bans: ' . $bans . '</li>';
	$wordfilters = $tc_db->GetOne("SELECT COUNT(*) FROM `".KU_DBPREFIX."wordfilter`");
	echo '<li>Wordfilters: ' . $wordfilters . '</li>';
	echo '<li>Modules loaded: ';
	$modules = modules_list();
	if (count($modules) > 0) {
		$moduleslist = '';
		foreach ($modules as $module) {
			$moduleslist .= $module . ', ';
		}
		echo substr($moduleslist, 0, -2);
	} else {
		echo 'none';
	}
	echo '</li>';
	echo '</ul>';
	echo '</body></html>';
	die();
}
?>
<body>
	<iframe src="<?php echo $menufile; ?>" name="menu" id="menu">
		<a href="<?php echo KU_WEBPATH . '/' . $menufile; ?>"><?php echo KU_NAME; ?></a>
	</iframe>
	<iframe src="news.php" name="main" id="main">
		<a href="<?php echo KU_WEBPATH;?>/news.php"><?php echo KU_NAME; ?> Navigation</a>
	</iframe>
</body>
</html>

Okay so this is the code for the index.php page, what it does is displays a menu frame on the left at 15% of the page, and then the content page on the rest of it.

What I would like it to do is instead of using 15% for the right frame I would like to use 180pixels instead, and the left frame should take up the remainder of the page. This frame is different for me though as it uses the stylesheet to supply it's width, height, border, and ect.

Hi All,

I am developing a web site and I want to set site width. How to do that...coz users may have different inch montior from 14', 17, 18' --- 21'

If I set my site to 800 px X 600 px and if the user has 21' monitor I need to display some colors (left & right side of the page)

How to do that...I want just like this webb site classifiedadschennai . com

Plz suggest!!

Regards

BullsB

I don't know if this is supposed to be posted here or in the css forum - so correct me if I'm doing it wrong.

I'm making a table with a variable number of colums. The first column should be allowed to have a width of 30 % if it is needed by the text, but less if it is not needed. (This can style="max-width:30%" do for me). The rest of the columns can use the space that the first columns doesn't use, but shouldn't be able to force the first column to be smaller.

If I use max-width the first column might be smaller than 30% because of the rest of the columns forces it to be so, and if I use width=30% the width will be 30% even if the text in the first column doesn't need 30%.

Can anyone help me?

I created a JSP with a table and for the columns in td I have width as percentage.
This works perfectly in Firefox But IE gives different width.

Here is the part of jsp relevant to this table.

<tr>
<td id="event" width="14%" ><%= StringUtil.removeNull(eventVO.getEvent()) %></td>
<td id="eventDate" width="14%"><%= StringUtil.removeNull(eventVO.getEventDate()) %></td>
<td id="createdBy" width="12%"><%= StringUtil.removeNull(eventVO.getEventCreatedBy()) %></td>
<td id="server" width="11%"><%= StringUtil.removeNull(eventVO.getServer()) %></td>
<td id="fileName" width="20%"><%= StringUtil.removeNull(eventVO.getFileName()) %></td>
<td id="fileGroup" width="8%"><%= StringUtil.removeNull(eventVO.getFileGroup()) %></td>
<td id="count" width="6%"><%= eventVO.getNumberOfTimesChanged() %></td>
<td id="note" width="15%"><%= StringUtil.removeNull(eventVO.getNote()) %></td>
</tr>

Thank you.

Here at ultdmovies.com, I need to find the width I made the whole thing, and plus the width of the forum at ultdmovies.com/forum. Thanks!

Hi,

I have a question to all.

How can I made 100% header (bg only), normal content area (fixed width) then 100% box and below normal content area (fixed wifth and at last 100% footer.