Box like Sitepoint

HTML & CSS
1

hi there , iam interested in how did you done the boxes arround the content
like on xxxx://articles.sitepoint.com/
(the left content Topics)
This Box arround that content

2

The wonderful thing about the web is that you can view the code for any webpage’s design, and see how some effect was achieved. Right click the page and click on “View Source” to see the HTML markup. Look in the head for the URLs of the stylesheets and find the rules associated with the boxes you like.

3

If you have firebug (if not download it, it’s for Firefox) then you can right click an element and view the HTML up close and personal for that section and even see the CSS being applied to it :slight_smile:

4

Hi,

It’s basically a normal bordered box with this image placed absolutely over one of the corners to create the bullet effect and to rub out some of the line. The rest is just tidying up and making it fit nicely.

Actual code:


#content div h3  { /* groovy floating topright headings */
  font:  normal .9em Verdana, Arial, Helvetica, sans-serif;
  height:1em;
  padding:2px 1.5em 4px .5em;
  clear: right;
  color:#99ACCA ;
  background:transparent url(/images/new/bulletr.gif) right center no-repeat;
  margin:0;
  position:absolute;
  right:-1px;
  top:-9px;
  border:0 none;
}

As already mentioned you can always find out how something is done by viewing the source html and CSS using Firebug or something similar.

Here is a live example I prepared earlier as this question has been asked before.:slight_smile:

5

hi pual, thanks for your reply.
iam not so the expert with css. when i take the sample from your demo
.box{
width:300px;
float:left;
position:relative;
margin:20px;
border:1px solid #cad6e8;
background:#fff;
}
h3.title{
color:#99acaa;
font-size:100%;
position:absolute;
top:-9px;
margin:0;
right:-1px;
background:url(images/bulletr2.gif) no-repeat 100% 7px;
padding:0 25px 0 10px;
}
p{margin:1em 10px 1em}

the box will display fine. but not the h3
could it be that the h3 tag conflicts with other tags?
how can i say that this h3 tag is only for the box tag ?

greetings

6

Hi,

The h3 element has a class of “title” applied to it so make sure you have added the class correctly.

Then check through your stylesheet for any “global rules” that you may have set for the h3. That will be any rules in the stylesheet where you have said something like:

h3 {float:left;margin:100px;etc…}

That is a global rule that will affect all h3s in the page.

After you have found all the rules that are applied to the h3 you can then cancel them out in the .title class.

e.g.


h3.title{
margin:0;
float:none;
}

It is better not to set global rules for anything other than the basics (margin,padding,font etc.) otherwise you have to cancel them all out if you want something different. It all depends on the job in hand though and if you are sure an element is never to be used anywhere else you can define it globally.

You could of course change the h3 in my example to another perhaps more suitable element for your structure as css doesn’t care what an element looks like (most of the time) and you could change it to an h4 instead or whatever fits in with the logic and structure of the page.

7

Hi Paul, when i use in a blank stylesheet

.boxes {
BORDER-BOTTOM: #c0d0e0 1px solid; BORDER-LEFT: #c0d0e0 1px solid; PADDING-BOTTOM: 15px; MARGIN-TOP: 20px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; MARGIN-BOTTOM: 15px; BACKGROUND: #f9faf9; COLOR: #333; CLEAR: both; OVERFLOW: hidden; BORDER-TOP: #c0d0e0 1px solid; BORDER-RIGHT: #c0d0e0 1px solid; PADDING-TOP: 7px
}

Content DIV H3 {
BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; PADDING-BOTTOM: 4px; MARGIN: 0px;
PADDING-LEFT: 0.5em; PADDING-RIGHT: 1.5em; FONT: 0.9em Verdana, Arial, Helvetica, sans-serif;
BACKGROUND: url(…/images/bulletr.gif) no-repeat right center; HEIGHT: 1em; COLOR: #99acca;
CLEAR: right; BORDER-TOP: 0px; TOP: -9px; RIGHT: -1px; BORDER-RIGHT: 0px; PADDING-TOP: 2px
}
Content DIV H3 IMG {
MARGIN: -3px 0px
}

and in the html
<div class=“boxes”>
<h3>About the Author</h3>
it does’nt work. the box will be shown fine. but not the bullet. did i miss something others ?

8

Hi,

Refer to my actual example as it is a stand alone example (view source) and not the sitepoint code as you don’t have a structure the same as sitepooint.

For example unless you have your example nested inside an element called Content then this rule will not work.


[B]#content[/B] DIV H3 {

If you do have Content in your page then I expect you are using the weight to over-ride previous rules but it would make more sense to define .boxes instead of div.


#content .boxes h3 {

It may be better if you post all your html and css or instead provide a link to the actual page so we can debug more easily.

As an aside don’t change the case of the css rules as it is ugly and hard to read and prone to errors. Keep your rules organised and on separate lines to make debugging easier.

e.g.


.box {
    width:300px;
    float:left;
    position:relative;
    margin:20px;
    border:1px solid #cad6e8;
    background:#fff;
}
h3.title {
    color:#99acaa;
    font-size:100&#37;;
    position:absolute;
    top:-9px;
    margin:0;
    right:-1px;
    background:url(images/bulletr2.gif) no-repeat 100% 7px;
    padding:0 25px 0 10px;
}
9

Thanks now it works, i use a new blank stylesheet

10

Is this technique more reliable (or less buggy) than using a standard fieldset and legend tag?

11

fieldsets and legends are hard to style property in FIrefox, and getting consistant results cross-browser is extremely hard, so if you want to compare these two, then yes it’s more reliable :slight_smile:

12

And just to clarify that fieldsets and legends are only semantically correct when used for form elements and would not be correct for the box above :slight_smile: (I’m sure you knew anyway but just in case someone else was listening in)