11 replies [Last post]
barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

Hey guys,

I have been researching extensively the best methods of creating rounded corners. I found a website called CSS juice which gives 25 different methods of creating rounded corners. the URL to this is http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

I have been trying the method called 'ThrashBox' which splits a design into four pieces and displays them in each of the corners to give your box, and then a body section to fill in the content.
After using the method, i have found that it isn't really working correctly. The box seems to be repeating on the left hand side, as the box isnt plush.

Can someone help me out with this? is there a reason why it is doing this? as i cant figure it out!!

heres my code:

HTML




-- Your details --






forename:">


surname:
">


Membership:
">


email:
">


Your Address

Address Line 1:






Address Line 2:



Town/City:



Post Code:



Telephone:



mobile:






CSS

/* Show only to IE PC \*/
* html .detailsWindowHeader h2 {height: 1%;} /* For IE 5 PC */

.accountDetailsWindow {
margin: 0 auto; /* center for now */
width: 29em; /* ems so it will grow */
background: url(Images/sbbody-r.png) no-repeat bottom right;
font-size: 100%;
}
.detailsWindowHeader {
background: url(Images/sbhead-r.png) no-repeat top right;
margin: 0;
padding: 0;
text-align: left;
}
.detailsWindowHeader h4 {
background: url(Images/sbhead-l.png) no-repeat top left;
/*margin: 0;*/
padding: 10px 30px 5px 0px;
color: white;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.windowBody {
background: url(Images/sbbody-l.png) no-repeat bottom left;
margin: 0;
padding: 5px 30px 31px 0px;
}

#inputfield {
border-bottom:1px dashed #00FF00;
font-weight:normal;
font-size:13px;
color:#174554;
padding:3px 3px 3px 0px;
margin:5px 5px 5px 0px;
}

Any help would be fantastic thankyou

cheers

Craig

Triumph (not verified)
Anonymous's picture
Guru

First I must ask, what does

First I must ask, what does this mean?

barbs75 wrote:
... the box isnt plush. ...

Next, we can't really help without seeing the problem. Can you show a live link? That way we can see the actual images you are using along with all of the code and not just a snippet.

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

plush.......

haha cheers for your reply triumph, and when i mean 'plush' i just basically mean that its not correct. The left side of the box is repeating or something, i cant really make out what its doing!

If you got to this URL, you can see the table, i had all this running on my localserver and my mysql database isnt working with my host at the moment, so a lot of the functionality of the page isnt working correctly atm, but in terms of seeing the graphics it will do..

visit here: http://www.go4home.co.uk/settings.php

any help welcome!!

p.s super fast reply by the way, that was impressive!!

cheers

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

tested the technique on separate documents....

Hey triumph, just tested the technique, pasting the exact code as in the example, with no other code, and it is doing the same thing as on my page for my website...

so theres obviously something wrong with the code, i thought it might have been something to do with how i had integrated it into my website....

any thoughts?

cheers

Craig

Triumph (not verified)
Anonymous's picture
Guru

barbs75 wrote:... so theres

barbs75 wrote:
... so theres obviously something wrong with the code, i thought it might have been something to do with how i had integrated it into my website....

I use the same technique on my website (link) so I'm sure it works. I did have to tweak the padding and such to get it to line up properly though.

I'll have a look in a few and see if I notice anything.

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

cheers bud...

Cheers triumph, you're a legend

Not sure if you would know how to do it, but what i really wanted to do was to create little boxes with rounded corners and headers like the ones on the euro-office website:
[url]http://www.euroffice.co.uk/

Any ideas on how i would achieve this?? i did use a technique when i was at uni...but i completely forgotten how to do it!!! was quite a long time ago! and i dont have the code to hand...

cheers mate

Craig

Triumph (not verified)
Anonymous's picture
Guru

Something on the site is

Something on the site is blocked at my end.

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

you mean for the euro-office website?

you mean you cant get on the euro-office website??

any luck with the thrashbox technique? i have tried tweaking the padding and margin values, when i made the margin -15px for the parts with the left side images, it kind of got rid of the background issue, but created a white line going through the box, so confused.....

cheers

Triumph (not verified)
Anonymous's picture
Guru

barbs75 wrote:you mean you

barbs75 wrote:
you mean you cant get on the euro-office website??

No, go4home.

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

No, go4home.

oh, weird, what does it say when you try and access the page??

try this url: http://www.go4home.co.uk/settings.php

should work?!?

barbs75
barbs75's picture
Offline
Regular
Swindon, UK
Last seen: 11 years 32 weeks ago
Swindon, UK
Joined: 2007-09-12
Posts: 45
Points: 2

SOLVED

Hey Triumph,

i figured out the problem. It was because i was using background transparancy...PNG files, meaning that the background content would show up underneath the corner images

found out when i was using another tutorial, and then it just came to me!!

cheers for your help though mate

Craig

Triumph (not verified)
Anonymous's picture
Guru

Great job.

Great job. :thumbsup: