Cannot get link to go down in post content & image header on the left

7 replies [Last post]

Fri, 2010-03-05 22:51

Typhoon

Offline

newbie

Timezone: GMT-4

Joined: 2010-03-05

Posts: 4

Points: 5

First off I want to say, ive been lurking this site for a while now and google usually brings me here when I get stuck with my CSS coding. So thanks for all the help!

However, lurking couldnt help me solve this problem.

Problem 1: Green Circle - Read Article / Comments needs to be lower
Problem 2: Pink Circle - The Imageheader wont move out of the post box

Actual coding markup:

What It SHOULD look like:

As you can see, problem 1 (green circle), the Read Article/Comment link should be lower but it wont let me do it. Im sure its something simple, I just cant figure it out.

In problem 2 the image header wont move to the outside of the post box. Im stumped on this one...

.postIMG .readmore .comments-number are the classes where these things are.

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
 
<html>
	<head>
		<title>Comic Haven</title>
		<meta http-equiv="Conent-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
 
	<body>
 
		<div id="wrap">
			<div id="header">
				<h1><a href="#">Comic Haven</a></h1>
 
				<ul id="Navigation">
					<li>
						<a href="#">Narration
 
								<span><p>Articles & Reviews<p></span>
						</a>
					</li>
					<li>
						<a href="#">News
 
								<span><p>Comic News</p></span>
						</a>
					</li>
					<li class="">
						<a href="#">Films
 
								<span><p>Blockbusters!<p></span>
						</a>
					</li>
					<li class="">
						<a href="#">Games
 
								<span><p>Video Games</p></span>
						</a>
					</li>
					<li class="">
						<a href="#">Other
 
								<span><p>Random Stuff</p></span>
						</a>
					</li>
				</ul>
 
				<div id="header_ad">
 
				</div><!---end header_ad-->
			</div><!--end header-->
 
			<div id="main">
				<div id="primary">
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">28th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>DC Comics</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post1.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor" href="#">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">Batman #700 Review</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->
 
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">28th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>Marvel</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post2.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">X-Men #020</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->
 
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">28th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>Anime</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post3.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">Samurai Champloo</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->
 
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">27th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>Marvel</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post4.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">Daredevil is the best comic</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->
 
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">26th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>DC Comics</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post5.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">Green Arrow?</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->	
 
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">26th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>Marvel</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post6.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">Cap Reborn Finished</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->					
 
					<div class="post-item">
						<div class="postHeader">
							<div class="postMeta">
								<span class="date">
									<p class="Century-Gothic-Bold-Italic">Feb<span class="day">25th</p></span>
								</span><!--end spanDate-->
								<span class="category">
									<p>Manga</p>
								</span><!--end spanCategory-->
							</div><!--end postMeta-->
							<div class="postImg">
								<img src="img/PostImages/post7.jpg" alt="post image" />
							</div><!--end postImg-->
						</div><!--end postHeader-->
						<div class="postContent">
							<a class="postAuthor">
								Typhoon
							</a>
							<h1 class="Century-Gothic-Bold-Italic"><a href="#">The Whitebeard R.I.P.</a></h1>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
							elementum nunc ac elit feugiat et commodo diam varius. Sed quam enim, 
							feugiat at venenatis vitae, bibendum quis risus. Morbi adipiscing 
							rutrum ante nec molestie. Nam vel arcu lacus. Mauris vulputate semper porttitor. 
							Donec mauris lacus, luctus nec dignissim id, adipiscing eget nisi. 
							Integer interdum pellentesque orci, ut fermentum risus cursus non. 
							In eget laoreet ligula. Aliquam eget justo leo, et ultrices mi. 
							Cras tincidunt dictum lectus sed convallis. Aliquam suscipit est ac nulla 
							ultrices iaculis. Cras pulvinar venenatis dignissim. Donec lobortis elit erat. 
							Phasellus porta tempus magna, vel molestie risus interdum et. Nunc justo enim, 
							adipiscing eu pellentesque quis, sodales nec tortor [...] 
							</p>
							<div class="readmore"><a href="#">Read Article / Comments</a></div>
							<div class="clear"></div>
							<div class="comments-number">00</div>
 
						</div><!--end postContent-->
					</div><!--end post-item-->					
 
					<div class="nav-entries">
					   <div class="nav-prev">
 
					   </div><!--end nav-prev-->
 
					   <div class="nav-next">
					      <a href="#"> Older Entries » </a>
					   </div><!--end nav-next-->
					</div><!-- end nav-entries-->
				</div><!--end primary-->
 
				<div id="secondary">
					<div class="donate">
						<img src="img/donate.png" alt="Donate to Comic Haven"/>
					</div><!---end donate-->
					<div class="large_ads">
					</div><!---end large_ads-->
					<div class="adsense">
						<img src="img/adBG.jpg"/>
					</div><!--end adsense-->
					<div class="subscribeBox">
						<div class="sideheader">
							<img class="title" alt="Subscribe" src="img/subscribe.png"/>
							</div><!--end sideheader-->
							<p>Sign up to the Comic Haven RSS Feed, Email, or Twitter to get updates
							on our latest articles and information! </p>
							<ul>
								<li><a href="#">Subscribe to RSS</a></li>
								<li><a href="#">Subscribe to Email</a></li>
								<li><a href="#">Subscribe to Twitter</a></li>
					</div><!---end subscribe box-->
					<div class="search">
						<input type="text" name="search" class="s" value="search" /> 
						<img src="img/search_icon.png" alt="Search for Something!" />
					</div><!---end search-->
					<div class="advertise_here">
						<img class="ad1" alt="ad1" src="img/Ad1.png"/>
						<img class="ad2" alt="ad2" src="img/Ad2.png"/>
						<img class="ad3" alt="ad3" src="img/Ad3.png"/>
						<img class="ad4" alt="ad4" src="img/Ad4.png"/>
					</div><!---end advertise_here-->
					<div class="Popular_Posts boxshadow">
						<p>Popular Posts</p>
						<ul id="popPosts">
							<li><a href="#">Some Entry #1</a></li>
							<li><a href="#">Some Entry #2</a></li>
							<li><a href="#">Some Entry #3</a></li>
							<li><a href="#">Some Entry #4</a></li>
							<li><a href="#">Some Entry #5</a></li>
							<li><a href="#">Some Entry #6</a></li>
							<li><a href="#">Some Entry #7</a></li>
						</ul>
					</div><!--end Popular Posts-->
 
					<div class="secondary_box">
						<div class="sideheader">
							<img class="title" alt="About Us" src="img/AboutUs.png"/>
						</div><!--end sideheader-->
							<a class="small" href="#">About Comic Haven </a>
							<ul>
								<li><a href="#">Register</a></li>
								<li><a href="#">Log In</a></li>
								<li><a href="#">Contact Us</a></li>
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Write For Us</a></li>
							</ul>
					</div><!---end secondary box-->
 
					<div class="secondary_box">
						<div class="sideheader">
							<img class="title" alt="The Crew" src="img/TheCrew.png"/>
						</div><!--end sideheader-->
							<ul>
								<li id="RCF"><a href="#">Real Cavs Fans</a></li>
								<li id="NumD"><a href="#">Numbers Don't</a></li>
							</ul>
					</div><!---end secondary box-->
 
					<div class="secondary_box">
						<div class="sideheader">
							<img class="title" alt="The Crew" src="img/blogroll.png"/>
						</div><!--end sideheader-->
							<ul>
								<li><a href="#">Comic Blips</a></li>
								<li><a href="#">Deadpool Bugle</a></li>
								<li><a href="#">HolyCr4p</a></li>
							</ul>
					</div><!---end secondary box-->
 
				</div><!--end secondary-->
 
 
			</div><!--end main-->
		</div><!-- end wrap -->
 
			<div id="footer">
				<div class="fwrap">
					<div class="siteNav">
						<p class="fTitle">Site Navigation</p>
							<ul id="left-nav">
								<li><a href="#">Home</a></li>
								<li><a href="#">Narration</a></li>
								<li><a href="#">News</a></li>
								<li><a href="#">Films</a></li>
							</ul>
 
							<ul id="right-nav">
								<li><a href="#">Games</a></li>
								<li><a href="#">Other</a></li>
								<li><a href="#">Contact</a></li>
								<li><a href="#">Donate</a></li>
							</ul>
 
					</div><!--end sitenav-->
 
					<div class="clear"></div>
 
					<div class="Archives">
						<p class="fTitle">Archives</p>
							<ul id="left-nav">
								<li><a href="#">Aug 2009</a></li>
								<li><a href="#">Sept 2009</a></li>
								<li><a href="#">Nov 2009</a></li>
								<li><a href="#">Dec 2009</a></li>
							</ul>
 
							<ul id="right-nav">
								<li><a href="#">Jan 2010</a></li>
								<li><a href="#">Feb 2010</a></li>
							</ul>
					</div><!--end archives-->
 
					<div class="footerLogo">
						<h1 class="fTitle">Comic Haven</h1>
						<p>BLACKSHADES PRODUCTIONS PRESENTS <span class="Fsmall">WEBSITE</span> "COMIC HAVEN" <span class="Fsmall">WRITTEN BY</span> TYPHOON KID P ZEN-AKU</p>
 
					</div><!--end footerLogo-->
				</div><!--end footerwrap-->
			</div><!--end footer-->
	</body>
</html>

css:

/* reset */
 
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img, strike, 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 {
	line-height: 1.5;
        font-family: Helvetica, arial, sans-serif;
}
 
ol, ul {
	list-style: none;
}
 
/* end reset */
 
/*main styles */
 
body {
   background: #1c1d1c url(img/top.png) no-repeat;
}
 
#wrap {
   width: 950px;
   margin: auto;
   background: fefefe;
}
 
 
#header h1 {
   background: url(img/logo.png) no-repeat;
   width: 384px;
   height: 54px;
   text-indent: -9999px;
   margin-top: 52px;
   float: left;
 
}
 
#header h1 a {
   width: 384px;
   height: 54px;
   display: block;
}
 
::selection {
	background: #ffcc89; /* Safari */
	}
::-moz-selection {
	background: #ffcc89; /* Firefox */
}
 
/*End Main Styles */
 
 
/*Navigation*/
 
#header ul {
   overflow: hidden;
   padding-left: 35px;
}
 
#header ul li {
   float: left;
   padding-left: 10px;
   margin-right: 10px;
   margin-top: 65px;
   margin-bottom: 20px;
 
}
 
#header ul li a {
   color: #305774;
   font-size: 24px;
   font-family: "Goudy Bookletter 1911";
   text-decoration: none;
   position: relative;
 
}
 
#header ul li a:hover {
   text-decoration: none;
}
 
#header ul li span p {
	color: #544e4e;
	font-size: 14px;
	font-family: "Goudy Bookletter 1911";
	line-height: 4px;
        text-align: left;
        padding-bottom:20px;
}
 
#header_ad {
   background: url(img/header_ad.png);
   width: 747px;
   height: 108px;
   margin-left: 200px;
}
 
 
 
/* Main Content */
 
#main {
   clear: both;
   overflow: hidden;
   margin-top: 28px;
}
 
#main #primary {
   float: left;
   margin: 0;
   padding: 0 0 25px;
   width: 670px;
 
}
 
#main #secondary {
   float: right;
   margin: 0;
   padding: 0;
   width: 280px;
 
}
 
#main #primary .post-item {
   background: #fdf9f3 url(img/bgPost.jpg); 
   margin-bottom: 28px;
   border: 1px solid #555555;
   border: 6px solid #323233;
   width: 647px;   
   overflow: hidden;
}
 
.postHeader {
   background: transparent url(img/picheader.png) no-repeat;
   height: 130px;
   width: 581px;
   margin-top: 10px;
   margin-left: -2px;
}
 
.postMeta {
   color: #fefefe;
   float: left;
   text-align: right;
   width: 130px;
}
 
.postMeta .date {
   display: block;
   font-size: 25px;
   font-family: "Century Gothic";
   font-weight: bold;
   padding: 15px 12px 2px 15px;
}
 
.postMeta .day {
   color: #c9c8c2;
   font-family: "Century Gothic";
   font-weight: bold;
}
 
.postMeta .category p  {
   color: #c9c8c2;
   font-size: 12px;
   font-family: Helvetica;
   padding: 1px 12px 2px 15px;
}
 
.postImg {
   border: medium none;
   float: right;
   padding: 4px 5px 0 0;
}
 
.postContent h1 a{
   color: #294356;
   float: none;
   font-size: 30px;
   font-weight: bold;
   font-style: italic;
   font-family: "Century Gothic";
   /* margin-left: 30px; b/c margin-left in .postContent already*/
   margin-right: 30px;
}
 
 
.postContent {
   margin-left: 30px;
   margin-right: 30px;
}
 
#main #primary .postContent .postAuthor a:link{
  padding-left: 30px;
}
 
#main #primary .postContent .postAuthor {
   color: #294356;
   font-size: 13px;
   font-family: Helvetica;
 
}
 
#main #primary .postContent .postAuthor:hover {
   text-decoration: underline;
}
 
.postContent {
   color: #294356;
   font-size: 15px;
   font-family: Helvetica;
   margin-bottom: 10px;
}
 
.comments-number {
   float: right;
   color: #9eafb9;
   font-family: "Century Gothic"
   font-weight: bold;
   font-style: italic;
   font-size: 56px;
   float: right;
   width: 68px;
}
 
 
.readmore {
   float: left;
   height: 50px;
   width: 540px;
   text-align: right;
   margin-bottom: -40px;
   line-height: 10px;
}
 
.readmore a {
   color: #294356;
   font-size: 16px;
   font-weight: bold;
   font-style: italic;
   font-family: "Century Gothic"
   padding: 0px 0px 0px 0px;
 
}
 
 
#primary a {
   text-decoration: none;
   margin-right: 30px;
}
 
.readmore:hover a {
   color: #578c87;
   border-bottom: 2px solid #868684;
}
 
.postContent h1 a:hover {
   color: #436278;
   text-decoration: none;
}
 
.clear {
   clear: both;
}
 
.nav-entries {
   background: #fefefe none repeat scroll 0 0;
   margin-right: 10px;
   border-color: #323233;
   border-style: solid;
   border-width: 2px 0 4px;
   font-family: Helvetica;
   padding: 5px 10px 2px 10px;
   origin: padding;
}
 
.nav-next a{
   padding-left: 550px;
}
 
.nav-entries a, .nav-entires:visited {
   font-size: 11px;
   color: #294356;
}
 
#secondary .adsense {
   margin-bottom: 20px;
}
 
#secondary input {
   background: #0d0d0d;
   border: 1px solid #5e5f60;
   color: #434444;
   padding: 3px 3px 3px 3px ;
   margin-bottom: 20px;
}
 
#secondary img {
 
}
 
.subscribeBox .sideheader {
   background: url(img/rss.png) no-repeat;
   width: 61px; 
   height: 34px;
 
}
 
#secondary .subscribeBox p {
   color: #111111;
   font-size: 12px;
   padding: 5px 15px 0 0;
   margin-bottom: 10px;
}
 
#secondary .subscribeBox ul {
   color: #0f0f0f;
   font-family: "Century Gothic";
   font-size: 24px;
   font-weight: bold;
   font-style: italic;
   margin-bottom: 15px;
}
 
#secondary .subscribeBox ul a {
   text-decoration: none;
}
 
#secondary .subscribeBox ul a:active {
   color: #0f0f0f;
}
 
#secondary .subscribeBox ul a:visited  {
   color: #0f0f0f;
}
 
#secondary .subscribeBox ul a:hover {
   color: #555555;
   border-bottom: 2px solid; 
}
 
.advertise_here {
   margin-top: 10px;
   margin-bottom: 15px;
}
 
#secondary .Popular_Posts p {
   font-family: "Century Gothic";
   font-size: 18px;
   text-align: center;
}
 
.Popular_Posts {
   background: #eeeeee;
   border: 4px solid #323233;
   margin-right: 25px;
   padding: 10px 5px 15px 0;
}
 
.Popular_Posts p { 
   border-bottom: 1px solid #676666;
   margin: 0 8px 0 8px;
   margin-bottom: 5px;
}
 
.Popular_Posts a {
   color: #305774;
   text-decoration: none;
}
 
.Popular_Posts a:hover {
   color: #527fa0;
}
 
.Popular_Posts ul li {
   border-bottom: 1px solid #c7c7c7;
   margin: 0 8px 0 8px;
}
 
.secondary_box {
   margin-top: 15px;
}
 
.secondary_box .small {
   color: #fefefe;
   font-size: 11px;
   font-style: italic;
   text-decoration: none;
 
}
 
.secondary_box .small:hover {
   color: #99aab4;
}
 
.secondary_box ul li a {
   color: #555555;
   text-decoration: none;  
   font-size: 18px;
   font-style: italic;
   font-family: "Century Gothic";
}
 
.secondary_box ul li a:hover {
   color: #8b8888;
}
 
.boxshadow {
   -moz-box-shadow: 0 0 4px #0f0f0f;
}
 
.boxshadow:hover {
   -moz-box-shadow: 0 0 8px #999999;
}
 
#RCF a {
   color: #a72026;
}
 
#RCF a:hover {
   color: #c1363d;
}
 
#NumD a {
   color: #305774;
}
 
#NumD a:hover {
   color: #527fa0;
}
 
/*     Footer     */
 
#footer {
   background: url(img/footerBG.jpg) repeat-x;
   border-top: 1px solid #2c2c2c;
   overflow: hidden;
}
 
#footer .fwrap {
  width: 950px; 
  height: 210px;
  margin: 0 auto;
  position: relative;
 
}
 
#footer .fTitle {
   margin-top: 10px;
}
 
#footer p.fTitle {
   color: #2c2c2c;
   font-size: 18px;
   font-family: "Century Gothic";
}
 
#footer ul li a {
   color: #fefefe
   font-size: 10px;
   text-decoration: none;
}
 
#footer ul li a:hover {
   color: #305774;
}
 
#footer a:visited {
   color: #fefefe;
}
 
#footer ul li a:active {
   margin-top: 1px;
}
 
#footer .siteNav {
   width: 140px;
   position: absolute;
}
 
#footer .siteNav ul li a {
   font-size: 11px;
}
 
#footer .siteNav #left-nav {
   float: left;
   width: 90px;
}
 
#footer .siteNav #right-nav {
   width: 130px;
}
 
#footer .Archives p {
   margin-left: 25px;
}
 
#footer .Archives ul li a {
   font-size: 11px;
}
 
#footer .Archives {
   margin-left: 200px;
   width: 200px;
   position: absolute;
}
 
#footer .Archives #right-nav {
   width: 145px;
}
 
#footer .Archives #left-nav {
   float: left;
   width: 90px;
}
 
#footer .footerLogo {
   margin-left: 450px;
   width: 530px;
   position: absolute;
}
 
#footer .footerLogo h1 {
   background: url(img/logo_footer.png) no-repeat;
   width: 341px;
   height: 50px;
   text-indent: -9999px;
   margin-top: 20px;
}
 
#footer .footerLogo p {
   color: #fefefe;
   font-family: "Century Gothic"; 
   margin-top: 10px;
}
 
.Fsmall {
   font-size: 10px;
}
 
/*font face */
 
@font-face {
font-family:  Century Gothic;
src: url(/fonts/Gothic.ttf) format("opentype");
}
 
@font-face {
font-family: Century Gothic Bold;
font-weight: bold;
src: url('/fonts/Gothicb.ttf') format("opentype");
}
 
p.Century-Gothic-Bold { font-family: "Century Gothic", sans-serif; font-weight: bold;}
 
@font-face {
font-family: Century Gothic BI;
font-weight: Bold;
font-style: Italic;
src: url('/fonts/Gothicbi.ttf') format("opentype");
}
 
p.Century-Gothic-Bold-Italic { font-family: "Century Gothic", sans-serif; font-style:italic; font-weight:bold}
 
@font-face {
font-family: Century Gothic Italic;
font-style: italic; 
src: url('/fonts/Gothici.ttf') format("opentype");
}
 
p.Century-Gothic-Italic { font-family: "Century Gothic", sans-serif; font-style: italic;}
 
@font-face {
font-family: Walkway UltraBold;
src: url('/fonts/Walkway_UltraBold.ttf');
}
 
@font-face {
font-family: Goudy Bookletter 1911;
src: url('/fonts/GoudyBookletter1911.otf') format("opentype");
}
 
/*Font Face End */

Thanks for the help!

Tags:

CSS Styling

Fri, 2010-03-05 22:53

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

damn you imageshack!!!

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Fri, 2010-03-05 23:00

Verschwindende

Offline

Guru

Timezone: GMT-5

Joined: 2009-10-09

Posts: 2037

Points: 2256

CTJ, are you sure it's your

CTJ, are you sure it's your firewall (you did mention that before, didn't you)? I also have trouble with imageshack and flickr and other freebie sites but it's not due to a firewall because I don't use one.

yet again.

Fri, 2010-03-05 23:07

Typhoon

Offline

newbie

Timezone: GMT-4

Joined: 2010-03-05

Posts: 4

Points: 5

I didnt upload on

I didnt upload on imageshack...

but if that didnt work then I hope these do

Actual coding markup:

What It SHOULD look like:

Tue, 2010-03-09 16:17

Typhoon

Offline

newbie

Timezone: GMT-4

Joined: 2010-03-05

Posts: 4

Points: 5

Can the mods do me a favor

Can the mods do me a favor and remove all my code from the opening post. If no one wants to help me, then please remove my code.

Thanks

Tue, 2010-03-09 16:29

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

This would be best solved if

This would be best solved if you provided us a link. We cant see the images, and that would help us determine the issues. as far as the read articles, get rid of that clearing div below it so it can be on the same line as .comments-number

Oh, and validate your code

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Tue, 2010-03-09 20:14

Typhoon

Offline

newbie

Timezone: GMT-4

Joined: 2010-03-05

Posts: 4

Points: 5

I see, now I understand why

I see, now I understand why you guys wouldnt answer. The pics, that explains it.

Since this is all code right now and not hosted on any site currently, ill upload all my files and PM you the link.

Tue, 2010-03-09 20:19

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

Typhoon wrote: I didnt upload

Typhoon wrote:

I didnt upload on imageshack...

Sorry, you're correct. You used tinypic.com or whatever. My works network blocks all image hosting services i guess.

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Cannot get link to go down in post content & image header on the left

damn you imageshack!!!

CTJ, are you sure it's your

I didnt upload on

Can the mods do me a favor

This would be best solved if

I see, now I understand why

Typhoon wrote: I didnt upload

New forum topics

User login

Navigation