Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    fioater (11-17-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much!! Worked perfectly and taught me a thing or two thank you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •