Jump to content

position centred...

visitor

By visitor
in CSS Help

Recommended Posts

visitor Member

visitor

Posted
Posted

Hi,

 

I wonder if this can be centred in any browser without using tables but only CSS...?

 

<!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" xml:lang="de-ch" lang="de-ch">

  <head>

  <title>Test</title> 

 

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

  <style type="text/css">

  a:link { font-family:Arial,Verdana,Helvetica,sans-serif; font-size:10pt; color:#FF0033; text-decoration:none }

  a:visited { font-family:Arial,Verdana,Helvetica,sans-serif; font-size:10pt; color:#FF0033; text-decoration:none }

  a:active { font-family:Arial,Verdana,Helvetica,sans-serif; font-size:10pt; color:#FF0033; text-decoration:none }

  body { font-family:Arial,Verdana,Helvetica,sans-serif; font-size:10pt; color:#605C88; text-align:center }

  table { font-family:Arial,Verdana,Helvetica,sans-serif; font-size:10pt; color:#605C88; text-align:justify }

  </style>

   

</head>

 

<body>

 

<center>

 

<table border="0" cellspacing="0" cellpadding="0" width="955px">

  <tr>

  <td width="175px"> </td>

 

  <td width="605px"><a href="index.html" target="_top"><img src="ZEIT8.jpg" border="0" alt="Click on this image to return to the index page"></a></td>

 

  <td width="175px"> </td>

  </tr>

</table>

 

<br>

 

<table border="0" cellspacing="0" cellpadding="0" width="605px">

  <tr>

  <td align="left" width="79px" height="25px"><a href="index-en.php" target="_top">DATABASE</a></td>

 

  <td align="left" width="59px" height="25px"> </td>

 

  <td align="center" width="60px" height="25px"><a href="stf-en.html" target="_top">FORMS</a></td>

 

  <td align="left" width="59px" height="25px"> </td>

 

  <td align="center" width="70px" height="25px"><a href="trading-en.html" target="_top">TRADING</a></td>

 

  <td align="left" width="59px" height="25px"> </td>

 

  <td align="center" width="85px" height="25px"><a href="transfer-en.html" target="_top">TRANSFER</a></td>

 

  <td align="left" width="59px" height="25px"> </td>

 

  <td align="right" width="75px" height="25px"><a href="support-en.html" target="_top">SUPPORT</a></td>

  </tr>

</table>

 

<br>

 

<table border="1" cellspacing="0" cellpadding="0" width="955px">

  <tr>

  <td width="175px" height="25px"><a href=".htm" target="_top">CLIENT ACCOUNT</a></td>

 

  <td width="605px" height="25px"> </td>

 

  <td align="center" width="175px" height="25px"><a href=".htm" target="_top">LOGOUT</a></td>

  </tr>

</table>

 

<table border="1" cellspacing="0" cellpadding="0" width="955px">

  <tr> 

  <td width="175px" height="25px"><a href=".htm" target="_top">PENDING TRADES</a></td>

 

  <td width="605px" height="25px"> </td>

 

  <td width="175px" height="25px"> </td>

  </tr>

</table>

 

<table border="1" cellspacing="0" cellpadding="0" width="955px">

  <tr> 

  <td width="175px" height="25px"><a href=".htm" target="_top">TRANSACTION HISTORY</a></td>

 

  <td width="605px" height="25px"> </td>

 

  <td width="175px" height="25px"> </td>

  </tr>

</table> 

 

  </body>

</html>

 

Thanks

 

visitor

Link to comment
https://forums.phpfreaks.com/topic/183251-position-centred/
Share on other sites
visitor Member

visitor

Posted
  • Author
Posted

Hi,

 

To have a better idea of what I'm talking about... please have a look at the following website

 

http://www.brainbell.com/tutorials/HTML_and_CSS/Horizontal_List-Based_Navigation_With_Color.htm

 

I'm trying to do the left part (Ads by Google, A+ Certification etc.). This website exists of two parts and they're perfectly centered.

 

Any help how this can be achieved is highly appreciated.

 

Thanks

 

visitor

Link to comment
https://forums.phpfreaks.com/topic/183251-position-centred/#findComment-967604
Share on other sites
visitor Member

visitor

Posted
  • Author
Posted

Hi,

 

Please have a look at this code... how can I place the menus 4 - 6 on the right hand side?

 

<!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" xml:lang="de-ch" lang="de-ch">

  <head>

  <title>Test</title>

 

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

<style type="text/css"><!--

body

{

font-family:Arial,Verdana,Helvetica,sans-serif;

font-size:12px;

background-color:#FFFFFF;

text-align:center;

margin:100px;

}

 

code {font-size:14px;color:#FFFFFF;}

pre

{

font-size:14px;

color:#FFFFFF;

padding:5px;

}

 

a:link, a:visited, a:active, a:hover

{

  text-decoration:none;

  font-weight:normal;

  color:#FF0000;

  font-size:12px;

}

 

a:active, a:hover

{

  color:#FFFFFF;

}

 

a.menu {

display:block;

padding:3px;

border-top:1px solid #605C88;

background-color:#FFFFFF;

text-align:center;

color:#FFFFFF;

text-decoration:none;

}

 

a.menu:link, a.menu:visited

{

  color:#FF0000;

background-color:#FFFFFF;

text-decoration:none;

}

 

a.menu:active, a.menu:hover

{

  color:#605C88;

background-color:#FFFFFF;

}

 

#left {

background-color:#FFFFFF;

width:128px;

float:left;

}

 

.menutitle{

text-align:center;

margin:2px;

}

 

.menucontainer {

border:1px solid #605C88;

background-color:#FFFFFF;

width:175px;

margin:10px;

}

 

#content {

background-color:#FFFFFF;

width:605px;

float:right;

padding:0px;

}

//--></style>

 

</head>

 

<body>

 

<div style="width:805px; margin:0px auto; text-align:left; background-color:#FFFFFF; border:1px solid #605C88;">

<div id="title">

  <img src="ZEIT8.jpg" style="float:right; width:605px; height:185px; margin-left:0px; margin-top:10px;" />

  </div>

 

<div id="left">

  <div class="menucontainer">

  <p class="menutitle">MENU 1</p>

  <a class="menu" href="#"> </a>

  </div>

 

  <div class="menucontainer">

  <p class="menutitle">MENU 2</p>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  </div>

 

  <div class="menucontainer">

  <p class="menutitle">MENU 3</p>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  </div>

 

  <div class="menucontainer">

  <p class="menutitle">MENU 4</p>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  </div>

 

  <div class="menucontainer">

  <p class="menutitle">MENU 5</p>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  <a class="menu" href="#"> </a>

  </div>

 

  <div class="menucontainer">

  <p class="menutitle">MENU 6</p>

  <a class="menu" href="#"> </a>

  </div>

 

</div id="content">

 

</body>

</html>

 

Thanks

 

visitor

Link to comment
https://forums.phpfreaks.com/topic/183251-position-centred/#findComment-968524
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.