Remove Ad, Sign Up
Register to Remove Ad
Register to Remove Ad
Remove Ad, Sign Up
Register to Remove Ad
Register to Remove Ad
Signup for Free!
-More Features-
-Far Less Ads-
About   Users   Help
Users & Guests Online
On Page: 1
Directory: 2 & 81
Entire Site: 10 & 895
Page Staff: pokemon x, pennylessz, Barathemos, tgags123, alexanyways, supercool22, RavusRat,
03-28-24 03:57 PM

Thread Information

Views
13,345
Replies
95
Rating
1
Status
OPEN STICKY
Thread
Creator
septembern
04-24-10 04:01 PM
Last
Post
pennylessz
01-01-20 07:12 PM
Additional Thread Details
Views: 5,156
Today: 4
Users: 14 unique
Last User View
06-03-23
pokemon x

Thread Actions

Order
Posts


<<
5 Pages
>>
 

Official HTML/CSS and Javascript thread

 

09-29-11 03:47 AM
tRIUNE is Offline
| ID: 470925 | 21 Words

tRIUNE
Level: 191


POSTS: 2293/12374
POST EXP: 624776
LVL EXP: 97734488
CP: 240947.9
VIZ: 7093601

Likes: 0  Dislikes: 0
Test... yeah, he has the footer of the board in his layout; trying the reply from the header of the page...
Test... yeah, he has the footer of the board in his layout; trying the reply from the header of the page...
Vizzed Elite
Former Admin

Hero of Hyrule


Affected by 'Laziness Syndrome'

Registered: 06-09-10
Last Post: 938 days
Last Active: 917 days

10-31-11 05:19 AM
mike345 is Offline
| ID: 488548 | 12 Words

mike345
Level: 121


POSTS: 2744/4276
POST EXP: 71462
LVL EXP: 19666972
CP: 399.3
VIZ: 118166

Likes: 0  Dislikes: 0
How am I able to stop the background picture from repeating itself?
How am I able to stop the background picture from repeating itself?
Trusted Member
Placed 2nd in August 2011 VCS


Affected by 'Laziness Syndrome'

Registered: 09-11-10
Location: Waterford
Last Post: 2997 days
Last Active: 76 days

10-31-11 04:07 PM
septembern is Offline
| ID: 488892 | 87 Words

septembern
Level: 202


POSTS: 11879/13800
POST EXP: 413008
LVL EXP: 117202682
CP: 3802.9
VIZ: 230180

Likes: 0  Dislikes: 0
tRUINE: Alt text is what the browser shows if the picture does not load... most of the time it is seen as the text when you put your mouse over an image.

width is how wide
height is how tall

if you are talking about an

a href

type of thing, then they are not really necessary, alt may be used for custom tags, but for

img src

they are pretty useful.

------------

mike345 :

Simple fix.

<img src="whateverurlyourpictureis" style="background-repeat: no-repeat;">

or if it is in a table / other thing

<table (or div or td or tr) background="url" style="background-repeat: no-repeat;">
tRUINE: Alt text is what the browser shows if the picture does not load... most of the time it is seen as the text when you put your mouse over an image.

width is how wide
height is how tall

if you are talking about an

a href

type of thing, then they are not really necessary, alt may be used for custom tags, but for

img src

they are pretty useful.

------------

mike345 :

Simple fix.

<img src="whateverurlyourpictureis" style="background-repeat: no-repeat;">

or if it is in a table / other thing

<table (or div or td or tr) background="url" style="background-repeat: no-repeat;">
Vizzed Elite
Winner of the April 2012 Tour de Vizzed


Affected by 'Laziness Syndrome'

Registered: 12-05-09
Last Post: 4306 days
Last Active: 3694 days

11-23-11 04:54 PM
BeingThree is Offline
| ID: 503404 | 40 Words

BeingThree
Level: 27


POSTS: 82/139
POST EXP: 10616
LVL EXP: 113773
CP: 117.1
VIZ: 44993

Likes: 0  Dislikes: 0
I made this pretty good all but for one thing. (I made the text blue in an attempt to make it easier to read on this). See this repeating of my image? How do I get rid of it? XD
I made this pretty good all but for one thing. (I made the text blue in an attempt to make it easier to read on this). See this repeating of my image? How do I get rid of it? XD
Trusted Member
BeingThree


Affected by 'Laziness Syndrome'

Registered: 01-16-11
Last Post: 3241 days
Last Active: 3241 days

11-23-11 06:55 PM
hnnn is Offline
| ID: 503459 | 30 Words

hnnn
Level: 81


POSTS: 1396/1655
POST EXP: 35504
LVL EXP: 4836815
CP: 596.9
VIZ: 61890

Likes: 0  Dislikes: 0
BeingThree : I would need to see your code to do anything and I dont feel like source coding it right now PM it to me and I`ll fix it
BeingThree : I would need to see your code to do anything and I dont feel like source coding it right now PM it to me and I`ll fix it
Trusted Member
I'm the man in the box


Affected by 'Laziness Syndrome'

Registered: 02-09-10
Location: South Louisiana
Last Post: 306 days
Last Active: 186 days

11-23-11 10:17 PM
legacyme3 is Offline
| ID: 503551 | 43 Words

legacyme3
Lord Leggy - King of IT
Level: 268


POSTS: 10623/27250
POST EXP: 2003421
LVL EXP: 316295515
CP: 42531.1
VIZ: 2982476

Likes: 0  Dislikes: 0
BeingThree :

There's also the whole text on background thing. You should really hire a layout coder to make your layout. They can give you a text box that won't clash with the background.

It makes your text a lot easier to read.
BeingThree :

There's also the whole text on background thing. You should really hire a layout coder to make your layout. They can give you a text box that won't clash with the background.

It makes your text a lot easier to read.
Vizzed Elite
6-Time VCS Winner

One Leggy.
One Love.
One Dream.


Affected by 'Laziness Syndrome'

Registered: 09-14-10
Location: https://discord.gg/YCuUJz9
Last Post: 1290 days
Last Active: 1290 days

11-23-11 11:44 PM
BeingThree is Offline
| ID: 503579 | 79 Words

BeingThree
Level: 27


POSTS: 83/139
POST EXP: 10616
LVL EXP: 113773
CP: 117.1
VIZ: 44993

Likes: 0  Dislikes: 0
legacyme3:







Well, I made this thing, lol. I just can't figure out how to get rid of the repeat. If I get rid of the repeat, I can make the text black on white, and it shouldn't go over anything.







*EDIT*







hnnn:







I'm PMing you. Forgot to put that, lol.



*EDIT*



Here's the new look. Made with lots of persistence, lol. It's still a work in progress, but that'll constantly update occasionally, lol.. Thanks hnnn and everyone else. :3
legacyme3:







Well, I made this thing, lol. I just can't figure out how to get rid of the repeat. If I get rid of the repeat, I can make the text black on white, and it shouldn't go over anything.







*EDIT*







hnnn:







I'm PMing you. Forgot to put that, lol.



*EDIT*



Here's the new look. Made with lots of persistence, lol. It's still a work in progress, but that'll constantly update occasionally, lol.. Thanks hnnn and everyone else. :3
Trusted Member
BeingThree


Affected by 'Laziness Syndrome'

Registered: 01-16-11
Last Post: 3241 days
Last Active: 3241 days

(edited by BeingThree on 11-26-11 06:58 PM)    

02-01-12 11:00 PM
BNuge is Offline
| ID: 538697 | 93 Words

BNuge
Level: 137


POSTS: 4648/5714
POST EXP: 365399
LVL EXP: 30787763
CP: 14418.8
VIZ: 1504587

Likes: 0  Dislikes: 0
HTML question for all of you.

If you view it in Firefox or Chrome, it looks normal and it links to a YouTube video. However, in Internet Explorer there is a box around the picture (probably caused by the fact that it is a link). How do I get rid of that box?

The GIF also lags in IE, but I'm not overly concerned about that.

Edit- I double checked Firefox and, for some reason, the box also appears there.

Look at this-













Edit with Lazlo's code-












Edit number 2 with Lazlo's code-
HTML question for all of you.

If you view it in Firefox or Chrome, it looks normal and it links to a YouTube video. However, in Internet Explorer there is a box around the picture (probably caused by the fact that it is a link). How do I get rid of that box?

The GIF also lags in IE, but I'm not overly concerned about that.

Edit- I double checked Firefox and, for some reason, the box also appears there.

Look at this-













Edit with Lazlo's code-












Edit number 2 with Lazlo's code-
Vizzed Elite
Third Place in Feb 2011 VCS Achieved Ravering Syndrome + on Jan 6, 2012


Affected by 'Laziness Syndrome'

Registered: 04-30-10
Location: Northeast US
Last Post: 1191 days
Last Active: 416 days

(edited by BNuge on 02-02-12 10:20 PM)    

02-02-12 08:17 PM
Lazlo Falconi is Offline
| ID: 539112 | 41 Words

02-02-12 09:19 PM
BNuge is Offline
| ID: 539135 | 7 Words

BNuge
Level: 137


POSTS: 4656/5714
POST EXP: 365399
LVL EXP: 30787763
CP: 14418.8
VIZ: 1504587

Likes: 0  Dislikes: 0
Lazlo Falconi :

The box is still there.
Lazlo Falconi :

The box is still there.
Vizzed Elite
Third Place in Feb 2011 VCS Achieved Ravering Syndrome + on Jan 6, 2012


Affected by 'Laziness Syndrome'

Registered: 04-30-10
Location: Northeast US
Last Post: 1191 days
Last Active: 416 days

02-02-12 09:43 PM
Lazlo Falconi is Offline
| ID: 539141 | 22 Words

Lazlo Falconi
Level: 98


POSTS: 681/2750
POST EXP: 199963
LVL EXP: 9634830
CP: 3100.7
VIZ: 182754

Likes: 0  Dislikes: 0
BNuge : Hrm... Oh, maybe the style needs to go in the %lt;a%gt; tag... Sorry, it's been a while since I did this!
BNuge : Hrm... Oh, maybe the style needs to go in the %lt;a%gt; tag... Sorry, it's been a while since I did this!
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 1381 days
Last Active: 1255 days

02-02-12 10:24 PM
BNuge is Offline
| ID: 539156 | 51 Words

BNuge
Level: 137


POSTS: 4658/5714
POST EXP: 365399
LVL EXP: 30787763
CP: 14418.8
VIZ: 1504587

Likes: 0  Dislikes: 0
Lazlo Falconi :

I noticed something while I was editing the code in the second time. I actually put two style codes into the second picture. When I combined them, it worked. Here's that result-














Edit- It does work. Thanks for the help. I'll probably be using this a lot now.
Lazlo Falconi :

I noticed something while I was editing the code in the second time. I actually put two style codes into the second picture. When I combined them, it worked. Here's that result-














Edit- It does work. Thanks for the help. I'll probably be using this a lot now.
Vizzed Elite
Third Place in Feb 2011 VCS Achieved Ravering Syndrome + on Jan 6, 2012


Affected by 'Laziness Syndrome'

Registered: 04-30-10
Location: Northeast US
Last Post: 1191 days
Last Active: 416 days

(edited by BNuge on 02-05-12 04:50 PM)    

03-10-12 10:00 PM
WarpStarFerret is Offline
| ID: 550007 | 117 Words

WarpStarFerret
Level: 119


POSTS: 3381/4145
POST EXP: 166518
LVL EXP: 18567294
CP: 351.2
VIZ: 88700

Likes: 0  Dislikes: 0
Quick question(s): how do I fold a BG pic over on itself? Like, instead of "Life", I want "efiL" except with the BG pic, not text. Also, how do I get the BG to align right? On one of the layouts I made, the BG keeps starting underneath the table to the left with all the user's info and stuff, and it ends up repeating on the far right because of that. That only happened when I tried a fixed location BG just FYI. Also, simply making the BG pic bigger won't work, by the time I get it big enough it is either distorted or somewhere between 9 and 22 KBs too big of a filesize.
Quick question(s): how do I fold a BG pic over on itself? Like, instead of "Life", I want "efiL" except with the BG pic, not text. Also, how do I get the BG to align right? On one of the layouts I made, the BG keeps starting underneath the table to the left with all the user's info and stuff, and it ends up repeating on the far right because of that. That only happened when I tried a fixed location BG just FYI. Also, simply making the BG pic bigger won't work, by the time I get it big enough it is either distorted or somewhere between 9 and 22 KBs too big of a filesize.
Vizzed Elite
2nd Place Feb. '11 VCS Hit OPS on 1-28-11 (340 posts) Hit Ravering 2-2-11 (547) Ravering+ on 6-25-11 (2601 posts) Hit Veneeval 3-24-12 (3765 posts)


Affected by 'Laziness Syndrome'

Registered: 12-26-10
Last Post: 2805 days
Last Active: 2805 days

03-11-12 12:54 AM
Lazlo Falconi is Offline
| ID: 550055 | 152 Words

Lazlo Falconi
Level: 98


POSTS: 826/2750
POST EXP: 199963
LVL EXP: 9634830
CP: 3100.7
VIZ: 182754

Likes: 0  Dislikes: 0
WarpStarFerret : I think you got a sort of fix for this already, but I'll give you a few other possible options you may not have known about.

First, you asked how to attach the background somewhere, this can be done in CSS with the background-attachment property, as you've found out. The options are:

  • Scroll: The background scrolls with the page, staying in place relative to the text. This is what I have.

  • Fixed: The background stays fixed, relative to the user's screen. This is what you have.

  • Inherit: The background does whatever the background of the next largest object above it does.



You could also use background-position: to affix your background. The default position is left top, in my layout the background-position is bottom center.

You also mention that you were having a problem with your background image repeating. This can be fixed with background-repeat: no-repeat;.

I hope this post helped you!
WarpStarFerret : I think you got a sort of fix for this already, but I'll give you a few other possible options you may not have known about.

First, you asked how to attach the background somewhere, this can be done in CSS with the background-attachment property, as you've found out. The options are:

  • Scroll: The background scrolls with the page, staying in place relative to the text. This is what I have.

  • Fixed: The background stays fixed, relative to the user's screen. This is what you have.

  • Inherit: The background does whatever the background of the next largest object above it does.



You could also use background-position: to affix your background. The default position is left top, in my layout the background-position is bottom center.

You also mention that you were having a problem with your background image repeating. This can be fixed with background-repeat: no-repeat;.

I hope this post helped you!
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 1381 days
Last Active: 1255 days

03-11-12 01:19 AM
WarpStarFerret is Offline
| ID: 550060 | 226 Words

WarpStarFerret
Level: 119


POSTS: 3386/4145
POST EXP: 166518
LVL EXP: 18567294
CP: 351.2
VIZ: 88700

Likes: 0  Dislikes: 0
Lazlo Falconi : Honestly, I tried those tactics and that's what made my bg go *POOF*. Nothing worked until I re-tooled the bg code around style="background: transparent url...yada yada--" No repeat didn't work properly, because it only coded for no-repeat top-bottom, for whatever reason. It still was repeating left to right, but that went away when I changed the code base to shove the whole bg to the right. Never did figure out why the the bg pic kept insisting on starting underneath the user info to the right, but w/e, I went around that. I didn't know about Inherit, but I'm not sure how to use that in a layout to good affect anyways. Still, it could be good to know. I might have a use for that, thanks.

I think the only thing layout related that I still don't know how to code that I want to know is how to mirror an image. Thanks for putting up the info though, It's good to have listed. Also, the reason those didn't work might be because my code was a little messy... I think I've got like 3 different dialects of HTML crammed in there along with some CSS code for the text.

I don't think my layouts will get anymore complicated than this one... I'm running out of Code Box space '
Lazlo Falconi : Honestly, I tried those tactics and that's what made my bg go *POOF*. Nothing worked until I re-tooled the bg code around style="background: transparent url...yada yada--" No repeat didn't work properly, because it only coded for no-repeat top-bottom, for whatever reason. It still was repeating left to right, but that went away when I changed the code base to shove the whole bg to the right. Never did figure out why the the bg pic kept insisting on starting underneath the user info to the right, but w/e, I went around that. I didn't know about Inherit, but I'm not sure how to use that in a layout to good affect anyways. Still, it could be good to know. I might have a use for that, thanks.

I think the only thing layout related that I still don't know how to code that I want to know is how to mirror an image. Thanks for putting up the info though, It's good to have listed. Also, the reason those didn't work might be because my code was a little messy... I think I've got like 3 different dialects of HTML crammed in there along with some CSS code for the text.

I don't think my layouts will get anymore complicated than this one... I'm running out of Code Box space '
Vizzed Elite
2nd Place Feb. '11 VCS Hit OPS on 1-28-11 (340 posts) Hit Ravering 2-2-11 (547) Ravering+ on 6-25-11 (2601 posts) Hit Veneeval 3-24-12 (3765 posts)


Affected by 'Laziness Syndrome'

Registered: 12-26-10
Last Post: 2805 days
Last Active: 2805 days

03-12-12 07:25 PM
Lazlo Falconi is Offline
| ID: 550579 | 305 Words

Lazlo Falconi
Level: 98


POSTS: 827/2750
POST EXP: 199963
LVL EXP: 9634830
CP: 3100.7
VIZ: 182754

Likes: 0  Dislikes: 0
Okay, now I have a question, because I just can't figure this one out on my own. I know I've done it before but I can't for the life of me remember how. I have a container div with a width of 800px, and 100% height. Within that div I have two other divs, each 300px wide, but of arbitrary height.

Now, these two boxes (leftbox and rightbox) are supposed to be side-by-side, but I'm not at all sure about how to get the rightbox to move up x pixels, depending on the height of leftbox.

Currently, I have the following code in there:

div#leftbox
{
margin: 25px;
border: 1px solid #088080;
padding: 10px;
width: 300px;
}

div#rightbox
{
margin: 25px;
border: 1px solid #088080;
padding: 10px;
width: 300px;
float: right;
}


Now, this mostly works, because the two divs are the right size, and rightbox moves over to the right the appropriate amount of pixels, however, it does not move up to the top of the page. What in the world could I be missing? I know it has to be something extremely simple, but what?

Any help is greatly appreciated!


Okay I got it through a rather roundabout means... the working code is as follows, in case anyone else has similar problems. If you have a better solution, please let me know!


div#leftbox
{
margin: 25px;
margin-top: auto; /* See notes below */
padding: 10px;
width: 300px;
float: left;
}

div#rightbox
{
margin: 25px;
margin-top: auto;
margin-left: auto;
padding: 10px;
width: 300px;
}



So that seems to fix it. At first I was having trouble because #leftbox would move down about 1em, presumably to make room for #rightbox, but that was remedied with margin-top: auto;.
Layout by Lazlo Falconi
Okay, now I have a question, because I just can't figure this one out on my own. I know I've done it before but I can't for the life of me remember how. I have a container div with a width of 800px, and 100% height. Within that div I have two other divs, each 300px wide, but of arbitrary height.

Now, these two boxes (leftbox and rightbox) are supposed to be side-by-side, but I'm not at all sure about how to get the rightbox to move up x pixels, depending on the height of leftbox.

Currently, I have the following code in there:

div#leftbox
{
margin: 25px;
border: 1px solid #088080;
padding: 10px;
width: 300px;
}

div#rightbox
{
margin: 25px;
border: 1px solid #088080;
padding: 10px;
width: 300px;
float: right;
}


Now, this mostly works, because the two divs are the right size, and rightbox moves over to the right the appropriate amount of pixels, however, it does not move up to the top of the page. What in the world could I be missing? I know it has to be something extremely simple, but what?

Any help is greatly appreciated!


Okay I got it through a rather roundabout means... the working code is as follows, in case anyone else has similar problems. If you have a better solution, please let me know!


div#leftbox
{
margin: 25px;
margin-top: auto; /* See notes below */
padding: 10px;
width: 300px;
float: left;
}

div#rightbox
{
margin: 25px;
margin-top: auto;
margin-left: auto;
padding: 10px;
width: 300px;
}



So that seems to fix it. At first I was having trouble because #leftbox would move down about 1em, presumably to make room for #rightbox, but that was remedied with margin-top: auto;.
Layout by Lazlo Falconi
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 1381 days
Last Active: 1255 days

(edited by Lazlo Falconi on 03-12-12 10:14 PM)    

03-16-12 06:46 PM
WarpStarFerret is Offline
| ID: 551629 | 236 Words

WarpStarFerret
Level: 119


POSTS: 3415/4145
POST EXP: 166518
LVL EXP: 18567294
CP: 351.2
VIZ: 88700

Likes: 0  Dislikes: 0
Lazlo Falconi : Just a few quick questions:

First, how do I code a shadow into my layouts? It's at the top of the list of things I don't know yet; some people use that code for text, you are using it for your text box.

Second, when using inherit in a layout, do you input the text box code first, then the bg, or do you just align everything to top center and code the text box second?

Third, where do I 'sign' my layouts like you and a few others do, is that in the sig somewhere or at the end of the header? Also, I'm not positive on the proper tag to use for that, so I might as well ask about that too.

Lastly, do you know how I can make multiple side-by-side tables in one layout without making a mess of it? I might want to try a more advanced layout at some point, possibly even using a standard table for text as opposed to a text box. (I might need to take the code for the text box out if it gets that complicated anyways ') You know, I think that's what your entire last post was about now that I actually bothered to check... Wow, me.

I'm not good with the < div > layouts yet, but I think Zamiel already posted a guide for those.

Thanks.
Lazlo Falconi : Just a few quick questions:

First, how do I code a shadow into my layouts? It's at the top of the list of things I don't know yet; some people use that code for text, you are using it for your text box.

Second, when using inherit in a layout, do you input the text box code first, then the bg, or do you just align everything to top center and code the text box second?

Third, where do I 'sign' my layouts like you and a few others do, is that in the sig somewhere or at the end of the header? Also, I'm not positive on the proper tag to use for that, so I might as well ask about that too.

Lastly, do you know how I can make multiple side-by-side tables in one layout without making a mess of it? I might want to try a more advanced layout at some point, possibly even using a standard table for text as opposed to a text box. (I might need to take the code for the text box out if it gets that complicated anyways ') You know, I think that's what your entire last post was about now that I actually bothered to check... Wow, me.

I'm not good with the < div > layouts yet, but I think Zamiel already posted a guide for those.

Thanks.
Vizzed Elite
2nd Place Feb. '11 VCS Hit OPS on 1-28-11 (340 posts) Hit Ravering 2-2-11 (547) Ravering+ on 6-25-11 (2601 posts) Hit Veneeval 3-24-12 (3765 posts)


Affected by 'Laziness Syndrome'

Registered: 12-26-10
Last Post: 2805 days
Last Active: 2805 days

03-17-12 03:43 AM
Lazlo Falconi is Offline
| ID: 551737 | 911 Words

Lazlo Falconi
Level: 98


POSTS: 838/2750
POST EXP: 199963
LVL EXP: 9634830
CP: 3100.7
VIZ: 182754

Likes: 0  Dislikes: 0
WarpStarFerret : I'm gonna answer your last question first, since it's the easiest to answer. In short, don't go the route that I did, that method is way too messy and actually pretty hard to use, because you have to float the box that is larger, which doesn't work if sometimes one box is larger, and sometimes another is smaller. This can be fixed with the min-height: property, but that may not be the best way to do it. I would just go with a to make things easier on yourself.
s are great for single boxes here and there, but they don't really work out for multiple columns with rows of changing height.

Okay, to answer the rest of your questions in order--to the best of my ability.

First, don't get confused, the shadow around my text box and the shadow on actual text are different properties, and I'll explain each here. Since you seem more interested in the actual box shadow, we'll go with that first.

I applied box-shadow: #585858 0px 4px 15px; to my final div (There are actually two in my layout). As you can see, there are four different arguments within this one property. The first is the color of the shadow. Don't get discouraged, you CAN--and perhaps should--use easy color names (red, blue, etc) because not all hex codes will work. I haven't yet figured out why that is, but some just don't. The second is the horizontal spacing. Positive numbers move the shadow to the right, negative numbers to the left. This, like all measurements in CSS can be measured in either pixels, em, or percent. The third is vertical spacing. Positive numbers move the shadow down whilst negative move it up. Hey, this is easy! And of course, the final number is the blur radius of the shadow. I've found that, depending on your layouts borders, and what's underneath it, the best results are had in the 5-20px range.

Also, don't forget to call a border with shadows, otherwise they tend to look a little odd. Sometimes it works and sometimes it doesn't, but the right color and size border can make all the difference with making your shadow look good or terrible.

Now, as for the shadow on the text (More commonly used to make text "glow"), this is done with the text-shadow property. This layout used to have (And actually it's still there, just commented out) text-shadow: grey 1px 1px 2px; which was intended to give it a glowing, translucent look. It was hard to read, so I removed it. As you can see, this property can be broken down exactly like box-shadow. Now, I should tell you that both of these properties are applied to a single div that contains your text. For instance, this layout's final div tag is:



The overflow-y was commented out because I realized it wasn't causing any problems. It's important to remember that text properties are applied to the element containing the text, not the text itself (With the exception of the span tag, which isn't actually a very good way of doing things for layouts--but then again, I've used it in this post...)

As for your second question... Well, I'm not exactly sure what you mean. It typically doesn't matter what order your CSS items are in, as long as all of your properties come before the element in question, but that may not be what you're asking... As for how I handled my background, in another div (nested OUTSIDE of the div posted above) I used background-repeat: no-repeat; background-position: bottom center; (Notice that the background-position property has whitespace between bottom and center--this is not normal behavior for CSS).

And to answer your third question, the CSS for my layout all together looks like this.

In the "Header" box //





In the "Signature" box //

Layout by Lazlo">https://www.vizzed.com/boards/profile.php?id=162314">Lazlo Falconi


Please note that this code is not exactly pretty, it's missing a lot of styling I usually have for readability, which is given up due to the way Vizzed Board processes post layouts. If you're using anything you learn here for actual websites, you should keep things much more legible and tab everything out properly.

Also, I've included the


In the "Signature" box //

Layout by Lazlo">https://www.vizzed.com/boards/profile.php?id=162314">Lazlo Falconi


Please note that this code is not exactly pretty, it's missing a lot of styling I usually have for readability, which is given up due to the way Vizzed Board processes post layouts. If you're using anything you learn here for actual websites, you should keep things much more legible and tab everything out properly.

Also, I've included the tags that give me that sweet quote box thing I have, but it that may be a bit more of an advanced topic, for another time.

Oh yeah, one more thing: If you want to have HTML tags print without putting spaces in them, type < for < and > for >. That is, <div> prints
. (Don't even ask how I managed to print the code without invoking it, because that would be a lot of &

Anyway, if you have any other questions, or I failed to answer something to your satisfaction, feel free to ask any time!
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 1381 days
Last Active: 1255 days

03-17-12 07:21 AM
WarpStarFerret is Offline
| ID: 551751 | 532 Words

WarpStarFerret
Level: 119


POSTS: 3421/4145
POST EXP: 166518
LVL EXP: 18567294
CP: 351.2
VIZ: 88700

Likes: 0  Dislikes: 0
Lazlo Falconi : ..... That's a lot. If this isn't the first post of the next page, the next person to post is going to have to wait a while for load time.

First, I think I get how to use the code for shadow now, but I might have to tinker with it a little first since I use table style layouts and not div style ones. Thanks.

Second, I think I get the gist of how to make a multi-table layout... My thought of it now is to have the absolute background table listed first, then nest two other tables inside that one, one aligned to the right and the other aligned to the left, or maybe top and bottom. It should work like that right? Also, do I do anything special for an invisible bg, or do I just do nothing but list the dimensions to get an invisible bg?

Nope, not getting how to make a < table > layout with multiple separated tables. I keep ending up with A inside B inside C, when I want A and B to be inside C, but separate from each other. I can't seem to get it to not do that, no matter what I do. I mean, I can mess with the sizes to get almost what I want, but they're all stacked that way. I don't want them stacked. I'm not bothering with bg pics for now, I'm just trying to make a simple layout that looks OK. (I sort of got a solution to this, but it involved closed tags in the header to get the tables to split, which might be very bad. That is probably what caused the below problem.)

New problem: How do I specify which table the text goes into? The computer is a lousy guesser. :/ The text wants to start below the layout itself, not inside of it, and ends up filling absolutely everything below the layout, not a word IN the layout. First, I need to tell the text where to start, and second, I need to tell it where the "DO NOT PASS" marker is so it doesn't just dump text everywhere. :/ Either that, or I need to find a way to tell the computer "DO NOT STACK THE TABLES" after the first table is set.

Third, I was basically just trying to see if there was a way to be creative and implement inherit properly in a layout, but I still don't know on that one. It was the least needed question regardless, so no matter.

Lastly, I actually meant the Lazlo Falconi that was on the bg pic itself, but it looks lik you did that in a photoshop or paint program and not in the coding.

Oh, and I DO know how to use the type code, it's how I change what the font type is from layout to layout. I don't really do anything really fancy with it, but I am familiar with that code.

While I'm at it: Do the changes look good?

One last question: Why does the computer seem to think "darkteal"="hotpink"?
Lazlo Falconi : ..... That's a lot. If this isn't the first post of the next page, the next person to post is going to have to wait a while for load time.

First, I think I get how to use the code for shadow now, but I might have to tinker with it a little first since I use table style layouts and not div style ones. Thanks.

Second, I think I get the gist of how to make a multi-table layout... My thought of it now is to have the absolute background table listed first, then nest two other tables inside that one, one aligned to the right and the other aligned to the left, or maybe top and bottom. It should work like that right? Also, do I do anything special for an invisible bg, or do I just do nothing but list the dimensions to get an invisible bg?

Nope, not getting how to make a < table > layout with multiple separated tables. I keep ending up with A inside B inside C, when I want A and B to be inside C, but separate from each other. I can't seem to get it to not do that, no matter what I do. I mean, I can mess with the sizes to get almost what I want, but they're all stacked that way. I don't want them stacked. I'm not bothering with bg pics for now, I'm just trying to make a simple layout that looks OK. (I sort of got a solution to this, but it involved closed tags in the header to get the tables to split, which might be very bad. That is probably what caused the below problem.)

New problem: How do I specify which table the text goes into? The computer is a lousy guesser. :/ The text wants to start below the layout itself, not inside of it, and ends up filling absolutely everything below the layout, not a word IN the layout. First, I need to tell the text where to start, and second, I need to tell it where the "DO NOT PASS" marker is so it doesn't just dump text everywhere. :/ Either that, or I need to find a way to tell the computer "DO NOT STACK THE TABLES" after the first table is set.

Third, I was basically just trying to see if there was a way to be creative and implement inherit properly in a layout, but I still don't know on that one. It was the least needed question regardless, so no matter.

Lastly, I actually meant the Lazlo Falconi that was on the bg pic itself, but it looks lik you did that in a photoshop or paint program and not in the coding.

Oh, and I DO know how to use the type code, it's how I change what the font type is from layout to layout. I don't really do anything really fancy with it, but I am familiar with that code.

While I'm at it: Do the changes look good?

One last question: Why does the computer seem to think "darkteal"="hotpink"?
Vizzed Elite
2nd Place Feb. '11 VCS Hit OPS on 1-28-11 (340 posts) Hit Ravering 2-2-11 (547) Ravering+ on 6-25-11 (2601 posts) Hit Veneeval 3-24-12 (3765 posts)


Affected by 'Laziness Syndrome'

Registered: 12-26-10
Last Post: 2805 days
Last Active: 2805 days

03-17-12 10:52 PM
Lazlo Falconi is Offline
| ID: 551979 | 383 Words

Lazlo Falconi
Level: 98


POSTS: 839/2750
POST EXP: 199963
LVL EXP: 9634830
CP: 3100.7
VIZ: 182754

Likes: 0  Dislikes: 0
WarpStarFerret : Oh jeez, for this table thing, this is going to take a LOT of explanation... I don't know if it will make sense here so bear with me.

Okay, first, let's talk about how to make a "multi-table" layout, which I actually don't think is what you want. You want things side-by-side, like in this layout, right? To do that, you would use the following:







Stuff goes here. You can even put another table in this area.!

Some other stuff goes here. This will appear directly next to the above object. It can also be another table.



Now, you can have as many tr's (Table Rows) as you want, each one will stack below the one before it. And within each tr, you can have as many td's as you want, as long as it is the same as each tr in the table. This can be gotten around with the row-span property, but it gets sort of complicated, so let's just go with keeping everything the same for now.

As for specifying which table the post goes in, in the above example, let's assume I want my post in the left area, so in my "Header" I would put everything that comes before "Stuff goes here...", and then in my "Signature", I would put in
and all the other stuff that comes after that. Do you understand? (Y/n)

Oh yeah, and for a transparent background, I think you mean how do you have a box with no background, if so, you are correct, just don't specify a background and the browser will assume you do not want one.

Closing notes: Yes, I added that into the photo using the GNU Image Manipulation Program, and I don't know why darkteal came out as hotpink. Probably because CSS doesn't know what darkteal is, so it thought you meant #DAEA00 or something (Which doesn't come out as pink... So I don't know) Try using this tool to pick a colour, and use the hex code you get. It is always better to use a hex code because some browsers display colors differently, but the hex codes are always the same.
WarpStarFerret : Oh jeez, for this table thing, this is going to take a LOT of explanation... I don't know if it will make sense here so bear with me.

Okay, first, let's talk about how to make a "multi-table" layout, which I actually don't think is what you want. You want things side-by-side, like in this layout, right? To do that, you would use the following:







Stuff goes here. You can even put another table in this area.!

Some other stuff goes here. This will appear directly next to the above object. It can also be another table.



Now, you can have as many tr's (Table Rows) as you want, each one will stack below the one before it. And within each tr, you can have as many td's as you want, as long as it is the same as each tr in the table. This can be gotten around with the row-span property, but it gets sort of complicated, so let's just go with keeping everything the same for now.

As for specifying which table the post goes in, in the above example, let's assume I want my post in the left area, so in my "Header" I would put everything that comes before "Stuff goes here...", and then in my "Signature", I would put in
and all the other stuff that comes after that. Do you understand? (Y/n)

Oh yeah, and for a transparent background, I think you mean how do you have a box with no background, if so, you are correct, just don't specify a background and the browser will assume you do not want one.

Closing notes: Yes, I added that into the photo using the GNU Image Manipulation Program, and I don't know why darkteal came out as hotpink. Probably because CSS doesn't know what darkteal is, so it thought you meant #DAEA00 or something (Which doesn't come out as pink... So I don't know) Try using this tool to pick a colour, and use the hex code you get. It is always better to use a hex code because some browsers display colors differently, but the hex codes are always the same.
Vizzed Elite
The Shake Zula


Affected by 'Laziness Syndrome'

Registered: 01-07-12
Location: Cartoon Hell
Last Post: 1381 days
Last Active: 1255 days

Links

Adblocker detected!

Vizzed.com is very expensive to keep alive! The Ads pay for the servers.

Vizzed has 3 TB worth of games and 1 TB worth of music.  This site is free to use but the ads barely pay for the monthly server fees.  If too many more people use ad block, the site cannot survive.

We prioritize the community over the site profits.  This is why we avoid using annoying (but high paying) ads like most other sites which include popups, obnoxious sounds and animations, malware, and other forms of intrusiveness.  We'll do our part to never resort to these types of ads, please do your part by helping support this site by adding Vizzed.com to your ad blocking whitelist.

×