Posts filed under ‘css’

Uso de float en css para crear un listado de imágenes y textos

<style>
body {
	margin: 0;
}

#content {
	width: 100%px;
}

#content img {
	float: left;
}

#content p {
	float: left;
	width: 163px;
}

.separator {
	clear: both;
	height: 1px;
}
</style>

<div id="content">

<img src="http://127.0.0.1:3001/imagenes/medicacion.gif" />

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
df sfd sdf
sdf sd fsd
f sdf sdf sdf asdfij asdfh uasgh puafhg puadhsfg uiahfg puoiahd fguhadpfuoghapuodfgh puadfgh uadfh
a dfgafs gopjaiafgi``agjadg

</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<div class="separator"></div>

<!-- repeat the above a number of times -->
<img src="http://127.0.0.1:3001/imagenes/medicacion.gif" />

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

<img src="http://127.0.0.1:3001/imagenes/centros.gif" />

<p>Sed diam voluptua at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>

<div class="separator"></div>

</div>

marzo 13, 2007 at 6:21 pm Deja un comentario

Código css para mostrar un menu lateral con resaltado y clickable en toda su extensión

La técnica se basa en:

  1.  Usar una capa div como contenedor
  2. Crear dentro de la capa enlaces href que se corresponderán con cada una de las filas del menú
  3.  El uso dentro de la hoja de estilo de display: block en el div
  4. Anidar el estilo de los enlaces al div (#left_menu a.sub)
  5. Distinguir con background-color en los estilos asociados a los  estados de los enlaces (hover)

<style>
#left_menu a {
  display: block;
  color: black;
  text-decoration: none;
}

#left_menu a.sub {
  background-color:blue;
}

#left_menu a.sub:hover{
  background-color: red;
}
</style>
<div id=”left_menu”> 
<a href=”#” mce_href=”#” class=”sub”> Models</a>  
<a href=”#” href=”#” class=”sub”>Models 2</a>
<a href=”#” href=”#” class=”sub”> Models 3</a>  
<a href=”#” href=”#” class=”sub”>Models 4</a>

</div>

Este es el resultado

img.png

febrero 22, 2007 at 8:56 am 4 comentarios

Diseño de formularios con css

CSS 

label,input { 
display: block; 
width: 150px; 
float: left; 
margin-bottom: 10px; 
}   

label { 
text-align: right; 
width: 75px; 
padding-right: 20px; 
}   

br { 
clear: left; 
}
HTML 
<form> 
<label for="name">Name</label> 
<input id="name" name="name"><br> 
<label for="address">Address</label> 
<input id="address" name="address"><br> 
<label for="city">City</label> 
<input id="city" name="city"><br> </form>

enero 19, 2007 at 9:46 am 1 comentario

Quirk/Hack css para mostrar correctamente min-height en IE y FireFox

Si pongo una altura fija (height) a una capa, en Firefox me cortaría la capa en ese punto, ie no

Para evitar que suceda esto puedo usar min-height.
El problema es que es incompatible con height en Firefox.
El siguiente hack soluciona el problema.

#quickSummary {
/* Para navegadores que respetan los estándares
min-height: 200px;
height: auto;
}
/* Para Internet Explorer */
/*\*/ *
html #quickSummary { height: 200px; }

enero 18, 2007 at 11:08 pm 1 comentario


Calendario

julio 2017
L M X J V S D
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Posts by Month

Posts by Category