No replies
Adam_231
Offline
newbie
Last seen: 9 years 37 weeks ago
Joined: 2012-03-01
Posts: 1
Points: 2

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);

Horizontal (desired);

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