/    Sign up×
Community /Pin to ProfileBookmark

[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 ?

[code=php]
<?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>[/code]

As you can see it uses a bullet for the corner.
Hope you can help

Thanks

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@timdentyOct 18.2006 — 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>
Copy linkTweet thisAlerts:
@DaveinLondonauthorOct 18.2006 — 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.
Copy linkTweet thisAlerts:
@timdentyOct 18.2006 — 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.
×

Success!

Help @DaveinLondon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...