SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Element Border

    Hello, I'm trying to make a div with a border width of 9px and a border color of bright red and within that div another group of slightly smaller divs with a border width of 1px and a border color of grey to hold my social buttons such as Google +, Facebook like etc. I am having trouble with coding the div however to have the border color.

    My HTML is
    HTML Code:
    <div class="socialdiv">
        <p class="follow">Follow EntirePersonal Injury</p>
        <div class="socialitem" align="left"> <a href="http://plus.google.com/112315720353742179078" target="_blank">Entire Injury</a> on <img src="images/google-plus.jpg" width="26" height="26" alt="Google +"> <!-- Place this tag where you want the widget to render. -->
          <div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/112315720353742179078" data-rel="publisher"></div>
          <!-- Place this tag after the last widget tag. -->
          <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
        </script></div>
        <div class="socialitem" align="left"> <a href="http://" target="_blank">
          
        </a></div>
        <div class="socialitem" align="left"><div class="fb-like" data-href="http://www.facebook.com/pages/Entire-Personal-Injury/255467684578775" data-width="240" data-show-faces="true" data-send="true"></div></div>
        <div class="socialitem"><a href="https://twitter.com/entireinjurylaw" class="twitter-follow-button" data-show-count="false">Follow @entireinjurylaw</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>
        <div class="socialitem" align="left"> <!-- Place this tag where you want the +1 button to render -->
    		        <g:plusone annotation="inline" width="300" href="https://plus.google.com/112315720353742179078"></g:plusone>
    		        <!-- Place this render call where appropriate -->
    		        <script type="text/javascript">
    		          (function() {
    		            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    		            po.src = 'https://apis.google.com/js/plusone.js';
    		            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    		          })();
    		        </script></div>
      </div>
    My CSS is:
    Code:
    }
    .socialdiv{
    	width:265px;
    	padding:6px;
    	border-width:9px;
    	margin:6px;
    	border-color: #F00;
    }
    .socialitem{
    	width:255px;
    	padding:1px;
    	border-width:1px;
    	border-color: #666;
    	margin:1px;
    }
    .follow {
    	font-weight: bold;
    }
    Which results in the box on entirepersonalinjury.com/index2.html - no borders for either div.

    Could someone point out if I am making a mistake.

    Thanks very much in advance

    Gordon.
    Last edited by ParkinT; Sep 11, 2013 at 11:45. Reason: Wrapped HTML/CSS in proper display tags

  2. #2
    SitePoint Addict WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Imaginex1a,

    You just need to specify what kind of border, so add
    Code:
    border-style: solid;
    to each of your classes and you will get the borders. Better still, why not use the shorthand way of defining borders -
    Code:
    border: 9px solid #F00;

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WebMachine View Post
    Hi Imaginex1a,

    You just need to specify what kind of border, so add
    Code:
    border-style: solid;
    to each of your classes and you will get the borders. Better still, why not use the shorthand way of defining borders -
    Code:
    border: 9px solid #F00;

    Cheers! You saved me a lot of time and a headache. Always something silly. Have a nice evening!


Bookmarks

Posting Permissions

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