LOGIN
SEARCH
PROFILE
keys: ↑ ↓
LOGOUT
INDEX
MEMBERS
keys: ↑ ↓
HOME
PORTAL
PLAY ALONG
PLAY with WORDS
PLAY with GRAPHICS
PLAY with SOUNDS
PLAY with CODES
PLAY with PROJECTS
keys: ← →
Guest Access
Register:
Members:



View previous topic View next topic Go down Message [Page 1 of 1]

Administrator
Administrator
#1 HTML/CSS CHOPS - DIV POWER Empty HTML/CSS CHOPS - DIV POWER
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
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=" "
right after 'div' inside the beginning div tag

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
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
Community Moderator
Community Moderator
#2 HTML/CSS CHOPS - DIV POWER Empty Re: HTML/CSS CHOPS - DIV POWER
Loading

GeMinEye

GeMinEye
Community Moderator
Community Moderator
Community Moderator
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:


Gemineye

Community Moderator
Show Signature
Community Moderator
http://dezrealah.tumblr.com/
Administrator
Administrator
#3 HTML/CSS CHOPS - DIV POWER Empty Re: HTML/CSS CHOPS - DIV POWER
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
GeMinEye wrote:question about the maximum width you can have for your div
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.

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 + panda
edit: or did you copy/paste Razz
Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
Poster Mcposty
Poster Mcposty
#4 HTML/CSS CHOPS - DIV POWER Empty Re: HTML/CSS CHOPS - DIV POWER
Loading

MotionM

MotionM
Poster Mcposty
Poster Mcposty
Poster Mcposty
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
Poster Mcposty
https://www.dropbox.com/sh/l3s9sn0nmkaxmy7/Lrut_zZyWd http://motionmreview.blogspot.com/ https://twitter.com/_motionm
Administrator
Administrator
#5 HTML/CSS CHOPS - DIV POWER Empty Re: HTML/CSS CHOPS - DIV POWER
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
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
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
Poster Mcposty
Poster Mcposty
#6 HTML/CSS CHOPS - DIV POWER Empty Re: HTML/CSS CHOPS - DIV POWER
Loading

MotionM

MotionM
Poster Mcposty
Poster Mcposty
Poster Mcposty
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
Poster Mcposty
https://www.dropbox.com/sh/l3s9sn0nmkaxmy7/Lrut_zZyWd http://motionmreview.blogspot.com/ https://twitter.com/_motionm

Sponsored content

profile

View previous topic View next topic Back to top Message [Page 1 of 1]

 

Chatbox system disabled
Personal messaging disabled