www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Rounded box - not quite there - please help !

  1. #1
    Join Date
    Jul 2004
    Location
    UK
    Posts
    518

    resolved [RESOLVED] Rounded box - not quite there - please help !

    Hello,
    I have been trying to adapt a rounded corner css for the size I need to use.

    It is nearly right but the bottom corners just wont get sorted

    Here is the complete test script including the css and php.

    I've been playing with the variables for hours but can not make it work - so I'd really appreciate some help - thanks

    PHP Code:
    <?php
    $image1 
    "none";
    $Ad_detail "something.html";
    $event "An Amazing Event";
    $Dcat "Disco";
    $Dloc_sht "Brixton Town Hall";
    $Dprice "35.00";
    $desc_sht "This is a test advert set-up to look at the style and is not a real advertisement, as I think you can guess.";
    ?>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Bullet Test</title>

    <style type="text/css">
    .curvy {position:relative; width:560px; height:74px; background:#08c; color:#000; margin:5em auto;}
    .ctl, .ctr {position:absolute; width:12px; height:10px; color:#08c; background:#9cf;overflow:hidden;}
    .cbl {position:absolute; width:14px; height:20px; color:#08c; background:#9cf;overflow:hidden;}
    .cbr {position:absolute; width:14px; height:20px; color:#08c; background:#9cf;overflow:hidden;}
    .ctl {top:0px; left:0px; }
    .cbl {top:54px; left:0px; }
    .ctr {top:0px; left:550px; }
    .cbr {top:54px; left:550px; }
    .quadtl, .quadtr, .quadbl, .quadbr {position:absolute; font-size:80px; font-family:arial; color:#08c;line-height:40px;}
    .quadtl {left:-4px; top:-10px; }
    .quadtr {left:-14px; top:-10px;}
    .quadbl {left:-4px; top:-10px;}
    .quadbr {left:-14px; top:-10px;}
    .txt {position:absolute; top:0px; left:20px;}

    .row_style{
         height:60px;
      width:500px;
        font-family:Tahoma, Tunga, sans-serif; 
        font-size:14px;
        text-align:left; 
        color:#000099; 
        font-weight:normal;
        vertical-align:top;
    }

    .ad_picture1{
      width:80px;
        }

    .ad_top_row{
      color:#000099;
        }
                
    .ad_bottom_row{
      height:50px;
        font-size:12px;
        color:#000099;
        }

    </style>

    </head>
    <body style = "background:#9cf;" >

    <div class ="data" style='position:absolute; left:200px; top:200px;' >
    Events Calender:
    <br>
    <div class="curvy" style = "position:relative;top:-60px; left:0px;" >
    <div class="ctl"><div class="quadtl">&bull;</div></div>
    <div class="cbl"><div class="quadbl">&bull;</div></div>
    <div class="ctr"><div class="quadtr">&bull;</div></div>
    <div class="cbr"><div class="quadbr">&bull;</div></div>
    <div class="txt">
    <table class = "row_style" >
    <tr><td rowspan='2'class="ad_picture1">
      <?php 
        
    if($image1 != "none" ){
           echo 
    "some stuff";}
            else { 
                echo 
    " ";}
        
    ?></td>
     <td class="ad_top_row">
     <?php echo "<a href='$Ad_detail'  >
     <b>
    $event</b></a> $Dcat $Dloc_sht $Dprice"?>
     </td>
    </tr>
    <tr>
        <td class = "ad_bottom_row"><?php echo "$desc_sht<a href='$Ad_detail' rel=\"external\" onclick=\"var w = window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars'); w.focus(); return false\" >
            <b> more.</b></a> "
    ?></td>
    </tr>        
    </table>
    </div>  <!-- end of txt -->
    </div>  <!-- end of curvy -->
    </div> <!-- end of info -->

    </body>
    </html>
    As you can see it uses a bullet for the corner.
    Hope you can help

    Thanks
    Developers Choice Revealed: www.devchoice.info
    Who has won, and why ?

  2. #2
    Join Date
    Oct 2006
    Location
    Cardiff, Wales, UK
    Posts
    48

    Relpy

    Er, not sure why you would use bulletpoints for corners - if your width is fixed, you could use images to do it. Assign one image to the top of the element, and then a bottom-aligned image to the actual element content - this will also make it scalable & much, much less markup. Had a recent similar thing knocking round my desktop, so have a look below...

    Just replace the <p> with your content (probably better without the table too)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    .box {
    clear: both;
    background: url(http://www.timdenton.co.uk/test/sidebox03_top.gif) top left no-repeat;
    width: 170px;
    padding: 14px 0 0 0;
    margin: 0;
    }
    .box p {
    font-size: 0.9em;
    background: url(http://www.timdenton.co.uk/test/sidebox03_bottom.gif) bottom left no-repeat;
    padding: 0 10px 10px 10px;
    margin: 0;
    }
    </style>
    </head>

    <body>

    <div class="box">
    <p>Your content goes here... And as you can see, no matter how big the text gets, it still holds together... Well, within reason!</p>
    </div>

    </body>
    </html>
    Tim Denton

    Graphic Designer for web, multimedia and interactive in Cardiff, Wales, UK.

    http://www.timdenton.co.uk

  3. #3
    Join Date
    Jul 2004
    Location
    UK
    Posts
    518
    Thanks,
    Thats very nice,
    I tried to adjust it to the width I wanted ... but of course because it is imaged based, I can't do it !

    The reason for the bullet point and css is so that it is fully sizable and colorable.

    I just need to get those bottom corners sorted out.
    Developers Choice Revealed: www.devchoice.info
    Who has won, and why ?

  4. #4
    Join Date
    Oct 2006
    Location
    Cardiff, Wales, UK
    Posts
    48
    Well, you can always create a new image to suit your desired width. Can't offer any advice on the bulletpoints - never really done it that way.
    Tim Denton

    Graphic Designer for web, multimedia and interactive in Cardiff, Wales, UK.

    http://www.timdenton.co.uk

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles