I am testing a new layout but I can't seem to get the space between the menu items to be the same.
What and where do I change?
This is the stylesheet:
Code: Select all
body {
background:url(uploads/orange/images/bckg.jpg) repeat-x #fefefe;
margin:0;
padding:0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#525252;
}
.red {
color:#f73602;
}
a {
color:#f73602;
text-decoration:none;
}
a:hover {
color:#C7C7C7;
text-decoration:none;
}
#container {
width:1024px;
margin:auto
}
#main{
width:90%;
min-width:780px;
margin: 0 auto;
text-align:left;
}
#navbar{
height:60px;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
color:#FFFFFF;
}
#navbar ul{
margin:0px;
padding:25px 0 0 60px;
}
#navbar ul li{
display:inline;
background:url(uploads/orange/images/li.gif) no-repeat;
background-position:1px 10px;
background-color:#C7C7C7;
padding:0px 5px 5px 0px;
}
#navbar ul li a{
color:#FFFFFF;
text-decoration:none;
}
#navbar ul li a:hover{
color:#FFFFFF;
border-bottom:2px solid #f84b1d;
}
#header{
height:222px;
background:url(uploads/orange/images/head_bckg.jpg) repeat-x #fff;
min-width:780px;
}
.title {
font-family:Helvetica, Arial, sans-serif;
color:#f73602;
font-size:24px;
}
.title_dark {
font-family:Helvetica, Arial, sans-serif;
color:#535353;
font-size:24px;
}
#left_bar_header {
float:left;
width:40%;
height:160px;
padding:55px 0 0 50px;
}
#left_bar_header p{
font-family: Arial, Helvetica, sans-serif;
color:#a2a2a2;
font-size:11px;
width:300px;
}
#right_bar_header {
float:right;
width:50%;
height:222px;
text-align:right;
}
#content{
width:100%;
background-color:#FFFFFF;
padding:0;
float:left;
}
#content h1{
font-family:Helvetica, Arial, sans-serif;
color:#535353;
font-size:20px;
font-weight:normal;
padding-left:15px;
border-left:3px solid #f73602;
}
#first_column {
width:70%;
float:left;
padding:0 20px 0 10px;
margin-right:1%;
margin-left:1%;
}
#second_column {
width:20%;
float:left;
padding:0 10px 0 10px;
margin-right:1%;
margin-left:1%;
}
.gallery{
width:95%;
background-color:#fff;
padding: 10px;
float:left;
text-align:center;
}
.gallery .picture {
float:left;
margin: 5px;
width:156px;
border:solid 1px #D1D1D1;
background-color:#f2f2f2;
}
.gallery .picture_2{
float: left;
margin: 5px;
width:156px;
text-align:center;
border:solid 1px #F73602;
background-color:#f2f2f2;
}
.gallery .picture .image {
width:150px;
height:150px;
margin:3px;
}
.gallery .picture_2 .image {
width:150px;
height:150px;
margin:3px;
}
.gallery .footer {
text-align:center;
width: 156px;
border-top:solid 1px #D1D1D1;
color:#F73602;
font-weight:normal;
padding-top: 7px;
padding-bottom:7px;
margin-top: 10px;
}
#footer{
width:100%;
float:left;
padding:30px 0 30px 0;
border-top:10px solid #F3F3F3;
}
#footer a {
color:#525252;
text-decoration:none;
}
#footer a:hover {
color:#f73602;
text-decoration:none;
}
#footer .left_footer{
width:52%;
padding-left:30px;
margin-bottom:10px;
}
#footer .right_footer{
width:42%;
padding-left:30px;
}Code: Select all
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background-color: #C7C7C7;
width: 100%;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
width:100px;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
width:100px;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
color: #006699;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #C7C7C7;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #C7C7C7;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-color: #C7C7C7;
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #F6BBAB;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
