Help - Search - Members - Calendar
Full Version: specifying different image borders
Movable Type Community Forum > Additional Resources > Tips and Tricks
planetmarc
I would like to put a border around linked images in the "blog section" of my pages, but not in the menu sections.  I have the proper selectors in my stylesheet to make it happen, but i am getting the affect page-wide... so the question is, where do I need to locate these tags to allow the border to only appear in the specific section of the page? I've pasted the stylesheet I am using here:
CODE
body {
    margin-top:10px;
    margin-left: 0px; margin-right: 0px;
    background: #FAF0E6;
    font-family : "Trebuchet MS", Tahoma, Helvetica, sans-serif;
               }

A    { color: #473229; font-family: verdana, arial, sans-serif; text-decoration: none; }
A:link    { color: #473229; text-decoration: none; }
A:visited    { color: #473229; text-decoration: none; }
A:active    { color: #6F3E11; }
A:hover    { color: #ff0000; text-decoration: underline; }
A img        { border: 1px dotted #AD330A; }
A:hover img { border: 5px dashed #FF0000; }

#banner, #banner-commentspop {
    color: Black;
    font-size:26px;
    font-weight:bold;
    background: #AD330A;
    padding-top:15px;      
    padding-right: 5px; padding-left: 5px;
    padding-bottom: 6px;
    border-bottom: 5px #AD330A groove;
    border-top: 5px ridge #AD330A;  
    }

.description {
    color: #FAF0E6;
    font-size:12px;
    font-weight:bold;
    text-transform:none;    
    letter-spacing: .none;      
    }    

#content {
    position:relative;
    z-index: 3;
    padding: 10px;
    background: #FAF0E6;
    margin-right:170px;
    margin-left: 200px;
    margin-bottom:20px;
    }

#links {
    z-index:1;
    position:absolute;
    top: 135px;
    right: 20px;
    width: 150px;
    background: #FAF0E6;
    color: #6F3E11;
    text-align:center;
    }

#llinks {
    z-index:2;
    position:absolute;
    top: 135px;
    left: 20px;
    width: 180px;
    background: #FAF0E6;
    color: #6F3E11;
    text-align:center;
    }
   
.blog {
    padding-left:15px;
    padding-top:15px;
    padding-right:15px;        
    }    

.blogbody {
    color: #6F3E11;
    font-size:11px;
    font-weight:normal;
    background: #FAF0E6;
    line-height:14px;  
    border-left: 1px solid #AD330A;      
    border-right: 1px solid #AD330A;
    border-bottom: 3px double #AD330A;
    padding:10px;
    }    
    
.title    {
    font-size: 10px;
    color: #E8440D;
    text-transform: uppercase;
    font-weight:bold;    
    }      
 
#menu {
    margin-bottom:10px;
    background: #FAF0E6;
    font-size:11px;
    font-weight:bold;
               }    

.date    {
 font-size: 18px;
    color: #E8440D;
    font-weight:bold;
    text-transform:uppercase;
    margin-top:10px;  
    border-bottom: 3px double #AD330A;    
    }      
 
.posted    {
    font-size: 10px;
    color: #E8440D;
    display:block;
    text-align:right;
    }

.calendar {
    color:#E0DAD0;
    font-size:10px;
    font-weight:normal;
    padding:2px;    
    }
    
.calendarhead {    
    color: #AD330A;
    font-size:10px;
    font-weight:bold;
    background: #FAF0E6;
    line-height:14px;    
    }    
    
.side {
    color: #6F3E11;
    font-size:10px;
    font-weight:normal;
    background: #FAF0E6;
    line-height:14px;    
    }    
 
.sidetitle {
    color: #6F3E11;
    font-size:9px;
    font-weight:bold;
    background: #FAF0E6;
    line-height:14px;
    padding:2px;
    margin-top:10px;
    border-bottom: 1px solid #E0DAD0;
    text-transform:uppercase;
    letter-spacing: .2em;  
               }  
    
.syndicate {
    font-size:9px;
    font-weight:bold;  
    line-height:14px;
    padding:2px;
    margin-top:10px;
    text-align:center;
    background: #FAF0E6;    
    }    
 
    .powered {
    color: #6F3E11;
    font-size:10px;
    font-weight:bold;
    border-top: 1px solid #E0DAD0;
    border-bottom: 1px solid #E0DAD0;  
    line-height:14px;
    padding:2px;
    margin-top:10px;
    text-align:center;
    }    

.comments-body {
    color: #6F3E11;
    font-size:11px;
    font-weight:normal;
    background: #FAF0E6;
    line-height:14px;      
    }  

.comments-post {
    color: #6F3E11;
    font-size:10px;
    font-weight:normal;
    background: #FAF0E6;      
    }    
 
.comments-head    {
    font-size: 10px;
    color: #6F3E11;
    font-weight:bold;
    margin-top:10px;
    text-transform:uppercase;
    border-bottom: 1px solid #E0DAD0;  
    }


Any help would be incredibly appreciated... biggrin.gif

Marc
planetmarc.com
artless
if you wanna make something specific to a certain section you need to specify that in the stylesheet by putting the section id in front in believe.
CODE
#content A img        { border: 1px dotted #AD330A; }
#content A:hover img { border: 5px dashed #FF0000; }


hope this helps... if im wrong anyone is welcome to correct me.
planetmarc
That did the trick!  THANKS!

Marc biggrin.gif
planetmarc.com
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.