Hola, qué tal? Estoy desarrollando un sitio en el cual hay 3 módulos o secciones que se desplazan de manera horizontal, cada vez que voy a una sección se scrollea hacia ella de forma horizontal, quedó muy bien eso gracias a un poco de jQuery.
Mi problema es que tengo una barra flotante arriba de todo donde está el menú, está en fixed para que se desplaze junto con el resto del sitio al scrollear hacia los lados, el problema es cuando el navegador tiene una altura menor al contenido del sitio, que si me desplazo hacia abajo, la barra flotante (position:fixed) lo tapa, no quiero que suceda esto, quiero que la barra quede arriba si se scrollea hacia abajo, es decir, que sólo esté fixed en sentido horizontal, ya que no ocupa todo el ancho del sitio, y al estar superpuesta sobre una seccion, si cambio a otra, se ve por el costado de la misma parte del sitio y queda mal.
No se si me explico bien, me gustaría que los div con contenido 'choquen' contra la barra, pero que a su vez esté como fixed en el sentido horizontal.
Con frames supongo que sería mucho más sencillo, pero prefiero evitarlos.
Mi código:
Código HTML:
<body>
<div id='top'>
<a href="http://www.martriay.com.ar"> <img src="images/logo.jpg" border="0" alt="Martin Triay" width="350" height="120" /> </a>
<div id='menu'>
<ul class='menu'>
<li><a href="#yo">Martin who?</a></li>
<li><a href="#work">Some of my work</a></li>
<li><a href="#form">Contact me!</a></li>
</ul>
</div>
</div>
<div id='container'>
<div id='yo'>
<div class='wrapper'>
<img class='title' src="images/martnwho.jpg" border="0" alt="Martin who?" align="bottom" width="170" height="30" />
<p>Hi, I'm Martin Triay, an argentinian web developer. I've been learning about web coding and designing by myself since I was 10. Now I'm 17 and still learning. Please keep in mind this site is still under construction.</p>
</div>
</div>
<div id='work'>
<div class='wrapper'>
<img class='title' src="images/smfmywrk.jpg" border="0" alt="Some of my work" align="bottom" width="220" height="30" />
<p>I like to work with valid <b>xHTML</b> + <b>CSS</b>, <b>JavaScript</b> (+<b>JQuery</b>), <b>AJAX</b> (XML + Javascript) and <b>PHP</b> + <b>MySQL</b>. I also work with CMS such as Joomla! or Wordpress.</p>
<p>What does this mean? It means that I can develop dynamic, fast and interactive sites which can also interact with databases.</p>
<p>I'm always looking for new projects to improve my abilities, taking every work as a new challenge to grow with. Would you like to see some of my work?</p>
<div id='slider'>
<a href="http://estudio-rh.com.ar" target="_blank">
<img src='images/estudio.jpg' width="400" height="300">
<span>
Estudio Rodríguez Herrera
</span>
</a>
<a href="http://polimata.com.ar" target="_blank">
<img src='images/polimata.jpg' width="400" height="300">
<span>
Polímata
</span>
</a>
</div>
</div>
</div>
<div id='form'>
<div class='wrapper'>
<img class='title' src="images/contact.jpg" border="0" alt="Contact" align="bottom" width="120" height="30" />
<form method="post" action="send.php">
<input type="text" class="name" name="name" value="Who the hell are you?" onblur="if (this.value == '') {this.value = 'Who the hell are you?';}" onfocus="if (this.value == 'Who the hell are you?') {this.value = '';}"/>
<input type="text" class="email" name="mail" value="Email?" onblur="if (this.value == '') {this.value = 'Email?';}" onfocus="if (this.value == 'Email?') {this.value = '';}" />
<div class="clear"></div>
<textarea name="msg"></textarea>
<div class="clear"></div>
<input type="submit" value="Send" class="submit" />
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body> y el CSS:
Código HTML:
body {
background-color:#A3BEDC;
margin:0 auto 0 auto;
width:850px;
overflow-x: hidden;
}
img.title {
margin-top:7px;
margin-bottom:9px;
}
p {
text-align:left;
font-family: Tahoma;
font-size: 14px;
color: #214087;
text-indent:15px;
margin-top:0px;
}
/* DIVS */
#top {
width:850px;
margin-left:auto;
margin-right:auto;
background-color:#A3BEDC;
padding-top:10px;
z-index:100;
position:fixed;
clear:both;
}
#menu {
margin-left:350px;
float:left;
}
#container {
width:300%;
position:absolute;
}
.wrapper {
padding-top:130px;
width:500px;
margin:auto;
}
#yo,#work,#form {
width:33.33%;
float:left;
}
/* FORM */
input[type=text] {
color:#214087;
font-size:12px;
text-shadow:1px 1px #fff;
}
input[type=text].name {
border:0;
background-color:#C6E2FF;
height:14px;
width:180px;
float:left;
padding:10px 10px 10px 10px;
}
input[type=text].email {
border:0;
background-color:#C6E2FF;
height:14px;
width:180px;
float:right;
padding:10px 10px 10px 10px;
}
textarea {
width:500px;
max-width:500px;
height:120px;
max-height:120px;
border:0;
background-color:#C6E2FF;
margin:20px 0;
padding:0;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
line-height:18px;
color:#574d4a;
text-shadow:1px 1px #fff;
}
input[type=submit].submit {
border:0;
color:#214087;
background-color:#C6E2FF;
height:30px;
width:80px;
float:right;
margin:0 0 0 20px;
}