|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 18, 2017 12:25:33 GMT -5
Kinda forgot that I posted this. Oops.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 18, 2017 12:30:54 GMT -5
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 18, 2017 12:57:37 GMT -5
|
|
|
Post by Blaze ♡ on May 18, 2017 17:33:01 GMT -5
Introduction
"Let all cats old enough to catch their own prey gather here beneath the High Rock for a Clan meeting", the traditional words echoed around the camp. Rowanstar gazed calmly down at his clan as they slowly started to gather. The queens peered out of the nursery with curiosity flickering in their eyes while their kits tried to crowd out of the den. The elders moved closely towards the front, their old age bothering their joints. The medicine cat took her place close to the High Rock. The warriors and apprentices flooded into the clearing to gather below High Rock. Alrighty. You said you wanted some help with the text-boxes without a background. This is extremely easy code. It is simple yet elegant looking. When making a clan, (sometimes) you just don't want people to join because it looks pretty. You want something that states the information clearly.
I am not sure what you already know and don't know about codes, therefore I will explain for you or anyone who is poking around the art forums looking different advice.
Here is the basic code for the text box up above... [div style="width:50%;margin:auto;padding:15px;border:5px double #FFFFDF;text-align:left;"]
Width describes how big the box is. I have it on 50% so it's small. Here is what it would look like if I changed it to 75%
text text text text text text Margin.
Frankly, I cannot remember what this does therefore I just keep it on auto. PaddingI usually have it on 15-25px because I like the space around the edges of the text box. Here is the text would like if I changed the padding to 5px Introduction
"Let all cats old enough to catch their own prey gather here beneath the High Rock for a Clan meeting", the traditional words echoed around the camp. Rowanstar gazed calmly down at his clan as they slowly started to gather. The queens peered out of the nursery with curiosity flickering in their eyes while their kits tried to crowd out of the den. The elders moved closely towards the front, their old age bothering their joints. The medicine cat took her place close to the High Rock. The warriors and apprentices flooded into the clearing to gather below High Rock. and then 40 px. Introduction
"Let all cats old enough to catch their own prey gather here beneath the High Rock for a Clan meeting", the traditional words echoed around the camp. Rowanstar gazed calmly down at his clan as they slowly started to gather. The queens peered out of the nursery with curiosity flickering in their eyes while their kits tried to crowd out of the den. The elders moved closely towards the front, their old age bothering their joints. The medicine cat took her place close to the High Rock. The warriors and apprentices flooded into the clearing to gather below High Rock. Borderborder:5px double #FFFFDF 5px is telling you how bold and big your border looks. Double is the type of border #ffffdf is the color code. Here are different types of borders: dottedtext text text text text text
dashed text text text text text text
solid text text text text text text
groove text text text text text text
ridge text text text text text text
inset text text text text text text
outset text text text text text text
hidden text text text text text text
And well, text is self-explanatory. xxx
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 18, 2017 18:20:55 GMT -5
I have to go, but the color coding really helps! I'll try this tomorrow!
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 22, 2017 17:11:32 GMT -5
Blaze ♡ I completely forgot to do this. I'm so sorry
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 22, 2017 17:17:12 GMT -5
Blaze ♡ I think margin is the opposite of padding, like the space between the edge of the box and the post. But this is very helpful! You should do more mentoring!
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 12:17:52 GMT -5
when you say putting scrollboxes next to each other, what exactly do you mean? could you give an example? I think I know how to do it, but I want to be sure I'm not confused about just what you mean before I sit down to write something out ^^
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 12:22:15 GMT -5
when you say putting scrollboxes next to each other, what exactly do you mean? could you give an example? I think I know how to do it, but I want to be sure I'm not confused about just what you mean before I sit down to write something out ^^
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 12:40:44 GMT -5
okay, got it. I'll try to type up something that makes any kind of sense. the example you've given me is actually pretty complex coding containing lots of parent divs, it has to be to make it look good, but I can show you some simpler examples to make it clear and then walk you through more complex codes if you'd like.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 13:21:55 GMT -5
thank you! The person who made that example tried to tell me, but she wasn't really able to. If you want, I can try to find other examples?
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 13:32:04 GMT -5
okay, so there's only really two things you need to know/understand to do really basic positioning of scroll boxes next to each other. the first is how to align divs using the float: attribute and the second is how to create a scroll box using the overflow: attribute. we'll start with float, then move on to scroll boxes.so, I'll show you three examples of how you can do this. note that none of them are centred. that's because you need a parent div to centre things when you're using the float: attribute which is what you need to put these things next to each other. technically, the grey border you see is also a parent div, but seeing as you also need a parent div to keep these three sets from melting into each other, for simplicity's sake let's take this one step at a time. that being said, these are the three you can get without one. the first div you'll see if you go into the bbcode tab will have a white border, the second will have a black border. you'll see why soon.some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet. you can of course up the number of boxes if you want, the second post I made here is an example of more than two divs being floated next to each other. five, in this case. again though, for simplicity's sake we'll be working with two for now.so, the basic code for the first one looks like this (plus brackets, of course. a new line means a new div):div style="border:2px solid white;width:25%;padding:10px;margin-right:10px;float:left; div style="border:2px solid black;width:25%;padding:10px;float:left;
I'm going to be focusing on the float: attribute, but going over margin as well. seeing as you've gone over all the others, I won't cover those as I assume you understand them already.margin-right: so this is actually just a specification of the margin: attribute. with most attributes you can do the exact same thing, that is, specify if you want it to affect the right, left, top or bottom of the div. it's very useful in more complicated coding. margin: does exactly what it sounds like, it adds a margin. that is, a space as wide as you tell it to be around the outside of your div. in that way it's almost the opposite to padding which adds a space as wide as you tell it to be around the inside of your div. in this case, I used it to separate the two divs I wanted next to each other but because I only wanted that space on one side (the right of the first div) I simply specified where I wanted it to go and only applied it to the first box, not the second. also, margin:(-px) auto automates the margins and centres the div. it doesn't work if you've floated the div already, but that's what that does. you can add a pixel measurement if you want (hence why its there in brackets) but it's pretty useless since the code will automate it anyway. float:the star of the show: float. this is what allows you to put divs next to each other like I have. so, what's the difference between the three examples I gave? in the first example, both divs use float:left. I'm pretty sure it would work if you just floated the first, but I like to play it safe so I always float both. in the second example, the first still uses float:left while the other uses float:right and in the final example, both use float:right. if both use float right, the order of the divs will be reversed when reading from left to right. in bbcode, the white box comes before the black box but because of the float attribute, they appear to come in the opposite order.
a danger when using float is that everything starts getting messy. here's what those three examples would have looked like if I hadn't contained them in their parent divs:
some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet.
some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet.
some text in here.
note that it doesn't scroll yet. some text in here.
note that it doesn't scroll yet.
as you can see, it's a right mess. if we want to float things on different lines and not in a jumble like this, we use parent divs. I'll go over those in another post, I'm scared of this all disappearing and having to start over and I think it could get a little overwhelming if I went ahead and added more to this post, so I'll make another going over parent divs and scroll boxes in just a moment.
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 13:32:48 GMT -5
thank you! The person who made that example tried to tell me, but she wasn't really able to. If you want, I can try to find other examples? I think I've got it, don't worry. it's just a matter of simplifying it down enough.
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 14:21:49 GMT -5
parent divs so, parent divs! this is where it starts getting fun! you don't always need them, for example, in the example I gave you before where I'd floated five divs all next to each other, I didn't use any parent divs at all and it turned out pretty neat anyway. but in some cases, like the one I just showed you, where you're using different float: attributes or the divs, for some reason, won't line up on the lines you want them to line up, parent divs are a great solution. what are they, then? simply put, parent divs are just divs containing other divs. theoretically, you could have an infinite amount of them, all encasing each other, but usually, you won't use any more than 5-10, depending on the complexity of the code. in your default coding, you're actually using one. the div with the space-y background contains the div with the white background and text. often, these are the kinds you'll use. they'll be there for aesthetic purposes and aesthetic purposes only. but in some cases, like this one, you'll want them to serve a specific purpose. in this case, you need them to contain and neaten up all those messy floating divs you've got. the basic code for the div I used to do that looks like this:div style="border:2px solid grey;width:70%;margin:auto;overflow:hidden;padding:15px;" most of that is just there for aesthetic purposes. the exception is what allows it to contain floated divs and also what, if modified, will allow you to make scroll boxes!overflow:overflow is what decides what happens if the contents of a div are larger than the div itself. if you don't include it, the contents will just spill out over the edge like so:
see? it just flows over the edge which makes it a) unattractive to look at b) difficult to read and c) difficult to manoeuvre other code around
so, how do we fix it? with an overflow: attribute, there are a few things you can do.
overflow:visible is the default. the contents aren't clipped and are visible outside the box, as above.
overflow:hidden clips the content and leaves only what's inside the div. looks like this:
see? it just flows over the edge which makes it a) unattractive to look at b) difficult to read and c) difficult to manoeuvre other code around overflow:scroll adds a scroll bar on the horizontal and vertical axis from the get go. looks like this:
see? it just flows over the edge which makes it a) unattractive to look at b) difficult to read and c) difficult to manoeuvre other code around
overflow:auto clips the content and adds a scroll bar on the vertical axis only if the content overflows the box. looks like this:
see? it just flows over the edge which makes it a) unattractive to look at b) difficult to read and c) difficult to manoeuvre other code around overflow:initial resents the value to default
overflow:inherit the div has the same value as its parents.
you'll see that I didn't give examples for the last two and that's because they're pretty much remixes of the first four. just knowing those will be more than enough.
so, what else can these do? well, as you saw, overflow:hidden allowed the div to contain the floated divs. technically, a div can do that without it, but only with a lot of added space or with a set height. overflow:hidden is the easiest solution and the one I recommend. overflow:auto is the one that looks nicest if it's a scroll box you're after. overflow:visible is pretty much useless since it's the default and overflow:scroll isn't quite as nice as overflow:auto, so I only ever really use two of these.
overflow only works if you've got a set height. the exception is overflow:hidden, which will extend the div to wrap around the contents if you don't have a set height. if you want a scroll box, though, you will need to set a height.
so to place scroll boxes next to each other, you just do what I went over in the previous post and add overflow:auto to the divs you want to float (the black and white bordered ones). if you want me to show you how to centre them, too, I can, but not until you're comfortable with all of this since that's where it starts getting complicated.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 15:07:04 GMT -5
𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 I am so confused.... But I'll still make an attempt.
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 15:09:20 GMT -5
oh yeah, it gets confusing real fast. the best way to figure it out is to try, I think, and if you come across any roadbumps, just let me know. I'll see if I can go over it in more detail for you.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 15:21:46 GMT -5
Okay, so what it looks like you did was make a general box, then put two of the same small boxes inside, both using "float:left" Let's see how this works
..... ..... I hope it turns out okay
..... .....
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 15:45:17 GMT -5
Okay, so what it looks like you did was make a general box, then put two of the same small boxes inside, both using "float:left" Let's see how this works
..... ..... I hope it turns out okay
..... ..... all I did here was remove the margins. the measurements of the margins and boxes all in all was actually bigger than the measurements of the parent div so they didn't line up properly.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 15:51:21 GMT -5
it lined up properly in my post?
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 15:54:29 GMT -5
huh, they didn't on my end. this is what they look like here (excuse the blurriness):
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 17:00:55 GMT -5
I have no idea how to take a screenshot, but it looks fine on mine... But I'll try again
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 17:04:02 GMT -5
Wait, what do I need to fix?
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 17:05:43 GMT -5
if it looks good on your end it probably has to do with screen resolution. the easiest way to adjust for that is to use percentage widths and smaller paddings/margins. if you're already doing that there really isn't much to fix, it's just a matter of hoping it looks good on the other end.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 23, 2017 17:08:05 GMT -5
Ah. Okay. From now on, I'll just do more spacing between the middle of the two inner boxes to make sure it'll look better on others' ends. You're a pretty good teacher, btw.
|
|
|
Post by 𝘨𝘰𝘭𝘥𝘦𝘯 𝘴𝘶𝘯 on May 23, 2017 17:12:38 GMT -5
a wise idea. something that usually helps for checking if it works is halving the size of your browser. if it still looks like it works, chances are it'll work on other monitors as well. hey, thanks ^^ I'm glad you think so, it'd be a lot worse for both of us if you didn't
|
|
|
Post by Blaze ♡ on May 24, 2017 11:18:21 GMT -5
No problem, I was happy to be of some assistance ^^; Thank goodness, you have an idea what margin did xD I choose not to mess with it although that does make sense (if you have experience with microsoft word lol)
I am not sure if I agree with you there, I am typically horrible at explaining things c: haha Like scrollbars, thank goodness that Ree was here because I can't explain scroll bars that well. I just have a "master" code that I know how to work with.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on May 26, 2017 13:11:10 GMT -5
INFJ-T | Neutral Good | Hufflepuff | Virgo Wildlifer | Vegetarian | Lady Buff | Doxie Mama This will be for my siggie
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on Jun 3, 2017 17:56:33 GMT -5
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on Jun 3, 2017 18:05:11 GMT -5
|
|