can someone explain this code??

plz can someone explain each part of the code such as the padding and the absolute and relatives?? plz.. i am new to this and i kind of understand it but i am missing to understand that

.box {
	display: inline;
	margin: 1px 3px 0 3px;
	float: left; }
.boxtop {
	position:relative;
	background:url(http://img.ngfiles.com/box.gif) no-repeat 100% 0;
	margin:0 0 0 13px;
	height:13px; }
.boxtop div {
	position:absolute;
	height:13px;
	width:13px;
	left:-13px;
	background:url(http://img.ngfiles.com/box.gif) no-repeat 0 0; }
.boxtop div div { visibility: hidden; }

.boxbot {
	position:relative;
	background:url(http://img.ngfiles.com/box.gif) no-repeat 100% 100%;
	margin:0 0 0 13px;
	height:13px; }
.boxbot div {
	position:absolute;
	height:13px;
	width:13px;
	left:-13px;
	background: url(http://img.ngfiles.com/box.gif) no-repeat 0 100%;
	*background-color: #555b66;
	}
.boxbot div div { visibility: hidden; }

.boxl {
	padding:0 0 0 11px;
	background:url(http://img.ngfiles.com/borders.gif) repeat-y 0 0; }
.boxr {
	padding:0 11px 0 0;
	background:url(http://img.ngfiles.com/borders.gif) repeat-y 100% 0; }
.boxm {
	background:#25272d;
	padding: 3px 5px 3px 5px; }
.boxsizer {
	padding: 5px 5px 5px 5px; }

Code (markup):

 

a read of http://www.w3schools.com/css/css_reference.asp

might help.

 

i have already read that before and i do understand what it says there but i dont get like why the box resixzes and stuff like that

 

what does this mean?

.boxsizer {
padding: 5px 5px 5px 5px; }

 

.boxsizer = a variable name located and used in the html in <div> tags.

{padding: 5px 5px 5px 5px; } Padding (see box model)

 

yea.. but i still dont get why doesw that happen i mean with the same image(box.gif) there are a whole lot of different tables with different sizes and using the image borders.gif
how is that

 

First, without seeing the html that goes with this, we can only guess why some things are in there.

Second, from looking at it, it's probably not the best code to learn what's doing what. I see a lot of repeats, or things that probably could be written better (but I'm not sure without seeing what the person wants to have the site look like).

 

srry.... this is the html

<div class="box title">
  <div class="boxtop">
    <div></div>
  </div>
  <div class="boxl">
    <div class="boxr">
      <div class="boxm">

        <div class="headsizer">
          <div class="heading">
            <h2 class="i-info">Site News</h2>

Code (markup):

 

Hmm. That method looks vaguely familiar....

Basically the code is taking one image, and 'slicing it up'. The 'boxtop' uses a technique called 'sliding doors', putting the image top right across the entire .boxtop. .Boxtop is position:relative meaning any position:absolute's inside it

See those numbers after the no-repeat's? Those tell it where in the image should be the upper corner. (I REALLY dislike the use of 100% there, I'd have used top left and probably inverted the order).

That empty div is then absolute positioned 0 0, to show the opposite side.

BoxL and BoxR use a separate image (I could probably have done that as a single image these days) to draw the sides... you just position the background to the appropriate side, pad it in so the content overwrites the opposite side...

Hmm... Unless you understand positioning and background positioning, the above is gibberish, isn't it?

I'll write up a better example and document as I go if I have time later.

 

Ok, I wrote up a quick little tutorial on the subject:

http://battletech.hopto.org/html_tutorials/eightcorners/template.html

The technique used there is similar to what that page you are asking about uses - though it uses just one image instead of two.

Any questions fire away.

 

wow........ that helped alot really.... but i would really ask u if u could write which is the code behing .widebox plz

 

As mentioned - that outer class is just to fix the widths. The CSS for .widebox (the first example) is just:

.wideBox {
	width:640px;
}

Code (markup):

Just as the ".narrowBox" below that in the source is just width:256px; and the .dropShadowBox is width:320px;

You do know how to hit 'view source', right? Also, the directory itself is unlocked so you can look at all the sub-bits.

 

i cant do my own... ive tried alot i want it to be with this image...
it is 806px width. the left and right borders are 3px top and botom 14px so the image is 806 x 28

 

hmm strange.. why did it upload of 700 width?? is that the maximum?

 

.png and .gif have max width limits here, other formats do not though there are filesize limits on all of them (said filesize limits being a nonsensical jumble)

3px sides with 14px top/bottom, the whole thing 806px? Let's do the math.

.borderTop and .borderBottom also need their height reduced to 14px... but because of the narrower sides of the image we need to reduce their background offsets to 3px.

14px high I assume the 'rounded' part is 14px wide? If so then the width and height of the absolute positioned elements should be set to 14px... they too need thier backgrounds adjusted to the left corner of the opposite side, which would be the 3px left side plus the total width of the inner image (800px) minus that 14px, so 789px.

Then .borderLeft and .borderRight are easy - just set their padding to 3px.

.borderTop,
.borderBottom {
	height:14px;
	background:url(images/borders.png) -3px 0;
	position:relative;
	font-size:1px;
}

.borderBottom {
	background-position:-3px -14px;
}

.borderTop b,
.borderBottom b {
	position:absolute;
	top:0;
	right:0;
	width:14px;
	height:14px;
	background:url(images/borders.png) -789px 0;
}

.borderBottom b {
	background-position:-789px -14px;
}

.borderLeft {
	padding-left:3px;
	background:url(images/borders.png) top left repeat-y;
}

.borderRight {
	background:url(images/borders.png) top right repeat-y;
	padding-right:3px;
}

.borderMiddle {
	background:#DDD;
}

Code (markup):

With more complex images, I often find it helpful to look at them in photoshop/psp/gimp/what have you and use the fact the cursor position shows you the pixel position to come up with those numbers.