NAV Bars & CSS

[Adam_231]

Hi All!

Please excuse what I believe is possibly a stupid question but I'm not very experienced in Web Design, normally I can just about get by!

We have web based Print Management software which allows for customisation of some of its web elements. The CSS file is available to customise, all of which is fairly straightforward. However, in the product admin guide it shows that the NAV bar of the webpage can be positioned vertically (which is default) or horizontally.

I can customise virtually all the content I need to with the exception to having the NAV bars orietation horizontally. I asked the software vendor if they could show me an example of how to acheive this and they said they didn't have an example but all is needed is to use the display:inline rather than display:block. The difficulty is there is no display:block contained in the CSS file. I've tried various things to no avail and am hoping one of you experts can assist!

See below for the example images from the guide;

Vertical (current);

http://i42.tinypic.com/xnfc6h.jpg

Horizontal (desired);

http://i42.tinypic.com/14l3l7c.jpg


I've copy/pasted the CSS code below;

/**
* Palette:
* #FFFFFF - white - background, text
* #005779 - Company Blue
* #00A9E4 - blue - h1/h2
* #3D9EEB - blue - links
* #D6D6D6 - grey - table background
* #000000 - black - text color
* #9C9E9F - grey - text, borders, heading text
*/
body, div#content {
background-color: #FFF;
font-family: verdana,arial,sans-serif;
font-size: 10.4px;
color: #000000;
}

div#header {
color: #FFF;
background-color: #005779;
border-bottom: 1px solid #9C9E9F;
padding-left: 10px;
}

div#main {
padding-top: 10px;
padding-left: 220px;
}

a:link,
a:visited {
color: #3366CC;
text-decoration: none;
font-size: 10.4px;
}

a:hover {
color: #173E8B;
text-decoration: underline;
font-size: 10.4px;
}

h1, h2 {
color: #00A9E4;
font-size: 11.4px;
font-family: verdana,arial,sans-serif;
text-transform: uppercase;
}

table.userDataTable th,
table.results th,
table.results th a:link,
table.results th a:visited {
background-color: #D6D6D6;
color: #000;
text-align: left;
font-size: 10.4px;
text-transform: uppercase;
font-weight: 400;
}

table.userDataTable tr.oddRow,
table.results tr.odd {
background-color: #D6D6D6;
}

table.results {
font-size: 10.4px;
text-transform: uppercase;
}

div#footer {
font-family: verdana,arial,sans-serif;
color: #FFF;
font-weight: bold;
background-color: #005779;
font-size: 10.4px;
border-top: 1px solid #000000;
}

/* navigation menu */

div#nav {
color: #9C9E9F;
top: 134px;
height: auto;
width: 165px;
background-color: #FFF;
border-style: solid;
border-width: 1px;
border-color: #005779;
}
div#nav .top {
color: #FFFFFF;
background-color: #005779;
font-size: 12px;
font-weight: bold;
padding: 5px 10px 5px 10px;
text-transform: uppercase;
border-style: solid;
border-width: 1px;
border-color: #005779;
}

/* nav tabs */
div#nav a,
div#nav a:link,
div#nav a:active,
div#nav a:visited,
div#nav a:hover{
color: #9C9E9F;
background-color: #FFF;
font-size: 10.4px;
font-weight: normal;
text-transform: uppercase;
border-style: solid;
border-width: 1px;
border-color: #005779;
}

/* current page nav tab */
div#nav strong a,
div#nav strong a:link,
div#nav strong a:active,
div#nav strong a:visited,
div#nav strong a:hover {
color: #005779;
font-size: 10.4px;
background-color: #FFFFFF;
font-weight: bold;
text-align: left;
text-decoration: underline;
}

/* mouseover nav tabs*/
div#nav a:hover,
div#nav strong a:hover {
color: #FFF;
font-size: 10.4px;
background-color: #005779;
font-weight: normal;
text-align: left;
text-decoration: none;
}




Thanks in advance!

Adam

[AnnaS1980]

I believe this is how it looks
CSS code
nameplate
width:780px;
height:125px;
background-image:urlnameplate.jpg;


#left
width:270px;
height:300px;
background-color:#3399FF;
float:left;


#right
width: 510px;
height: 300px;
background-color:#333;
float:right;


HTML DOC
<div id ="container">
<div id="nameplate">
nameplate
</div>

<div id="left">
left box
</div>

<div id="right">
right box
</div>
</div>

Make a style to center the container div and all should move to the center. Dont hold me to this, but I think thats close.

#container
width:780px;
margin: 0 auto;


Put this just above the #namplate CSS code. It should be the first one. Hope that all makes some sense.