SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot Dano's Avatar
    Join Date
    Jun 2004
    Location
    Buenos Aires, Argentina
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu sourmenage!

    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).
    Attached Images Attached Images
    ---
    Dano De Weert
    ---

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Zealot Dano's Avatar
    Join Date
    Jun 2004
    Location
    Buenos Aires, Argentina
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 De Weert
    ---

  4. #4
    SitePoint Zealot Dano's Avatar
    Join Date
    Jun 2004
    Location
    Buenos Aires, Argentina
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    ---
    Dano De Weert
    ---

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    SitePoint Zealot Dano's Avatar
    Join Date
    Jun 2004
    Location
    Buenos Aires, Argentina
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ---
    Dano De Weert
    ---

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>

  8. #8
    SitePoint Zealot Dano's Avatar
    Join Date
    Jun 2004
    Location
    Buenos Aires, Argentina
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very interesting!

    Doy you know everything, or what?!!!

    (I will eliminate the font-variant)

    Thanks 1000
    ---
    Dano De Weert
    ---


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •