Programming Help

Web Development



What's Here?

  • Members: 132,680
  • Replies: 471,780
  • Topics: 73,152
  • Snippets: 2,541
  • Tutorials: 667
  • Total Online: 1,216
  • Members: 69
  • Guests: 1,147

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 132,680 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,216 people online right now. Registration is fast and FREE... Join Now!




Web Site will not Center

 
 Reply to this topicStart new topic

Web Site will not Center
ivanjay205
post 19 Sep, 2008 - 07:50 AM
Post #1


New D.I.C Head

*
Joined: 3 Sep, 2008
Posts: 8
For some reason I cannot get my web site to center using the normal methods.

Here is the master asp page for the web site:

CODE
<%@ Master Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>
<script type="text/javascript" src="scripts/marquee.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Studio-e Design Group Intranet</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />    
</head>
<body>
<form id="form1" runat="server">
<div id="container">
    <div id="header">
    </div>
    <div id="menu">
    </div>
    <div class="externallinks">
        <table>
            <tr><th colspan="12">
                <br />ELECTRONIC REFERENCE MATERIAL
                </th></tr><tr><td>&nbsp;</td></tr>
            <tr>
                <td><img alt="Graphic Standards" src="Images/Graphic_Standards.gif" /></td>
                <td><img alt="Building Codes" src="Images/Building_Codes.gif" /></td>
                <td><a href="Data/ADA_Standards.pdf" target="_blank"><img alt="ADA Guidelines" src="Images/ADA_Guidelines.gif" /></td>
                <td><a href="http://www.djec.org/aia_clg/index.htm" target="_blank"><img alt="AIA Layering" src="Images/AIA_Layering.gif" /></a></td>
                <td><a href="Data/BOMA_Guidelines.htm" target="_blank"><img alt="BOMA Guidelines" src="Images/BOMA_Guidelines.gif" /></a></td>
                <td> <a href="http://www.nfpa.org/aboutthecodes/list_of_codes_and_standards.asp" target="_blank"><img alt="NFPA Manual" src="Images/NFPA_Manual.gif" /></a> </td>
                <td><a href="http://products.construction.com/portal/server.pt?open=512&objID=204&PageID=252&cached=true&mode=2&querySearch=drywall&searchSource=IS" target="_blank"><img alt="Sweets Catalog" src="Images/Sweets_Catalog.gif" /></a></td>
                <td><a href="http://www.epa.gov/greenbuilding/" target="_blank"><img alt="Green Building" src="Images/Green_Buildings.gif" /></a></td>
                <td><a href="http://www.merriam-webster.com/" target="_blank"><img alt="Websters Dictionary" src="Images/Websters_Dictionary.gif" /></a></td>
                <td><a href="http://thesaurus.reference.com/" target="_blank"><img alt="Roget's Thesaurus" src="Images/Rogets_Thesauraus.gif" /></a></td>
                <td><img alt="Tips and Tricks" src="Images/Tips_And_Tricks.gif" /></td>
                <td><img alt="Help Desk" src="Images/Help_Desk.gif" /></td>
            </tr><tr>
                <td>Graphics Standards</td>
                <td>Building Codes</td>
                <td>ADA Guidelines</td>
                <td>AIA Layering</td>
                <td>BOMA Guidelines</td>
                <td>NFPA Manual</td>
                <td>Sweets Catalog</td>
                <td>Green Building</td>
                <td>Websters Dictionary</td>
                <td>Roget's Thesaurus</td>
                <td>Tips and Tricks</td>
                <td>Help Desk</td>
            </tr>
        </table>
    </div>            
    <div class="internallinks">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
</div>
</form>
</body>
</html>


Here is the stylesheet

CODE
p
{
    font-family: 'Times New Roman';
    font-size: medium;
    font-weight: normal;
    color: #FFFFFF;
}
body
{
    background-image: url( '/Images/STRINGGY_GIF.jpg' );
    text-align:center;
}
a
{
    font-family: 'Times New Roman';
    color: #FFFFFF;
    text-decoration: none;
}
img
{
    border-style: none;
    width: 56px;
    height: 70px;
    text-align: center;
}
ul
{
    line-height: 35px;
}
#header
{
    height: 148px;
    width: 1012px;
}
#menu
{
    height: 27px;
    width: 1009px;
}
.externallinks
{
    height: 262px;
    width: 1012px;
    text-align: center;
}
.internallinks
{
    height: 339px;
    width: 1013px;
}
.four_column_layout
{
    float:left;
    width:25%;
    text-align:left;
    height: 248px;
}
#container
{
    background-image: url('Images/background.jpg');
    background-repeat: no-repeat;
    font-family: 'Times New Roman';
    color: #FFFFFF;
    font-size: large;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    height: 779px;
    width: 1019px;
}


Thanks!!

This post has been edited by ivanjay205: 19 Sep, 2008 - 07:52 AM
User is offlineProfile CardPM

Go to the top of the page

marcells23
post 19 Sep, 2008 - 08:02 AM
Post #2


D.I.C Head

Group Icon
Joined: 22 Aug, 2007
Posts: 134



Thanked 3 times

Dream Kudos: 125
My Contributions
try adding

margin-left:auto;
margin-right:auto;

to the container css
User is offlineProfile CardPM

Go to the top of the page

ivanjay205
post 19 Sep, 2008 - 09:33 AM
Post #3


New D.I.C Head

*
Joined: 3 Sep, 2008
Posts: 8
QUOTE(marcells23 @ 19 Sep, 2008 - 09:02 AM) *

try adding

margin-left:auto;
margin-right:auto;

to the container css


Thank you so much, that worked perfectly. It has been killing me trying to figure it out!
User is offlineProfile CardPM

Go to the top of the page

b.ihde
post 29 Sep, 2008 - 06:21 AM
Post #4


New D.I.C Head

*
Joined: 29 Sep, 2008
Posts: 37



Thanked 1 times
My Contributions
another question:

is it possible to fix the problem that way?? :

Create another div (like div.center) in CSS with
text-align: center;

and put the content to center in this div element..

thanks for comments!
User is offlineProfile CardPM

Go to the top of the page

jaxx751
post 29 Sep, 2008 - 08:14 AM
Post #5


New D.I.C Head

*
Joined: 18 Sep, 2008
Posts: 4


My Contributions
QUOTE(b.ihde @ 29 Sep, 2008 - 07:21 AM) *

another question:

is it possible to fix the problem that way?? :

Create another div (like div.center) in CSS with
text-align: center;

and put the content to center in this div element..

thanks for comments!


I believe that should work just fine. text-align: center; should apply to any child elements in the div. So if you have:

CODE

.center {
text-align: center;
width: 100%;
}

.image {
background-image: url(image.jpg);
width: 60px;
height: 60px;
}

[...]

<div class="center">

<div class="image">
</div>

</div>


the div that is the image will be centered within the div "center." Beyond that any text inside of "image" will NOT be centered... It's its own element and you can apply it's own style to it. I suggest that instead of creating a div to center something as this can cause problems down the line if you have super complex code, is instead do this:

CODE

.image {
background-image: url(image.jpg);
width: 60px;
height: 60px;
margin: 0 auto;
}

[...]

<div class="image">
</div>


hope that makes sense, and I'm right as well... heh. been a while since I've designed websites.

edit: nevermind. this doesn't work because the image is a background.... don't listen to me.. sad.gif

it's times like these where it would be beneficial to memorize the box model. http://www.w3.org/TR/CSS2/box.html

This post has been edited by jaxx751: 29 Sep, 2008 - 08:16 AM
User is offlineProfile CardPM

Go to the top of the page

b.ihde
post 30 Sep, 2008 - 12:29 AM
Post #6


New D.I.C Head

*
Joined: 29 Sep, 2008
Posts: 37



Thanked 1 times
My Contributions
hey Jaxx thanks for that comment!

In my created website, i did use the "center-div" to center other divs
and even images. Just everything within the "center-div" gets centered.

an example:
CODE

<div class="center">

<img src="Path/" alt="Image" />
</div>


Your right, if my code gets bigger and bigger, i would use the the margin function. It is much easyer to keep the overview smile.gif

Of course the text of another div within the "center-div" will not be centered. But the question was about how to center the elements of the website, so it doesn't matter tongue.gif
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 11/23/08 06:45AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month