11 replies [Last post]
ofi
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2005-03-05
Posts: 10
Points: 0

hi
how can i add images around div, sample http://simnet.is/hafdis/test/

i have made four images
top, botton, left, right

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

are you saying you want

are you saying you want rounded corners? maybe you can explain in more detail what the images will do, and what they are?

ofi
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2005-03-05
Posts: 10
Points: 0

Hi i have made images witch

Hi
i have made images witch i am gonna use for borders, here is sample how it would look like http://simnet.is/hafdis/test/demo.jpg if you can point me to some tutorial about, how to align images with div using css.

Mizhad
Offline
newbie
Last seen: 12 years 39 weeks ago
Joined: 2009-02-27
Posts: 2
Points: 0

hii You need to have 4 divs

hii
You need to have 4 divs not 1 and in each div you will style an image, like this

<div class="topleft">
   <div class="topright">
      <div class="bottomright">
         <div class="bottomleft">
         </div>
      </div>
   </div>
</div>
 
/* your CSS will look like this */
 
.topleft {
background: url(yourpath/topleft.jpg) top left no-repeat;
}
 
.topright {
background: url(yourpath/topright.jpg) top right no-repeat;
}
 
.bottomright {
background: url(yourpath/bottomright.jpg) bottom right no-repeat;
}
 
.bottomleft {
background: url(yourpath/bottomleft.jpg) bottom left no-repeat;
}

You can even style it like this, instead for creating 4 classes you can have only 1

<div class="maindiv">
   <div>
      <div>
         <div>
         </div>
      </div>
   </div>
</div>
 
 
/* Your CSS */
.maindiv{
background: url(yourpath/topleft.jpg) top left no-repeat;
}
 
.maindiv div {
background: url(yourpath/topright.jpg) top right no-repeat;
}
 
.maindiv div div {
background: url(yourpath/bottomright.jpg) bottom right no-repeat;
}
 
.maindiv div div div{
background: url(yourpath/bottomleft.jpg) bottom left no-repeat;
}

That is it, hope this will help to resolve your problem.... It is not necessary your images will be jpg images, png and gifs also work fine.. I forgot to tell you that the 4 images are corner images, just corner portion, the 4 corners, let us say each corner image is 15 pixel by 15 pixel and so on.

ofi
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2005-03-05
Posts: 10
Points: 0

can those images only be

can those images only be inside a div, not outside div

i am trying to add these four images to div
top
http://simnet.is/hafdis/test/top.jpg
left
http://simnet.is/hafdis/test/left.jpg (repeat)
right
http://simnet.is/hafdis/test/right.jpg (repeat)
botton
http://simnet.is/hafdis/test/botton.jpg

thx

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

This link will push you in

This link will push you in the right direction.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Here's another. There's a

Here's another. There's a JS and a non-JS version. What's nice is you can reuse the image all over the place : )

I'm no expert, but I fake one on teh Internets

ofi
Offline
newbie
Last seen: 12 years 36 weeks ago
Joined: 2005-03-05
Posts: 10
Points: 0

Hi and thx for this not

Hi and thx for this

not sure what i am doing wrong here, why does side images dont follow text when write
http://www.simnet.is/hafdis/test/test/

css

* { padding: 0; margin: 0; }
 
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 820px;
}
#header {
 color: #ffffff;
 width: 820px;
 float: left;
 padding: px;
 border:none;
 height: 10px;
 margin: 10px 0px 0px 0px;
 background-image:url(top.jpg); background-repeat:no-repeat;
}
#leftcolumn { 
 color: #333;
 border: none;
 background-image:url(left.jpg); background-repeat:repeat;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 50px;
 width: 10px;
 float: left;
}
#content { 
 float: left;
 color:#333333;
 border: none;
 background: #fffff;
 margin: 0px 0px 0px 0px;
 padding: px;
 height: 50px;
 width: 780px;
 display: inline;
}
#rightcolumn { 
 color: #ffffff;
 border: none;
 background-image:url(right.jpg); background-repeat:repeat;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 height: 50px;
 width: 10px;
 float: left;
}
#footer { 
 width: 820px;
 clear: both;
 color: #333;
 border: none;
 background-image:url(botton.jpg); background-repeat:no-repeat;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

It looks like #content need

It looks like #content need some left margin to shoe it in a bit from the edge. All the divs are as close as possible to the left side of the wrapper div-- but the actual image starts a few pixels afterwards. So push that content div to the right a little bit.

I'm no expert, but I fake one on teh Internets

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 39 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

This (in my head) seems a

This (in my head) seems a simple way of doing it:

<div id="container">
 
<img src="border-top.png" alt="border-top" />
 
<img style="float: left;" src="border-left.png" alt="border-left" />
 
<img style="float: left;" src="actual-image.png" alt="main-image" />
 
<img style="float: right;" src="border-right.png" alt="border-right" />
 
<img src="border-bottom.png" alt="border-bottom" />
 
</div>

That should work no??

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Josh Connerty wrote:That

Josh Connerty wrote:

That should work no??

No, because the images won't repeat and accommodate content of varying lengths. If you were to insert purely decorative images in the HTML the way you have, your alt attributes should be left blank.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

deepu8
deepu8's picture
Offline
newbie
Last seen: 12 years 38 weeks ago
Joined: 2009-03-07
Posts: 7
Points: 0

on this link some boarder

on this link some boarder tips are given hope that is very helpful for you...
http://www.netmechanic.com/news/vol5/css_no5.htm