Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow graphic designer new to web dev- a few specific questions(image and code included!

    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!



    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;
        }
    Last edited by achenn; 02-14-2012 at 02:13 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello achenn,
    The code you've posted does not have a closing tag for #wrap, if you're code is the same you will need to add one. It could be that was just a copy/paste error.

    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto

    If that's not working, you have other issues.

    Your site, once I added the missing closing tag for #header, is actually nested inside of #header. Your entire site is. #header is set at 321px high though... so your site doesn't really fit in there.

    Go through your elements and double check where you close them and what's really nested where. It helps to use indentation and comment on your closing tags so you know what they are closing.

    Validating is a great help as well. See the links about validation in my signature line below.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at this, I at least addressed your first two issues. It's still not valid so I've left you some work to do. -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100%/1.5 Georgia, Constantia, "Lucida Bright", "Bitstream Vera Serif", "Liberation Serif", serif;
    	;
    }
    body { background: #fafafa url(img/background.png) repeat; }
    #wrap {
    	width: 1271px;
    	background: #999;
    	margin: 0 auto 30px;
    	overflow: auto;
    }
    #header {
    	padding: 0 0 155px;
    	border-bottom: 4px double #ccc;
    }
    img#logo {
    	margin: 0 auto;
    	display: block;
    	background: #3f0; /*since I don't have your images*/
    }
    /* Navigation */
    
    #header ul { padding: 0; }
    	#header ul li {
    		width: 300px;
    		margin: 56px 0 0;
    		float: left;
    		text-align: center;
    	}
    		#header ul li a {
    			display: block;
    			color: #202020;
    			font-size: 24px;
    			text-decoration: none
    		}
    			#header ul li a:hover { color: #f00; }
    /* Main Content */
    #primary {
    	float: left;
    	width: 960px;
    	padding: 25px 5px;
    	background: #ccc;
    }
    #primary .post-item {
    	margin-bottom: 31px;
    	overflow: auto;
    }
    #primary .post-item-left {
    	width: 720px;
    	float: left;
    }
    .post-item-left h2 {margin-top: -7px;}
    .post-item-left p.meta {
    	margin-top: 17px;
    	color: #202020;
    	font-size: 19px;
    	font-style: normal;
    }
    .post-item-left p {
    	color: #202020;
    	margin-top: 17px;
    	text-align: left;
    }
    .post-item img {
    	float: right;
    	display: block;
    	background: #3f0; /*since I don't have your images*/
    }
    /* Secondary/Sidebar */
    
        #secondary {
    	float: right;
    	width: 192px;
    	margin-top: 25px;
    	padding-right: 10px;
    }
    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;
    }
    ol, ul { list-style-type: none; }
    h2 { font-size: 24px; }
    p { font-size: 19px; }
    a {
    	text-decoration: none;
    	color: #202020;
    	font-size: 19px;
    }
    a:hover { text-decoration: underline; }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="header"> <img src="img/logo.png" alt="whskytngfxtrt logo" width="283" height="254" id="logo" />
            <ul>
                <li id="blog"><a href="#">BLOG</a></li>
                <li id="work"><a href="#">WORK</a></li>
                <li id="about"><a href="#">ABOUT</a></li>
                <li id="contact"><a href="#">CONTACT</a></li>
            </ul>
        <!-- end header --></div>  
        <div id="primary">
            <div class="post-item">
                    <div class="post-item-left">
                        <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>
                    <!--end .post-item-left--></div>
                <img src="img/big_block.png" alt="post image" width="240" height="200" />
            <!-- end .post-item --></div>
            <div class="post-item">
                    <div class="post-item-left">
                        <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>
                    <!--end .post-item-left--></div>
                <img src="img/big_block.png" alt="post image" width="240" height="200" />
            <!-- end .post-item --></div>
            <div class="post-item">
                    <div class="post-item-left">
                        <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>
                    <!--end .post-item-left--></div>
                <img src="img/big_block.png" alt="post image" width="240" height="200" />
            <!-- end .post-item --></div>
        <!-- end primary --></div>
        
        
        <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 --> 
        
      <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you very much! i'll test everything out today when i get home!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •