Webcoders Table Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
+2
SLGray
AceSuazo
6 posters

    Webcoders Table

    AceSuazo
    AceSuazo
    Forumember


    Male Posts : 70
    Reputation : 3
    Language : English, Tagalog & Bisayan

    Solved Webcoders Table

    Post by AceSuazo Sat 8 Sep - 8:21

    Hello, I am wondering to make this table.

    Webcoders Table Afflia10

    I have the css of that. but my problem is this.

    Webcoders Table Webcod10

    Here is the CSS codes.
    Code:
    .banner-body {
    background: url(http://i48.tinypic.com/t8n2aw.png) white;
    background-repeat: no-repeat;
    background-position: top left;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid grey;
    min-height: 100px;
    width: 500px;


    }
    Code:
    .holder {
    background: url(http://i49.tinypic.com/opqqyr.png);
    min-height: 100px;
    width: 500px;


    }
    Code:
    .banner-title {
    padding-top: 3px;
    padding-left: 4px;
    margin-left: 12px;
    border-bottom: 1px dashed grey;
    color: rgb(84, 73, 250);
    font-weight: bold;
    font-size: 23px;
    text-shadow: 2px 2px 5px #C2C2C2;
    filter: dropshadow(color=#C2C2C2, offx=2, offy=2);


    }
    Code:
    .banner-description {
    padding-top: 3px;
    padding-left: 4px;
    margin-left: 12px;
    color: #696969;
    font-size: 14px;
    text-shadow: 2px 2px 5px #C2C2C2;
    filter: dropshadow(color=#C2C2C2, offx=2, offy=2);
    }
    Here is the HTML I've used.
    Code:
    <div class="banner-body">
    <div class="holder">
    <div class="banner-title">Webcoders - Free for all!</div>
    <div class="banner-description">Webcoders was designed and made to help users creating their website, program or scripts. Crew members of Webcoders have 4 years of expertise in their business. It's our goal to aid you as much as possible by providing clean and easy-to-follow tutorials: at no cost!</div>
    </div>
    </div>


    Last edited by AceSuazo on Sun 9 Sep - 7:00; edited 1 time in total
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51500
    Reputation : 3523
    Language : English
    Location : United States

    Solved Re: Webcoders Table

    Post by SLGray Sat 8 Sep - 10:05

    Please don't use bold or color. Please keep to the default text. This is reserved for the staff for moderation.



    Webcoders Table Slgray10

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


    Male Posts : 629
    Reputation : 92
    Language : English | Hebrew | Arabic
    Location : Israel

    Solved Re: Webcoders Table

    Post by DarkGlow Sat 8 Sep - 12:10

    Is that the CSS you're using? Have you used the exact CSS that belongs to the first image? Or you played with the CSS a bit?
    nextlevelgaming
    nextlevelgaming
    Forumember


    Male Posts : 989
    Reputation : 38
    Language : English|CSS|HTML5|javascript|
    Location : New York

    Solved Re: Webcoders Table

    Post by nextlevelgaming Sat 8 Sep - 14:23

    Firstly use this CSS

    Code:
    .banner-description {
    padding-top: 3px;
    padding-left: 4px;
    margin-left: 12px;
    color: #696969;
    font-size: 14px;
    text-shadow: 2px 2px 5px #C2C2C2;
    filter: dropshadow(color=#C2C2C2, offx=2, offy=2);
    }
    .banner-title {
    padding-top:2px;
    padding-left: 4px;
    margin-left: 12px;
    border-bottom: 1px dashed grey;
    color: rgb(84, 73, 250);
    font-weight: bold;
    font-size: 23px;
    text-shadow: 2px 2px 5px #C2C2C2;
    filter: dropshadow(color=#C2C2C2, offx=2, offy=2);


    }.holder {
    background: url(http://i49.tinypic.com/opqqyr.png);
    min-height: 100px;
    height:100px;
    height:auto !important;
    overflow:hidden;
    width: 500px;


    }.banner-body {
    background: url(http://i48.tinypic.com/t8n2aw.png) white;
    background-repeat:repeat-y;
    background-position: top left;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius:3px 3px 3px 3px;
    -ms-border-radius: 3px 3px 3px 3px;
      -webkit-border-radius: 3px 3px 3px 3px;
      -khtml-border-radius: 3px 3px 3px 3px;
    border: 1px solid grey;
    min-height: 100px;
    height:100px;
    height:auto !important;
    width: 500px;
    overflow:hidden;
    }

    I added some functionality so that rounded corners will work in more old browsers, also made it so if your text is longer than that in any other divs it will grow and the left background will keeps its place.
    thats why i added:

    Code:
    background-repeat:repeat-y;

    Also your html is fine as long as you dont add any other elements. If add a <p> <h1> <h2> you'll get the padding like unbelief.


    If it still is giving you problems then there may be some other CSS messing it up. if after updating your CSS and error occurs still please send URL of site and where this is located and i'll look at it for u
    LGforum
    LGforum
    Hyperactive


    Male Posts : 2265
    Reputation : 264
    Language : English
    Location : UK

    Solved Re: Webcoders Table

    Post by LGforum Sat 8 Sep - 20:32

    Just remove the min-height and height properties.
    AceSuazo
    AceSuazo
    Forumember


    Male Posts : 70
    Reputation : 3
    Language : English, Tagalog & Bisayan

    Solved Re: Webcoders Table

    Post by AceSuazo Sun 9 Sep - 7:02

    @nextlevelgaming, thanks sir.
    but sorry. I've click the thanks button on Rideem3's post.
    My mistake Sad

    But I've press the Webcoders Table Plus_16 button on your post.

    #Topic title change.
    #Topic solved!
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: Webcoders Table

    Post by Sanket Sun 9 Sep - 20:27

    Topic Solved & Locked