menu sourmenage!

**Dano** · Apr 7, 2005, 13:51

Hi, I have this problem with the menu. I think its simple but i cant fix it it. I hope some hero (i.e. Paul O'Brien) read my post.

The question is about the differences between ie, moz, ns (see attachment).

**Paul O'B** · Apr 7, 2005, 15:42

lol - I've never been called a hero before

It just seems you need to work out your padding margins and heightn a bit more consistently.

Code:

#navcontainer 
{
 height: 34px;
 font: normal 12px arial, serif, Times, Times New Roman, Georgia;
 padding:1px 0 ;
 font-variant: small-caps;
 background: transparent;
 border: 1px solid #3e556e;
 margin: 0;
}

#nav
{
position: relative;
float: left;
height: 34px;
margin: 0px 0 0px 7px;
padding: 0;
line-height:34px
}
#nav p{margin:0;padding:0}
#nav p a 
{
 background: transparent;
 margin: 0; 
 font-weight: normal;
 padding:0px 7px;
 text-decoration: none;
 float: left;
}
 
 
#searchpos 
{
float: right;
margin: 3px 3px 0px 0;
padding: 0;
display:inline;
}

Take out the break tag from here also:

Code:

	  <div id="searchpos"> 
		<form class="FSF_form" action="resultados.html" method="post">
		  <input class="FSF_input" type="text" name="search" value="" />
		  <input class="FSF_submit" type="submit" name="sub" value="Buscar" />
		</form>
	  </div>

Heres the whole page in case I missed something:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pura Persuasion | Introducción</title>
<meta name='description' content='Consultores en Estrategias de comunicación, Relaciones Públicas, Marketing, Prensa e internet' />
<meta name='keywords' content='web, relaciones públicas, prensa, marketing, contenido, consultores, comunicación' />
<meta name='author' content='Pura Persuasion' />
<meta name="robots" content="index, follow, all" />
<meta name="rating" content="general" />
<meta name="copyright" content="Copyright © 2005" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css"></style>
<link href="assets/site/principal.css" rel="stylesheet" type="text/css" />
<style>
body 
{
 background: #2f3f53; 
 margin: 10px auto;
 padding: 10px 0 0 0;
 text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px/18px;
 color: #000000;
 height: 100%;
}

#container 
{
 margin: 0px auto;
 text-align: left;
 width: 692px;
 background: transparent;
 }

/* --- HEAD --- */
#header 
{
 background: transparent;
 
}

#name 
{
padding: 18px 0 0 10px;
}

h1 a:link, h1 a:visited, h1 a:hover
{
 font: normal 23px Georgia, Times New Roman, Times, serif;
  color: #ffffff;
 text-decoration: none;
 letter-spacing: 1px;
 background-color: transparent;
}
/* --- FIN HEAD --- */

/* --- NAVIGATION --- */
#navcontainer 
{
 height: 34px;
 font: normal 12px arial, serif, Times, Times New Roman, Georgia;
 padding:1px 0 ;
 font-variant: small-caps;
 background: transparent;
 border: 1px solid #3e556e;
 margin: 0;
}

#nav
{
position: relative;
float: left;
height: 34px;
margin: 0px 0 0px 7px;
padding: 0;
line-height:34px
}
#nav p{margin:0;padding:0}
#nav p a 
{
 background: transparent;
 margin: 0; 
 font-weight: normal;
 padding:0px 7px;
 text-decoration: none;
 float: left;
}
#nav a:link, #nav a:visited 
{
  color: #cccccc;
}

#nav a:hover
{
 color: #ffffff;
background: #3e556e; 
 
}
 
#nav a.current:link, #nav a.current:visited
{
 color: #ffffff;
background: #3e556e; 
 
}

/* --- flex search form --- */
#searchpos 
{
float: right;
margin: 3px 3px 0px 0;
padding: 0;
display:inline;
}
#searchpos form
{
margin: 0;
padding: 0;
}

.FSF_submit
{
background-color: #3e556e;
color: #ffffff;
margin-left: 7px;
}

.FSF_pages
 {
float: right;
}
.FSF_pagination
{
float: left;
}
/* --- FIN flex search form --- */
/* --- FIN NAVIGATION --- */

/* --- SECTOR CONTENIDO --- */
#midcontainer 
{ 
 border: 1px solid #2f3f53;
 padding: 0;
 margin: 0;
 background: #ffffff url(http://www.purapersuasion.com.ar/images/doblefondo.jpg) repeat-y;
 font-size: 75%;
}
#content {
 float: left;
 width: 360px;
 padding: 0px 22px 70px 30px;
 line-height: 16px;
 background: transparent;
}

#secondary
{
float: right;
width: 250px;
background: transparent;
padding: 0px 10px 0px 0px;
} 

#ultralist li, #secondary li
{
margin: 2px 0 20px -10px;
} 

#black {
 position: relative; 
 padding: 15px 300px 20px 22px;
 font-size: 90%;
 background: #000000;
 color: #cccccc;
 clear: both; 
}

#black a:link, #black a:visited
{
color: #cccccc;
font-weight: bold;
}
#black a:hover
 {
 color: #006699;
 }
/* --- FIN SECTOR CONTENIDO --- */

/* --- FOOT --- */

#footer { 
 padding: 20px;
 
}
#footer p, #footer a 
{
 margin: 0;
 text-align: left;
 font-size: 9px;
 color: #cccccc;
}
 
/* --- FIN FOOT --- */

/* --- VARIEDADES VARIAS Y MENTALIDADES VARIAS--- */
a {
  color: #800000; 
 font-weight: bold;
}
a:visited {
  color: #666666;
 font-weight: bold;
}
a:hover {
 color: #006699;
 }

/* --- css del listindexer --- */
h2
{
font: 23px Georgia, Times New Roman, Times, serif;
color: #800000;
font-variant: small-caps;
}	

#content h2, #secondary h2
{
 margin-top: 40px;
 
}

h3
{
font-size: 100%;
font-weight: bold;
}

span.LIn_date 
{
font-size: 90%;
color: #888888;
margin-top: 3px;
}	   

span.LIn_desc 
{
font-size: 90%;
color: #888888;
margin: 3px 0 20px 0;
} 

.clear
{
clear: both;
height: 20px;
background: transparent url(http://www.purapersuasion.com.ar/images/border4.jpg) no-repeat top right;
}
	 
img
{
border: 0;
float: left;
}			

</style>
</head>
<body>
<!-- Begin Container -->
<div id="container"> 
  <div id="header"> 
	<div id="name"> 
	  <h1><a href="home.html"title="puro contenido persuasivo">Pura Persuasión</a></h1>
	</div>
	<!-- End name -->
	<!-- Begin navigation -->
	<div id="navcontainer"> 
	  <div id="nav"> 
		<p><a class="current" href="home.html" title="puro contenido persuasivo">home</a> 
		  <a href="servicios.html" title="servicios">servicios</a><a href="quienessomos.html" title="quienes somos">quienes 
		  somos</a> <a href="ultra.html" title="ultra contenido persuasivo">ultra</a> 
		  <a href="contacto.html" title="contactenos">contactenos</a></p>
	  </div>
	  <!-- Begin search position -->
	  <div id="searchpos"> 
		<form class="FSF_form" action="resultados.html" method="post">
		  <input class="FSF_input" type="text" name="search" value="" />
		  <input class="FSF_submit" type="submit" name="sub" value="Buscar" />
		</form>
	  </div>
	  <!-- end searchpos -->
	</div>
	<!-- End navcontainer -->
  </div>
  <!-- end header -->
  <div id="midcontainer"> 
	<!-- Begin black -->
	<div id="black"> 
	  <p>Desde 1998, utilizamos la comunicación de un modo estratégico y no convencional 
		para acercar a las empresas con sus públicos <a href="servicios.html" title="nuestros servicios">(más...)</a></p>
	</div>
	<!-- End black -->
	<!-- Begin Content -->
	<div id="content"> 
	  <h2>Introducción</h2>
	  <p>Si su empresa necesita conquistar una posición en el mercado, lanzar 
		un nuevo producto o servicio, desarrollar u obtener <a href="rrppyweb.html">mejores 
		resultados con su sitio</a> de internet, comunicarse más efectivamente 
		que la competencia, <a href="espaciogratis.html">tener presencia en los 
		medios</a>, este sitio es para Usted.</p>
	  <p>Nuestra visión es integral, porque <strong>la finalidad de la comunicación 
		es siempre la conquista</strong>.</p>
	  <p>Sabemos que la comunicación es un producto que toda empresa posee. Este 
		producto ya existe. Nuestra misión es desarrollarlo eficazmente. Nuestras 
		herramientas son Relaciones Públicas, Prensa, Marketing y web.</p>
	</div>
	<!-- End Content -->
	<div id="secondary"> 
	  <div class="LIn_title">
		<h2>Ultra</h2>
	  </div>
	  <ul class="LIn_shortMode">
		<li><a href="comunicacion-y-ventas.html" title="Comunicación y ventas: la técnica de las 3 E">Comunicación 
		  y ventas: la técnica de las 3 E</a><br />
		  <span class="LIn_date">31.03.2005<br />
		  </span><span class="LIn_desc">compramos lo que queremos y luego buscamos 
		  los motivos para justificar ese comportamiento</span> </li>
		<li><a href="tener-razon-o-no.html" title="Tener razón cuesta dinero">Tener 
		  razón cuesta dinero</a><br />
		  <span class="LIn_date">08.12.2004<br />
		  </span><span class="LIn_desc"></span> </li>
		<li><a href="diseno.html" title="¿Para qué tiene su empresa un sitio web?">¿Para 
		  qué tiene su empresa un sitio web?</a><br />
		  <span class="LIn_date">16.10.2004<br />
		  </span><span class="LIn_desc">Usted necesita que el sitio sea visitado. 
		  Usted necesita que las visitas se transformen en clientes, que difundan 
		  su nombre, que le ayuden a construir su reputación, y que le crean.</span> 
		</li>
	  </ul>
	</div>
	<div class="clear">&nbsp;</div>
  </div>
  <!-- End midcontainer -->
  <!-- Begin Footer -->
  <div id="footer"> 
	<p>2005 | <a href="home.html"title="puro contenido persuasivo">Pura Persuasión</a></p>
	<div id="copyright"> 
	  <!--
 I kindly request you leave the copyright notice and the link 
 to Etomite.org intact to show your appreciation of the time
 I and the contributors to the Etomite project have (freely) 
 spent on the system. Removal of the copyright notice and
 the link, without the permission of the author, may affect
 or even cause us to deny any support requests you make. By 
 leaving this link intact, you show your support of the project,
 and help to increase interest, traffic and use of Etomite, 
 which will ultimately benefit all who use the system. To save
 bandwidth, you may remove this message, as long as the link
 and copyright notice stay in place.
 Etomite is Copyright 2004 and Trademark of the Etomite Project. 
-->
	  <p> Content managed by the <a href='http://www.etomite.org' title='Content managed by the Etomite Content Management System'>Etomite 
		Content Management System</a>. </p>
	</div>
  </div>
  <!-- End Footer -->
</div>
<!-- End Container -->
</body>
</html>

Hope that helps.

**Dano** · Apr 7, 2005, 19:36

YOU ARE THE MAGICIAN!

The line that was complicating it all was the break tag within the searchpos div.
that line was not in the html or in the css, but inside the php code!!! I have checked and changed the css 100 times! I was in the wrong place...

I admire how you can see/fix in five minutes what we take hours?
I have seen several times when you participate on a thread, that the last words people say on their posts are "thank you". This time is one of those. Thanks!

**Dano** · Apr 8, 2005, 12:16

Dou you think that my code would be cleaner if i position the upper divs (header, nav, black) absolutely?
And then, give enough margin on the top for the midcontainer, to make room for those divs (i think i took the idea from your "double header" example)

**Paul O'B** · Apr 8, 2005, 13:09

Hi,

The main reason for placing the nav absolutely would be so that you could move the code to the end of the html and let the search engines get straight to your content.

For accessibility its better for the screen reader not to read the links on every page but go straight to the content. However you can always implement skip links anyway so its not that much of a problem either way.

So the main benefit would be to get your content high in the html for seo. Otherwise its just as good to have the structure in a logical order. I prefer to keep my pages in a logical order and to allow a little flexibility into the elements so they can expand etc but of course it does vary with situation and design

**Dano** · May 11, 2005, 11:20

hi again.
Now, i noted a thing that i guess it is a IE problem.
The site is www.purapersuasion.com.ar

When you watch the navigation, the 3rd item ("quienes somos") is a bit down the rest of the line items.

The only way i found to correct this, is to join both words (quienessomos), becoming the item in a one only term. This is very strange for me, but i aclare that i have seen this before.

Thanks

**Paul O'B** · May 11, 2005, 13:42

Hi,

This is the font-variant:small-caps bug where spaces still retain the size of the original font and upset the positioning.

You will need to use text-trasform:uppercase instead (although its not the same thing ).

If you are desparate to use small caps then you can fix it with extraneous code as follows.

Code:

a.fix span{padding:0 5px;font-size:0px}

Code:

<a class="fix" href="quienessomos.html" title="quienes somos" rel="nofollow">quienes<span></span>somos</a>

**Dano** · May 12, 2005, 09:24

Very interesting!

Doy you know everything, or what?!!!

(I will eliminate the font-variant)

Thanks 1000

The SitePoint Forums have moved.

User Tag List

Thread: menu sourmenage!

Thread Tools

Display

menu sourmenage!

Bookmarks

Bookmarks

Posting Permissions