1 reply [Last post]
achenn
achenn's picture
Offline
newbie
Fort Worth, TX
Last seen: 2 years 36 weeks ago
Fort Worth, TX
Timezone: GMT-6
Joined: 2011-04-26
Posts: 2
Points: 4

Hi, firstly I'm so happy to have found this forum- I've been working on this all day and still have just a few bumps to smooth out.

1. My entire "wrap," encompasses everything from header to main area to sidebar to footer, is supposed to be centered, relative to the monitor. I've used margin: auto to accomplish this, though the entire wrap seems to be shifted to the right a good bit. What's causing this? (And how do I fix?)

2. In the main section, the meta info (Feb 10 2012) is supposed to be tucked up under the headline("Clever as **** Headline"). And it was, until I moved the body copy(.post-item p { ) to where it's supposed to be- under the image. How do I keep the body copy under the image while moving the meta info back where it needs to be- under the headline?

3. In my .psd, I have a radial gradient over the background. It's transparent in the center and fades out to a color slightly darker than my background. What's the best way to accomplish this with code?

Any and all help is greatly appreciated!


        <div id="wrap">
            <div id="header">
                <ul>
                    <li id="blog"><a href="#">BLOG</a></li>
                    <li id="work"><a href="#">WORK</a></li>
                    <li id="logo"><img src="img/logo.png" alt="whskytngfxtrt logo" height="254" li>
                    <li id="about"><a href="#">ABOUT</a></li>
                    <li id="contact"><a href="#">CONTACT</a></li>

                </ul>
                <div id="lines_header">
                    <img src="img/lines_header.png" alt="header lines" div>
            </div>

            <div id="main">
                <div id="primary">
                    <div class="post-item">
                        <img src="img/big_block.png" alt="post image" />
                        Clever As **** Headline
                        <p class="meta">Feb 10 2012</p>
                        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
                    </div>

                    <div class="post-item">
                        <img src="img/big_block.png" alt="post image" />
                        Clever As **** Headline
                        <p class="meta">Feb 10 2012</p>
                        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
                    </div>

                    <div class="post-item">
                        <img src="img/big_block.png" alt="post image" />
                        Clever As **** Headline
                        <p class="meta">Feb 10 2012</p>
                        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
                    </div>

                </div>

                <div id="secondary">
                    <div class="search">
                        
                    </div>

                    <div class="twitter-feed">
                        Tweets Tweeted
                            <li><a href="#">sometimes i just really love the internet</a></li>
                            <li><a href="#">sometimes i just really love the internet</a></li>
                            <li><a href="#">sometimes i just really love the internet</a></li>
                        </ul>
                    </div>

                </div>

            </div>

    /* Reset */

    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, address, code, img,
    small, strong, dl, dt, dd, ol, ul, li
    fieldset, form, label {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    body {
        background: #fafafa url(img/background.png) repeat;
        line-height: 1.5;
        font-family: Georgia,
                    Constantia,
                      "Lucida Bright",
                      "Bitstream Vera Serif",
                      "Liberation Serif",
                      serif;
    }
    ol, ul {
            list-style-type: none;
    }

    /* End Reset */

    h2 {
        font-size: 24px;
    }

    p {
        font-size: 19px;
    }

    a {
        text-decoration: none;
        color: #202020;
        font-size: 19px;
    }

    a:hover {
        text-decoration: underline;
    }

    /* Main Styles */

    #wrap {
        width: 1271px;
        background: none;
        margin: auto;

    }

    #header {
        background: none;
        height: 321px;
        float: left;
    }

    #lines_header {
        padding-top: 155px;
    }

    /* End Main Styles */

    /* Navigation */

    #header ul {
        overflow: hidden;
    }

    #header ul li {
        float: left;
        margin-top: 56px;
    }

    #header ul li a {
        color: #202020;
        font-size: 24px;
        position: relative;
    }

    #header ul li a:hover {
        text-decoration: none;
    }

    #header ul li#blog {
        margin-top: 191px;
        padding-left: 215px;
    }

    #header ul li#work {
        margin-top: 191px;
        padding-left: 245px;
    }

    #header ul li#logo {
        margin: auto;
    }

    #header ul li#about {
        margin-top: 191px;
        padding-right: 245px;
    }

    #header ul li#contact {
        margin-top: 191px;
        padding-right: 215px;
    }

    /* Main Content */

    #main {
        clear: both;
        overflow: hidden;
    }

    #main #primary {
        float: left;
        width: 970px;
        padding-top: 25px;
    }

    #main #primary .post-item {
        margin-bottom: 31px;
        overflow: hidden;
    }

    .post-item img {
        float: right;
        padding-left: 50px;
    }

    .post-item h2 {
        float: left;
        margin-top: -7px;
    }

    .post-item p.meta {
        margin-top: 17px;
        color: #202020;
        font-size: 19px;
        font-style: normal;
        float: left;
    }

    .post-item p {
        color: #202020;
        margin-top: 17px;
        padding-left: 370px;
        float: right;
        text-align: left;

    }

    /* Secondary/Sidebar */

    #main #secondary {
        float: right;
        width: 192px;
        margin-top: 25px;
        padding-right: 326px;
    }

    input {
        background: #d4d4d4;
        border: none;
        width: 190px;
        color: #202020;
        padding-top: 6px;
        padding-left: 6px;
        font-family: Georgia,
                    Constantia,
                      "Lucida Bright",
                      "Bitstream Vera Serif",
                      "Liberation Serif",
                      serif;
        font-size: 19px;
    }

    .search {

    }

    .twitter-feed {
        margin-top: 17px;
        color: #202020;
        font-size: 19px;
        font-style: normal;
        float: left;
        list-style-type: none;
    }

    .twitter-feed li {
        font-style:italic;
        margin-top: 8px;
        border-bottom: 1px solid #202020;
    }

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 1 week ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

you have make it as complex

you have make it as complex code. please use this code for easy to understandable:

css:

 html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, address, code, img,
    small, strong, dl, dt, dd, ol, ul, li
    fieldset, form, label {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
 
    body {
        background: #fafafa url(img/background.png) repeat;
        line-height: 1.5;
        font-family: Georgia,
                    Constantia,
                      "Lucida Bright",
                      "Bitstream Vera Serif",
                      "Liberation Serif",
                      serif;
    }
    ol, ul {
            list-style-type: none;
    }
 
    /* End Reset */
 
    h2 {
        font-size: 24px;
    }
 
    p {
        font-size: 19px;
    }
 
    a {
        text-decoration: none;
        color: #202020;
        font-size: 19px;
    }
 
    a:hover {
        text-decoration: underline;
    }
 
    /* Main Styles */
 
    #wrap {
        width: 1271px;
        background: none;
        margin: auto;
 
    }
 
    #header {
        background: none;
        height: 321px;
        float: left;
    }
 
    #lines_header {
        padding-top: 155px;
    }
 
    /* End Main Styles */
 
    /* Navigation */
 
    #header ul {
        overflow: hidden;
    }
 
    #header ul li {
        float: left;
        margin-top: 56px;
		padding-left:100px;
    }
 
    #header ul li a {
        color: #202020;
        font-size: 24px;
        position: relative;
    }
 
    #header ul li a:hover {
        text-decoration: none;
    }
 
 
    /* Main Content */
 
    #main {
        clear: both;
        overflow: hidden;
    }
 
    #main #primary {
        float: left;
        width: 970px;
        padding-top: 25px;
    }
 
    #main #primary .post-item {
        margin-bottom: 31px;
        overflow: hidden;
    }
 
    .post-item img {
        float: right;
        padding-left: 50px;
    }
 
    .post-item h2 {
        float: left;
        margin-top: -7px;
    }
 
    .post-item p.meta {
        margin-top: 17px;
        color: #202020;
        font-size: 19px;
        font-style: normal;
        float: left;
    }
 
    .post-item p {
        color: #202020;
        margin-top: 17px;
        padding-left: 370px;
        float: right;
        text-align: left;
 
    }
 
    /* Secondary/Sidebar */
 
    #main #secondary {
        float: right;
        width: 192px;
          padding-top: 25px;
		  padding-left:20px;
    }
 
    input {
        background: #d4d4d4;
        border: none;
        width: 190px;
        color: #202020;
        padding-top: 6px;
        padding-left: 6px;
        font-family: Georgia,
                    Constantia,
                      "Lucida Bright",
                      "Bitstream Vera Serif",
                      "Liberation Serif",
                      serif;
        font-size: 19px;
    }
 
    .search {
 
    }
 
    .twitter-feed {
        margin-top: 17px;
        color: #202020;
        font-size: 19px;
        font-style: normal;
        float: left;
        list-style-type: none;
    }
 
    .twitter-feed li {
        font-style:italic;
        margin-top: 8px;
        border-bottom: 1px solid #202020;
    }

html:

<div id="wrap">
            <div id="header">
                <ul>
                    <li id="blog"><a href="#" rel="nofollow">BLOG</a></li>
                    <li id="work"><a href="#" rel="nofollow">WORK</a></li>
                    <li id="logo"><img src="img/logo.png" alt="whskytngfxtrt logo" height="254" /></li>
                    <li id="about"><a href="#" rel="nofollow">ABOUT</a></li>
                    <li id="contact"><a href="#" rel="nofollow">CONTACT</a></li>
 
                </ul>
                <div id="lines_header">
                    <img src="img/lines_header.png" alt="header lines" div>
            </div>
 
            <div id="main">
                <div id="primary">
                    <div class="post-item">
                        <img src="img/big_block.png" alt="post image" />
                        Clever As **** Headline
                        <p class="meta">Feb 10 2012</p>
                        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
                    </div>
 
                    <div class="post-item">
                        <img src="img/big_block.png" alt="post image" />
                        Clever As **** Headline
                        <p class="meta">Feb 10 2012</p>
                        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
                    </div>
 
                    <div class="post-item">
                        <img src="img/big_block.png" alt="post image" />
                        Clever As **** Headline
                        <p class="meta">Feb 10 2012</p>
                        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
                    </div>
 
                </div>
 
                <div id="secondary">
                    <div class="search">
 
                    </div>
 
                    <div class="twitter-feed">
                        Tweets Tweeted
                            <li><a href="#" rel="nofollow">sometimes i just really love the internet</a></li>
                            <li><a href="#" rel="nofollow">sometimes i just really love the internet</a></li>
                            <li><a href="#" rel="nofollow">sometimes i just really love the internet</a></li>
                        </ul>
                    </div>
 
                </div>
 
            </div>
            </div>
            </div>