Layout: few HTML and CSS issues 2

started by Jade M on Sep 23, 2007 — RSS Feed

Jade M Jade M
Posts: 3

Sorry I forgot to paste the URL of the page to have a complete glimpse of what Im trying to achieve.

http://emproduxions.net/affinity_solutions/images/test3.html -- you can refer to the rounded corners HTML and cSS problem I am encountering - how to place image and repeat them with CSS in a td.


http://emproduxions.net/affinity_solutions/images/default2.html-- the image banner is not showing above the navigation, but want 2 div to be placed on top of each other. Please see full details of this question.


I have few HTML and cSS issues that I need to achieve;
1. I want to repeat a background on a td with CSS: How can I do this? It works on top and bottom of the td horizontally, but not vertically. Let me provide the code:












About Us










--------------------
It doesn't repeat on the left and right side of the table and the image just shows 5px in width and 100% in height. But it doesn't work as it is expected to do.

Another problem is how to place 2 div on top of each other:

I am trying to combine 2 divs for the top banner and #navcontainer:
Let me provide the code:






Back to School Software Promotion

/*Start of rounded corners*/
.roundedcornr_box_141414 {
background: #ead684;
}
.roundedcornr_top_141414 div {
background: url(affinity_solutions/images/roundedcornr_141414_tl.png) no-repeat top left;
}
.roundedcornr_top_141414 {
background: url(affinity_solutions/images/roundedcornr_141414_tr.png) no-repeat top right;
}
.roundedcornr_bottom_141414 div {
background: url(affinity_solutions/images/roundedcornr_141414_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_141414 {
background: url(affinity_solutions/images/roundedcornr_141414_br.png) no-repeat bottom right;
}

.roundedcornr_top_141414 div, .roundedcornr_top_141414,
.roundedcornr_bottom_141414 div, .roundedcornr_bottom_141414 {
width: 100%;
height: 2px;
font-size: 1px;
}
.roundedcornr_content_141414 { margin: 0 2px; }
/*End of rounded corners*/
/*Start of Navigation bar stylesheet*/
div#topbanner
{
position:absolute;

}
div#navcontainer
{
background-color: #674212;
border-top: solid 1px #674212;
border-bottom: solid 1px #674212;

}

div#navcontainer ul
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}

div#navcontainer ul li
{
display: inline;
margin-left: -4px;
}

div#navcontainer ul li a
{
padding: 5px 5px 5px 5px;
color: white;
text-decoration: none;
border-right: 1px solid #EAD68A;
}

div#navcontainer ul li a:hover
{
background-color: #EAD68A;
color: #2A4371;
}

#active a { border-left: 1px solid #fff; }

/*Stylesheet of h2,p and links*/
h2 p a
{
margin:10px;
}
h2.title
{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin-bottom:3px;
font-color:black;
text-align:left;
}
p.textcontent
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-top:2px;
font-color:674212;
text-align:left;
}
a.textlinks
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-color:17486A;
text-align:left;
text-decoration:underline;
}
/*Divider in between the bundles*/
.brownline {
border-color:#674212;
border-bottom-style:solid;
border-bottom-width:thin;
padding-top:3px;
}

body {
background-repeat: repeat-x;
background-image: url(images/blue_bckgrnd.jpg);
margin-left: 0px;
}
table.2_borders
{
background-color:#EAD68A;
border:1;
border-style:solid;
}
td.repeatrght {
background-image: url(images/rght_bluebeige.gif);
background-repeat: repeat-y;
background-position: left top;
}



















 















About Us













End of rounded corners

End of footer





The nav container is a centered navigation bar created in HTML and CSS, while the top banner is just sitting there at the very top of the maincontainer. I want the top banner to be behind the navigation bar list I have created. Is there anyway to do it?

You must login to reply