...

View Full Version : Help with link colors in a div and having my content div expand itself?



fioater
11-16-2012, 10:53 PM
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.






<?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']?>">&laquo; 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>&copy;Copyright Tyler Hapke All Rights Reserved.</p>
</span>
</div>
</div> <!--- end container--->
</body>
</html>



/*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:
}

Excavator
11-17-2012, 01:05 AM
Hello fioater,
To let #content expand with it's content, don't specify a height.


#content {
float: left;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
/*height: 900px;*/
margin-left: 15px;
overflow: auto;
padding-bottom: 25px;
padding-top: 10px;
text-decoration: none;
width: 660px;
}


Look at what this bit of CSS does for your links (assuming I've targeted the correct links, not sure what your "miniblog" is) -

#blog a:link, #blog a:visited {color: #000;}
#blog a:hover, #blog a:active {color: #f00;}

fioater
11-17-2012, 06:54 AM
Thank you so much!! Worked perfectly and taught me a thing or two thank you.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum