CODEWITHSUNDEEP
htmlcsspaddingcenteringmargins
Batfan1939
Batfan1939

Reputation: 59

Centering a 3-column layout

I am having trouble getting this code to run using Google Chrome(I have not tested other browsers). When it displays, the regular paragraphs are displayed to the far left, even though they should be centered, and the links show gaps in the background, as if I highlighted the letters in MS Word. I have set the padding to 0 to try and remedy this, to no avail. What am I doing wrong?

<html>

<head>
<link rel="stylesheet" type="text/css" href="My Chars.css">
<title>My Chars</title>
</head>

<body>
    <!--Defines the general styles for the page-->
    <span class = "default" style = "float:left; background-image:url('Paper Mache.jpg'); width:100%; height:100%">

        <!--Empty header-->
        <div id = "header" style = "height:50px; width:100%; align:top">

        </div>
        <br />
        <!--Left links panel-->
        <span class = "default" style = "width:50px; padding:0px;">
            <a href = "original.html">Original Chars</a>
            <br />
            <a href = "updated.html">Updated Chars</a>
            <br />
            <a href = "blended.html">Blended Chars</a>
        </span>
        <br />
        <!--Main body text-->
        <span class = "default">

            <div class = "section_head">
                My character site
            </div>

            <span class = "default">
                This site is dedicated to the various ideas I've had regarding various characters over the years. The site is divided into three main sections, based on where my input starts and stops. These divisions are:
            </span>
            <ul class = "default">
                <li>
                    <div style = "font-weight:bold">
                        Original Characters
                    </div>
                    These are characters created "from scartch". I designed almost everything, from the name to the costume to the character's background, powers, skills, weapons, etc.
                </li>
                <li>
                    <div style = "font-weight:bold;">
                        Updated Characters
                    </div>

                    These are existing charactes whose backstories, skills, and/or powers have been altered to reflect the times, make a more logical or cohesive origin --especially with respect to an archenemy or to merge several versions of that character together.
                </li>
                <li>
                    <div style = "font-weight:bold;">
                        Blended Characters
                    </div>

                    These are two or more different characters that have similar or shared elements in terms of backstory, character themes/arcs, powers/skills/abilities, etc. that have been mixed together so that the best elements of the individual characters produce a new, better "combination character."
                </li>
            </ul>           
            <span class = "default">
                In addition to these three main sections, there are subsections for heroes and villains and supporting cast. There are also divisions between "universes," e.g. DC comics universe vs a movie's universe.
            </span>
        <!--Closing th main body-->
        </span>
    <!--Closing the main page details-->
    </span>

</body>
</html>

In an external style sheet:

body
{
    margin: 0;
}
.default
{
    width: 800px;
    height: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

.section_head
{
    background-color: white;
    font-size: large;
    font-weight: bold;
    text-align: center;
    width: 800px;
    margin-left:auto;
    margin-right: auto;
}

a:link
{
    color: red;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

JSFiddle example - http://jsfiddle.net/L9LvS/

Upvotes: 0

Views: 81

Answers (1)

Julian
Julian

Reputation: 503

Well, I think there are some points of improvement within your code.

e.g. span-tags are inline-elements, so no block-element should be inserted there. Try using div- or p-tags instead!
Note there is also a new css-display-property called inline-block it is often a very neat alternative to float and causes a lot less trouble on the website later.
( http://bittersmann.de/articles/inline-block/ )

So, unless I'm not getting your goal right, I think switching to block-elements will solve a lot of your problems.
(you can check this with display:block first, too, if you don't want to rewrite your html)

Upvotes: 1

Related Questions