Categoría: CSS

Posición fija y absoluta

<h1 id="fijo">Esto está fijo</h1>
<h1 id="absoluto">Esto es absoluto</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
#fijo{
 position:fixed;
 width:200px;
 border:solid 2px red;
 right:100px;
 top:10px;
}
#absoluto{
 position:absolute;
 width:200px;
 border: 2px solid red;
 right:100px;
 top:10px;
}

 

Ejemplo estilos listas inline-block

<ul>
<li><iframe name="iframe1" src="http://trifulcas.com"></iframe></li>
<li><iframe name="iframe2" src="http://sport.com"></iframe></li>
<li><iframe name="iframe3" src="http://bcn.com"></iframe></li>
</ul>
<ul>
<li><a href="http://sport.com" target="iframe1">Sport</a></li>
<li><a href="http://trifulcas.com" target="iframe2">Trifulcas</a></li>
<li><a href="http://sport.com" target="iframe3">Sport</a></li>
</ul>
iframe{
 border:0;
}
li{
 display:inline-block;
 width:200px;
 border: solid 1px grey;
}
li iframe{
 width:200px;
}