|
CSS - Website Resolution Problem
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 Similar Tutorialswhat 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 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) 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 Hi everyone, In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up. Can someone look at the CSS below and let me know where I'm screwing up? Thanks! The site is romanceplaybook dot com and here is the CSS: body { background: #ffffff url(images/bkgd.jpg) top repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } #wrap { background: #ffffff url(images/bg.jpg) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px 300px 0px; padding: 0px; } /************************************************ * Hyperlinks * ************************************************/ a, a:visited{ color: #507AA5; text-decoration: none; } a:hover{ text-decoration: underline; } /************************************************ * Header * ************************************************/ #header { background: #FFFFFF; width: 1000px; margin: 0px auto 0px; padding: 0px 0px 0px 0px; text-align: center; text-transform: uppercase; } #header a { font-family: Times New Roman, Helvetica, Sans-Serif; font-size: 48px; color: #333333; text-decoration: none; padding: 0px 10px 0px 10px; margin: 0px; text-transform: uppercase; } #header a:hover{ color: #333333; } /************************************************ * Navbar * ************************************************/ /************************************************ * Left Sidebar * ************************************************/ #l_sidebar { float: left; width: 160px; margin: 0px 20px 0px 0px; padding: 20px 0px 20px 0px; } #l_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #l_sidebar li { list-style: none; margin: 0px; padding: 0px; } #l_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #l_sidebar ul li a { color: #507AA5; text-decoration: none; } #l_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Right Sidebar * ************************************************/ #r_sidebar { float: right; width: 160px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; } #r_sidebar p{ padding: 2px 0px 16px 0px; margin: 0px; line-height: 20px; } #r_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #r_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #r_sidebar ul li a { color: #507AA5; text-decoration: none; } #r_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Content * ************************************************/ #content { width: 950px; margin: 0px auto 0px; padding: 0px; } #content p{ padding: 0px 0px 15px 0px; margin: 0px; line-height: 20px; } #content p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } #content h1 { color: #333333; font-size: 22px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: normal; padding: 0px 0px 0px 0px; margin: 0px; } #content h1 a { color: #333333; text-decoration: none; } #content h1 a:hover { color: #658DB5; text-decoration: none; } #content h2 { color: #333333; font-size: 14px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: bold; padding: 5px 0px 5px 0px; margin: 0px; border-top: 1px dotted #C0C0C0; border-bottom: 1px dotted #C0C0C0; } #content p ol{ margin: 0px; padding: 0px 0px 0px 20px; } #content p ul{ margin: 0px; padding: 0px 0px 0px 20px; } blockquote{ margin: 0px 0px 0px 25px; padding: 0px 25px 0px 10px; font-style: italic; color: #666666; border-left: 3px solid #B3C8DB; } #content blockquote p{ margin: 0px 0px 20px 0px; padding: 0px; } #contentmiddle { float: left; width: 550px; margin: 0px 0px 0px 0px; padding: 20px 5px 10px 20px; text-align: left; } #contentmiddle p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } .contentdate { background: #FFFFFF url(images/date.gif); float: left; width: 45px; height: 50px; margin: 0px; padding: 0px; } .contentdate h3 { color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 0px 0px 10px; margin: 0px; text-transform: uppercase; } .contentdate h4 { font-family: Times New Roman, Helvetica, Sans-Serif; color: #999999; font-size: 21px; font-weight: bold; padding: 5px 4px 0px 0px; margin: 0px; text-align: center; } .contenttitle { float: left; width: 480px; margin: 0px; padding: 0px 0px 0px 10px; } #contentmiddle ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #contentmiddle ul li { margin: 0px; padding: 5px 0px 0px 0px; } #contentmiddle ul li a { color: #507AA5; text-decoration: none; } #contentmiddle ul li a:hover { color: #507AA5; text-decoration: underline; } #content img.wp-smiley { float: none; border: none; padding: 0px; margin: 0px; } #content img.wp-wink { float: none; border: none; padding: 0px; margin: 0px; } .postspace { background: #EFEFEF url(images/spacer.gif); width: 440px; height: 32px; margin: 0px; padding: 0px; } /************************************************ * Footer * ************************************************/ #footer { background: #FFFFFF; width: 952px; margin: 0px auto 0px; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #C0C0C0; } /************************************************ * Search Form * ************************************************/ #searchdiv { margin: 0px; padding 0px; } #searchform { margin: 0px; padding: 0px; overflow: hidden; } #s { width: 190px; background: #EFEFEF url(images/search.gif); color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; padding: 3px; margin: 8px 0px 0px 0px; border: 1px solid #C0C0C0; } /************************************************ * Comments * ************************************************/ #commentblock { width: 395px; background: #EFEFEF; color: #333333; float: left; padding: 10px 20px 0px 20px; margin: 10px 0px 10px 0px; border: 1px solid #C0C0C0; } ol#commentlist { padding: 5px 0px 5px 0px; margin: 0px; list-style-type: none; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p{ margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } .commenttext-admin { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } #commentsformheader{ padding-left: 0px; } #commentsform{ text-align: left; margin: 0px; padding: 0px; } #commentsform form{ text-align: left; margin: 0px; } #commentsform p{ margin: 0px; } #commentsform form textarea{ width: 99%; } p.comments_link img{ margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued http://66.195.240.220/~majdkgf/cip/ it works PERFECT in Firefox...not in Internet Explorer My friend has been working with a charity, and apparently their website is outdated. I have decided to attempt giving them a new look but already find myself having some CSS issues. In FireFox things are looking good so far, but not in IE. I would like someone to first help me with the list items <li> I want them to appear in IE the same as they do in FF. Can you help me with this? Ugh, I'm trying to add an URL but new users can't what a waste of time this has been! If you can work this out, here is the URL: http:// thomasjadams.co.uk / charity 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. 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. 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 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!!! 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. Hi there, I'm working on a site on behalf of a charity (non profit social enterprise) www.ableradio.com What I am trying to do is make the banner fit on screen, and stay centred when users resize the page (or have diffrent resolution). The site is a joomla based site, so i am constricted to making changes only to the css files. currently this is the css that governs the banner; Code: #gk-mainnav{ width: 977px; height: 80px; position: reletive; padding:7px 0 0 0; background:transparent rl('../images/menu_bg_top.png') no-repeat right top; padding-bottom:100px; }
#gk-mainnav2{ height:50px; width:977; line-height:39px; font-size:90%;font-weight:bold; text-transform:uppercase; padding:0 20px; margin-top:100px; }
Basically, i have replaced menu_bg_top.png with our banner, and a space for the menu bar to sit on top of it. The problem is, if your running an 800x600 resolution then the banner is cropped to fit rather than resized. Idealy the banner should resize and fit the width of the screen, but if this cannot be possible, then keeping it centred will suffice (holding ctrl+mouse wheel down to zoom out, shows how the banner doesn't resize, AND how it doesn't center). If i could find the main php file from which joomla creates each page i could insert the code there with some java script that resizes the image based on resolution etc... but i am limited to the style sheets only. Thanks for any help ^_- Take care, Steve. 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! Hi There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue. I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help. Here is the CSS: <style type="text/css"> <!-- #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width:920px; height: 100%; background: url(desk.jpg) white center no-repeat; background-repeat:no-repeat; margin: 0 auto; text-align: center; font-family: Verdana, Helvetica, sans-serif; } #container { width: 900px; height:840px; background-image: url(bg1.png); margin: 0 auto; text-align: left; } #mainContent { padding: 3px 60px; margin-top: 0px ; } #text { padding: 0; margin-left: 35px; text-align: center; } #navigation { float:right; display:block; width: 400px; margin-top: 15px ; font-family:Trebuchet MS, Helvetica, sans-serif; overflow:hidden; } #navigation ul { float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #navigation ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #navigation ul li a { display:block; margin:0; padding:.4em .8em; color:#000; text-decoration:none; line-height:1.3em; } #navigation ul li a span { display:block; } #navigation ul li.active a { color: #fff; font-weight:bold; } #navigation ul li a:hover { color: #fff; font-weight: bold; } .guy { float: right; margin-top: -70px; } .yell { float: left; margin-top: 20px; padding-bottom: 0px; margin-right: 30px; margin-left: 20px; } .second { margin-top:45px; } #footer { font-size: 11px; margin-bottom: 10px; } --> Hi, Ive been asked to create a webpage for a website, the page must be 99% identical to the current website but the problem is I had to build the new page from scratch because a problem with joomla. While creating the page I ran into a big problem aligning the menu bar. Right now the menu bar lines up exactly how it should on my desktop, but on my laptop which has a much larger screen the menu bar is slide way over to the left. here's the website Im making a copy for http://www.curacao.vatcar.org/home/ and here's the page I've made so far http://brandynstestserver.zymichost.com/flight/downloads.html I know it still needs alot of tweaking but I just want to solve the menu problem Heres the HTML, please ignore the comments those are just for the current webmaster (who doesn't know much) until they find another one. Also I just noticed a now unneeded <div id="banner"> tag ignore that too. 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" />
<title>Virtual Curacao FIR Downloads</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<script type="text/javascript">
var timeout = 50;
var closetimer = 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
</script>
<body>
<div id="page-background"><img src="images/bg.JPG" width="100%" height="100%" alt="Smile"></div>
<div id="content"><div id="banner"><center><img src="images/banner.png"/></center></div>
<ul id="sddm">
<li><a href="http://www.curacao.vatcar.org" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Home</center></a>
</li>
<li><a href="http://www.vatcar.org/website/index.php?option=com_content&view=article&id=5&Itemid=40" onmouseover="mopen('m2')" onmouseout="mclosetime()"><center>Roster</center></a>
</li>
<li><a href="http://www.vatcar.org/forum/index.php?board=6.0&Itemid=54" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Forum</center></a>
</li>
<li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_jobline&Itemid=61" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Career Opportunities</center></a>
</li>
<li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_content&view=article&id=56&Itemid=66" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Contact Us</center></a>
</li>
<img src="images/menuspacer.jpg" /></ul>
<table width="982" border="0" cellspacing="0" cellpadding="0" background="images/body.jpg" align="center">
<tr>
<td> </td>
<td><h2>Downloads</h2></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<!--Downloads will go under this comment, dont edit anything above this-->
<h2><center>Charts</center></h2><!-- this little piece of code it just a centered heading, hence the <h2> and <center> tags around the words you want to be the heading-->
<!-- use this format to add downloads, type <a href="LINK TO DOWNLOAD HERE">Name of the download</a> and thats it. That code will display text saying what ever you typed in the "Name of the donwload" section and when you click on the words it will download the file that is located in the "LINK TO DOWNLOAD HERE" section. Heres a few working downloads below for you go go off of-->
<center><a href="downloads/charts/TNCA/TNCACharts.zip">TNCA Charts package</a><br /> <!-- The <br /> is just a line break-->
<a href="downloads/charts/TNCB/TNCBCharts.zip">TNCC Charts package</a><br />
<a href="downloads/charts/TNCC/TNCCCharts.zip">TNCB Charts package</a><br /></center>
<h2><center>ATC</center></h2>
<center><a href="downloads/ATC/Training Files.zip">Training package</a><br />
<a href="downloads/ATC/TNCF Control.zip">TNCF Control package</a><br /></center>
<!-- Dont edit anything below this comment-->
</td>
<td> </td>
</tr>
<tr>
<td colspan="3"><img src="images/bottom.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Heres the CSS Code:
@charset "utf-8";
/* CSS Document */
html, body {height:100%; margin:0; padding:0; font-family: Arial, sans-serif, Verdana, Helvetica; }
#page-background {position: fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#sddm
{ margin:0 0 0px .6em;
padding: 0;
z-index: 30
}
#sddm li
{ margin:0 auto;
padding: 0;
text-align: left;
list-style:none;
float: left;
font: bold 15px sans-serif}
#sddm li a
{
display:block;
margin-left: auto;
margin-right: auto;
padding: 8px 5px;
background: url(images/mainmenu.jpg) repeat-x left top;
color: #FFF;
text-decoration: none
}
#sddm li a:hover
{
background: #000;
width:auto;
font-size: 15px;
}
Thank you in advance for the help! Hello, I am resolving problem on my website. You can see example the http://subrjiri.cz/domains/subrjiri.cz/sanc-akustika.cz/ There is a Header, Main and Footer. Header and main are margin left and right: auto, cause width is 900px and it's on middle. Footer part isn't 900px, its full width and some height. The problem is that the footer is black background and top is white. And of course when somebody has really high resolution, then he see good header, good main, good footer and then blank white place depending on his resolution. That blank space is under footer. Of course footer should be on the bottom of the page for all resolutions and no white place under footer. You can see that problem on this link http://subrjiri.cz/domains/subrjiri.cz/sanc-akustika.cz/akusticka-studie cause there is not too much text, on big pages it's without problem. You can see blank white place under footer. I can set high padding for footer but it doesn't look nice. Thanks for your opinion. 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? i 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. |
|||||||