PDA

View Full Version : Corner Box for Fixed Fixed Width Layout


Ricky55
08-05-2008, 08:12 PM
If you wanted to create a rounded corner box like the one in my attachment, how would you go about it. with CSS and HTML.

This will be of a fixed width and height. I know I could use the whole thing as a background image but with the colours being solid is there away of just having the corners as images?

Cheers

domedia
08-05-2008, 09:22 PM
Slice the top and bottom off and add as images, then use a repeating-y background for the middle.. ugly but it works.

Ricky55
08-05-2008, 10:23 PM
when you say add as images, do you mean with the img tag, that would be a bit ugly, I'd like to use them as background if I could.

webgirl
08-05-2008, 11:10 PM
I think he means having to use say Photoshop and using the image you have and slicing the top, bottom and sides and having divs that hold each image and placing the image as no-repeat for top and bottom but repeat-y to the side to get it in length. Usually the sides are 1px width of the image.
If you are not wanting to use corner images - you can do something like this:


.left_top { background:url(pictures/corner.gif) left top no-repeat #434343;}
.right_top { background:url(pictures/corner.gif) right top no-repeat;}
.left_bot { background:url(pictures/corner.gif) left bottom no-repeat;}
.right_bot { background:url(pictures/corner.gif) right bottom no-repeat; width:100%;}
.inside_title_box { padding:7px 0 3px 7px;}
h2 { font-size:1.01em; line-height:1.01em; color:#FFFFFF; font-weight:normal; padding:0 0 3px 20px;}
p {color: #FFFFFF;}


and the html:



<div class="left_top">
<div class="right_top">
<div class="left_bot">
<div class="right_bot">
<div class="inside_title_box">
<h2>☆ Categories</h2>
<p class="errmsg">alskflaskfjsdklf</p>
</div>
</div>
</div>
</div>
</div>


For the h2 you can add another div with corners if you wish just for the two top corners. You would adjust the color of the font and h2 accordingly.

Ricky55
08-05-2008, 11:36 PM
Thanks web girl.

Just been messing around, is this a decent solution, just a bit unsure about the height of the P Tag, seems to view ok in all browsers though.

http://www.qwerty-design.co.uk/boxTest.html

css

body {
margin: 0;
padding: 0;
}


div#sideBar {
margin: 40px;
width: 243px;
height: 287px;
background: url(images/bottom.gif) no-repeat 0 100%;
}

div#sideBar h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
color: #9B0000;
background: url(images/top.gif) no-repeat 100% 0;
margin: 0;
padding: 10px 0 10px 25px;
}

div#sideBar p {
margin: 0;
height: 228px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .85em;
color: #666;
background: #e9e9e9;
border-left: 2px solid #d5d5d5;
border-right: 2px solid #d5d5d5;
padding: 10px 25px 0 25px;
}


html

<div id="sideBar">
<h1>Project Details</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 1text ever since the 1500s,Lorem Ipsum has been the industry's standard dummy 1text ever since the 1500s,Lorem Ipsum has been the, </p>
</div>

Ricky55
08-05-2008, 11:38 PM
I just always feel like there's a better way of doing things.

edbr
08-06-2008, 01:07 AM
I just always feel like there's a better way of doing things.
you sound like my ex wife :)

Corrosive
08-06-2008, 06:03 AM
Slice the top and bottom off and add as images, then use a repeating-y background for the middle.. ugly but it works.

Hi Rikky. I think what Domedia is getting at is to set the images as backgrounds to your Divs. You would only need three Divs, Header, with rounded corners and the top of your box. Content with a thin slice of the main bit of the box as a background (repeated Y so that whenever you add content it just grows). Then a Footer.

Does this make sense?

edbr
08-06-2008, 06:16 AM
Rikky, see pm. hope its of use

Ricky55
08-06-2008, 09:18 AM
Thanks edbr.

I know what you mean Corrosive but I'm trying to use as much of the existing HTML as possible rather than adding a bunch of Divs.

I like the idea of the window being able to stretch in length though.

I'll check out your site edbr, thanks for that mate.

d a v e
08-06-2008, 10:50 AM
there might be something you can use or adapt or whatever here
http://www.456bereastreet.com/lab/ e.g. the teaser box thing

Corrosive
08-06-2008, 04:38 PM
I know what you mean Corrosive but I'm trying to use as much of the existing HTML as possible rather than adding a bunch of Divs.

I like the idea of the window being able to stretch in length though.



Fair enough Ricky. That's just the way I would/do do it. maybe just use the box image as the background to one div and then position the text inside using margins or padding or whatever works.