Using them DIV's

[killer-kurt]

Ok guys i need some help using Div's. I have never really used them in the past i tryed to avoid them and use tables lol so here is what i want to do but need to know how to do it.

I do poetry and i want to give one of the poems a border on my site using the images for the border. The border is 4 images, left border, right border, top and bottom border. So i need the text to be in the middle of all 4 images. Here is the page with the poem on... Click here! each image has to meet eachother so could someone please give me an example of how i would go about doing this.

Thanks!

[rangana]

Which part specifically you want the image to be seen?

[killer-kurt]

Like i said in my first post. I have 4 images, left border, right border, top and bottom border i need the text to be in these borders... in the centre so i need to know how to set it up with the left right top and bottom border with the text in side them.

[rangana]

Add this below your <div class="entry">

Code: Select all

<div id="top" style="background:white;height:5px;">&nbsp;</div>
         <div id="left" style="float:left; background:blue;height:750px;">&nbsp;</div>
         <div id="right" style="float:right; background:blue;height:750px;">&nbsp;</div>


For the bottom, add this, above its closing div.

Code: Select all

<div id="bottom" style="background:white;height:5px;">&nbsp;</div>


Hope it helps

[dflynn]

If you know how wide your lines of text will be for sure you can use an image that has both left and right vertical lines that can repeat down the page and use something like this:

HTML

Code: Select all

<div class="bordervert">
       <div class="content-container">
              <div class="content">
                Poem ges here with any text styling.
         </div>
        <div style="clear:both"></div>
    </div>
<div class="borderend">    </div>


I'm not exactly sure what clear:both does but I know that it worked for me.

css:

Code: Select all

.bordertop{
   position: static;
   float: middle;
   width: 800px;
   margin: auto;
   height: auto;
   background-image: url(images/bordertop.png);
   background-repeat: no-repeat;
}
.bordersides{
   position: static;
   float: middle;
   width: 800px;
   margin: auto;
   height: auto;
   background-image: url(images/bordersides.png);
   background-repeat: repeat-y;
}

.content-container{
   float: left;
   width: middle;
   margin-left: 35px;
   margin-right: 35px;
   margin-top: 0px;
   margin-bottom: 0px;
   height: auto;
   
   color:#000000;
   text-align:left;
   vertical-align:top;
}


.content{
   float: right;
   width: 510px;
   margin-left: 10px;
   margin-right: 0px;
   margin-top: 0px;
   margin-bottom: 0px;
   height: auto;
   background-color: #F0F0F0;
   
   color :#367497;
   text-align: left;
   vertical-align: top;
}

.borderend{
   position:relative;
   float: middle;
   width: 800px;
   margin: auto;
   height: 200px;
   background-image: url(images/borderend_12.png);
   background-repeat: no-repeat;
}


You might have to adjust some things but this should work it's taken from my own site that I haven't yet completed.

Cheers.

[rangana]

@dflynn,

I'm not exactly sure what clear:both does but I know that it worked for me.

You might find this links useful:
http://www.w3schools.com/css/pr_class_clear.asp
http://www.topxml.com/css/css_property_clear.asp
http://www.tutorialhero.com/tutorial-64 ... operty.php
http://www.zvon.org/xxl/css1Reference/O ... clear.html

@killer-kurt,
The easiest way is to create a picture of your ideal background and have it as <div class="entry">'s background.

Anyway, adding clear:both; on the bottom div's style will aide.
..and also, change the left and right div's height to 800px from the code given above