• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Div alignments when using corner images

 
Deepa Pillai
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I need curved images around the corner ,and am using below code ,

<div class="lfcorner">
<div class="rtcorner">
<div class="lttopcorner">
<div class="toprtcorner">
<div>
<div>AA </div>
<div>BB </div>
</div>
</div>
</div>
</div>
</div>

css for above code,

.btmlfcorner {background: url(lfcorner.gif) 0 100% no-repeat #FFFFFF; }
.btmlrtcorner {background: url(rtcorner.gif) 100% 100% no-repeat}
.lttopcorner {background: url(lttopcorner.gif) 0 0 no-repeat}
.toprtcorner {background: url(oprtcorner.gif) 100% 0 no-repeat; padding:10px}

I need text AA and BB to align in one line ,but BB is moving to next line.If i use the span and with position absolute it works , but i need to achieve this using div.

Please let me know where am going wrong in building images for corners or getting text aligned.


Thanks,
Deepa
 
Katrina Owen
Sheriff
Posts: 1367
18
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Deepa,

It looks like you are trying to use divs to replace table cells in a one-to-one map. My guess (even without knowing more about what you are trying to achieve) is that there is an easier way.

div elements are usually block elements by default, and span elements are inline elements.

You can use CSS to tell span elements to display as block elements and div elements to display inline, however if you could post a link to an image of what you are trying to achieve, we might be able to help you do so in an easier way.

Katrina
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic