|
CSS - Centre My Website On Any Monitor Any Resolution
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 Similar Tutorialswww.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 I have been battling with this and have tried some solutions on the net but they dont seem to work this may be simple still got my l plates on. My center column wont center in ff its fine in ie my code is as follows body <div class="bgcolumn"> </div> <div class="leftcolumn"> </div> <div class="rightcolumn"> </div> <div class="centrecolumn"> </div> styles .leftcolumn { padding: 10px; width: 20%; float:left; } .centrecolumn { padding: 10px; width: 50%; background-image:url(images/house.png); margin-right:auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; padding: 0px; text-align: justify; position:relative top; } .rightcolumn { padding: 30px; width: 20%; float: right; position:relative top; } .searchs { float: right; padding: 0px; width: 400px; position: relative; } .bgcolumn { width: 100%; padding: 0px; position: relative; clear: both; } i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row... as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple).... the problem may be with the way i am calculating the pixels for the div widths? or...? the page is at gatewoodfarms.com (gatewoodfarms.com/gwf.css) a screenshot of the problem is at gatewoodfarms.com/screenshot.png here is the Basic Structure/CSS: <body style="border:0px;padding:0px;margin:0px;min-width:630px;"> <div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;"> <div id="top" style=""> ... <div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;"> <div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div> <div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div> </div> </div> <div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;"> ... </div> </div> any ideas how i can fix this? thanks! Hello everyone! I'm creating this thread to make a question about something that is happening with my website... Actually I'm not a professional in CSS Coding... I only know some basics and with the help of some friends I've created it (which sadly they doesn't know how to help in this problem as well). I know more HTML than CSS, but to center the website horizontally and vertically I had to change it to CSS Coding. At first, since I use Firefox as the principal browser, I thought it was going right and well centered, but when I opened it in another browsers as Internet Explorer and Opera, the various parts of texts I have included are not well positioned like in Firefox, Google Chrome and Safari, by which looks pretty decent and in the same position in all of them. Unfortunately, since I'm a new member, I can't post links, so I placed some spaces in between at the beginning to be possible: Website: ht tp://w ww.freewebs.com/innocentia/Doc1.htm Errors Preview: ht tp://img651.imageshack.us/img651/1601/errorspreview.jpg Horizontally looks great in any browser and the Menu Bar as well, but not the right text parts...by which vertically looks different to me in IE and Opera only and in the other browsers as well if the monitor sizes are bigger or smaller than mine, which has the size of 1440x990. The CSS Code of the texts parts that can't get vertically fixed is: Code: #header {
height : 60px;
left : 300px;
overflow : auto;
padding : 10px;
position : relative;
top : -100px;
width : 700px;
}
#header p {
margin : 0;
}
#header_wrapper {
width : 700px;
margin-left : auto;
margin-right : auto;
margin-top : 25px;
}
#h3 {
height : 130px;
left : 290px;
overflow : auto;
padding : 20px 10px;
position : relative;
top : -25px;
width : 710px;
}
#h3 ul {
margin : 0;
}
#h3 ul li {
margin : 0 0 3px 0;
}
#h4 {
height : 255px;
left : 250px;
overflow : auto;
padding : 0 10px;
position : relative;
top : -85px;
width : 748px;
}
#h4 ul {
margin : 0;
}
#site_wrapper {
width : 1100px;
margin-left : auto;
margin-right : auto;
background : #eaf0f2 url(link) no-repeat top center;
}
The HTML Code is: Code: <body>
<div id="site_wrapper">
<div id="header">Text</div>
<div id="h3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">Avatar Picture</td>
<td valign="top">
<ul><li><b><font color="#0166AC">Text</ul></td></tr>
</table></div>
<div id="h4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<ul><p><font color="#000000"><b>Text</font></b></a></center></ul></td></tr>
</table></div>
I really don't understand what's happening or what I'm missing due to the fact that the menu has the same type of coding like the headers and works completely fine...so I'm somehow lost... My intention was to make it look correct horizontally and vertically like it's shown in Firefox, Google Chrome and Safari in the preview picture, in the other browsers and any different monitor sizes. Also, I already validated my CSS coding! I also searched for many threads to see if I could find solutions but hadn't found any that could actually help... Thank you for the attention and for reading! ^^ I can't seem to get the search box to centre on my site. Everything else is fine but for some reason the search box isn't. I've tried to create a container for it (that didn't work) I've tried numerous different codes in my css file and still no joy. I could put the css file up here but it's over 1000 lines long. Not advertising my site just need a professional opinion: http://trisearch.co.uk You'll see the problem. Thanks for any help or advice I have looked on countless web pages for help with positioning a image using CSS. I have a logo that I want to appear in the middle of the page regardless of what sized browser the person is using so basically ro replace the <center> tag. I know all about aboslute positioning etc but this means it will not ajust with the size of the browser. Can anyone help me to just position an image in the middle of a page using purely CSS? Thanks I'm trying to use a dead centre script: Code:
div {
font-family: Arial, Helvetica, sans-serif;
position:relative;
}
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50px;
left: 20px;
}
/* following rules are invisible to IE 5 \*/
#horizon
{
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: hidden;
display: block;
}
/* end IE 5 hack */
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #ffffff;
margin-left: -400px;
position: absolute;
top: -230px;
left: 50%;
width: 800px;
height: 459px;
visibility: visible;
border:1px solid #999999; width:800px; height:459px;
}
And found a hack that is supposed to work with mac IE5 (the /* IE5 note there), but dont know what it's doing for safari. Does anyone know any workarounds for safari or know a browser detection script that can lead non-mac browsers to my dead center page and mac browsers to another page that is maybe only simply centered. Hi, I have a div which is centered in the area right of the menu. However, I am trying to get it so it sits absoultly center. The width of the menu is forcing its center line to be 180px right of true center. Here is the link: http://www.zombiemod.com/rm/nina2/about.html Here is the HTML: Code: <div id="main-image-container"> <h5><b>ME: SWEDE & TAURUS</b> - It must be a good combination<br /><br /> Patient, reliable, persistent & determined. They will do their jobs to perfection, or at least as close to it as possible. </h5> </div> Here is the CSS: Code: #main-image-container {
position: relative;
overflow: hidden;
width:600px;
margin-left:auto;
margin-right:auto;
}
Can anyone help me with this please? I tried to offset the main image container by -180px but that didnt work. hi.. i am totaly new to this and don't know what I'm doing! can anyone help me centre my games with css not with tables? at the momment it looks fine in firefox and ok in some resolutions on internet explorer http://www.free-online-games-player.co.uk/police-chopper-game.html thanks I'm having a bit of mental block. How do I achieve the following: 100% width div LEFT SPAN (left aligned) | MIDDLE SPAN (centre aligned) | RIGHT SPAN (right aligned) I thought it was possible in one div rather than having to go the three column layout route? Seems 99% of CSS questions are related to centre-aligning content, which does beg the question of why the heck it isn't easier?! Anyway, I have kind of unusual site-layout, which is essentially a set of layout images that form a pie-interface. I've laid it out fine on the left of the page, but I want it to be in the centre of the screen: The page in question is my home-site which I'm re-designing: http://haravikk.com/ Currently the interface spans a couple of HTML pages, but will use AJAX in future with the HTML pages as back-up, but that's another story entirely. So anyway, here's the basic HTML of the page, including the pie "slices": Code: <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" /> <meta name="author" content="Haravikk.com" /> <title>Haravikk.com</title> <link rel="stylesheet" href="style/style.css" /> </head> <body> <div class="root"> <div class="main"> <img class="logo" src="style/images/main/logo.png" alt="" /> <a href="menu.html" title="View Menu"> <img class="logoFlame" src="style/images/main/logoFlame.png" alt="" /> </a> </div> <div class="menu"> <a href="soon.html" title="Haravikk's Links"> <img class="links" src="style/images/menu/links.png" alt="" /> </a> <a href="soon.html" title="Contact Haravikk"> <img class="contact" src="style/images/menu/contact.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Gallery"> <img class="gallery" src="style/images/menu/gallery.png" alt="" /> </a> <a href="index.html" title="Close"> <img class="centre" src="style/images/menu/centre.png" alt="" /> </a> <a href="soon.html" title="Haravikk's Projects"> <img class="projects" src="style/images/menu/projects.png" alt="" /> </a> <a href="soon.html" title="About Haravikk"> <img class="about" src="style/images/menu/about.png" alt="" /> </a> <a href="soon.html" title="Read Haravikk's Blog"> <img class="blog" src="style/images/menu/blog.png" alt="" /> </a> </div> </div> </body> </html> I'm hoping people can help without me having to post the lengthy CSS as well, but if you do need it can be found here (WARNING: It's a bit messy!). To try and explain: The root div is a wrapper, with the main div being the primary structure of the site based upon the logo.png image; that image is a large square-aspect-ratio image which has a height of 100%, and automatic width. All other images are designed to layer on top of it when aligned by the top-left corner (i.e - I've trimmed away any transparency to the right or bottom of the image). Ideally I would have positioned them to right or bottom as appropriate so I could trim them more, but I can't get that to work. Can anyone help in figuring out how in the heck I would go about centring this site-layout? I'm shying away from the use of tables, but can use them if I have-to. Also, while all major browsers should work, some may look a little weird; I'll be adding browser-specific style-info later-on. sorry cant work out while the site will not centre have a full div id wrap with margin 0px auto. Still wont centre something so simple. all as i can think is it is the float:left; but removing sends the layout wild and ont know what to reaplce it with. Code:
<style type="text/css" media="screen">
#wrap {
width:960px;
margin:0px auto;
}
#header {
float:Left;
width:950px;
margin:5px;
height:180px;
border:#000 1px solid;
}
#off1 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off2 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#off3 {
float:Left;
width:310px;
height:120px;
margin:5px;
border:#000 1px solid;
}
#main_content {
float:Left;
overflow:hidden;
width:960px;
height:auto;
margin:auto;
}
#leftcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:590px;
height:auto;
}
#rightcol {
float:Left;
margin:5px;
border:#000 1px solid;
width:350px;
height:auto;
}
#footer {
float:Left;
width:950px;
height:auto;
border:#000 1px solid;
margin:5px;
}
</style>
<!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>Super Saver Ltd</title>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="off1"></div>
<div id="off2"></div>
<div id="off3"></div>
<div id="main_content">
<div id="leftcol"></div>
<div id="rightcol"></div>
</div> <!---main content end--->
<div id="footer"></div>
</div>
</div><!---main container end--->
</body>
</html>
Hi all i am just wondering exactly how you get a div to stay in the center of a page no matter what screen resolution. Hi All, Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal! Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic. Now I have designed an overlay for my site: http://www.wellandpower.net/website2/index.php The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div. The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF. Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange. CSS Code: Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }
#overlay {
Any help greatly appreciated. I'm trying to do something that probably isn't as difficult as it's becoming for me. I want to have a 100% height page, which I've managed okay with so far. I want the header and menu to be a fixed height, and a footer of fixed height too, with the middle section being what expands to fit the whole design. This middle section, however, is a div containing an image that needs to get its height somehow. I've reverted back to my old fixed code, which loaded a stylesheet depending on the users screen resolution, but it's too limited and I'd like to know how to go about incorporating the 100% height idea. http://www.ryanbuckley.ca/BRIT/drawings.php Using CSS, is it possible to vertically align centrally text to an image as you can using tables? A simple example using a table would be <table border="0" width="100%"> <tr> <td><img border="0" src="image.gif" width="609"height="115"></td> <td valign="middle">Ray did this</td> </tr> </table> Using CSS so far I've got... <p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this> The CSS for imglft is... .imglft{ float: left; margin-right: 30px; } I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work. You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm Ray Hi guys I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br />
<table align="left">
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Phone:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Mobile:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Email:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td class="contact">
Postal Address:
</td>
<td class="contact">
####
</td>
</tr>
<tr class="rule">
<td colspan="2">
<hr />
</td>
</tr>
</table>
And here's my CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background: #0d1866;
color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
paypal {
border: none;
}
img.footer {
border: none;
width: 88px;
height: 31px
}
td.contact {
vertical-align:top;
}
tr.rule {
padding: 0px;
}
/* DIVS */
div#main {
padding: 2px;
margin: 2px;
}
div#text {
width: 650px;
height: 370px;
vertical-align: top;
overflow: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 10px;
}
I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd In firefox with a maximised window my main background gets shunted right by 2px. If I de-maximise the window it puts the image centre. It always works in IE. Any ideas? |
|||||||