content is not centered even with margins set correctly

StackOverflow https://stackoverflow.com/questions/18240126

  •  24-06-2022
  •  | 
  •  

Domanda

i'm having this problem related to my content not centering....i have read everything and have done everything my logic is telling me but i see no change or result... -it should also be noted that this problem started to happen when i started to use the at the top of every page but maybe i'm not making space for it properly like i should so it has just messed everything else up....

edit i guess what i'm trying to do is create a space about 115px at the top of every page on my website so can i use SSI to insert my header which includes my menu, logo and some social links, maybe i'm going about this wrong?

here is my css:

body{
font-family: sans-serif, times, serif;
margin:0px;
padding:0px;
padding-top:10px;
width:100%;
}

#centered{
width:900px;
height:auto;
margin:0px auto;
}
#menu{
position:relative;
top:0px;
left:0px;
}
.content{
background:none;
position:absolute;
margin:0px auto;
height:auto;
top:115px;
left:0px;
}
#feature img{
    position:relative;
    left:0px;
    top:0px;
    margin:0px;
    padding:0px;
    border:0px solid white;
    border-radius:2px;
}

div.centercolumn{
position:relative;
left:8px;
top:0px;
width:100%;
margin:8px;
}

p.mission,.impact{
    position:relative;
    left:0px;
    margin-top:0px;
    margin-bottom:8px;
    text-decoration:underline;
    font-weight:bold;
    text-align:center;
    font-style:italic;
    font-size:1.2em;
    max-width:900px;
    clear:both;
}

p.mission{
    padding-top:10px;
}

#programs{
    position:relative;
    left:2px;
    top:0px;
    float:left;
    padding-bottom:50px;
}

    .spread{
    padding:5px;
    margin:0px 12px

}

    span{
    opacity:0;
    -webkit-transition: opacity .5s;
    -moz-transition:    opacity .5s;
    -o-transition:      opacity .5s;
}

then my html:

<body>
<div id="centered">
<div id="menu">
<!--#include virtual="/menus/menu.html" -->
</div>
<div class="content">
    <div id="feature">
        <img id="imagefeature" src="http://www.unifiedforuganda.com/resources/test%20homepage.jpg" alt="fall 2013 tour" />
    </div>
    <div class="centercolumn" id="programs">
        <p class="impact">Our Impact</p>
        <a href="#" class="imglink spread" id="mentorship" alt="Mentorship Program"><span></span></a>
        <a href="#" class="imglink spread" id="sponsorship" alt="Sponsorship Program"><span></span></a>
        <a href="#" class="imglink spread" id="scholarship" alt="Scholarship Program"><span></span></a>
        <p class="mission">Our Mission</p>
        <p class="promotiontext">We emotionally and financially support the most destitute children of northern Uganda through scholarship and mentorship.<br>U4U is student led organization that is registered as an official 501(c)3.</p>
    </div>
</div>

È stato utile?

Soluzione

Well, your CSS for centering the #centered element is in fact correct! So don't worry, you were on the right track there.

The problem actually lies with the content of the #centered element - the styling of the .content element. It is given position:absolute, which means it gets taken out of the layout, and as such the positioning of #centered has no effect over it (since #centered does no have position:relative).

There are two ways to fix this that I can see right now: First, you could add position:relative to the definition for #centered, so your CSS looks like this:

#centered {
    width:900px;
    height:auto;
    margin:0px auto;
    position:relative;
}

This will cause your absolutely-positioned .content to be positioned relative to the #centered element. Alternatively (and the approach I prefer), you can remove the absolute positioning on .content, since it doesn't seem to needed to be there. With removal of some other attributes rendered unnecessary and adding of a margin instead, it would look like this:

.content {
    margin-top:115px;
    background:none;
}

Here's a JSFiddle demonstration of the second solution. If you expand the viewport, you'll see that the elements are now centered in the screen. Note that if the content you're inserting server-side won't be absolutely positioned (or rather, will be in the flow of the document), the margin-top:115px isn't even necessary, since any content you add will simply push the .content element downwards as needed.

If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top