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.

Webcoders Table

+2
SLGray
AceSuazo
6 posters

Go down

Solved Webcoders Table

Post by AceSuazo Sat Sep 08, 2012 2:21 am

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 Sep 09, 2012 1:00 am; edited 1 time in total
AceSuazo
AceSuazo
Forumember

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

Back to top Go down

Solved Re: Webcoders Table

Post by SLGray Sat Sep 08, 2012 4:05 am

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Webcoders Table

Post by DarkGlow Sat Sep 08, 2012 6:10 am

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?
DarkGlow
DarkGlow
Forumember

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

Back to top Go down

Solved Re: Webcoders Table

Post by nextlevelgaming Sat Sep 08, 2012 8:23 am

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
nextlevelgaming
nextlevelgaming
Forumember

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

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: Webcoders Table

Post by LGforum Sat Sep 08, 2012 2:32 pm

Just remove the min-height and height properties.
LGforum
LGforum
Hyperactive

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

Back to top Go down

Solved Re: Webcoders Table

Post by AceSuazo Sun Sep 09, 2012 1:02 am

@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!
AceSuazo
AceSuazo
Forumember

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

Back to top Go down

Solved Re: Webcoders Table

Post by Sanket Sun Sep 09, 2012 2:27 pm

Topic Solved & Locked
Sanket
Sanket
ForumGuru

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

Back to top Go down

Back to top


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