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

#1 poldz123   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 {  

        .hero-container {  
            height: 400px;
            width: 400px;
            background-color: black;

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

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

        .herobox2 {
            list-style: none;
         .herobox:hover { 
<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 class="herobox">
       <a class="herobox2" href="storm.html"> <span class="herotext" >Storm</span> <img class="hero" src="HeroImage/int/storm.png"/></a>
    <div class="herobox">
       <a class="herobox2" href="puck.html"> <span class="herotext">Puck</span> <img class="hero" src="HeroImage/int/puck.png"/></a>
    <div class="herobox">
       <a class="herobox2" href="chen.html"> <span class="herotext">Chen</span> <img class="hero" src="HeroImage/int/chen.png"/></a>
    <div class="herobox">
       <a class="herobox2" href="windrunner.html"> <span class="herotext">Windrunner</span> <img class="hero" src="HeroImage/int/windrunner.png"/></a>

Is This A Good Question/Topic? 0
  • +

Replies To: text repopsitioning my picture

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • 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