How to correctly deal with this site's visual identity changes?

Eduardo Fuerte
Eduardo Fuerte used Ask the Experts™
on
Hi Experts!

I'm facing a challenge in change site's visual identity accordinlgy with:

The current header is:

 img001
Basically, obtained by using a clean basic bar:

img002
Then a css is configured to configure the contents appearence:

body {
	margin: 0;
}
#barrasp_global * { margin: 0; padding: 0; }

/*********** Barra Global 100% ***************/
#barrasp_global {
	width: 100%;
	background: #fff url(../img/img002.gif) no-repeat center top;
	text-align: center; 
	font-family: Arial, Helvetica, sans-serif;
	
}

#barrasp_global a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	background-color: transparent;
	text-align: left;
}
...

Open in new window


And after a html  that then uses the css bellow, giving the header bar funcionalities:

	<div id="barrasp_global" class="nomereceita">
		<div id="barrasp_nav">
			<ul>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Portal do Governo</a></li>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Cidadão</a></li>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Investe </a></li>
				<li><a href="http://www.xxxxx.xx.xx.xx/" target="_blank">Global</a></li>
			</ul>
            

<! -- Select box part -->

            <form action="http://www.xxxx.xx.xx.xx/xxx/js/selectbox_goto.php" method="post" onsubmit="return send(this)">-->
            <form action="" method="post" onsubmit="return send(this)">
				<fieldset class="field">
					<p><label for="selectbox_goto">Destaques:</label>
						<select name="selectbox_goto" id="selectbox_goto">
							<option value="null">Destaques:</option>
							<option value="http://www.www.xxxxx.xx.xx.xx/sis/noticias.php">SP Notícias</option>
							<option value="http://www.www.xxxxx.xx.xx.xx/">Poupapo</option>

Open in new window


Now I'm having to adapt to another visual identity:

img003
By using links and a button  list

 img004
So I'm going to eliminate the texts and put  "text links" with the same fonts type and dimensions and then a button that opens a selection box   ( how to implement the button that  load a selection box, in this case, will be another question, then)

I'm not secure in how to deal with this situation, if I'm going the correct way, since it's something very new to me, could you give me assistance and guidance ?

Thanks in advance!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
greetings  Eduardo Fuerte, I am not understanding what kind of advice or guidance you could use for doing this? ? ?
To change to another NAV bar display, requires that you know about the display properties of the bar and it's contents, the HTML and the many CSS that will give it the positions and "Look" that you now want to have.

From it's appearance it looks like you are using another developers distributed "Nav Bar" code? ?
Or is this all your code?

This new bar has custom display "select" dropdowns, that I do not think use the DOM system <select> element? So if you want to use more than one of those, you can use the example code you already have for your "Links de Governo" dropdown.

But I do not know how that is done, or what you want for suggestions to help you do this?

When I do "New" page display elements like bars and menus, I sometimes try several different bars or menus in a test page, one above the other, to see what the visual differences are for several very different display styles, to see what fits best with the artistic "Theme" of that page? ?
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Thank you

I had another completelly deiferent solutiuon - very simple.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial