SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Curved Edges won't work ?

    Hello, sorry to bother you all, and this is probably a rookie question

    I am designing a web site, and i'm using css

    I want to make some div's with curved edges, and this works with one div but i want to make the rest curved but this does not work.

    Here's a snapshot: http://img103.imageshack.us/img103/3443/design2gd9.jpg -- the black box inside the green one is the problem

    Here's what a want the div to look like: http://img66.imageshack.us/img66/8249/divjc2.jpg

    here is the html code of the page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="syle2.css" rel="stylesheet" type="text/css">
    </head>
    
    <body><div id="main"><div class="tlm"><div class="blm"><div class="brm"><div class="trm"><div id="logo">   </div><div id="lg-icon">   </div>
      <div id="lg-icon"><img src="home3.gif"></div><p>&nbsp;</p><div id="small-icons"><A HREF="somewhere.html"
    onmouseover="document.sub_but.src='home2.gif'"
    onmouseout="document.sub_but.src='home1.gif'">
    
    <IMG SRC="home1.gif" BORDER="0" 
    ALT="Move your mouse over me" NAME="sub_but">
    </A></div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <div id="heading"> 
        <div class="t">
    	  <div class="b">
    		<div class="l">
    		  <div class="r">
    			<div class="blh">
    			  <div class="brh">
    				<div class="trh">
                      <div class="tlh">&nbsp;<div id="title"><div class="blt"><div class="brt"><div class="tlt"><div class="trt">Welcome</div></div></div></div></div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div></div></div></div></div></div></div></div></div>
       
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      
    
    
    </div>
    </body>
    </html>
    and here's the css

    Code:
    body {
    	margin: 0px;
    	padding: 0px;
    	background-color: #383838;
    	font-family: tahoma, arial, sans-serif;
    	font-size: 8pt;
    	background-image:url(body_bg.gif)
    }
    
    p, td, input, select, a {
    	font-family: tahoma, arial, sans-serif;
    	font-size: 8pt;
    }
    
    #main {background-color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin:20px 20px 20px 20px;}
    
    .tlm {background-image:url(tlm.bmp); background-position: 0 0; background-repeat:no-repeat;}
    .trm {background-image:url(trm.bmp); background-position: 100&#37; 0; background-repeat:no-repeat;}
    .blm {background-image:url(blm.bmp); background-position: 0 100%; background-repeat:no-repeat;}
    .brm {background-image:url(brm.bmp); background-position: 100% 100%; background-repeat:no-repeat;}
    
    #logo {
    	margin: auto;
    	width: 202px;
    	height: 160px;
    	background-image: url(logo.gif)
    }
    #lg-icon {float:left; margin-left: 30px; width:auto; height:auto; background-image: url(home3.gif); background-repeat:no-repeat;}
    
    #small-icons {float:right; margin-right: 100px; width:auto; height:auto;}
    
    #heading {height:300px; width:auto; margin: 30px 30px 30px 30px; font-family:Arial, Helvetica, sans-serif; background-color:#FFFFFF;}
    
    #title {width: 98%;height:20px; background-color:#000000;font-color: #ffffff; margin: 0 10px 10px 10px;}
    
    
    .tlh {background:url(tlh.gif); background-position: 0% 0%; background-repeat:no-repeat;}
    .trh {background:url(trh.gif); background-position: 100% 0%; background-repeat:no-repeat;}
    .blh {background:url(blh.gif); background-position: 0 100%; background-repeat:no-repeat;}
    .brh {background:url(brh.gif); background-position: 100% 100%; background-repeat:no-repeat;}
    
    .t {background: url(dot.gif) 0 0 repeat-x;}
    .b {background: url(dot.gif) 0 100% repeat-x}
    .l {background: url(dot.gif) 0 0 repeat-y}
    .r {background: url(dot.gif) 100% 0 repeat-y}
    
    .cbl {background: url(cbl.png) 0 100% no-repeat #e9eef1; width: 100%}
    .cbr {background: url(cbr.png) 100% 100% no-repeat}
    .ctl {background: url(ctl.png) 0 0 no-repeat}
    .ctr {background: url(ctr.png) 100% 0 no-repeat; padding:10px}
    
    .blt {background:url(blt.bmp)  0 100% no-repeat;}
    .brt {background:url(brt.bmp) 100% 100% no-repeat;}
    .tlt {background:url(tlt.bmp) 0 0 no-repeat;}
    .trt {background:url(trt.bmp) 100% 0 no-repeat;} 
    
    
     .bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
    .br {background: url(br.gif) 100% 100% no-repeat}
    .tl {background: url(tl.gif) 0 0 no-repeat}
    .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
    .clear {font-size: 1px; height: 1px}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    This is a little hard to debug without seeing the images you are using but I'm guessing that your problem stems from here:

    Code:
    #title {width: 98&#37;;height:20px; background-color:#000000;font-color: #ffffff; margin: 0 10px 10px 10px;}
    The 20px is higher than the height of the content and the borders are drawn inside that div. If you remove the height the whole thing should collapse to content height and display as you want (with any luck)

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    THANK YOU SO MUCH! it works !!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •