WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

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

1Accespted Border Fri Nov 26, 2010 6:07 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Border
Learn CSS - part 13


The border lesson is a very hard one, so take a breake if you fell it's to much.
But before we start, can you see what we are going through.

• Border-width
• Border-color
• Border-style
• Mergin
• Width and height

Border-width
The border-width is in principle a mergin of: border-top-width, border-right-width, border-bottom-width and border-left-width.

There may appear one to four values, with the following interpretation:

• One value: Top, right, bottom and left got the same width value.
• Two values: Top is indicated by the first value, right do we set to the second value, bottom is assigned the value of top, and left are awarded with the value of right.
• Three values: Top is indicated by the first value, right do we set of the second value, bottom is indicated by the third value, left gets the value of the opposite page.
• Four values: Top, right, bottom and left, each have their own value.

Following values is set to indicate the width: thin, medium, thick and length.

Notice! The border-width can't get negative values.

Border-color
The border-color indicates the color of the border. This is very simple because it's the same way as writting the color to a text, the property should just be "border-color" instead of "color".

Border-style
It's also possible to chosse border-styles. Besides these can you also use 'none' (or hidden) when you not wish to display any border-style.

Here are a list of following bordertypes, that can be used.

• Solid
• Groove
• Dotted
• Ridge
• Dashed
• Inset
• Double
• Outset
• Hidden

This aren't you learning so much about by just writting these things down, so click here to se how it would look in your browser. LINK.

Mergin
Now we got out style to some content, that looks like this.
Code:
h1 {
border-width: 5px;
border-style: solid;
border-color: #333333;
}
We can write it together and it would look like this:
Code:
h1 {
border: 5px solid #333333;
}

Width and height
Whith width and height can you define the width and height of an element.
Here is a quick example shown below.
Code:
#box {
width: 300px;
height: 300px;
border: 2px solid #000000;
background: #333333;
padding: 5px;
}
That was our stylesheet called example.css
Code:
<html>
<head>
<title>Width og height</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body> <div id="box">Some content</div>
</body>
</html>
Try take a look at that in you browser, can you surely understand how it works. If you then delete the height and width, will those to sizes follow the size of the content inside the box.

That was one more lesson, in the next are we going to learn about the position.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://woops.dk

2Accespted Re: Border Sun Nov 28, 2010 4:37 pm

Jophy

Jophy
Registered Member
Registered Member
Good, Nice tutorial, unknown Data Smile

http://www.socialtechforum.com/

3Accespted Re: Border Sun Nov 28, 2010 6:45 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Thanks. I think this will be the third last one ie. 2 ones more will later come. Very Happy

http://woops.dk

4Accespted Re: Border Thu Dec 16, 2010 7:16 am

COR3 POW3R


Registered Member
Registered Member
Sorry if this is classified as a bump, but how do I apply this around field info in topics.

5Accespted Re: Border Thu Dec 16, 2010 10:07 pm

ankillien

ankillien
Administrator
Administrator
COR3 POW3R (Thu Dec 16, 2010 5:16 am) wrote:Sorry if this is classified as a bump, but how do I apply this around field info in topics.

Hi,

Which version you want it for?

6Accespted Re: Border Sat Dec 18, 2010 12:57 pm

COR3 POW3R


Registered Member
Registered Member
ankillien wrote:
COR3 POW3R (Thu Dec 16, 2010 5:16 am) wrote:Sorry if this is classified as a bump, but how do I apply this around field info in topics.

Hi,

Which version you want it for?

I think it is only PHPBB3

7Accespted Re: Border Sat Dec 18, 2010 2:15 pm

ankillien

ankillien
Administrator
Administrator
You can do it with this code...

Code:
.postprofile dl dd:nth-child(4) {
border: 1px solid #888;
}

8Accespted Re: Border Sat Dec 18, 2010 2:39 pm

COR3 POW3R


Registered Member
Registered Member
Will that also work on PUNBB?

9Accespted Re: Border Sat Dec 18, 2010 3:21 pm

ankillien

ankillien
Administrator
Administrator
No, for punBB, it will be...

Code:
.user-info {
border: 1px solid #888;
}

Sponsored content


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

Permissions in this forum:
You cannot reply to topics in this forum