SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    little help to adjust this code

    I am trying to change in almost all possible ways the margins or space around the text. Problem is that there is this border line which I cannot make move with the area around the text.

    html:
    Code:
    <br />
    <div align="center">
     <a href="">
       <span class="iconbg">
         <span class="icon">Text here</span>
       </span>
     </a>
     </div>
     <br />
    In CSS:
    Code:
    .icon{
    font-family: tahoma;
    font-size:11px;
    color:#ffffff;
    lborder:1px groove #666333;
    padding-left:3px;
    padding-right:3px;
    background: maroon;
    }
    .iconbg{
    border:1px solid #666333;
    padding:1px;
    }
    when I want to change the padding in .icon to for example 10px the .iconbg is not growing with it. Same for padding left and right


    What I missed to do?

    Thanks for the help.

    Mathilde

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to either change the display to display: block; or float the elements and provide a width.

    Here's how I'd do it...

    Code:
    <!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>Demo</title>
    <style type="text/css">
    .icon{
    	font-family: tahoma, arial, helvetica, sans-serif;
    	font-size: 11px;
    	color: #fff;
    	border: 1px groove #666333;
    	padding: 10px;
    	background: maroon;
    	display: block;
    }
    .iconbg{
    	border: 1px solid #666333;
    	padding: 1px;
    	display: block;
    	width: 5em;
    }
    </style>
    </head>
    <body>
    <br />
    <div align="center">
     <a href="">
       <span class="iconbg">
         <span class="icon">Text here</span>
       </span>
     </a>
     </div>
     <br />
    </body>
    </html>
    Hope that helps.

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you csswiz, not thought about the display: block

    mathilde


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
  •