Avatar of isnoend2001
isnoend2001
Flag 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

CSS

Avatar of undefined
Last Comment
isnoend2001

8/22/2022 - Mon
Adrian Crabtree

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
Adrian Crabtree

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
isnoend2001

ASKER
thanks, glad you are here
Chris Stanyon

If you want to avoid 'divitis', then here's a cleaner, more semantic option:

http://jsfiddle.net/ChrisStanyon/HBAsU/
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
isnoend2001

ASKER
Thanks ChrisStanyon i am using that code
Thanks for adding it
Chris Stanyon

No worries. Your code ends up a lot cleaner and easier to manage if you use the HTML tags for their intended purpose.
Adrian Crabtree

Absolutely true, Chris. Sorry for not giving you better markup in the beginning, isnoend2001.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
isnoend2001

ASKER
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