|
HTML - Web Page Alignment
Can anyone help with a problem i have with web page alignment?
when i publish my site the page is not centred but sits on the left of the screen! i am using dreamwever 4 and not messing about with the code. cheers,jc Similar Tutorialshi, I am a newbie when it comes to HTML. I developed a web page and the contents of the page is aligned to the left. How would I align the page so that it is centered. Here is the URL for the web page: http://qhcontracting.com/ Thanks a bunch for any replies! GW Hi, I am working for support and got one issue raised.. My webpage has 3 print blocks .. when i minimize the browser the alignment of third block remains same and hence I good horizontal space bar for that while other two blocks align/resize themselves according to new page size.. Kindly suggest which tag /etc i need to check Hi everyone, I'm working on a website for a family member who has a buisness doing antique restoration, I'm trying to make all the pages have the same alignment, the address is http://www.maxbarr.com/ if you click on the buttons along the top you'll see what i mean, some of them are the same alignment others are shifted slightly to the left, they all have exactly the same code as I've used a Dreamweaver template. However they do use stylesheets as well, with the gallery pages using two so I'm guessing it may be that. For bonus marks can someone tell me how to make the copyright information in the gallery section the same size as one the other pages. here is the code for the template: 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>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("../styles.css");
#header #logo a {
font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
-->
</style>
<!-- TemplateBeginEditable name="gallery info" --><!-- TemplateEndEditable -->
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">
<div id="header">
<div id="logo">
<a href="index.html" onmouseover=""> Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="nav" style="margin-bottom: 10px;">
<div align="center">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentWrapper">
<div align="center"></div>
<div id="content"> <!-- TemplateBeginEditable name="Content" -->
<h1>This is the page title</h1>
<h2>This is the H2 tag</h2>
<!-- TemplateEndEditable --></div>
</div>
<div id="credit" align="center">Copyright © 2009 Max Barr
<br />
</div>
</div>
</div>
</body>
</html>
And here's the code for the stylesheet: Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
}
body {
background-color: #000000;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background-image: url(images/body-bg.png);
background-repeat: repeat-x;
background-position: top;
}
h1 {
color: #FFFFFF;
font-size: 24px;
font-weight: normal;
line-height: 28px;
letter-spacing: -1px;
}
h2 {
color: #999999;
font-size: 18px;
font-weight: bold;
line-height: 20px;
}
a, a:link {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: bold;
}
a:focus {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}
#outerWrapper {
margin: 0 auto 0px;
text-align: left;
width: 920px;
background: #fff url(images/content-bg.png) repeat-y left 13px;
}
#outerWrapper #gradient {
background-image: url(images/gradient-shadow.png);
background-repeat: no-repeat;
background-position: center top;
}
#header {
height: 80px;
background-image: url(images/header-bg.jpg);
background-repeat: no-repeat;
background-position: bottom;
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: left;
padding-left: 20px;
}
#header #logo {
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
padding-top: 10px;
padding-left: 0px;
line-height: 50px;
float: left;
width: 1000px;
text-decoration: none;
}
#header #links{
color: #C06A05;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: right;
width: 370px;
text-align: right;
margin-top: 25px;
padding-right: 25px;
}
#links a, #links a:active, #links a:visited {
font-weight: normal;
color: #C06A05;
}
#header #links a:hover {
color: #CCCCCC;
text-decoration: none;
}
#nav {
height: 62px;
margin-right: 20px;
margin-left: 20px;
color: #FFFFFF;
background-color: #CCCCCC;
background-image: url(images/nav-bg.jpg);
background-repeat: repeat-x;
background-position: top;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
margin-bottom: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 20px;
padding-left: 20px;
text-align: center;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 62px;
font-weight: normal;
background-image: url(images/nav-border.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#nav ul li a:hover {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
color: #FFFFFF;
}
#nav ul li#active {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
}
#nav ul li#active a {
color: #FFFFFF;
}
.subpage-navimage {
float: right;
}
#spacer {
background-image: url(images/nav-spacer.png);
background-repeat: no-repeat;
background-position: center top;
height: 27px;
}
#outerWrapper #feature {
height: 230px;
width: 880px;
margin-left: 20px;
margin-bottom: 5px;
background-image: url(images/feature.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#outerWrapper #contentWrapper {
padding-right: 25px;
padding-left: 30px;
clear: both;
padding-top: 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 0px;
width: 200px;
background-color: #232323;
border: 1px solid #161616;
}
#outerWrapper #contentWrapper #content {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
background-color: #3E3E3E;
color: #CCCCCC;
border: 1px solid #2C2C2C;
font-size: 12px;
line-height: 18px;
}
#content-image {
margin-bottom: 15px;
}
#content ul li {
margin-bottom: 5px;
}
#outerWrapper #footer {
background: url(images/footer-bg.png) no-repeat left top;
height: 60px;
color: #666666;
text-align: center;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#leftColumnContent {
width: 190px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #999999;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
#leftColumnContent h3 {
border: 1px solid #000000;
padding-top: 5px;
padding-bottom: 6px;
font-size: 12px;
padding-right: 4px;
padding-left: 4px;
background-image: url(images/sidebar-h3-bg.jpg);
background-repeat: repeat-x;
background-position: top;
color: #CCCCCC;
}
#leftColumn1 ul {
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#leftColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a {
display: block;
padding: 4px 4px 4px 6px;
color: #999999;
}
#leftColumn1 ul li a:hover {
text-decoration: none;
background-color: #171717;
color: #CCCCCC;
}
.fltlft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.fltrt {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.sidebarlt {
padding: 6px;
border: 1px solid #000000;
background-color: #4E4E4E;
color: #CCCCCC;
}
.sidebardk {
color: #999999;
border: 1px solid #4A4A4A;
padding: 6px;
background-color: #1F1F1F;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
color: #999999;
}
}
#credit {
text-align: center;
padding-top: 0px;
padding-bottom: 8px;
font-size: 11px;
color: #333333;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
color: #333333;
font-weight: normal;
}
#index #outerWrapper #gradient p {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
btw I know the code is very messy, I'm trying to learn more so I can clean it up a bit Thanks very much Hello, I am a page and was wondering how I would align it center in the page without all the formating being messed up. So I was wondering if there was a way to make everything center in the page but look just as it does now, just centered no matter the size of the page. Hope you can help! Thank you in advance. This is the page I would like the code to center http://www.primenewscenter.com/updat...ncom&buid=4928 Thanks! Having an issue with page positioning and alignment. My html skills are limited at best but Im trying to set up a layout template for my ebay sales. what I want is for the page/table to have fixed borders so that the horizontal scroll bar at the bottom doesn't' appear as I enter large amounts of text, instead I'd like to have it expand downwards to accommodate whatever I enter instead of expanding outwards to the right as its currently doing. I realize the code may be a bit of a mess, but Im seriously stuck, I've messed with all the tags but I can't seem to figure out what is causing this problem, any tips at all from anyone would be much appreciated. link to layout http://surrenderyourwings.com/layout.html Good morning, I cannot figure out how to get the images one on top of the other (in a straight line) here http://divamaggie.com/?p=60 . I tried Code: <br>, <p> and simply line spaces, but nothing seems to be working. I'm really hoping someone can tell me what I'm doing wrong. hey guys im getting a weird b0rder ar0und my <div>, i d0nt kn0w what it is..can anyb0dy help me please? ive been l00king at div pr0perties but i havent been able t0 eliminate that b0rder - im n0t even sure its fr0m the div but i'd think it is. the b0rder im talking ab0ut is the black 0ne. c0me t0 think 0f it.. its n0t a b0rder - the black secti0n is a <th> and the black is its backgr0und, but the <div> inside the <th> simply d0esnt extend in it t0 100% :/ http://www.hotlinkfiles.com/files/57...cument_7_.html Hope someone can suggest something. I am working with a programme that uses three templates to structure the web site, feeds articles, author page and site map on a daily basis to my web site. I attempted to insert Adsense ad units to templates and unfortunately everything is out of line now. this can be viewed at http://daviddutch.com/currency/articles/index.html Question is how do I bring everything else back in line please as when I look at coding there is no clear place to put the adsense HTML code to get things lined up correctly. Hope someone can offer wisdom and guidance. cheers Hi there. I use the following code to show a swf file and align it vertically and horizontically but i can do only the horizontal alignment. Any help about the vertical? Thanks in advance HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />
<style type="text/css" media="screen">
body { margin:0; text-align:center; }
div#content { text-align:center; vertical-align:middle;}
object#content { display:inline; vertical-align:middle;}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "myContent", "1400", "910", "9.0.0");
</script>
</head>
<body>
<div style="vertical-align:middle">
<div id="myContent" style="vertical-align:middle"></div>
</div>
</body>
</html>
It's not that huge of a deal because its only an under construction page... but I'd like to know how to get this page looking the same in both IE and Firefox. The only real issues with IE right now is that the image isn't centered and the yellow tape bg is 1px off from where it should be... thanks for any help! http://www.pzfantasyfootball.com Code: <html>
<head>
<title>PZ Fantasy Football » Under Construction</title>
<style type="text/css">
* {margin: 0; padding:0;}
p {margin-top: 15px;}
h2 {font-size: 25px; border-bottom: 1px solid #fff; margin-bottom: 10px;}
body {
background-image: url(images/Metal_Texture-PhotoshopTower.jpg);
background-color: #000;
color: #fff;
font-family: calibri, arial, verdana;
}
a, a:visited, a:active {color: #09f;}
a:hover {color: #06c;}
#wrap {
width: 800px;
margin: 0 auto;
}
.yellowtape {
position: absolute;
bottom: 0;
width: 100%;
height: 524px;
background-image: url(images/yellowtapebg.gif);
background-repeat: repeat-x;
}
.construction {
position: absolute;
bottom:0;
background-image: url(images/pzfantasyfootballunderconstruction.jpg);
width: 800px;
height: 600px;
}
.text {
position: relative;
left: 300px;
top: 225px;
width: 500px;
font-size: 18px;
text-align: left;
}
</style>
</head>
<body>
<div class="yellowtape"></div>
<div id="wrap">
<div class="construction">
<div class="text"><h2>11/1/07 » Site Under Construction Again</h2>Well once again we enter construction mode. I just wasn't feeling the league site, no one really used it much, it didn't have much content that Yahoo! couldn't already offer, and it just really ended up being a waste of time. So now I'm going to give it a shot with a fantasy help site. I know I've done this before, but my future may hold something in the sports industry, so now I look to try and establish a well read site in order to help achieve my goals. I'm not 100% sure if the new site will be done before the end of this season, however it should be done in time for the 2008 NFL Draft. Hope to see you all soon!
<p />Oh, and feel free to contact me via the forums <a href="http://www.pzfantasyfootball.com/forums">here</a>.
</div>
</div></body>
</html>
This is the first site I've done. I want to add some screenshots to the center of the page but can't figure out how to keep the links in place at the left. When I add the pics the links move down to make room for the pics. How do I get the links to stay in place at the left of the screenshots? Thank you for any help. Krytin http://ghostfleet.bravehost.com/ghostfleet.htm Hi, Can someone help me align the two images at the bottom of the html page (view attachment) in the center. It should be compatible with IE and Firefox 3. I have attached sample code in the .doc file. Thanks in advance, Ronnie Hi Guys Here is some css I use for my footer, I want it to be centered but only span 98% of the distance, however when I change the width to 98% it only cuts off the 2% from the right hand side and justifies the footer to the left. Any Help? Thanks Code: #footer{
clear: left;
width: 100%;
background: white;
color: black;
text-align: center;
padding: 2px 0;
}
I have a div which contains a line of text as a url. When clicked, a div is displayed directly below, and the content is different depending on the user. Currently, the div opens and two left hand sides align. I would like to cause the right hand sides to align instead, with the divs growing to the left if the text is larger. Is this possible? I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hi, I am trying to figure out how I can align text with an image using spacing (strictly HTML). I have applied the vspace and hspace tags to my image, but then my image won't be aligned flush with the text. Is there any way I can set up spacing on just one side of the image? Hey all, Just a question about my amature portfilio site that im creating. On some pages, graphics and blog, for example, http://www.freewebs.com/breakdowninc.../graphics.html http://www.freewebs.com/breakdowninc/pages/blog.html I am wanting to center the graphics/blog parts overhead of the copywrite text, found at the bottom of my page. Example: I have centered the graphics images, using align="center" yet they go off the side slightly. Anyway can how can I align them appropriately, without using "position:absolute" because it screws with the mini/maximising of my page. Cheers |
|||||||