The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Board stretching, CSS problem

View previous topic View next topic Go down

Solved Board stretching, CSS problem

Post by Lety on January 22nd 2014, 1:30 am

Hi there,

for the forum description I made 2 CSS-CLASSes *(named forumdesc1 & forumdesc2). There is the CSS-code

Code:

.forumdesc1 {
  background: url(http://i56.servimg.com/u/f56/14/10/31/65/42263010.png);
  background-repeat: repeat-x;
  height: 208px !important;
  width: 400px;
}

.forumdesc2 {
    background-color: rgb(247,247,247);
    color:#0a0a0a;
    font-family: tahoma;
    font-size: 9px;
    line-height: 100%;
    padding: 20px 10px 10px 10px;
    margin-top:4px;
    border-top: 2px  dashed #48090b;
    border-bottom: 2px dashed #48090b;
    text-align: justify;
    text-transform: lowercase;
    width: 360px;
  z-index: 2;
}

I implement it as usual:
Code:
<div align="center">
   <div class="forumdesc1">
      <div class="forumdesc2">
      TEXT TEXT TEXT
      </div>
      <table>
               I have here some hover - bottons.
      </table>
   </div>
</div>

As you can seeI have set the desired height from 208px in the first class. However, something simply stretched the board... in awful way.
Preview of the problem:


Please, can smb help me, because I have no idea why is the board so stretched...
Thanks in advance!

PS.
I have already tried to define a height for the second CLASS -> the result was even worse. It doesn't work.


FORUM LINK : http://bittenrpg.niceboard.org/
Version: phpBB2

Lety
Forumember

Female Posts : 33
Reputation : 0
Language : English, Deutsch (German)

http://twilight-man1a.niceboard.net/index.htm

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by SLGray on January 22nd 2014, 1:43 am

Code:
    .forumdesc2 {
        background-color: rgb(247,247,247);
        color:#0a0a0a;
        font-family: tahoma;
        font-size: 9px;
        line-height: 100%;
        padding: 20px 10px 10px 10px;
        margin-top:4px;
        border-top: 2px  dashed #48090b;
        border-bottom: 2px dashed #48090b;
        text-align: justify;
        text-transform: lowercase;
        width: 360px;
      z-index: 2;
    }
Where is just height in this code?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by Lety on January 22nd 2014, 2:38 am

When I add the height 180px, just like here in this code :

Code:
.forumdesc2 {
    background-color: rgb(247,247,247);
    color:#0a0a0a;
    font-family: tahoma;
    font-size: 9px;
    line-height: 100%;
    padding: 2px 2px 2px 2px;
    margin-top:4px;
    border-top: 2px  dashed #48090b;
    border-bottom: 2px dashed #48090b;
    text-align: justify;
    text-transform: lowercase;
  height: 180px !important;
  width: 360px;
  z-index: 2;
}

I become this result , as I said even worse...
Preview:


Lety
Forumember

Female Posts : 33
Reputation : 0
Language : English, Deutsch (German)

http://twilight-man1a.niceboard.net/index.htm

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by Ange Tuteur on January 22nd 2014, 4:57 am

Hello,

The problem comes from setting the height of your description element. You should use auto unless you want to set a default height for it. If it is set to auto it will expand depending on the contents.

Change your CSS to this :
Code:

  .forumdesc1 {
  background: url(http://i56.servimg.com/u/f56/14/10/31/65/42263010.png);
  background-repeat: repeat-x;
  height: auto;
  width: 400px;
  }

  .forumdesc2 {
  background-color: rgb(247,247,247);
  color:#0a0a0a;
  font-family: tahoma;
  font-size: 9px;
  line-height: 100%;
  padding: 20px 10px 10px 10px;
  margin-top:4px;
  border-top: 2px dashed #48090b;
  border-bottom: 2px dashed #48090b;
  text-align: justify;
  text-transform: lowercase;
  width: 360px;
  z-index: 2;
  }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by Lety on January 22nd 2014, 5:08 am

And what if I really want to set a default for it. Is the auto + scrolling the one and only possible option ?


Lety
Forumember

Female Posts : 33
Reputation : 0
Language : English, Deutsch (German)

http://twilight-man1a.niceboard.net/index.htm

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by Ange Tuteur on January 22nd 2014, 5:15 am

If you wish to set the height you can use a few of these properties :

min-height ( sets the minimum height for an element )
height ( sets the height of an element )
max-height ( sets the maximum height allowed for an element )

I only recommended auto since you're using it for a description. i.e. getting the exact height of what you wrote isn't always easy, moreover you sometimes find yourself with extra white space. Height can act both like minimum and max depending on the element when you specify a number value. Wink

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by Lety on January 23rd 2014, 4:32 pm

The problem is that I heard that the min-height & max-height are not very good supported by the browsers.

Thanks Got trere is the autoflow :wouhou:

I'm very thankful for the help and for the advices. You are awesome guys (and girls)
Million thanks

Problem solved, you can change the status

Lety
Forumember

Female Posts : 33
Reputation : 0
Language : English, Deutsch (German)

http://twilight-man1a.niceboard.net/index.htm

Back to top Go down

Solved Re: Board stretching, CSS problem

Post by Ange Tuteur on January 23rd 2014, 5:11 pm

You're welcome Smile

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum