|
HTML - Filling The Screen Width
I have some information laid out with a fixed width table in html. It looks fine on a regular monitor. When I display it on a wider monitor, or with a different resolution, I have extra unused space on the right. This, of course, makes sense.
The question is: what is the recommended method for allowing the text and images to fill out the rest of the screen width - especially where it will work with different monitors, resolutions and browsers? Thanks. Similar TutorialsI'm making a small little template for just messing around matching colours, and i've tried putting a vertical navigation bar on the left. I have the div with a <ul> inside of it, but it's not taking up the full width of the div. It's taking up 75% of the div. Does anybody have any answers for it happening? I have posted my code below. 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="css/style.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #6698FF;
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</div>
<div id="content">dfgfdgdfg</div>
<div id="sidebar2">sgdsgdfg</div>
</div>
</div>
</body>
</html>
HTML Code: #wrap {
width: 1050px;
margin: 0px auto;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
#container{
width:800px;
min-height:700px;
margin-left:auto;
margin-right:auto;
background-color:#5CB3FF;
}
#header{
}
#sidebar1{
width:20%;
float:left;
background-color:#A0CFEC;
}
#content{
width:60%;
float:left;
background-color:#FFFFFF;
}
#sidebar2{
width:20%;
float:left;
background-color:#A0CFEC;
}
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. 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! I have different stylesheets depending on screen resolution, so that everything is in place when the browser is maximized. This also includes a javascript code to swap out images based on screen resolution to avoid browser based image resizing. My menu uses mouseovers, but I can't figure out how to combine the mouseover command as well as the javascvript image swap. As an example, I'm looking to have a 76px image that will change to another 76px image via mouseover. Then if you have a larger screen, I'm looking to make that a 180px image that changes to another 180px image via mouseover. Here's my image swap code: Code: function loadPic()
{
if (screen.width <= 800)
{
document.getElementById('news').src="news800.png";
document.getElementById('about').src="about800.png";
document.getElementById('blog').src="blog800.png";
document.getElementById('film').src="film800.png";
document.getElementById('photos').src="photos800.png";
document.getElementById('access').src="access800.png";
document.getElementById('set').src="set800.png";
document.getElementById('the').src="the800.png";
document.getElementById('whole').src="whole800.png";
document.getElementById('world').src="world800.png";
document.getElementById('on').src="on800.png";
document.getElementById('fire').src="fire800.png";
}
and here's my mouseover code: Code: <a onmouseover="document.images['i1'].src='set1280.png'" onmouseout="document.images['i1'].id='news'" href="http://bweissnews.blogspot.com/" target="inside_frame"><img id="news" name="i1" border=0></a></div> Any help would be much appreciated! Thanks in advance. I've got another problem with my website. I've taken a screenshot that I wanted for my website background. But since it was took on my screen, it doesn't fill the screen on wider monitors. I'm just wondering if there's any information on auto-resizing a website background. Or is it a scirpt/CSS/php style thing? This problem seems abit more complex than me previous problem. I'm on a 19 inch monitor. Here is my website for those that have bigger screens than me. http://www.dawncraftmc.com/ I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> I have a problem filling select input from javascript/ajax: the important bits of code: function handleFillList() { if (filledList.readyState == 4) window.document.getElementById('listToFill').innerHTML = filledList.responseText; alert(filledList.responseText); alert(window.document.getElementById('listToFill').innerHTML); One would think, that both alerts would show the same result, but it is not so! The first gives me (only the beggining is important) : <option value=CANADA>CANADA</OPTION><option value=CHINA>CHINA</OPTION><option ...... The second gives me: CANADA</OPTION><OPTION value="CHINA">CHINA</OPTION><OPTION..... why did the begging got lost! And then I don't get the select filled as it should be! Thank you for your help, ales Hi, I need some help. I am using a script which breaks down the cookie information to retrieve a cookie ID. This ID is then displaying using the following function: Code: <script type="text/javascript">var gac = new gaCookies(); document.write(gac.getUniqueId());</script> I have a form which my site visitors can fill in. On the form there is a text field called CookieID. What i am after, is getting the output of the code above to become the 'value' of the field... I am using the following javascript to populate the filed when the page loads: Code: function initForm(){
document.getElementById("Field110").setAttribute("value", "text_to_display");
}
However, this function can only be used to display 'text' not html or a script. Does anyone have any insight as to how this could be done? Any help appreciated! The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page. It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page. Here's a link to the page (apologies for the file size) link to page I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok? I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class). Thanks for any help. 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 Hello all, I am looking for help with something that I know is pretty simple. http://www.somesite.com/refer.htm?4 Upon loading the page, I want to take the value following '?' and post it inside a text area form on the page. Im very new to html and javascript so im not sure exactly how to achieve this. Thanks for the help. Hi, I have a very simple HTML. It has an rtl body that includes: * a left aligned table (400 width) * a ul In EE I see both of these elements inside the screen, but in FF2 the ul is displayed outside the screen! I also tried various doctypes. Any idea? Code: <html>
<body dir="rtl">
<table align="left" width="400">
<tr>
<td>In screen</td>
</tr>
</table>
<ul>
<li>Outside of screen in FF</li>
</ul>
</body>
</html>
TIA, Dror How the screen to divide into four parts a line? Hello, Problem/No Problem, I don't really know. However, it is a problem that I want to get rid off cause it completely annoys me. The problem is, I have set the body width/height to 100%, so the background image is going off screen a little. If I set the width lower, it will most likely leave a white spot in higher resolutions. I took a screenshot so you can see what I mean: Although I don't know if I am explaining correctly, I don't know how else to explain it. I'm sure you will get what I mean. Here is the method I am using in the CSS: Code: body { width: 100%; height: 100%; background: url(images/box.jpg); font-family: 'Arial'; color: white; margin: 4%; }
There is no need to show the HTML, all that's there is me calling the method. Thanks in advance Hey, I made this photoshop template, and sliced it and everything, but when I open the index.html, it don't stretch across screen. Can someone help me do this? Here is the code: PHP Code: <html> <head> <title>10-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (10-1.psd) --> <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="15"> <img src="images/index_01.jpg" width="800" height="65" alt=""></td> </tr> <tr> <td rowspan="9"> <img src="images/index_02.jpg" width="54" height="480" alt=""></td> <td colspan="13"> <img src="images/index_03.jpg" width="685" height="2" alt=""></td> <td rowspan="10"> <img src="images/index_04.jpg" width="61" height="535" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/index_05.jpg" width="684" height="62" alt=""></td> <td rowspan="9"> <img src="images/index_06.jpg" width="1" height="533" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/index_07.jpg" width="684" height="12" alt=""></td> </tr> <tr> <td colspan="8"> <img src="images/index_08.jpg" width="432" height="1" alt=""></td> <td rowspan="3"> <img src="images/index_09.jpg" width="90" height="17" alt=""></td> <td colspan="3" rowspan="2"> <img src="images/index_10.jpg" width="162" height="2" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <img src="images/index_11.jpg" width="30" height="27" alt=""></td> <td rowspan="2"> <img src="images/index_12.jpg" width="90" height="16" alt=""></td> <td colspan="3"> <img src="images/index_13.jpg" width="177" height="1" alt=""></td> <td rowspan="2"> <img src="images/index_14.jpg" width="90" height="16" alt=""></td> <td rowspan="3"> <img src="images/index_15.jpg" width="45" height="27" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_16.jpg" width="43" height="26" alt=""></td> <td> <img src="images/index_17.jpg" width="89" height="15" alt=""></td> <td rowspan="2"> <img src="images/index_18.jpg" width="45" height="26" alt=""></td> <td rowspan="2"> <img src="images/index_19.jpg" width="45" height="26" alt=""></td> <td> <img src="images/index_20.jpg" width="92" height="15" alt=""></td> <td rowspan="2"> <img src="images/index_21.jpg" width="25" height="26" alt=""></td> </tr> <tr> <td> <img src="images/index_22.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_23.jpg" width="89" height="11" alt=""></td> <td> <img src="images/index_24.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_25.jpg" width="90" height="11" alt=""></td> <td> <img src="images/index_26.jpg" width="92" height="11" alt=""></td> </tr> <tr> <td> <img src="images/index_27.jpg" width="1" height="22" alt=""></td> <td colspan="11" background="images/index_28.jpg" width="683" height="22" alt=""><marquee><font color="white">Welcome to conquer online website!</font></marquee></td> </tr> <tr> <td colspan="12"> <img src="images/index_29.jpg" width="684" height="354" alt=""></td> </tr> <tr> <td colspan="13"> <img src="images/index_30.jpg" width="738" height="55" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="54" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="43" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="89" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="45" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="92" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="25" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="61" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> Hello, I wan't to make a div filled with images in one single line, overflowing out of the visible content-part. I wan't to be able to move it left to right and back using jQuery (so that part should be covered). A sprite is not an option because of the images being links (Lightbox and stuff). CSS "overflow:hidden" and "display:in-line;" don't seem to work. Please help! Alright I am new to this and I just finshed a fairly elaborate site for a buddy of mine. However, I didn't realise I was setting the whole site up under my screen resolution which is 1680x1050. Is there any way to make the site automatically adapt to different screen resolutions without me having to change every page I made. Please Help !!! Hello, im trying to set my screen size with a div tag to 1024x768 any help would be very helpful and i'd be very thankful Hello, On my site I've a WMP player, with video streams from other sites. It is possible to watch those video's by clicking a link (for example "BNN at Work"). You first see some add, and after that you can watch the video. Now I've created an option to make the size of the Windows media player bigger by the slidebar above the player. The mention is that the video you're watching will grows to the same size the player has. But this doesn't work :S When you are watching a video and make the player bigger, the video will grow to the size it is streamed on, while the player will grow for x cm. This results in a black list around the video itself. Is there a posibility to stretch the video to the same size as the player? so there is (almost) no black list around the video... Here is the code I use: Code: <object id="mediaPlayer" width="320" height="270" standby="Kijk TV Online.nl" type="application/x-oleobject">
<param name="FileName" value="'. $zenderinfo['bron'] .'">
<param name="AudioStream" value="'. $zenderinfo['bron'] .'">
<param name="TransparentAtStart" value="true">
<param name="AutoStart" value="true">
<param name="AnimationatStart" value="false">
<param name="ShowStatusBar" value="true">
<param name="ShowControls" value="false">
<param name="autoSize" value="false">
<param name="ShowPositionControls" value="false">
<param name="DisplaySize" value="0">
<param name="AudioStream" value="true">
<embed id="mediaPlayer_2" type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&"
src="'. $zenderinfo['bron'] .'"
autostart="1"
width="320"
height="270"
transparentatstart="0"
animationatstart="0"
showcontrols="0"
showstatusbar="1"
autosize="0"
DisplaySize="0"
audiostream="1">
</embed>
Best regards, JBtje |
|||||||