|
HTML - Web Page Widescreen Issue
Hi,
Could someone help me code this page to fit a screen full width, regardless of the monitor width? No scrolling, just auto-scale to fit the full monitor. Ignore the crappiness, just a rough layout draft made in paint. Thanks. Similar TutorialsI am making a site that looks like this on a normal monitor: That is what I want it to look like on all monitors. But it looks like this on my widescreen monitor: I was wondering how I can center it on just widescreen monitors, or at least how I can make it look good and not change what it looks like on the non-widescreen monitors. I am having issues with this page loading: http://www.avidcat.com/Submit-Site.htm Sometimes it loads fine on my screen and other times it locks up after loading just the header. Does anyone here have any problems opening this page? I am trying to determine if the problem is a conflict with the new shopping cart we are using. Thanks Hi, I am working for support and got one issue raised.. My webpage has 3 print blocks .. when i minimize the browser the alignment of third block remains same and hence I good horizontal space bar for that while other two blocks align/resize themselves according to new page size.. Kindly suggest which tag /etc i need to check Hello All, I am new to this forum and this seems like a great place for information. I am having a problem with this page that I am working on for a client. The page consists of an iframe below a embedded viddler movie. The problem is that when the page loads, it jumps to the beginning of the iframe. On some browsers it jumps back to the top after it is finished loading, but in the dreaded IE it stays at the page jump. I don't have any code in the page that can be mistaken for a standard page jump. (at least I don't think that I do) Any help would be greatly appreciated. Thanks, -jsproul Here is the code for the page: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>it made a difference</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
background-image: url('images/main_bkg.jpg');
background-repeat: repeat-x;
background-color: #ffea99;
}
.content {
background-image: url('images/bkg.jpg');
background-repeat: no-repeat;
background-color: #fbc617;
/**padding-top: 20px;
border-top: 0px;
border-bottom: 0px;
border-left: 3px;
border-right: 3px;
border-style: solid;
border-color: #ffffff;**/
}
#myFrame {
background-color: #ffffff;
padding-left: 10px;
}
.comments {
width: 495px;
height: 19px;
background-color: #ff9900;
font-family: helvetica;
font-weight: bold;
font-size: 14px;
color: #ffffff;
margin: 0px;
padding-right: 0px;
padding-top: 5px;
padding-left: 5px;
text-align: left;
}
</style>
</head>
<body>
<center>
<table width="860px" cellpadding="0" border="0" cellspacing="0">
<tr><td style="background-color: #ff9900; padding: 10px;" align="right"><img src="images/itmade.png" /></td></tr>
<tr>
<td width="860" align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="860" height="486" id="viddler_d50deae6"><param name="movie" value="http://www.viddler.com/simple/d50deae6/" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><embed src="http://www.viddler.com/simple/d50deae6/" width="860" height="486" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" name="viddler_d50deae6" ></embed></object></td>
</tr> </table>
<table class="content" width="860px" cellpadding="0" border="0" cellspacing="0">
<tr><td width="40px"> </td>
<td align="center" width="250" valign="top" style="padding-top: 30px;"><img src="images/location.png" /><br /><br /><br /><a href="http://www.begousa.com" target="_blank"><img src="images/bego_logo.png" border="0" /></a><br /><br /><img src="images/preat_logo.gif" /><br /><br /><br /><!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub = "aardvarkri";</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[url]', '[TITLE]')" onmouseout="addthis_close()"
onclick="return addthis_sendto()"><img
src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125"
height="16" border="0" alt="" /></a><script type="text/javascript"
src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END --></td>
<td valign="top" align="left" style="padding-top: 20px;">
<div class="comments">Comments:</div>
<iframe src="http://itmadeadifference.wordpress.com/2008/12/15/3/#respond" style="background-color: #ffffff; padding-left: 10px;"
scrolling="yes" width="490px" height="600px" frameborder="0" marginwidth="0" marginheight="0"></iframe>
</td><td width="40px"> </td>
</tr>
</table>
</center>
</body>
</html>`
Having an issue with page positioning and alignment. My html skills are limited at best but Im trying to set up a layout template for my ebay sales. what I want is for the page/table to have fixed borders so that the horizontal scroll bar at the bottom doesn't' appear as I enter large amounts of text, instead I'd like to have it expand downwards to accommodate whatever I enter instead of expanding outwards to the right as its currently doing. I realize the code may be a bit of a mess, but Im seriously stuck, I've messed with all the tags but I can't seem to figure out what is causing this problem, any tips at all from anyone would be much appreciated. link to layout http://surrenderyourwings.com/layout.html Hello World! (Where did that tradition start anyways?) Yes, I am fairly new at web design, and am using the method of "search-Google-whenever-you-have-a-problem-as-you-go" to learn HTML. I am pretty happy with the results I am getting in Dreamweaver, but there is one nagging thing that is throwing a kink into my designs. I have the majority of the content that is unique to each page within a table cell (<td>). Since I wanted to have the background color of the cell match exactly to an image that tops off the page body, I decided to have the background be one pixel of that color that repeats across the whole table cell. Originally, I just defined the background in the starting tag using "style=" then specifying the background. (Dreamweaver made sure I had it right using its Code Hinting). The background shows up perfectly when in the Dreamweaver editing view, but when looking at the page in any other view (Live view, preview in browser, etc.), the background of that cell is just white. I tried defining the background with a CSS ID, which has worked on other parts of the page, but no beans. What am I doing wrong? Is the fact it is only one pixel that has to repeat an issue? Here is the code: <td width="100%" height="103" colspan="8" align="center" id="page_background_beige" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium;"> <!-- TemplateBeginEditable name="Body" --> //In here goes all of the content of the page <!-- TemplateEndEditable --></td> The CSS: #page_background_beige { background-image: url(Background_Pixel.png); background-repeat: repeat; } Thanks, Wookieguy (Heh, I know tables are a fairly sloppy way to do things, but this is a fairly simple site anyways.) Hi there, Im ( the friend who tested it on her pc ) having trouble with a function, would appreciate any help with this since on my PC all works flawlessly. Even on the browser on she has (Chrome).. OK SCRAP THE ABOVE I just updated my Chrome version.. (seems I need to check the browser version in order to make it update) to the same she has: 12.0.742.112 Annnd.. what do you know. Im having the same issue with my site now. So, chrome 10 -> no problems at all. I update... and, the terror starts. Please, have a look at this website here. The backgrounds may take a while to load.. thanks for your patience. It seems that the page, that needs to slide in from the right. Is having a z-index issue? But their z-index is the highest, so it cant be that. Please have a look at the IE's and FF's for how it should react. I appreciate any input, suggestions or help given! Usually when people place a footer at the bottom of a page they do it outside of the wrapper, so the footer is a first generation child of the body. However, I'm helping with a site that has shadow bars running down the sides of the wrapper div, and we want the footer to stick to the bottom, but inside of the wrapper. Currently any content that extends to where the footer is begins to overlap it. Here is my code: HTML Code: <html>
<head>
<title>Closeout Boat Sales</title>
<link rel="stylesheet" type="text/css" href="style/styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/styles2.css" />
<![endif]-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="scripts.js"> </script>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('header.php'); ?>
</div>
<div id="navcontainer">
<?php include('nav.html'); ?>
</div>
<br />
<div id="sidebar">
<p><img src="images/latest_sidebaroff.png" id="toggle1" /></p>
<p><img src="images/bulk_sidebaroff.png" id="toggle2" /></p>
</div>
<div id="main">
<br /><br />
<div id="latest">
<table style="width: 100%"> <tr>
<p><?php echo $dynamicList; ?></p>
</tr></table>
</div>
</div>
<div id="footer">
<?php include('footer.php');?>
</div>
</div>
</body>
</html>
HTML Code: body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height:1.5em;
margin: 0;
}
body {
background-color: #fff;
}
#header h1 {
font-size: 32px;
display: inline;
}
#header a {
font-size: 32px;
color: #06C;
text-decoration: none;
}
#cartBar
{
/*float:right;
background-color: gray; */
width: 1003px;
text-align: right;
margin-left: -2px;
}
#wrapper
{
margin-left: 100px;
height: 100%;
width:1050px;
padding-left: 40px;
padding-top: 10px;
background-color: #fff;
background-image: url('../images/shadow-bar.png');
background-repeat: repeat-y;
}
#header
{
width: 1002px;
margin-left: -19px;
margin-top: -10px;
padding: 3px;
background-image: url('../images/headerBar.png');
}
#sidebar
{
width: 250px;
float: left;
}
#main
{
width: 800px;
float: left;
}
#main a
{
font-weight: bold;
color: #06c;
}
#main a:hover
{
color: #999;
}
#main a:visited
{
color: #06c;
}
#navcontainer
{
width: 100%;
text-align: center;
}
#navcontainer li
{
/*float:left;*/
display:inline-block;
list-style-type:none;
position:relative;
margin:0 10px;
overflow:hidden;
}
#navcontainer li:hover {
overflow:visible;
}
#navcontainer li ul {
position:absolute;
display:block;
left:0px;
top:20px;
margin:0;
width:110px;
padding:0;
background-color:#CCC;
padding:0 10px 10px;
}
#navcontainer li ul li {
float:none;
margin:0;
display:block;
}
#footer
{
margin-left: -19px;
margin-bottom: -10px;
height: 125px;
width: 1009px;
color: black;
position: absolute;
bottom: 0;
font-size: 10pt;
background-image: url('../images/footer.png');
}
#footer a
{
color: #333;
font-weight: bold;
text-decoration: none;
padding: 5px;
}
#bulk
{
display: none;
}
Any ideas? Hi, Background: I have a small page that need to be embeded into a bounch of other html pages. Help needed: 1. Please provide the html chunk that I can use to embed the small page in to other html pages. 2. Is there a way of not using iframe? Can I use <Object> or <embed>? How? --------------------------- mba colleges in london hospitality management diploma Some mouses today have horizontal scroll, some call the tilt. It looks something like: http://www.htmlforums.com/attachment...1&d=1242556560 I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward) How do I code like that? Or any examples? I believe in thread titles that get to the point. I have a basic page, when the page loads I want people to see the top of the page for a few seconds while a flash starts to load but then I want the page to scroll down a bit so the visitor can see the flash load progress status. I just want code that I can copy into my page. I don't have access to the flash code. Greg (the page under design) www.mytcanada.com/designer.html I have a programmer in the US who starts pages for me and then I much around with them until it's looks like I want. He helps me when I get stuck but he's on holidays. Any help would be great. Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests. Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. I have plain HTML on the main page and <iFrame> tag on it, inside tag i have URL to other page that using some script that forces host page to reload and show page from frame instead of it. Can i somehow stop it from messing my entire main page? Hello; I have text box & submit button in page_1 & I have text box & submit button in page_2. I want when write text in text box in page_1 it go directly to text box in page_2 & I want when click on submit button in page_1 it is like click on submit button in page_2. Assume page_2 located in other site www.page_2.com. How to do that.?? Not even sure what to call this actually... I received this message from a friend whose site I just put up. ---------------------------- When you click on say the Home Page, and then you click on something else then go back to the prvious page, it apparently displays the previous page on the home page for example. I was not able to recreate this on my computer, but apparently, [another] web developer said this is a fairly common problem. Do you know what he is referring to, and can it be fixed? ---------------------------- Here's the site in question. Nothing fancy, just individual HTML pages. http://www.soundadviceht.com/index.html I gotta admit, I have no earthly clue what he's talking about, unless he's relaying the message wrong? Any ideas what he's talking about? Hello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? First let me apologize if this post has been made and/or belongs in another area but I'm not too sure even sure how to ask this. My humble site is set up like such using HTML and CSS: As of right now I have it such that when a navigation link is clicked it loads a whole new page. How can I do this such that only the "main text" area (which sits inside a table) is loaded? I hope that makes sense! Why is my home page crashed every time i click the next page button at the very bottom if you look at the (FEATURED and NEWS categories) it will changes after you clicked the next page bottom Also when i click the next page bottom its not showing the right articles/posts according to the date wrote. any help of how i can fix this problem step by step will be much appreciated. Hey all, me and my friend have a cleaning company and we deciced to make a webpage. It's been a good 6 years since i have worked on a website. My biggest accomplishment so far was getting the contact form to work properly on the site. It does, i feel like i've done alot lol. Anyway, the current design is a rough layout (suggestions are welcome). It still needs a lot of little touches to make it look more "full". My biggest concern now is when your clicking from page to page the table jumps around. In firefox, the Contact Us and Services page are perfect, nice and centered. The image i'm using where the navigation buttons are is in place as well. When you go to the other pages though the table moves a bit and it looks like the image i'm using where the navigation buttons are starts to repeat. In Internet Exploder, everything doesn't look centered. There seems to be more space on the right than on the left, but the image i'm using for the navigation buttons seems to be fine, it's not repeating. I dunno what's causing this. I know different browsers display stuff in different ways but i'm far from having a good understanding as to why (that's why i'm here). I even copied txt from one of the messed up pages and pasted it on one of the pages that is ok and that didn't work. I assume it's a CSS thing. Also, try and avoid saying things like "Table designs are for teh n00bz!11!" or "This is why CSS is better than using a table design!!!". This is how i did it. Im ok with CSS but i don't have a thorough understanding of it to design an entire website using CSS. I'm hoping this is an easy CSS fix, or maybe something else? The website is www.gocleantoday.com. Thanks. |
|||||||