|
CSS - Site Resolution Problems
When viewing the test version of my site apparently it has issues with lower resolutions. I'm using 1280x1024 and I guess some people are having issues with it at 1024x768. Is there a way to fix my code so there are no resolution problems, or minimal ones at that? Thanks.
Similar Tutorialsi have hit a brick wall in the development of this site i began working on several hours ago. i did not create the template or slice the images up.. i only wrote css + xhtml code. here is what it looks like.. one in ff and one in IE.. http://i39.tinypic.com/35hicki.jpg http://i41.tinypic.com/2wrq1d1.jpg xhtml: Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- 'About' Page -->
<!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" lang="EN">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Professor Fountain's Cabinet of Wonder -- About</title>
<!-- Need to add Meta Tags -->
</head>
<body>
<div id="container">
<!-- Lets try setting up the left side of the page first. The way this is sliced will most likely mean the entire top banner will also need to be set up first. -->
<!-- Here is the Banner -->
<div id="banner_container">
<img class="top_banner" src="images/index_01.gif" alt="Professor Fountain's Cabinet of Wonder - Top Banner" />
</div>
<!-- Next is the left part of the page... -->
<div id="leftside_container">
<img id="leftside" src="images/index_02.gif" alt="Cabinet of Wonder - Left Side" />
</div>
<!-- Next is the Navigation Bar -->
<div id="nav_container">
<ul>
<li class="nav_item"><a href="about.html"><img class="nav_item" src="images/working_03.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="history.html"><img class="nav_item" src="images/working_04.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="performances.html"><img class="nav_item" src="images/working_05.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="contact.html"><img class="nav_item" src="images/working_06.gif" alt="Main Navigation - About" /></a></li>
<li class="nav_item"><a href="links.html"><img class="nav_item" src="images/working_07.gif" alt="Main Navigation - About" /></a></li>
</ul>
</div>
<!-- END OF NAV BAR -->
<!-- Next is the right part of the page... -->
<div id="rightside_container">
<img id="rightside" src="images/index_08.gif" alt="Cabinet of Wonder - Left Side" />
</div>
<!-- END OF RIGHT PART OF PAGE -->
<!-- Background of cabinet -->
<img class="bg_image" src="images/index_09.gif" alt="The background of Professor Fountain's Cabinet" />
</div>
</body>
</html>
css: Code:
body { lowest
z-index : -3 ;
display : block ;
background-color : #D2B48C ;
margin-top : 10px ;
margin-left : 10px ;
width : 99% ;
}
h1.content_heading {
}
#container {
display : inline ;
margin-top : 0px ;
margin-left : 0px ;
width : 917px ;
height : 697px ;
position : relative ;
left : 10px ;
top : 10px ;
}
img.bg_image {
z-index : -1 ;
display : inline ;
position : relative ;
top : -481px ;
left : 109px ;
width : 710px ;
height : 481px ;
}
#banner_container {
display : inline ;
height : 220px ;
width : 99% ;
position : relative ;
top : 10px ;
left : 10px ;
}
img.top_banner {
display : inline ;
height : 220px ;
width : 917px ;
}
#leftside_container {
display : inline ;
position : relative ;
left : 10px ;
top : 4px ;
width : 109px ;
}
img.leftside {
display : inline ;
width : 109px ;
height : 550px ;
}
#nav_container {
z-index : -2 ;
display : inline ;
position : relative ;
left : -45px ;
top : -477px ;
height : 48px ;
width : 695px ;
}
div#nav_container ul {
display : inline ;
white-space : nowrap ;
}
div#nav_container li.nav_item {
display : inline ;
width : auto ;
list-style-type : none;
}
div#nav_container img.nav_item {
display : inline ;
border : medium ;
}
#rightside_container {
display : inline ;
position : relative ;
top : 3px ;
left : -55px ;
}
img.rightside {
display : inline ;
width : 109px ;
height : 550px ;
}
this is the first time i am ever attempting such a project. Hi, thanks for your time. My problem is with screen resolution, I am currently building a website using 1280 x 1044 pixels. At this resolution the website looks fine. I have used CSS styles and the size page I have used is 80% so there is a blue background around the page. The problem is I have 2 images sized 990 width pixels, at the current resolution they look fine, but when I drop the resolution they will stay the same size (which is now way too big) while the page size will remain a constant 80% so I am left with an image nearly twice as wide as my content. I have thought of splitting one of the images and used a float left and right for it, but the other image is not possible to do that with, I have seen sites with big banners on so how do those images remain constant size even when you change resolution? All help will be greatly appreciated. Many thanks. Craig Hi there I have a small problem with my web site on IE, and Im sure it something to do with the css, any help will be appreciated. SEE BELOW FOR DETAILS MY WEBSITE Code:
@charset "ISO-8859-1";
body {margin:0;padding: 0px;font-family: Verdana, sans-serif;font-size: 0.75em;text-align:center;background-image:url(../images/FaiGurFrontPageBg3.jpg);}
.wrapper { width:914px; margin-left:auto; margin-right:auto; background-color:#FFF;}
.mainimg { background-image:url(../images/LOL4.jpg); width:914px; height:239px;}
.aboutimg { background-image:url(../images/LOL6.jpg); width:914px; height:239px;}
.mainimg { background-image:url(../images/LOL4.jpg); width:914px; height:239px;}
.mainimg { background-image:url(../images/LOL4.jpg); width:914px; height:239px;}
.imgfist { background-image:url(../images/FistsInfo.jpg); width:914px; height:174px;}
.imgfoot { background-image:url(../images/FootInfo.jpg); width:914px; height:174px;}
.logform {width:914px; height:28px; text-align:left; background-color:#930; color:#FFF;}
.logform form {width:770px; float:left; margin:0 0 0 0; padding:0 0 0 0;}
.form1 {width:526px; margin-left:auto; margin-right:auto; }
.form1 table {margin:0 0 0 0;}
.form1 form { margin:0 0 0 0;}
.regpic {background-image: url(../images/Reg%20Pic.jpg); width:526px; height:122px;}
.term {font-size:11px;}
#wrapper2 { background-image:url(../images/TermsPage.jpg); width:914px; }
.menubar {
width:914px;
padding-left:78px;
background-color:#933;
height:30px;
padding:0;
text-align:center;
}
.menubar ul { margin:0 auto 0 auto; padding:0 0 0 0; text-align:center; display:inline; }
.menubar ul li {
display:inline;
height:30px;
float:left;
list-style-type:none;
font-size:12px;
margin:0;
text-align:center;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
border-right:thin;
border-right-color:#999;
border-right-style:solid;
}
#wrapper2 {
background-image:url(../images/TermsPage.jpg);
width: 918px;
height: 1548px;}
.menubar ul li.first {
border-left:thin;
border-left-color:#999;
border-left-style:solid;
}
.cent {margin-left:60px; margin-right:auto; text-align:center;}
.menubar ul li a { text-decoration:none; padding:6px 0 0 0; margin:0 0 0 0; display:block; height:30px; color:#FFF;}
.menubar ul li a:hover { text-decoration:none; padding:6px 0 0 0; margin:0 0 0 0; display:block; height:30px; color:#fff; background-color:#666}
.flashdiv2 { overflow:hidden; margin:0 0 0 0 ; }
.FlashVid { float:left; overflow:hidden; margin:0 0 0 0;}
.leftbar {
float:left;
background-image:url(../images/RightbarNew.jpg);
width:76px;
height:630px;
}
.content {
width:762px;
height:630px;
margin:0 0 0 0;
padding:30px 0 0 0;
float:left;
background-color:#FFF;
}
.rightbar {
float:left;
background-image:url(../images/LeftbarNew.jpg);
width:76px;
height:630px;
}
.conttitle {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 18px;text-align:center;}
.contbody {font-family: "Comic Sans MS", cursive;font-size: 18px;text-align:left;}
.con {height:750px;}
.footer {background-color:#FFF;margin-left:auto; margin-right:auto; width:914px;}
.clear { clear:both}
I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome. My Site and here is me css file css Code: Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
My web site has both a div/ul based drop down menu and expand/collapse menu on the site. I noticed that the drop down horizontal menu goes behind the images and links of the sidebar expand/collapse menu and snaps shut. I had to change the li to another word to get the 2 styles to not confict over the <li> tags and it still works fine, but It seems to have an issue being in the same area as the <ul> (which I cannot remove. To see the problem, visit http://web3.avemarialaw.edu/index.cfm?event=ProspectiveStudent And mouse over the 'Prospective Student' menu in the top hortizonal bar. You'll see it go behind the title images. Also if you mouse down to about the 3rd drop down link, it snaps shut, but only if your mouse is to the left side. The right side of the dropped menus is fine. I would like the drop down menu to go over the side bar and take priority over the side bar. I am including the css and the javascript for both the hortizonal drop down menu and the side bar expand / collapse. Also, both of the styles for the menus are in the same .css file. Not sure if that makes a difference or not. Drop Down: Code:
Javascript
<script type="text/javascript">
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
CSS
/* 3 Level drop down navigation for main */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items* - Top Level Navigation*/
.suckertreemenu ul li {
position: relative;
display: inline;
float: left;
background-color: #FFCC33; /*overall menu background color!*/
}
/*1st sub level menu*/
.suckertreemenu ul li ul {
left: 0;
width: 173px;
position: absolute;
top: 1em; /*no need to change, as true value set by script */
display: block;
visibility: hidden;
background-color: #DCD3B9;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li {
display: list-item;
float: none;
background-color: #DCD3B9;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
/*width: 160px; width of sub menu levels*/
color: #660000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:11px;
font-weight:bolder;
text-decoration: none;
padding: 4px 1px 4px 7px;
border-bottom: 1px solid #FFFFFF; /*Ouline color for drop down menus!*/
background-color: #DCD3B9;
}
.suckertreemenu ul li a:hover{ /*Changes the color of the menu as the mouse rolls over*/
background-color: #660000;
color: #FFFF00;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background-color: #DCD3B9;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background-color: #DCD3B9;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1px;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
/*End 3 Level Main Navigation*/
Expand / Collapse: Code:
Javascript
<script language="javascript">
function toggle(id){
ul = "ul_" + id;
img = "img_" + id;
ulElement = document.getElementById(ul);
imgElement = document.getElementById(img);
if (ulElement){
if (ulElement.className == 'closed'){
ulElement.className = "open";
imgElement.src = "http://www.avemarialaw.edu/images/opened.gif";
}else{
ulElement.className = "closed";
imgElement.src = "http://www.avemarialaw.edu/images/closed.gif";
}
}
}
</script>
CSS
/*Side Bar Nav*/
#menus {
float: left;
margin-left: -30px;
padding-top:30px;
width: 250px;
position: relative;
}
.open {
display: block;
}
.closed {
display: none;
}
liv { /*Fix for confict between top level nav's <li>'s and sidebars*/
list-style-type: none;
padding-top: .2em;
padding-bottom: .2em;
}
liv img {
vertical-align: middle;
}
/*End Side Bar Nav*/
Hi there, I am still new to css and have run into some problems that are frustrating me to no end! I have validated my html and css and still am not sure what to do with my problems. I am having two sets of problems: A) problems between IE and FF B) getting my nested list on the left side to work properly Site viewable he http://www.kohlrbaby.com/revisionbaby/about.html CSS viewable he http://www.kohlrbaby.com/revisionbaby/kohlrbaby.css A) There are two problems I can see: 1) IE: the photo is moved over a few pixels from the left forcing the other item out of line 2) FF: The white background has disappeared. B) For my nested list I have 2 issues: 1) I was trying to make the main list items have a custom bullet (arrow.gif) but I can't seem to get it to work. 2) As well, I can't figure out how to get the list to move to the left and the sub list to be less indented Thank you! Jill Hi, For some reason my website is not showing in IE8, just a blank white screen?. I've checked the source code, and above the doctype declaration, a comment is appearing Code: <!-- Include the header --> My website It is working fine in other browsers, but not IE8. I cannot see where this comment is comming from though?. the code for my header.php is : here Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. Hello all! Is there a way to set a resolution % for a certain type of resolution size and any above that resolution to another specific % For example I want it to be: 1024x 768 : width : 90%; and anything higher than 1024x 768 to be 80% since 90% on a resolution higher than 1024 for my navigation is just too make of a banner. Please help/advice. Regards, Kingofqueens. I've just recently started using CSS, and unlike tables, I have no clue how the heck to autostretch the layout. Could someone to tell me how to make my page "adapt" to different resolutions for CSS? I don't want to have to make seperate styles for each resolution, is there a simple property and value that I can just insert somewhere with the position property? thanks (sorry i posted this again, I just felt the other post was not clear) Hello, whats your opinion and experience? Wich is the best way to serve diferent css depending on resolution? Using media like this and serve several diferent stylesheets? <link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)"> or using this: @import url("tablet.css") screen and (min-width:321px) and (max-width:768px); And is it posible and good or bad idea to have one .css file with diferent css depending on resolution. Is it better to detect resolucion with only javascript? Thanks, appreciate help as I am very stressed and have so many things to fix urgently. I am in the process of designing a website and I have dual monitors at home, one is using 1024x768, and other is using 1280x1024 resolution. The website I have designed, off course looks different from one resolution to the other. One the less resolution monitor, the site looks big (my masthead is 750x200 and the whole page is approximately 770x900), however, on the high resolution, the site looks tiny. on 1200 wide resolution my page width is only 770, so there is white (in my case blue) space both sides making it look not so good. Because of the above reason, the site looks big on one monitor and very tiny on the other. I am sure there would be lots of people out there with those two kinds of resolutions (I am mostly concerned about these two resolutions). I wonder how do people deal with this when they are designing a website? Could one find out the resolution of the monitor ahead of time (before displaying the page) and have different css/images be loaded based on the monitor it is being viewed? Is there a concept of floating site -- what I mean by that is if there is a concept of site automatically changing appearance based on screen resolution? Thanks!!! I am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions. Does anyone have any ideas what is causing this problem. After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links. Below is the css I am using, I have also added the xhtml at the bottom. Code:
#top_button li {
margin: 0;
display: inline;
list-style-type: none;
}
#top_button a:link, #top_button a:visited {
float: left;
overflow: hidden;
height: 0px;
}
#top_nav {
margin: 0;
padding: 0;
}
#top_button {
position: relative;
top: 0px;
left: 157px;
height: 19px;
list-style: none;
margin: 0;
}
#t1 a:link, #t1 a:visited {
background-image: url(../images/top_nav_home_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 47px;
}
#t1 a:hover, #t1 a.current {
background-position: 0px -19px;
}
#t2 a:link, #t2 a:visited {
background-image: url(../images/top_nav_services_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 63px
}
#t2 a:hover, #t2 a.current {
background-position: 0px -19px;
}
#t3 a:link, #t3 a:visited {
background-image: url(../images/top_nav_portfolio_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 65px;
}
#t3 a:hover, #t3 a.current {
background-position: 0px -19px;
}
#t4 a:link, #t4 a:visited {
background-image: url(../images/top_nav_resources_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 72px;
}
#t4 a:hover, #t4 a.current {
background-position: 0px -19px;
}
#t5 a:link, #t5 a:visited {
background-image: url(../images/top_nav_contact_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 59px;
}
#t5 a:hover, #t5 a.current {
background-position: 0px -19px;
}
{
xhtml Code:
<div id="top_nav">
<ul id="top_button">
<li id="t1"><a class="current" href="/" title="home"></a></li>
<li id="t2"><a href="/services" title="services"></a></li>
<li id="t3"><a href="/portfolio" title="portfolio"></a></li>
<li id="t4"><a href="/resources" title="resources"></a></li>
<li id="t5"><a href="/contact" title="contact"></a></li>
</ul>
</div>
I would appreciate any suggestions! Hi All, I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about. http://img192.yfrog.com/img192/5572/1280x768.gif Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround. the CSS code is below Code:
#footer
{
position: fixed;
top: auto;
left: auto;
width: auto;
}
here is the HTML Code:
<html>
<head id="Head1" runat="server">
<link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
<title></title>
<style type="text/css">
.style1
{
width: 800px; background-color:White
}
.style2
{
height: 391px;
}
.style3
{
text-align: right;
}
</style>
</head>
<body bgcolor="#d7d7d7">
<form runat="server">
<div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px"
align="center">
<table align="center" class="style1">
<tr>
<td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;"
class="style3">
<asp:ContentPlaceHolder ID="StatusBar" runat="server">
</asp:ContentPlaceHolder>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" />
</td>
</tr>
<tr>
<td class="style2" align="left" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--<td style="background-color: #FF9933; height: 15px;">
</td>--%>
</tr>
</table>
<div id="footer">
</div>
<%-- <table align="center" class="style1">
<tr>
<td>
<div id="footer">
<img src="../images/footer.png" alt=""/>
</div>
</td>
</tr>
</table>
--%> </div>
</form>
</body>
</html>
I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need www.oakdalehosecompany.org or oakdalehosecompany.org is my website Its perfect when you view it with firefox at 1024x768 res, but when you view it with internet explorer at 800x600 res it looks horrible. is there anyway to fix this like a program or something. bear with my this is my fire site i ever made so i dont know much. thanks for any that help Hi friends, I am building my website templates compatible for any resolution ranging from 800x600 to maximum possible resolution. I want to place all the body content exactly in the center (900px layout). I have set the background exactly in the center. but when i am inserting the content, it is displayed from left. How should i set it in the center? please help me! Hey there! New to code, sort of flying blind but learning a lot as I go along. I'm also kind of shooting for the stars with my design decisions. I was wondering if anyone here has any idea how to mimic the rotating image on Blizzard's website. (As I cannot post the URL, I assume everyone can figure out how to get to Blizzard Entertainment's website easy enough). If you zoom in and out on it, it remains static even as the pieces around it resize over it (this also happens at smaller resolutions). I would desperately like to know how to get it to lock flush against the side of the window like that. Additionally, you'll notice that it doesn't pop a scrollbar onto the window until you shrink the window smaller than the central content. I guess a bigger question is, is this even something achievable in CSS? Do I have to delve into Flash or Javascript to do it, and if so, does anyone know how? Thank you so much in advance! This one has probably been beaten to death by now, but I can't seem to find a specific answer. I develop on a monitor 1024x768, and use a standard font size (for general text) of 11px. When using a 800x600 resolution monitor, the text seems oversized - which is what one would expect with a px setting. Or looking at it from the other side of the fence, if I develop on the 800x600 and get a decent text size, it looks too small on the higher resolution. I can use 2 .css files with different font size settings and javascript to direct to the relevant css file. As far as I can tell, that is the only way I can get a 'similar' look on both screen resolutions. Is there another way where I can get away with using only 1 css file? What do others do to get around this problem? what i would like to do is centre my website on any monitor any resolution but i dont know how. could someone explain what i would need to do. im taking a guess but the way i thought you could do it is by putting a div around the whole thing and settinga fixed height and width on auto but i dont think thats right. thanks |
|||||||