Language…
15 users online: Batata Douce, BlueSheep123, CalHal, crocodileman94, Ekimnoid, Enderdavid_HD,  Fernap, GiraffeKiller, Housemeister, LuigiTron, playagmes169, ppp9q, Rhubarb44230, sugarfish456, WalrusLife - Guests: 255 - Bots: 283
Users: 64,795 (2,376 active)
Latest user: mathew

Basic & Advanced HTML/CSS Tutorial + Help Thread

Link Thread Closed
Originally posted by algorithmshark
@ ninja boy: This is more of a JavaScript question than an HTML or CSS one. If you're asking how to randomly select a string from an array using a randomly generated number, than you can just use the random number to index the array of strings:

Code
// disclaimer: I don't know any js, treat this as pseudocode
array = ["one", "two", "three", "four"];
num = rand(1,4); // random integer between 1 and 4 inclusive
chosen_string = array[num - 1]; // js indexes from 0, not 1

If this isn't what you meant, then no, that didn't really make sense.


Yeah I guess it is more of a javascript question I just tend to bundle all webcode under the term "html" even though they are different languages. Also you understood the question and that is exactly what I need to do I just can't figure out the correct code to use so it updates live based on the form filled by the random number.

~edit~
Ok I got it all figured out with a bit of help from my brother.
What's the code for a scroll box? I'm having trouble with code and i've searched websites with HTML/CSS knowledge and nothing.


If so, the code's:

Code
<textarea rows="1" cols="5">YOUR TEXT</textarea>

Anime statistic on MyAnimeList:
400 animes completed ✓
6000 episodes completed ✓
100 Days completed ✓
... what even am I doing with my life?
I'd guess he wants something like this.

<div style="width: 200px; height: 200px; overflow: auto;"><img src="http://bin.smwcentral.net/u/7869/NekoMiko145x145.gif" style="width: 600px;"></div>
<blm> zsnes users are the flatearthers of emulation
Originally posted by Alcaro
I'd guess he wants something like this.

<div style="width: 200px; height: 200px; overflow: auto;"><img src="http://bin.smwcentral.net/u/7869/NekoMiko145x145.gif" style="width: 600px;"></div>


Yes, Thanks Alcaro! I was exactly looking for this! Sorry JackTheSpades for not showing a link/image to know what i wanted.
I need some help with CSS, I looked in lots of places, and i don't know if what i'm trying to do is impossible, or too much difficult, but i couldn't find the answer anywhere.
Well here it goes:
I need to find a way to repeat a piece of a background image.

"It's easier and faster and everything to make more than one image!!1!"
I know. Anyway, i need to do this because i'm doing some homework where i have to add some css to a very basic page they have in the school with only some links, to make it look better. And the teacher has told us that this page must be very lightweight , meaning the least http requests you need, better. This is why i want to use only one image, and repeat a piece of it.

dat wall of text ^^''

So, i want to know: Is this possible? If it is, how can i do it?
thanks in advance.


This is the image:
guessing you want to repeat that center box?

you can use the table method or the border-image method (or carefully-placed divs) if so


you'd have to be more specific though
i'll try to be more specific:
Think as if i was trying to make a layout, using that image to make the post box. i want to repeat the top, bottom, sides and center parts (in other words, everything except the corners), to make it fit the size of the box if needed. Then i could use just an image and reduce the number of http requests needed to load the page, making it load faster.

(i hope that was more specific)

Thanks Ladida for this EPIC and Awesome layout!

you want border-image then (border-image requires only one image to work while the others need each segment as separate images)
Many thanks, i'll give it a try.

EDIT: It looks like what i was looking for. However, i still need a bit of help, just with one thing:

Link to the page

It looks good, and it's almos what i was looking for, but if you look at the image:



You'll notice that the fading of bottom in the image is longer than in the page. i don't know how to make the bottom border be bigger, so it looks like the original image.

here's the code:
Code
...

/*----BOX----*/
#box{
	margin:0 auto;
	border:35px solid transparent;
	width:300px;
	padding:10px 0px 30px 0px;
	border-image:url(images/background.png) 35 35 78 35 round;
	background-clip: padding-box;
	background-color: rgb(0,131,255);
	text-align:center;
}

...


Hopefully that will be easy
Link these guys to the W3C HTML color picker and the Colorzilla CSS Gradient generator
I used these to make my layout, and some CSS knowledge lmao
(Soos, that I like the gradient to extend no matter how long the post is.)




It won't work.

EDIT: I got a cool layout!
LOADING... 26% 68% 99% 100%
This beautiful Layout is by Technius!
------------------------------------------------------

I SUPPORT


Tag (div) was not closed.
Tag (div) was not closed.
After reading through both, this thread's long been obsoleted by this thread, we really don't need two functionally equivalent threads around!
Your layout has been removed.
Link Thread Closed