Link to home
Start Free TrialLog in
Avatar of isnoend2001
isnoend2001Flag for United States of America

asked on

put a border around a css box and add a title

i am attempting to create a css rectanglar Box with a title that looks like this:
http://roofgenius.com/roofmaterialchoices.htm"]the box contains 2 rows of hyperlinks.
i have been unable to put a blue border around the whole box
and the box title is not actually part of the box.it just is located directly on top of the box.
This is probably not the proper way, especially when I move the boxes location to the middle of the page.
how can i do this ?


 
<div id= "Menutitle" style="width: 343; height: 28">
<span class="BfontWhite12">Pros and Cons of popular roofing materials.</span>
</div>
<div style="border:1px #0066cc; width:343px;">
        <div style="background-color:#eee; float:left; width:50%;">
            <div><a href="../roofmaterialchoices.htm#comp">Composition Shingles</a></div>
            <div><a href="../roofmaterialchoices.htm#shake">Wood Shakes</a></div>
            <div><a href="../roofmaterialchoices.htm#clay">Clay Tile</a></div>
            <div><a href="../roofmaterialchoices.htm#slate">Slate Roofing</a></div>
        </div>
        <div stYle="background-color:#eee; float:left; width:50%;">
            <div><a href="../roofmaterialchoices.htm#concrete">Concrete Tile</a></div>
            <div><a href="../roofmaterialchoices.htm#metal">Metal Roofs</a></div>
            <div><a href="../roofmaterialchoices.htm#hotmop">Hot Mop Roofing</a></div>
            <div><a href="../roofmaterialchoices.htm#closing">Be wary !</a></div>
        </div>
        <div style="clear:left;"></div>
    </div>

The css
#Menutitle {
	width:345px;
	padding:3px;
	background-color:rgb(0,102,204);
	line-height:17px;	
	}

Open in new window

Avatar of Adrian Crabtree
Adrian Crabtree
Flag of United States of America image

You need to have the style of border set. I assume you want a solid border.

<div style="border:1px solid #0066cc; width:343px;">

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Adrian Crabtree
Adrian Crabtree
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of isnoend2001

ASKER

thanks, glad you are here
Avatar of Chris Stanyon
If you want to avoid 'divitis', then here's a cleaner, more semantic option:

http://jsfiddle.net/ChrisStanyon/HBAsU/
Thanks ChrisStanyon i am using that code
Thanks for adding it
No worries. Your code ends up a lot cleaner and easier to manage if you use the HTML tags for their intended purpose.
Absolutely true, Chris. Sorry for not giving you better markup in the beginning, isnoend2001.
glad you guys are here.
i am going to post how to style that big table on the same page. Hope you guys get involved.
I have a lot of big tables on my site and could use the code in many places.
http://roofgenius.com/roofmaterialchoices.htm