achenn
02-14-2012, 02:04 PM
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!
http://i.imgur.com/Z1RWD.png (http://imgur.com/Z1RWD)
<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 -->
/* 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;
}
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!
http://i.imgur.com/Z1RWD.png (http://imgur.com/Z1RWD)
<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 -->
/* 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;
}