|
HTML - **need Help Centering Website**
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 Similar TutorialsHi, 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>
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 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. 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 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 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. I have some links (in the header, the SUPPORTERS) to different websites, but when I click on them the address in the address bar does not change to the address of the website that I clicked. How do I make it show the address that I clicked on? Thanks. http://www.ac.wwu.edu/~fencing/ I am a total noob but volunteered to administrate the website, because there was no one else to do it. hello, i need a website for german customers, somethign like www.podmod.de because i would like to offer the same. So if anyone has an idea where to start, or even can offer me something i can buy, please do so. my email: verenamueller999@web.de thanks verena. Hi, I am trying to find a way in which a website that is linked on my homepage can be opened while keeping at least one form of my homepage open as well. e.g.: Google images :http://images.google.com/imgres?imgu...en-us%26sa%3DG sorry for the massive link. Hope you get the idea. So what i want is to have a bar on top that is my homepage (like the google bar in the link), but the rest is the actual website that has been linked. I don't really care much about the url. It doesn't have to be my homepage url, it can be the actual website url. Google has been able to do that somehow, so it is possible. I would just like to know how and if it is hard to do. If someone knows how to do it, it would be great if you could give me a link to a tutorial, or explain it. thanks Hi How to add a website counter to my website. So that when ever a visitor visits the website I want the counter to increase say from 101 to 102 and then for a new visitor it should be 103 and then again for the next visitor 104 and so on..... I want to know the code. There are number of websites that are offering this but they put their advertisement which I don't want I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated. Site: http://blog.camhabib.com Hi, I'm trying to develop a fluid layout for a webpage - and I have two 50% <divs> that have images in them, and the width of these <divs> add to 100% of course. So from my resolution and slightly smaller ones it looks like they are centered. However, when I scale the browser down to a smaller size, they get squished together because they float left. How can I make it so one falls below the other and they become centered on the page at the same time? Cheers... Hey, I was working on a template and I was learning some new things so I might have messed up some where. But, the template won't center and it has a empty space next to it which I don't know how to get rid of. Can anyone help me? http://teamafterglow.com/templates/template7.html http://www.jesdeis.com/index2.php the image window area WAS centered. and should still be. all i did was change the menu. but i cant figure out why its no longer centered. also. the funky character in front of the copyright. that is NOT in my source. Hi, I'm new to the site and I'm just here to ask a question. I've been having trouble with my webpage trying to center everything. The problem is that at home my webpage is centered (When you zoom out everything stays centered) but as for school I zoom out and everything stays to the left and I'm pretty sure I left all the code the same from computer to computer. I don't think it is the resolution because I had changed my resolution to the same as at school. This is my coding (I'm an amateur at Html and don't know CSS): <title>Home - WebBanners</title> </head> <p align="center"> <div style="position:absolute;top:0px; left:0px; right:0px; bottom:0px;" align="center"> <body topmargin="0" leftmargin="0" bgcolor="#0099FF"> <img src="Banner.gif" width="1280" height="290" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="140,233,302,285" href="Home.html" /> <area shape="rect" coords="330,233,543,286" href="Samples.html" /> <area shape="rect" coords="565,240,722,287" href="Prices.html" /> <area shape="rect" coords="752,229,905,286" href="About.html" /> <area shape="rect" coords="945,235,1122,284" href="Contact.html" /> </map> <font face="Georgia, Times New Roman, Times, serif" size="+4" color="white"><p align="center"> <u> Welcome To WebBanners!</u></p></font> </p> <table align="center"> <tr> <td><font face="Georgia, Times New Roman, Times, serif" color="black" size="7"><strong>H</strong></font> <font face="Georgia, Times New Roman, Times, serif" size="+2" color="white">ere we make special just-for-you banner. <br /> <br> <font face="Georgia, Times New Roman, Times, serif">Every banner is unique to the person who have ordered them.<br /> <br><font face="Georgia, Times New Roman, Times, serif">They are sold at a reasonable price and if you don't <br>like them then we offer full money back guaranteed. <br /> <br /> We also have an interactive department where you can <br />talk to one of 'us' through the microphone so we can help you. <br />All you have to do is ask through the E-mail. <br /> <br /> We can make tons of banners for your website such as the one above <br />or see more <a href="Samples.html">Here</a> <br /> <br /> We have prices for your special needs. <br />All of the banners we offer are your ideas. <br />Ask and we can do it for you! Click <a href="Prices.html"> Here </a> for prices. <br /> <br /> Want to learn more about us? Click <a href="About.html"> Here </a> for more information. <br /> <br /> Going to buy one of our offers? Need help in finding something? <br />Click <a href="Contact.html"> Here </a> to contact us! For your design! </font> </td> <td align="center"> <font face="Georgia, Times New Roman, Times, serif" color="Green" size="+3"><u><strong>So Why Pick Us? </font> </u> </strong> <br /> <br /> <font face="Georgia, Times New Roman, Times, serif" color="Green" size="+2"> <li>We have 100% Money Back Guarantee <br /> <li>Satisfaction Guarantee<br /> <li>Our Prices beat the Competitors<br /> <li>24 Hour Service <br /> <li>Interactive Department <br /> <br /> <br /> <br /> <img src="Ordernow!.gif" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html> Is it possible to center links using the link tags itself: something like <a href align:center > |
|||||||