Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Feb 2012
    Posts
    11
    Member #
    30825
    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!



    HTML Code:
        <body>
    
            <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" width="283"</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><!-- end lines_header -->
                </div><!-- end header -->
    
                <div id="main">
                    <div id="primary">
                        <div class="post-item">
                            <img src="img/big_block.png" alt="post image" />
                            <h2>Clever As **** Headline</h2>
                            <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><!-- end post-item -->
    
                        <div class="post-item">
                            <img src="img/big_block.png" alt="post image" />
                            <h2>Clever As **** Headline</h2>
                            <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><!-- end post-item -->
    
                        <div class="post-item">
                            <img src="img/big_block.png" alt="post image" />
                            <h2>Clever As **** Headline</h2>
                            <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><!-- end post-item -->
    
                    </div><!-- end primary -->
    
                    <div id="secondary">
                        <div class="search">
                            <input type="text" name="s" id="s" value="Search" />
                        </div><!-- end search -->
    
                        <div class="twitter-feed">
                            <h3>Tweets Tweeted</h3>
                                <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><!-- end twitter-feed -->
    
                    </div><!-- end secondary -->
    
                </div><!-- end main -->
    Code:
    /* 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;
    }

  2.  

  3. #2
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Hampshire, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Could you upload the site to a free www.000webhost.com then we can determine what is causing the issue
    Andrew Yurlov and Eis like this.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com