text repopsitioning my picture

Page 1 of 1

1 Replies - 619 Views - Last Post: 22 March 2013 - 06:24 PM

#1 poldz123  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 52
  • Joined: 26-October 12

text repopsitioning my picture

Posted 22 March 2013 - 06:16 PM

The text repositionning my picture when I was doing the position block for the text is there anyway that I can block the text without repositioning the pictures?

Posted Image



 .herobox {  
           
           float:left;    
        }

        .hero-container {  
          
            text-align:center; 
            margin:auto; 
            height: 400px;
            width: 400px;
            background-color: black;
            
        }

        .herotext {
            
            display: block;    
            width:60px;
           
            margin:0 auto; 
            font-family: "sans-serif", Arial;
            font-size: 11px;
            color:white;
            
        }

        .hero {
           margin-top: 35px;
          
           height: 50px;
           width: 70px;
        }

        .herobox2 {
            text-decoration:none;   
            list-style: none;
        }
         .herobox:hover { 
           
            background-color:blue;
        }
    </style>
</head>
<body>
<div class="hero-container">
    <div class="herobox">
       <a class="herobox2" href="tinker.html"> <span class="herotext">Tinker23 adsd</span> <img class="hero" src="HeroImage/int/tinker_lg.png"/></a>
    </div>
    <div class="herobox">
       <a class="herobox2" href="storm.html"> <span class="herotext" >Storm</span> <img class="hero" src="HeroImage/int/storm.png"/></a>
    </div>
    <div class="herobox">
       <a class="herobox2" href="puck.html"> <span class="herotext">Puck</span> <img class="hero" src="HeroImage/int/puck.png"/></a>
    </div>
    <div class="herobox">
       <a class="herobox2" href="chen.html"> <span class="herotext">Chen</span> <img class="hero" src="HeroImage/int/chen.png"/></a>
    </div>
    <div class="herobox">
       <a class="herobox2" href="windrunner.html"> <span class="herotext">Windrunner</span> <img class="hero" src="HeroImage/int/windrunner.png"/></a>
    </div>
    
</div>


Is This A Good Question/Topic? 0
  • +

Replies To: text repopsitioning my picture

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3053
  • View blog
  • Posts: 4,575
  • Joined: 08-June 10

Re: text repopsitioning my picture

Posted 22 March 2013 - 06:24 PM

You can give the block element containing the text (the span, in this case) a height value, and then add: overflow: hidden;. That will make the element hide anything that overflows the set height of the element. It's usually also a good idea to set the line-height to match the height, assuming there will only ever be one line visible. That should keep the second line from showing clipped at the bottom.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1