Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS Alignment Question


  • Please log in to reply

#1
TLL

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

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

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

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






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP