CMS Made Simple Forums

Posted: **Wed Mar 07, 2012 4:04 pm**

Hi everyone. I am new to CSS so please bear with me. I have a container positioned in the header. The background of the container is colored dark red. I place an image in the right side of the container. I am trying to place the image so it has a border around it of the same color of the container background. I hope this makes since.

I also tried to create two containers (<div></div>) and place them inline with each other but the second container gets forced to a new line.

Anyway, the webpage is located here so you can see what I'm trying to do...www.trainmydept.com.

Thanks,
dodgebros

Posted: **Wed Mar 07, 2012 4:09 pm**

Add padding to the header, 2px will show that much of the background color...

Posted: **Thu Mar 08, 2012 4:25 pm**

Thanks Dr. CSS. I now have this problem solved, but would like to overlay some text in the header over the left part.

Here is my html code:

<!DOCTYPE html>
<__html>
<head>
<title>TITLE GOES HERE</title>
{cms_stylesheet}
<meta name="description" contects="" />
</head>
</__body>
<div id="container">
<div id="header_left">
</div>
<div id="header_right">
</div>
<div id="top-navi">
<ul class="clearfix">
<li><a href="#"> Our Company </a></li>
<li><a href="#"> Products </a></li>
<li><a href="#"> Client Center </a></li>
<li><a href="#"> Contact Us </a></li>
<li><a href="#"> Sitemap </a></li>
</ul>
</div>
<div id="content">
<h1>Our Company</h1>
<p>
Content goes here
</p>
<p>
More content
</p>
</div>
<div id="sidebar">
<ul class="clearfix">
<li><a href="#"> Announcements </a></li>
<li><a href="#"> History </a></li>
<li><a href="#"> Team </a></li>
<li><a href="#"> Photo Gallery </a></li>
</ul>
</div>
<div id="footer">
2009 businessWorld
</div>
</div>
<__body>
</__html>

Here is my CSS code:

body
{
background:#ebebeb;
font-family:sans-serif;
font-size:12px;
}
#container
{
width:800px;
margin:25px auto;
}
#top-navi ul
{
height:22px;
padding:0px;
margin:10px;
border-top:1px solid #e5e4e2;
border-bottom:1px solid #e5e4e2;
}
#top-navi li
{
list-style:none;
float:left;
}
#top-navi li a
{
color:#a2a2a2:
text-decoration:none;
display:block;
padding:5px 15px;
}
#top-navi li a:hover
{
color:#ffffff;
background:#3d648a;
}
#header_left
{
display: inline-block;
height: 161px;
width: 636px;
background-position: top left;
background-color: #BE2015;
background-repeat: no-repeat;
font-family: "Times New Roman";
font-size: 12;
font-style: normal;
}
#header_right
{
display: inline-block;
height: 153px;
width: 153px;
padding: 1px;
border-color: #BE2015;
border-style: solid;
border-width: 3px;
background-image: url(/uploads/BusinessWorld/clover.jpg);
background-position: top right;
background-repeat: no-repeat;
}
#header_text
{
font-family:serif;
letter-spacing:3px;
color:#ffffff
font-size:48;
border:1px solid #c48769;
}
#content
{
width:540px
float:left;
background:#ffffff;
padding:10px;
margin-bottom:20px;
}
#sidebar
{
width:200px;
float:right;
background:#ffffff;
padding:10px;
margin-bottom:20px;
}
#footer
{
clear:both;
width:780px;
background:#BE2015;
padding:10px;
font-size:11px;
color:#ffffff;
font-weight:bold;
}
#footer a
{
color:#eeeeee;
text-decoration:none;
font-weight:normal;
{
h1
{
color:#062d53;
font-size:20px
}

Here is url again: www.trainmydept.com

Thanks;
dodgebros

Posted: **Fri Mar 09, 2012 8:51 pm**

Looks like you took the logo out of the header div...

CMS Made Simple Forums

How to add border around image?

How to add border around image?

Re: How to add border around image?

Re: How to add border around image?

Re: How to add border around image?