|
HTML - Centering Entire Website - Nothing Is Working!
Similar TutorialsI have this question, I am under the impression(?) that browser settings change with various pc and different browsers, but the most simple question of all cannot be found anywhere and the tech support of my domain hosting cannot assist, as their product for developing webpages is currently in beta testing. IS there a code..any code, that centers the ENTIRE website after it is placed? using <center>mywebsitehere</center> does not work, and tables were not used at all in setting this up, in fact I have no idea how to use tables. When you are working in your files and setting up your page for publishing, there is no area for margins, page indents, size of viewing area, nothing. I have manually recoding the existing files and they all default "left" after saving/publishing. Any ideas or help appreciated. The web url is www.yourock24.com. I view it as alot of black area to the right and cannot correct this by myself. Thanks in advance for assistance! I'm trying to center my entire website. Also, I'm trying to make my website XHTML 1.0 strict. Every element I try to use to center it is either deprecated or has had the align attribute deprecated. On w3schools.com they say to use CSS, but I can't find any CSS that could center my entire site. Any ideas? Hello, I'm working on my 3d portfoliosite and seem to have a problem with the centering of the entire site. www.gerhardvanderhoek.nl The header image is 1440 px in lenght. The middle of the site always has to be in the middle even if the display size is 1024 X768. So this would mean that some of the green gradients on the left and right and some of the header image wouldn't be seen on screen if it's a relative low resolution. Can someone give me advice? Thanks! Hi there, well, the title basically says it all. I have a site that consists of like, 8 .php pages... and I need to play this ambient sound at the background. ( I know, but well.. orders from above) So I was wondering if there is a way to manage this, without having to hear the song all over again when you click on a link. Thanks hello there can someone please give some advice / fixes for centering my website in IE and Chrome etc I programmed it in Dreamweaver and previewed it in Safari and Firefox where it looks lovely and central, however people have told me that in IE it is centered to the left. I can't figure out how to fix it. http://www.formconstant.co.uk any help would be greatly appreciated john Hi, Have just uploaded a new website. In Safari, Opera and Firefox the webpage floats in the middle of the browser page, as I want it to. In some versions of IE its sits to the far left. Here is the page: http://www.ironworksstudio.co.uk/ And here is the CSS: Code: *{
margin: 0;
padding: 0;
}
body{
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 15px;
color: #000000;
background-color:#000000;
}
#container {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
width: 700px;
background-color:#000000;
}
p{
padding-top: 10px;
font-size: 13px;
line-height: 18px;
}
#header {
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
height: 100px;
width:700px;
background-color:#000000;
padding: 0 0 10px 0;
}
#menu ul{
margin-left:0;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
background-color:#FFFFFF;
}
#menu li{
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #000000;
list-style-type: none;
width: 84px;
height: 20px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom; 3px;
margin-right: 2px;
margin-left: 2px;
float: left;
border: 1px solid;
}
#menu li:hover {
color: #ffffff;
background-color: #333333;
}
#menu li a {
text-decoration: none;
color: #ffffff;
}
#menu li a:hover {
color: #ffffff;
}
#footer {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 700px;
margin-right: auto;
margin-left: auto;
clear: both;
background-color:#000;
color: #FFF;
}
#top_image {
margin-bottom:20px;
clear: left;
background-color:#000000;
}
#menu {
float: left;
width: 700px;
margin-bottom:10px;
background-color:#000000;
}
#two_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
line-height:1.4;
margin-top: 10px;
margin-bottom: 50px;
float: left;
width: 700px;
text-align: left;
background-color:#000;
}
#l_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#FFF;
line-height:1.4;
margin-top: 10px;
margin-right: 30px;
margin-bottom: 50px;
float: left;
width: 335px;
text-align: left;
background-color:#000;
}
#l_column a{color:999999;}
#r_column {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
color:#fff;
line-height:1.4;
margin-top: 23px;
float: right;
width: 335px;
background-color:#000;
padding: 0 0 10px 0;
}
.left {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: left;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
background-color:#000000;
}
.right {
font-size:12px;
font-family: Helvetica, Arial, sans-serif;
width: 335px;
float: right;
text-align: left;
border: 2px solid #000000;
border-collapse: collapse;
margin-top:12px;
background-color:#000000;
}
th {
font-weight: bold;
font-size:13px;
color: #000000;
background-color:#FFFFFF;
padding: 5px;
}
td {
padding:5px;
}
tr {
color:#FFFFFF;
}
.rowstyle1 {
border-bottom:1px dotted;
}
#gallery {
background-color:#000;
width: 680px;
padding-left: 0;
}
#gallery ul { list-style: none;
margin-left: 0;
}
#gallery li {
padding-left:1.2px;
}
#gallery ul li { display: inline;
padding-right: 0;
}
#gallery ul img {
border: 0;
border-width: 0;
}
#gallery ul a:hover img {
border: 0 solid;
}
#gallery ul a:hover { color: #cccccc; }
hr {color:#333333;
border-style:normal;
padding: 0 0 0 0;
margin: 0 0 10 0;
}
h2 {color:#ffffff;}
</style>
Hi. I don't know how to center my website, so it works in all browsers. Take a look he www.AURecords.com It only works on computers with a high screen resolution. Any suggestions? Christian Hello, I wont call myself a website designer, but I do design my own websites. My problem is my website is only centered when monitor setting is at 1024 x 768. If an outside viewer with different monitor settings views my sites it will be really off-centered. I design all my websites in photoshop then code them with macromedia. Is their a code I could include into the html to keep my webpages centered no matter what size screen is viewing? Would appreciate any comments, JJ Hi. First off I'm new to this forum so Hello! I wanted to know how to make sure my websites 'float' in the middle of the screen, like this for example http://www.richardjohntaylor.com/billymurray i.e. whatever size the window, the image always remains centred. The website above is only a single image. How would I do it with my other sites, which are tables making up many images, eg. http://www.terrystone.biz or http://www.trconsultants.co.uk I edit using Dreamweaver. Thanks Richard Here is the code i have for the only(and first) page of the website. HTML Code: <!DOCTYPE html> <html> <body background="piginsun.png"> <div id="container" style="width:1903px"> <div align="center"> <div id="header" style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;text-align:center"> <h1 style="margin-bottom:0;"> </div> <div style="width:340px;text-align:left;align:center;"> <a href="http://www.w3schools.com"><img width="868" height="90" src="mcad.png" alt="html.html" style="border:0;margin-top:0px;"></a> <div id="menu" style="height:315px;width:120px;float:left;"> <b><a target="_top" href="html.html">Home</a></br></br> <b><a target="_top" href="html_forums.asp">Server Forums</a></br></br> <b><a target="_top" href="html_updates.asp">Server Updates</a></br></br> <b><a target="_top" href="html_videos.asp">Server Videos</a></br></br> <b><a target="_top" href="html_staff.asp">Server Staff</a></br></br><b><a target="_top" href="html_pics.asp">Server Pictures</a></br></br> <b><a target="_top" href="html_donate.asp">Donations</a></br><b></br><a target="_top" href="html_contact.asp">Contact Us</a> </div> <div id="content" style="height:940px;width:1200px;text-align:center;"> <font size=40px;font color="#7373FF">Random</font><font size=40px;font color="#CB59E8">Craft</font></br> <i>A Minecraft Server</i> </br> <div id="content" style="height:598px;width:1200px;text-align:center;"> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <div id="footer" style="clear:both;text-align:center;"> Copyright ®RandomCraft Server</div> </div> </body> </html> I need some help centering the whole thing. It looks good now but is off to the side, i need it centered. If someone could show me how to do that, that would be awesome. Thanks Hi, I am building a website and would like to make it liquid. The website address is: http://www.cse.dmu.ac.uk/~p04283218/mainframe9/ Can anyone point me in the right direction as to how I would do this please. Thanks. http://insomnia.eternal-glory.org/2.0/index.php I'm trying to imitate a Mac computer, Tiger. Looks great in FF/Safari, but in IE7, the dock refuses to center. I have: Code: body {
text-align:center;}
in my CSS, that's supposed to fix the margin-left/-right:auto; bug for IE. But... it's not? Help, please? Doctype is Strict, and I have margin-left/-right set to auto. Thanks in advance, Michele Hi There I'm new to this forum and thanking anyone who helps in advance. I have designed a website for my company which owns and operates bars and hotels in the North East of England. The site looks quite good, and I'm trying to finish it off. One problem I am stuck on is the drop down bar menu of bars and hotels. I want people to be able to choose the venue from the drop down list and then have it take them to the pubs website. However, at the moment it just links to an error page in the website. I designed it in frontpage 2003 and am only really familiar with this programme. I have tried editing the links etc but having no luck. Is anyone able to help? Again, thanks in advance John Gray well im creating a new website layout but its being an ass...or its just me well its like 5am here in the UK now which is probebly the reason for the problem but ah well i need it sorting asap and i cant work it out. my website is http://www.rharris28.com so you can see for yourself. basicly everything apart from the bar at the bottom should be on one line, but it just wont do it. i refuse to use tables as ive broken that habbit and want to stear clear of tables at all costs. so its all div's and css work. my html is HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mixing Pixels - Internet Services :: Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="verify-v1" content="KY6WP1pcuAyddeAyjc4oFZVeQDE0qbbA1GGcJ2Zgu8Y=" />
</head>
<body>
<div id="background" align="center">
<div id="container" align="left">
<div id="tb">
<div id="tbbg"></div>
<div id="topsep"></div>
<div id="tophome"></div>
<div id="topsep"></div>
<div id="topmap"></div>
<div id="topsep"></div>
<div id="topcontacts"></div>
<div id="topsep"></div>
<div id="searchbg"><b>Search:</b></div>
</div>
<div id="topmenu">
<div id="topmenubg">Home</div>
<div id="topmenusep"></div>
<div id="topmenubg">News</div>
<div id="topmenusep"></div>
<div id="topmenubg">Downloads</div>
<div id="topmenusep"></div>
<div id="topmenubg">Search</div>
<div id="topmenusep"></div>
<div id="topmenubgend">Services</div>
</div>
</div>
</div>
</body>
</html>
and my CSS is Code: * {
margin: 0;
padding: 0;
}
#background {
background-color:#01557C;
height: 100%;
width: 100%;
}
#container {
background-color:#FFFFFF;
width: 759px;
height:500px;
}
#tbbg {
background-image:url(/images/main01.jpg);
width:256px;
height:41px;
}
#tb {
float:left;
width:759px;
}
#tophome {
background-image:url(images/but_home.gif);
width:74px;
height:41px;
}
#topmap {
background-image:url(images/but_site_map.gif);
width:94px;
height:41px;
}
#topcontacts {
background-image:url(images/but_contacts.gif);
width:96px;
height:41px;
}
#topsep {
background-image:url(images/separator.gif);
width:2px;
height:41px;
}
#searchbg {
width: 231px;
height: 41px;
background-image:url(images/fon01.gif);
}
#topmenu {
width:759px;
}
#topmenubg {
background-image:url(images/fon_menu.gif);
width:132px;
height:42px;
float:left;
text-align:center;
}
#topmenubgend {
background-image:url(images/fon_menu.gif);
width:135px;
height:42px;
float:left;
}
#topmenusep {
background-image:url(images/e_menu.gif);
width:24px;
height:42px;
float:left;
}
please help...many thanks I'm trying to design a website for my self and I have a problem. My default browser is Safari so I didn't notice the problem till now. I designed the site layout in photoshop and the site in dreamweaver and it works fine in IE and Safari but in Firefox the site layout gets split at the top of the page and you can see the background in a line. Now the layout has two CSS styles for content in the middle and sidebar on the left both have background color that matches the design #333 and #646464. These are noticeable in the split. The site is sv-photography.net Any one got any ideas on how to fix this? SebastjanV Hello everyone. I recently finished a game website and while I was observing the website I noticed a game that was not working. I don't know how or why it is not working so I came here. I don't know if this is the place to post this problem so I guessed. Anyways here is the URLhttp://umgames.co.cc/evilnights.php Thanks in advance. Hi, I've just finished creating the layout for my website. I was just wondering if anyone could tell me why my text does not fit in the boxes that I have created using layers while in Internet Explorer it seems to work fine. Here is the link: http://www.geocities.com/seto.chaos/ And here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Gameplatforms</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body bgcolor="black" body link="yellow" vlink="purple" alink="red">
<div id="Layer5" style="position:absolute; background-color:#666666; left:10px; top:176px; width:211px; height:667px; z-index:5"><font size="2" face="Arial" color="Yellow">
</font>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:100px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:31px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font>
<a href="Reviews%20Page.htm">Reviews</a></font> </font></p>
</div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:170px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><font color="Yellow"></font><a href="http://gameplatforms.proboards62.com">Forum</a></font> </p> </div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:240px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:44px; top:6px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><a href="Videos%20Page.htm">Videos</a></font></p>
</div>
<p><font color="Yellow" size="2" face="Arial"><br>
<br>
</font></p>
</div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; background-color:#999999; left:15px; top:31px; width:185px; height:48px; z-index:4">
<div id="Layer4" style="position:absolute; left:50px; top:7px; width:86px; height:36px; z-index:4">
<p><font color="Yellow" size="6" face="Arial"><a href="News%20Page.htm"> News</a></font></p>
</div>
<p><br>
<font color="Yellow" size="4" face="Arial"><br>
</font></p>
</div>
</font></div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:144px; top:143px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="News%20Page.htm">
News
</a></font></div>
<div id="Layer3" style="position:absolute; left:10px; top:141px; width:1108px; height:26px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:440px; top:2px; width:6px; height:16px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="Reviews%20Page.htm"> Reviews </a></font></div>
</font>
<div id="Layer4" style="position:absolute; left:687px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial"><a href="http://gameplatforms.proboards62.com">Forum</a></font></div>
<font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; left:916px; top:2px; width:5px; height:18px; z-index:4"><font color="Yellow" size="4" face="Arial">
<a href="Videos%20Page.htm"> Videos </a></font></div>
</font></div>
<div id="Layer1" style="position:absolute; left:10px; top:14px; width:1108px; height:884px; z-index:1">
<p> </p>
<p> </p>
<p> </p>
<p><br>
</p>
<p><br>
</p>
<div id="Layer3" style="position:absolute; left:0px; top:841px; width:1108px; height:40px; background-color:#666666; z-index:3"><font size="2" face="Arial" color="Yellow">
<div id="Layer4" style="position:absolute; background-color:#999999; left:9px; top:9px; width:1090px; height:24px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Contact us: <a href="mailto:kaibachaoschampion@gmail.com">Email:</a> <a href="mailto:kaibachaoschampion@gmail.com">kaibachaoschampion@gmail.com</a></font></p>
</div>
</font> </div>
<div id="Layer5" style="position:absolute; background-color:#666666; left:948px; top:162px; width:160px; height:667px; z-index:5"><a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html">
</a> <a href="http://www.play-asia.com/SOap-23-83-19kw-49-en.html"><img src="http://www.play-asia.com/paOS-32-74-z.html" border=0 alt="Play-Asia.com - Buy Video Games for Consoles and PC - From Japan, Korea and other Regions!" width="160" height="600"></a> </div>
<div id="Layer5" style="position:absolute; background-color:#666666; left:251px; top:162px; width:666px; height:667px; z-index:5">
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:110px; width:607px; height:87px; z-index:4">
<p><font size="2" face="Arial" color="Yellow">Text text text text text text text text text text text
</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:210px; width:607px; height:72px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">
Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:290px; width:607px; height:153px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:30px; width:607px; height:71px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:450px; width:607px; height:72px; z-index:4">
<p><font color="Yellow" size="6" face="Arial">Title</font></p>
</div>
<div id="Layer4" style="position:absolute; background-color:#999999; left:30px; top:530px; width:607px; height:119px; z-index:4">
<p><font color="Yellow" size="2" face="Arial">Text text text text text text text text text text text text text </font></p>
</div>
<font size="2" face="Arial" color="Yellow"></font></div>
<p><br>
</p>
</div>
<div id="Layer2" style="position:absolute; left:162px; top:14px; width:667px; height:123px; z-index:2"><img src="http://i5.photobucket.com/albums/y157/kaibachaoschampion/Logo.png" width="800" height="125"></div>
</font>
</body>
</html>
Thanks Ok I am having some issues with my webpage. I first should say I am relatively new to page designs but I think I know the basics of HTML. However when I posted what I thought was my code in another post, I was told umm that it wasn't my code. I am using share point designer. So before I post what I think my code is, can someone tell me ahh, how I get the code to post lol. Anyway my issue is on my 22" monitor the page looks fine and I can see everything. When I look at the same page on my lap top, well that is a different story. #1, I am not able to see the bottom half of my picture or what is in the bottom half of my left frame. The reason I do not post the page is because it is not finished and I dont want anyone to see it yet lol..... Looking for help, thank you Ok, I've written my entire site in tables and that works lovely. I now want to put a border around everything on my page. So I tried: <table width="820" cellspacing="0" cellpadding="10" border="1" bordercolor="#c51e21"> <tr> <td> <div align="center"> MY ENTIRE WEBPAGE </div> </td> </tr> </table> However, the border color doesn't change and just fades here and there when I change the hex. I also want to change the border type from a 3dish window frame to a solid line. Can anyone help me please. |
|||||||