Hey guys I just recently started learning how to code to code my layout I made for my website and so far have been getting to where I want but have a few problems.
www.traphouseskateboards.com/blog.php
for the content div I want it to expand itself with the content instead of having the scroll bar. and for the links in my miniblog I want them to be black but can't figure either of these problems out.
Code:
<?php
define('IN_BLOG', true);
define('PATH', '');
include('includes/miniblog.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrapHouseSkateboards.com - TRAPHOUSE SKATEBOARDS - Since 2012. </title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="images/favicon.ico" />
<body>
<div id="container">
<div id="header">
<img src="images/banner1.jpg"" alt="logo" border="0" usemap="#Map"images/banner1.jpg />
<map name="Map" id="twitter">
<area shape="rect" coords="872,10,913,53" href="https://twitter.com/TrapHouseSkate" target="_blank" />
<area shape="rect" coords="926,9,968,54" href="http://www.instagram.com" target="_blank" alt="instagram" />
<area shape="rect" coords="818,10,862,53" href="http://www.facebook.com" target="_blank" />
</map>
</div>
<div id="nav"><a href="index.html"> Home </a> <span> | </span>
<a href="about.html">About</a><span> | </span>
<a href="http://www.traphouseskateboards.bigcartel.com" target="_blank">Product</a><span> | </span>
<a href="team.html">Team</a><span> | </span>
<a href="media.html">Media</a><span> | </span>
<a href="contact.html">Contact</a> </div> <!--end header-->
<div id="featured">
<img src="images/bigbanner1.jpg">
<img src="images/dropshadow.png">
</div><!--end featured-->
<div id="content">
<div id="blog">
<?=$miniblog_posts?>
</div>
<div class="navigation">
<? if(!$single) { ?>
<? if($miniblog_previous) { ?> <p class="previous-link"><?=$miniblog_previous?></p> <? } ?>
<? if($miniblog_next) { ?> <p class="next-link"><?=$miniblog_next?></p> <? } ?>
<? } ?>
<? if($single) { ?>
<p class="previous-link"><a href="<?=$config['miniblog-filename']?>">« return to posts</a></p>
<? } ?>
<div class="clear"></div>
</div>
</div>
<div id="search">
<img src="images/search.jpg" width="295">
</div>
<div id="secondary">
<img src="images/tweetheader.jpg" width="295" />
<a class="twitter-timeline" href="https://twitter.com/TrapHouseSkate" data-widget-id="268459902098358272" width="295">Tweets by @TrapHouseSkate</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<img src="images/sidefooter.jpg" width="295">
</div>
<div id="footer">
<span>
<ul id="nav2">
<a href="product.html" target="_blank">Product |</a>
<a href="contact.html" target="_blank">Contact |</a>
<a href="#top">Top</a></ul>
<p>©Copyright Tyler Hapke All Rights Reserved.</p>
</span>
</div>
</div> <!--- end container--->
</body>
</html>
Code:
/*Main CSS*/
html {
background-color: #3a3f40;
}
#container {
width:980px;
background: white;
margin: 2em auto;
margin-bottom: 10px;
}
#header {
overflow: hidden;
height: 100%;
}
#header img {
float: left;
margin-right: 10px;
margin-top 20px;
}
#nav {
background-color: #ececec;
height: 15 px;
width: 980px;
padding-top: 2px;
padding-bottom: 2px;
text-align:right;
}
#nav a {
color: black;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
text-align:right;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
text-align:right;
}
#featured {
overflow: hidden;
padding-right: 10px;
height: 347px;
margin-left: 10px;
}
#dropshadow {
margin-left: 9px;
padding-top: 1px;
}
#content {
float: left;
height: 900px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
width: 660px;
margin-left:15px;
padding-top:10px;
padding-bottom: 25px;
text-decoration:none;
color: #0000;
overflow:auto;
}
#content #blog {
text-decoration: none;
margin-left: 50px;
color: #00000;
}
#tweet footer2 {
float:right;
}
#primary {
float: left;
width: 295px;
height: 215px;
background-color:#dfdfdf;
margin-top: 10px;
}
#secondary {
float: left;
width: 290px;
height: 350px;
padding-right: 5px;
background-color:#dfdfdf;
margin-top: 10px;
overflow:inherit;
}
#search {
float:left;
width: 290px;
height: 50px;
padding-right: 5px;
margin-top: 10px;
}
#footer {
clear: both;
width: 960 px;
Height: 75px;
background-color:#000;
font-size: 10px;
margin-top:10px;
padding-top:25px;
}
#footer a {
margin-top:10px;
text-decoration:none;
color:white;
}
#footer span p {
color:white;
margin-left: 25px;
margin-top:15px:
}