Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

CSS Alignment Question

Started by TLL , Feb 21 2008 10:33 AM

  • Please log in to reply

#1
TLL
Posted 21 February 2008 - 10:33 AM

TLL

    Member

  • Member
  • PipPip
  • 36 posts
if you view this on a web page anyone know how i can align the middle part to the center? IF you view in IE it looks ok alisgnment wise tho ixels are screwed up, if you view it in firefox inside looks ok but middle chunk is aligned left :/

Posted Image

Posted Image

help me!!

thanks :)

<HTML>
<HEAD>
<TITLE>| ::Gears Of War :: | </TITLE>
<style>

body{
background-color:black};
text-align:center;
}

.container{
width:660px;
height:100px;
margin-left: auto;
margin-right:auto;
border:1px solid #AD9482;
background-position: center;
text-align: center;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.title{
height:10;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.head{
height:100;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.links{
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c1{
width:70;
height:500;
float:left;
background-color:#e0e0e0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c2{
width:255;
height:500;
float:left;
background-color:#d0d0d0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c3{
width:255;
height:500;
float:left;
background-color:#c0c0c0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c4{
width:70;
height:500;
float:left;
background-color:#b0b0b0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.foot{
clear:both;
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

body,td,th {
color: #55A0FF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #750000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
</style>

<BODY>
<center>
<div class="container">

<div class="title">
:<a href="index.html">home</a>:
:<a href="news.html">news</a>:
:<a href="forum.html">community</a>:
:<a href="about.html">about us</a>:
:<a href="contact.html">contact</a>:
</div>



<div class="head"><img src="banner.JPG"></div>

<div class="links">



</div>

<div class="c1";>
<div align="center">Column One</div>
</div>

<div class="c2">
<div align="center">Column Two</div>
</div>

<div class="c3">
<div align="center">Column Three</div>
</div>

<div class="c4">
<div align="center">Column Four</div>
</div>

<div class="foot">
<div align="center">footer</div>
</div>

</div>
</center>
</BODY>
</HTML>


Edited by TLL, 21 February 2008 - 02:37 PM.

  • 0

Advertisements

#2
Major Payne
Posted 21 February 2008 - 04:23 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Remove the center tags as they are deprecated. You haven't got a doc type. All browsers are parsing your page in Quirks Mode.

For centering the entire page for browsers other than IE:


.container{
width:660px;
height:100px;
margin 10px auto;

border:1px solid #ad9482;
background-position: center; REMOVE. Used for bg images.
text-align: center;

margin-top: 10px; REMOVE. Margin already set.
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;


padding: 10px;

text-align: center; IE needs this to center container.
}

Missing closing tag for <head>. No charset meta tag.


Ron

Be back to finish this up:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>| ::Gears Of War :: | </title>

<style type="text/css"><!--
a:link {
color: #fff;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #fff;
}

a:hover {
text-decoration: none;
color: #750000;
}

a:active {
text-decoration: none;
color: #fff;
}

body {
background-color: #000;
text-align: center;
}

body, td, th {
color: #55a0ff;
}

#container {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid #ad9482;
background-position: center;
text-align: center;
padding: 10px;
}

#title {
height: 10px;
width: 650px;
font-family: verdana;
color: #000;
font-size: 10px;
}

#head {
height: 100px;
width: 650px;
font-family: verdana;
color: #000;
font-size: 10px;
}

.links {
height: 15px;
width: 80%
margin: 0 auto;
background-color: #a0a0a0;
font-family: verdana;
color: #000;
font-size: 10px;
}

.c1 {
width: 70px;
height: 500px;
background-color: #e0e0e0;
}

.c2 {
width: 255px;
height: 500px;
background-color: #d0d0d0;
}

.c3 {
width: 255px;
height: 500px;
background-color: #c0c0c0;
}

.c4 {
width: 70px;
height: 500px;
background-color: #b0b0b0;
}

.c1, .c2, .c3, .c4 {
float: left;
font-family: verdana;
color: #000;
font-size: 10px;
}

ul li {
list-style-type: none;
display: inline;
padding: 5px;
}

#columns {
width: 100%;
margin: 10px auto;
text-align: center;
}

.foot {
clear: both;
height: 15px;
width: 90%;
margin: 0 auto;
background-color: #a0a0a0;
font-family: verdana;
color: #000;
font-size: 10px;
}
--></style>
</head>
<body>
<div id="container">

<div id="title">
:<a href="index.html">home</a>:
:<a href="news.html">news</a>:
:<a href="forum.html">community</a>:
:<a href="about.html">about us</a>:
:<a href="contact.html">contact</a>:
</div>



<div id="head"><img src="banner.jpg" style="widthXXpx; height: YYpx;" alt="Banner"></div>

<div class="links"> &nbsp;&nbsp; </div>

<div id="columns">
<ul>
<li class="c1">Column One</li>

<li class="c2">Column Two</li>

<li class="c3">Column Three</li>

<li class="c4">Column Four</li>
</ul>
</div>

<div class="foot">footer</div>

</div>
</body></html>

Edited by Major Payne, 21 February 2008 - 05:03 PM.

  • 0

#3
TLL
Posted 24 February 2008 - 02:18 PM

TLL

    Member

  • Topic Starter
  • Member
  • PipPip
  • 36 posts
Thanks just a quick question..

whats the code to center everything on my website banners, links etc
  • 0

#4
Major Payne
Posted 24 February 2008 - 05:23 PM

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Usually if you have them in a div container, set a width that works, then use margin: 0 auto; for compliant browsers plus add text-align: center; for IE.

The margin zero can be set for any top/bottom margin you want if needed. Padding may be needed in some cases.

Ron

Edited by Major Payne, 24 February 2008 - 05:24 PM.

  • 0
Back to Web Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Web Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP