Guest Access
Administrator
Administrator
Administrator
profile
Hey gang, time for me to start making some tutorials and give the "101" some justice.
Here in the underground, HTML is active in our posts so why not get fancy with using some DIV power.
In this lesson you will learn how to make a div, style it, and center it's position as well as the content.
Example:
The "DIV" tag defines a division or a section in an HTML document.
Like most HTML tags there's the 'begin' and 'end' tags. So to start and end a div simply type
now let's put some text inside this div, for example: "HELLO!"
which will give you:
^ notice there's really nothing special about using a div at this stage since we haven't used any position, style, margin, padding, etc...
So let's give it a little 'style' , we will specify the style by adding
Let's start with coloring the background by using this code:
results in:
^ now you can see the div +
to change the font color simply add a semi-colon ";"
right after the background-color attribute
then add 'color:white' inside the quotes for style
mostly every attribute is set to auto if not specified
you'll see the pattern in code as we add more attributes...
Now let's control the width by setting it to 100 pixels wide
Next let's set the padding to 20 pixels, padding is the inner spacing withing the div
though we set the width to 100 pixels, the padding increased the size of the div from top, right, left, bottom by 20 pixels.
now let's give this div a solid border 4 pixels thick
next let's set the margin, margin is the outer space of the div, let's set the left and right margin to be auto so that it centers the div horizontally
now we will increase the size of the font and center the content inside the div
and last we will round out the corners by adjusting the border radius
and there you have it folks +
With style, position, and alignment, you can have some HTML fun in using a div in your posts!
Feel free to experiment with your DIV power here and ask away should you have any questions...
*this tutorial is still being edited
more explanations will be added.
G@MeF@Ce
profile
DIV POWER
Hey gang, time for me to start making some tutorials and give the "101" some justice.
Here in the underground, HTML is active in our posts so why not get fancy with using some DIV power.
In this lesson you will learn how to make a div, style it, and center it's position as well as the content.
Example:
HELLO!
The "DIV" tag defines a division or a section in an HTML document.
- Code:
<div>
Like most HTML tags there's the 'begin' and 'end' tags. So to start and end a div simply type
- Code:
<div></div>
now let's put some text inside this div, for example: "HELLO!"
- Code:
<div>HELLO!</div>
which will give you:
HELLO!
^ notice there's really nothing special about using a div at this stage since we haven't used any position, style, margin, padding, etc...
So let's give it a little 'style' , we will specify the style by adding
- Code:
style=" "
Let's start with coloring the background by using this code:
- Code:
<div style="background-color:red">
HELLO!
</div>
results in:
HELLO!
^ now you can see the div +
to change the font color simply add a semi-colon ";"
right after the background-color attribute
then add 'color:white' inside the quotes for style
- Code:
<div style="background-color:red;color:white">HELLO!</div>
HELLO!
mostly every attribute is set to auto if not specified
you'll see the pattern in code as we add more attributes...
Now let's control the width by setting it to 100 pixels wide
- Code:
<div style="background-color:red;color:white;width:100px;">HELLO!</div>
HELLO!
Next let's set the padding to 20 pixels, padding is the inner spacing withing the div
- Code:
<div style="background-color:red;color:white;width:100px;padding: 20px;">HELLO!</div>
HELLO!
though we set the width to 100 pixels, the padding increased the size of the div from top, right, left, bottom by 20 pixels.
now let's give this div a solid border 4 pixels thick
- Code:
<div style="background-color:red;color:white;width:100px;padding: 20px;border:4px solid white;">HELLO!</div>
HELLO!
next let's set the margin, margin is the outer space of the div, let's set the left and right margin to be auto so that it centers the div horizontally
- Code:
<div style="background-color:red;color:white;width:100px;padding: 20px;border:4px solid white;margin:0 auto;">HELLO!</div>
HELLO!
now we will increase the size of the font and center the content inside the div
- Code:
<div style="background-color:red;font-size:18px;color:white;width:100px;padding:20px;border:4px solid white;margin:0 auto;" align="center">HELLO!</div>
HELLO!
and last we will round out the corners by adjusting the border radius
- Code:
<div style="background-color:red;font-size:18px; color:white;width:100px;padding:20px;border-radius:15px;border:4px solid white;margin:0 auto;" align="center">HELLO!</div>
HELLO!
and there you have it folks +
With style, position, and alignment, you can have some HTML fun in using a div in your posts!
Feel free to experiment with your DIV power here and ask away should you have any questions...
*this tutorial is still being edited
more explanations will be added.
Administrator
Show Signature
Community Moderator
Community Moderator
Community Moderator
profile
GeMinEye
profile
This is really cool G! I love it, I also have a question about the maximum width you can have for your div and is there a way to change the style of the font.
Here is mine:
Here is mine:
Gemineye
Community Moderator
Show Signature
Administrator
Administrator
Administrator
profile
you can set a limit on the maximum width of the div by using
this will prevent the div from being wider than 500 pixels
same goes for minimum width
this will prevent the div from being less than 100 pixels wide
not all fonts are supported, but to change the type of font you may use
the code:
you pick up quick kiddo +
edit: or did you copy/paste
G@MeF@Ce
profile
the div can be as wide as the body, table, div, that it is nested in. by default the width is set to auto, notice in the early steps of this tutorial that once the background color was set, the div was as wide as the post.GeMinEye wrote:question about the maximum width you can have for your div
you can set a limit on the maximum width of the div by using
- Code:
max-width:500px;
this will prevent the div from being wider than 500 pixels
same goes for minimum width
- Code:
min-width:100px;
this will prevent the div from being less than 100 pixels wide
GeMinEye wrote:is there a way to change the style of the font.
not all fonts are supported, but to change the type of font you may use
- Code:
font-family:Arial;
Gemineye
the code:
- Code:
<div style="background-color:#101010;
font-family:Arial;font-size:24px; color:#00DED7;
max-width:300px;padding:20px;border-radius:15px;
border:4px solid #00DED7;margin:0 auto;" align="center">Gemineye</div>
you pick up quick kiddo +
edit: or did you copy/paste
Administrator
Show Signature
Poster Mcposty
Poster Mcposty
Poster Mcposty
profile
MotionM
profile
Is there a code that lets the background stretch depending on the user's resolution? I had that problem a lot with my old Blog wallpaper and that one site HTML I was doing.
Poster Mcposty
Show Signature
Administrator
Administrator
Administrator
profile
if you do not specify width or if you set it to auto
maybe there was an issue with positioning?
G@MeF@Ce
profile
MotionM wrote:Is there a code that lets the background stretch depending on the user's resolution? I had that problem a lot with my old Blog wallpaper and that one site HTML I was doing.
if you do not specify width or if you set it to auto
- Code:
<div style="background-color:#101010;font-family:Arial;font-size:24px; color:#fff;width:auto;padding:20px;border-radius:15px;border:4px solid white;margin:0 auto;" align="center">MotionM</div>
MotionM
maybe there was an issue with positioning?
Administrator
Show Signature
Poster Mcposty
Poster Mcposty
Poster Mcposty
profile
MotionM
profile
Likely. Not too sure. No longer have the file on my Flash Drive. Using it as a ReadyBoost for 4GB but I don't even think that it's working.
Poster Mcposty
Show Signature