Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Positioning Issue

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #30361
    Chris Enloe
    Member

    I am having a slight positioning issue, I want it to do what the first picture is showing, but when I do what needs to be done in the html, what happens is shown in picture two.

    http://i512.photobucket.com/albums/t328/Chris_Enloe/newsite2.jpg

    http://i512.photobucket.com/albums/t328/Chris_Enloe/siteproblem-1.jpg

    The css:


    /*

    By: Chris Enloe
    http://www.chrisenloe.com

    */

    * {
    margin: 0;
    padding: 0;
    }

    body {
    background: url(../images/texture.jpg) repeat;
    }

    @font-face {
    font-family: Bebas;
    src: local("Bebas"), url("fonts/bebas.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    }

    h2 {
    font-family: Bebas, Arial, sans-serif;
    font-size: 28px;
    color: #4d4b4b;
    }

    .clear {
    clear: both;
    }

    #header {
    background: url(../images/header-bg.png) repeat-x;
    height: 115px;
    }

    #nav {
    margin: 0 0 0 600px;
    }

    #nav li {
    font-family: Bebas, Arial, sans-serif;
    font-size: 30px;
    color: #ffffff;
    float: left;
    margin-right: 25px;
    margin-top: 10px;
    list-style: none;
    }
    #nav li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    }

    #nav li a:hover {
    border-bottom: solid 3px #ffffff;
    }

    #page-wrap {
    margin: -125px auto;
    background: #dfdfe0;
    width: 930px;
    min-height: 950px;
    -moz-box-shadow: 0px 0px 25px #000;
    -webkit-box-shadow: 0px 0px 8px #000;
    box-shadow: 0px 0px 8px #000;
    }

    #79049
    virtual
    Participant

    It’s difficult to tell what is going on without seeing the html code. Even better a link to your site, it’s much easier to debug using Firebug.

    #79050
    Chris Enloe
    Member

    http://atest1.vistapanel.net/chrispersonal2/

    Try that, hopefully I can get this issue resolved soon!

    #79037
    Chris Coyier
    Keymaster

    This Worked For Me.

    /*

    By: Chris Enloe
    http://www.chrisenloe.com

    */

    * {
    margin: 0;
    padding: 0;
    }

    body {
    width: 930px;
    background: url(../images/texture.jpg) repeat;
    margin: 0 auto;

    }

    @font-face {
    font-family: Bebas;
    src: local("Bebas"), url("fonts/bebas.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    }

    h2 {
    font-family: Bebas, Arial, sans-serif;
    font-size: 28px;
    margin-top: 20px;
    color: #4d4b4b;
    }

    .clear {
    clear: both;
    }

    #header {
    background: url(../images/header-bg.png) repeat-x;
    height: 115px;
    }

    #nav {
    width: 930px;
    margin: 0 0 0 495px;
    }

    #nav li {
    display: block;
    font-family: Bebas, Arial, sans-serif;
    font-size: 30px;
    color: #ffffff;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 40px;
    list-style: none;
    }
    #nav li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    }

    #nav li a:hover {
    border-bottom: solid 3px #ffffff;
    }

    #page-wrap {
    margin: -125px auto;
    background: #dfdfe0;
    width: 930px;
    min-height: 950px;
    -moz-box-shadow: 0px 0px 25px #000;
    -webkit-box-shadow: 0px 0px 8px #000;
    box-shadow: 0px 0px 8px #000;
    border:;
    }
    #79021
    Chris Coyier
    Keymaster

    Its 5:15am. If your code works but you want the black header to go over top of the main section..you can use photoshop to do that. Where the triangles are in the black header, fill that in with the main section color. If you need help i’ll be back on around 2 or 3pm est. Hopefully that code works for you. Good luck.

    #78931
    virtual
    Participant

    You can also add this in your code

    html{
    background: url(http://atest1.vistapanel.net/chrispersonal2/images/texture.jpg) repeat;
    }
    body {
    background: url(http://atest1.vistapanel.net/chrispersonal2/images/header-bg.png) repeat-x;
    }

    However this won’t always line up correctly with the same image in the header as Chris Enloe has put it. It’s just a quick and nasty fix.

    #78950
    Chris Enloe
    Member

    I fixed it by just using one image. It works, but I am not totally satisfied with using images, instead of purely css.

    #78951
    kylewiedman
    Member

    I was able to fix it in my browser (Chrome) using your markup with this styling…


    #nav {
    height: 100px;
    margin: 0px;
    padding-right: 200px;
    clear: both;
    }

    #nav li {
    float: right;
    }

    #header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    }

    #page-wrap {
    margin-top: 50px;
    padding: 50px 2em 0;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.