CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Help with link colors in a div and having my content div expand itself? (http://www.codingforums.com/showthread.php?t=282406)

fioater 11-16-2012 10:53 PM

Help with link colors in a div and having my content div expand itself?
 
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']?>">&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>

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


Excavator 11-17-2012 01:05 AM

Hello fioater,
To let #content expand with it's content, don't specify a height.
Code:

#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) -
Code:

#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:


All times are GMT +1. The time now is 02:41 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.